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. File:Step1_UsingGUIEditor.PNG

Then enter the name of the project and select Basic Application in the Application Shell window. File:Step2_UsingGUIEditor.PNG

Starting With GUI Builder

After creating Project is finished NetBeans will take you to GUI Editor window. File:Step3_UsingGUIEditor.PNG

As you can see in the Project window three files are auto created by the IDE. Among them contains the main class and 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. File:Step16_UsingGUIEditor.PNG Then Insert a Menubar as shown. File:Step17_UsingGUIEditor.PNG 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: File:Step18_UsingGUIEditor.PNG 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: File:Step19_UsingGUIEditor.PNG Required components can be dragged as mentioned earlier. File:Step4_UsingGUIEditor.PNG To change the properties of the GUI components inserted,just right click on them and select properties, File:Step5_UsingGUIEditor.PNG A new Dialog box will appear where you can edit the properties of the respective component. File:Step6_UsingGUIEditor.PNG for example the color(Background or Foreground) of the component can be changed as shown, File:Step7_UsingGUIEditor.PNG 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. File:Step8_UsingGUIEditor.PNG Select the appropriate event and its method which leads you to code window where you can just type the functionality of that component. File:Step9_UsingGUIEditor.PNG The Added code shows the functionality of the click button in the figure below. File:Step10_UsingGUIEditor.PNG

Building the Project

To build the project just go to Build menu and click on Build Main Project or press F11. File:Step11_UsingGUIEditor.PNG And then run the file. The output must be something like this, File:Step12_UsingGUIEditor.PNG

Note:You can also switch between Source and Design modes When you are in Project-Name> 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. File:Step13_UsingGUIEditor.PNG Below is a sample of adding JColorChooser and its functionality. File:Step14_UsingGUIEditor.PNG File:Step 15.PNG


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

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo