UsingGUIEditor

Introduction

The Primary purpose of this article is to make you know how to use GUI editor(also called as Matisse) in NetBeans for developing Swing/AWT applications on the fly.The steps outlined here are applicable to all Swing/AWT applications.However I assume that the reader has a basic knowledge of Java AWT/Swing API. I don't assure you that this guide will make you adept at swing applications.Please refer to other books on this topic for further knowledge of Java APIs for GUI.

Contents 1 Introduction 1.1 Things that you need 1.2 Creating a Desktop Application 1.3 Starting With GUI Builder 1.4 Component Handling 1.5 Building the Project 1.6 Conclusion

Things that you need

You must have the following software installed:

• JDK 6.0 or higher
• NetBeans IDE 5.5 or higher (NetBeans 6.0 is bundled with JDK 6.0)

Creating a Desktop Application

The below image shows how to create a GUI project.

Then enter the name of the project and select Basic Application in the Application Shell window.

Starting With GUI Builder

After creating Project is finished NetBeans will take you to GUI Editor window.

As you can see in the Project window three files are auto created by the IDE. Among them Project-Name.java contains the main class and Project-Nameview.java contains the source code for the components you drag into the window of GUI Editor.

Component Handling

All the Java Swing components as well as the Java AWT components are listed at the right extreme of IDE which is also called as Palette window. Just click on the required component and drag it into the GUI Editor window.
Note:To have a custom MenuBar,delete the default MenuBar from the tree in Navigator window. Since MenuBar can only be laid upon a Frame,Insert a Frame as shown. Then Insert a Menubar as shown. By default it consists of "File" and "Edit" Menus.You can change it by going to properties(Which is shown later below).I add MenuItem to the default menus as shown: The property of the menuItem can be changed in a similar way by going to properties.Here I have changed its name and set accelerator key and action as shown below: Required components can be dragged as mentioned earlier. To change the properties of the GUI components inserted,just right click on them and select properties, A new Dialog box will appear where you can edit the properties of the respective component. for example the color(Background or Foreground) of the component can be changed as shown, To set the events for the components,just right click on them and select events which leads to you another popupmenu where you can see the list of Events associated with that particular component. Select the appropriate event and its method which leads you to code window where you can just type the functionality of that component. The Added code shows the functionality of the click button in the figure below.

Building the Project

To build the project just go to Build menu and click on Build Main Project or press F11. And then run the Project-Name.java file. The output must be something like this,

Note:You can also switch between Source and Design modes When you are in Project-Name>view.java.You can also preview your design without building the whole project but the GUI won't respond to events. Its just an outlook of your GUI. Below is a sample of adding JColorChooser and its functionality. File:Step 15.PNG

Conclusion

Possibly this might help you with sufficient information for kickstarting the GUI development in NetBeans.
The full source code of the is available below in a 'rar' archive form whose file name is UsingGuiEditorDemo.rar
-By Rajath Shanbag & Ashwin Bhat K.S

• This page was last modified on 5 November 2009, at 17:50.
• This page has been accessed 33,585 times.

Toolbox

Views