by September 6, 2007 0 comments

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.

Direct Hit!

To: Java Developers
USP: Convenient way of creating
Java GUI apps
Primary Link:
Google Keywords: Matisse, 
NetBeans GUI builder

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

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.

= (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();

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’

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

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.’

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.