[RSS]

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.

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.

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

Attachments

Step 15.PNG Info on Step 15.PNG 28285 bytes
Step1.PNG Info on Step1.PNG 16934 bytes
Step1.bmp Info on Step1.bmp 38917 bytes
Step10.PNG Info on Step10.PNG 35794 bytes
Step11.PNG Info on Step11.PNG 59459 bytes
Step12.PNG Info on Step12.PNG 20727 bytes
Step13.PNG Info on Step13.PNG 48354 bytes
Step14.PNG Info on Step14.PNG 14216 bytes
Step16.PNG Info on Step16.PNG 28923 bytes
Step17.PNG Info on Step17.PNG 25856 bytes
Step18.PNG Info on Step18.PNG 40238 bytes
Step19.PNG Info on Step19.PNG 27965 bytes
Step2.PNG Info on Step2.PNG 18840 bytes
Step2.bmp Info on Step2.bmp 1093662 bytes
Step3.PNG Info on Step3.PNG 57429 bytes
Step3.bmp Info on Step3.bmp 1597374 bytes
Step4.PNG Info on Step4.PNG 38040 bytes
Step4.bmp Info on Step4.bmp 1591254 bytes
Step5.PNG Info on Step5.PNG 28103 bytes
Step5.bmp Info on Step5.bmp 1249334 bytes
Step6.PNG Info on Step6.PNG 25005 bytes
Step7.PNG Info on Step7.PNG 22733 bytes
Step8.PNG Info on Step8.PNG 35270 bytes
Step9.PNG Info on Step9.PNG 36582 bytes
UsingGUIEditorDemo.rar Info on UsingGUIEditorDemo.rar 413223 bytes