Create GUIs with NetBeans

Writing code manually to create a GUI application is no less than a nightmare

for any developer. These days almost all development IDEs come packaged with a

GUI builder. NetBeans IDE too provides you with a GUI builder for Java

applications called 'Matisse.' Why is Matisse so special? you may ask. To

understand this let's look at what has been used for building GUIs till now.

Swing and AWT are two main Java libraries that are used for building UIs for

desktop applications. Most IDEs support various Swing layout managers for

designing the user interface, but the limitation with them has been that their

UI view is different from the WYSIWYG view. With Matisse, NetBeans introduced a

new layout manager called 'GroupLayout.' Though this new layout manager is not a

part of Swing, it can be freely distributed with the applications that you build

with NetBeans.

New in Matisse



Matisse is as easy to use as Visual Basic. With Matisse, developers now have

the power and freedom to spend more time designing the application UI instead of

dealing with trivial issues, which used to be the case with other layout

managers like GriDBagLayout Manager. The new layout manager in Matisse,

GroupLayout, is from org.jdesktop.layout package. It comes preloaded with

NetBeans. The GroupLayout manager allows developers to place controls anywhere.

The controls auto-snap to one of the several predefined distances, and then can

be aligned easily by baselines or guidelines that appear along with the control.

This relation between controls and the frame they're placed in is also saved.

This way, even when you resize the frame, the positions of the controls change

accordingly. When we place a control on the form, the guidelines and baselines

appear. These hint at how the control is positioned in accordance with other

controls, and how it will be resized when the form is manipulated. This feature

is what makes WYSIWYG possible.

The Properties tab (right pane) lists all properties of a control. The guidelines and anchors appear along with each control showing how it can be resized

The design view of NetBeans is easy to use and the palette has options for

using the Swing and AWT controls. Switching between the code and design views

lets you write code for a particular control while designing the form. But the

auto-generated code that is highlighted cannot be edited while in NetBeans IDE.

A separate frame shows all properties of a control, and can be easily edited.

Hooking up a control with an event is easy with just a right click and selecting

the appropriate event handler for that control. While designing the form, there

is an option to preview it also. This is not a special feature, except that it

doesn't require you to compile the class file for it, as some other editors

require.

When you place a control from the Palette, guidelines appear and show its relative position with other controls. The palette itself has different Swing and AWT controls

Trying Matisse



Let's try Matisse GUI builder by creating a simple application, which takes

a number as input and provides an option to get its equivalent Celsius or

Fahrenheit value. We will be using NetBeans 6.0 IDE, which is provided in this

month's DVD.

Open your NetBeans IDE interface and from the File Menu, select New Project.

In the new project dialog window, select Java from the left pane and opt for

Java Application from the project's pane and click Next. Name the project as

TempConvertor and the main class as pcq.labs.Main and then click Finish. The

Main class skeleton will be created with minimum implementations. Now we will

start building the UI of this application. Right click on the package name (pcq.labs)

and select New>JFrame Form. On the new JFrame dialog window name the class as

ConvertorForm and click Finish. An empty gray form will be created, on which

various controls and their containers can be placed. Now place three labels: a

textfield and two buttons on the JFrame. Name the textfield as tempField and the

two buttons as celButton and fahrenButton. The working logic is that when the

user enters a temperature value in the textfield, he can get an equivalent value

of the same in Celsius or Fahrenheit by clicking the two buttons. The result

will be displayed in the third label named as tempLabel. Matisse provides all

the components in the Palette frame. You can simply drag and drop the controls

over the form. While placing a control over the form, some guidelines appear on

the top and left of the control as markings to help align a control with respect

to other controls.

Now we will put some functionality to the buttons so that they can help in

displaying the converted temperature values. Here the main trick of Matisse is

revealed. We can add an event to a button by right clicking on it and selecting

the appropriate event to hook up with it.

Matisse does the rest: it creates all the event listener codes, with the

developer being left to add the code for business logic only. We will first add

code that will convert the entered value into its equivalent Celsius value. So

right click on the celButton, select mouseReleased event from Events>Mouse

options. On selecting the event, the design view would change to the code view

where the handler code can be filled up. Add the following event codes into the

new method by replacing the TODO comments.

tempNum

= (Integer.parseInt(tempField.getText().toString()));



int cel = (tempNum - 32)*5 /9;


tempLabel.setText(tempNum+" ºF = "+cel+" ºC");

All the codes will be underlined and marked for errors, which can be fixed by

right clicking on the code and selecting Fix Imports option from the popup menu.

The variable tempNum should be declared globally as int type and initialized to

0. By following similar steps, we will create an event code for the Fahrenheit

button, where the entered value will be converted to its equivalent Fahrenheit

value. Add the following to the fahrenButton mouseReleased event.

tempNum = (Integer.parseInt(tempField.getText().toString()));



int fahren = (tempNum * 9 / 5)+32;


tempLabel.setText(tempNum+" ºC = "+fahren+" ºF");

Now in the Main class, put the reference for ConvertorForm class. Add the

following code to the main method by replacing the TODO comments.

ConvertorForm convert = new ConvertorForm();



convert.setVisible(true);

Once the code has been added and the event codes for the handlers have been

modified, save all files, and then build the project. The test run of the



project can be done through the Run menu and then selecting 'Run Main Project'
option.

Our TempConvertor application let's you convert a number to either Celsius or Fahrenheit

Limitation



Matisse uses GroupLayout, which is not part of the standard Swing library.

This results in an exception being thrown when a Matisse-based application is

run on a client or outside of a NetBeans IDE environment. Because of this we

have to package the GroupLayout class with the application so as to remove any

dependencies and make sure that the application runs anywhere. The limitation

can be fixed by adding the following code snippet before < /project> line of the

build.xml file of the project.

< target name="-post-jar">






< zipfileset src="${libs.swing-layout.classpath}"/>


< /jar>


< /target>

This will create a lib folder under which the GroupLayout class relative to

the packaged jar application will be placed. Now select 'Clean and Build Main

Project' from the Build menu; NetBeans will roll out the complete project with

GroupLayout class packaged with it. NetBeans places the project jar file named

as 'TempConvertor' under the dist folder of the project. For distributing the

application, place the jar file as well as the lib folder together as a zip file

package. Now go to any client machine that has JRE installed, extract the zip

file, and from the console, go to the installation directory and run the command

'java —jar TempConvertor.jar.'