IDE Overview . Plug-in modules . Profiling . Matisse . GroupLayout .

Web development

May . 2006

magazine

Writing Quality Code

Using rules and validation tools

to avoid common bugs

NetBeans Profiler

An in-depth tutorial about the

best profiling tool on the market

Matisse in Action

Using Matisse and more to

create a complete desktop app

Plug-in Showcase

Bringing

Light
to

Java
Development

Enrich your NetBeans

development experience

Exploring GroupLayout
Learn details about the layout
manager that powers Matisse

Practical Web Apps

Develop JSP & Struts applications

using the best of the IDE

Extending the IDE

Build your own plug-in
modules step by step

magazine

Publisher & Editor-in-Chief

Leonardo Galvo
[email protected]

Assistant Editor
Osvaldo Pinali Doederlein
[email protected]

Number One

he NetBeans project has been going through an unprecedented number

of changes, broadening its scope, increasing quality and usability, and
expanding communities and user adoption. In many areas, like Swing
building or JME development, NetBeans IDE is now the tool to beat, with
levels of functionality and productivity that match or exceed any other

tool, open source or commercial.

Design and Layout

phDesign (phdesign.com.br)

This special first edition of NetBeans Magazine showcases a wide selection of

IDE and extension features, from desktop and web development to plug-in module

Graphic Designers
Tarcsio Bannwart, Jaime Peters Jr,
Tersis Zonato, Lais Pancote

creation. Beginners will learn how to develop a complete desktop application using

Illustrators
Felipe Machado & Francisco Peixoto

profiling tools, and further learn about GroupLayout, the layout manager that is the

Matisse and other IDE facilities. Seasoned programmers will also benefit, knowing
details about the NetBeans Profiler, which introduces breakthrough innovations in
core of Matisse. Also shown is how to use IDE features and modules to detect bug
patterns, enforce code conventions, and closely follow coding rules that promote

Contributors
Fernando Lozano
Geertjan Wielenga
Gregg Sporar
Leonardo Galvo
Osvaldo Doederlein
Tomas Pavek

Editorial Support
Robert Demmer
John Jullion-Ceccarelli

overall quality and reduce maintenance costs.

NetBeans IDE has always followed the it just works principle, aggregating all the
functionality developers need from day to day. But theres always some little niche
necessity that has to be taken care of. The extensibility features of NetBeans come
to the rescue, and the recent versions of the IDE make creating plug-in modules a
breeze. Catering for the growing community of plug-in module fans, the magazine
includes a special section describing tens of little and great extensions, which enable
NetBeans developers to program in other languages, use new APIs and frameworks,
and squeeze more functionality out of standard IDE features. And if you just cant
stand being in the user role for long, a tutorial shows how to create a new plug-in
module from scratch.
NetBeans has gone very far and very fast but still the community manages to

NetBeans Magazine is
supported by NetBeans.org
Java and all Java-based marks are trademarks or registered
trademarks of Sun Microsystems, Inc. in the United States and
other countries. NetBeans Magazine is independent of Sun
Microsystems, Inc.
Although every precaution has been taken in the preparation of
this magazine, the publisher assumes no responsibility for errors
or omissions, or for damages resulting from the use of
the information herein contained.

Produced in Brazil

increase the rhythm, with version 5.5 at the door and the first releases of 6.0 already
available. The best part is you dont get only to watch. You can join in, and participate
in this movement thats bringing light to Java development.
Happy coding,
Leonardo Galvo

Contents

19

22

32

Exploring the
NetBeans Profiler
An in-depth exploration
and tutorial about the best
profiling tool on the market

Using Matisse and more to

create a complete application,
from UI to database access

Plug-in Module
Showcase
Enrich your development
experience with dozens of
NetBeans extensions

Web Development
with NetBeans 5
Use the best of NetBeans to
develop and debug JSPs, Servlets,
and Struts applications

Writing Quality Code

with NetBeans IDE
Exploring rules, modules and IDE
features that increase code quality
and avoid common bugs

Get to Know
GroupLayout
Learn details about the new
layout manager that powers the
Matisse GUI builder c

IDE Overview . Plug-in modules . Profiling . Matisse . GroupLayout . Web development

04

A Complete App
Using NetBeans 5

44

Build plug-in modules step by

step, using the new extensibility
APIs in NetBeans 5

58

May . 2006

magazine

Writing Quality Code

Using rules and validation tools

to avoid common bugs

NetBeans Profiler

An in-depth tutorial about the

best profiling tool on the market

Matisse in Action

Using Matisse and more to

create a complete desktop app

Plug-in Showcase

Bringing

Plug-in Module
Quick Start

52

Light
to

Java
Development

Enrich your NetBeans

development experience

Exploring GroupLayout
Learn details about the layout
manager that powers Matisse

Practical Web Apps

Develop JSP & Struts applications

using the best of the IDE

Extending the IDE

Build your own plug-in
modules step by step

First Edition N 

A Complete

App

Using NetBeans 5

in
s
n
a
tBe the
e
N
n
g
Lear ice usin ilder
u
t
Prac se GUI B
s
Mati o Lozano
and

Fern

A Complete App Using NetBeans 5

etBeans is not a

tests, and source-control systems like CVS.

newcomer to the Java

The reader will need basic Swing and JDBC skills, beyond familiarity

arena. In fact, it is one

with the Java language and Object-Oriented programming. We

of the oldest Java

start with the basic procedures to install and configure NetBeans,

IDEs still available

including a quick tour of the IDE user interface. Then the sample

on the market. But

application is presented, followed by the steps to create it using the

the most exciting developments happened

IDE features.

in the latest releases, specially 4.0 and 5.0,

The first part of this article will be more detailed, because the

with the renewed commitment from Sun and

visual design capabilities are among NetBeans strongest features.

participation of an ever-growing community

As we move deeper into the application logic, the article will switch

of users and developers. In many respects,

to a higher level discussion. That way, this article aims for two

such as desktop development, NetBeans

objectives:

can be regarded as the most powerful and

most easy-to-use Java IDE

1. Provide newbie developers with an introduction to using the

NetBeans IDE;

This article gives an overview of the

2. Provide more seasoned developers with useful insights about

IDE while building a complete desktop

GUI development best practices, while using the best of NetBeans

application. Instead of a hello-world kind

features.

of app, we build a more real-world

application: a to-do list commonly found as

The to-do application will be developed using a three-step process.

part of PIM suites. The application will use an

The first step prototypes the UI design, where NetBeans really shines.

embedded relational database and require

The second step focuses on user interaction and event handling; its

customization of Swing components, so

actually a second prototype for the application. The third and last

it will be a small-scale real project except

step builds the persistence and validation logic. Readers familiar

only for the lack of help content and an

with the MVC architecture will note these steps form a process that

installer.

starts with the View, then builds the Controller, and finally builds the

We wont just demo the IDE features. The

Model.

project will also stick to Object-Ori-

Installing NetBeans

that you can develop GUI ap-

Installing NetBeans, as with most Java-based applications, is easy.

plications quickly and inter-

Just visit netbeans.org and click on NetBeans IDE 5.0 under the

actively, without compro-

Latest Downloads category at the top-right corner of the page. You

mising long-term main-

can choose installers for your platform, including Windows, Mac OS,

tenance and a sound

architecture.

NetBeans
IDE home
page

Linux and Solaris.

How-

Before installation, youll need a JDK 1.4.2 or higher installed and

ever, to keep the

configured for use at the command-line. NetBeans uses JDK tools

tutorial short well

like the javac compiler, so a JRE wont be enough. If you dont yet

skip some prac-

have a JDK, there are download options bundling the latest JDK with

tices usually required

G
netbeans.org

ented best practices, showing

the IDE.

by corporate environments and

I personally prefer to click on the link below Other distributions,

well supported by NetBeans, such

sources and extras after the download form, and download instead

as test-driven development using JUnit

the NetBeans IDE 5.0 Archive, choosing the .zip format. After all,

First Edition N 

IDE Overview & Matisse

NetBeans is a pure-Java application, so you can use the same archive

The left area contains two navigational

to install it on any platform with a suitable JDK. Just pick a directory

panels. The top one is shared by the Projects,

and unpack the archive, and NetBeans is ready to run.

Files and Runtime windows. The bottom

area contains the Navigator window, and

Starting and customizing NetBeans

the right-center area is used for the many

After installing/unpacking NetBeans, the folder bin below the IDE

editors included with NetBeans. Multiple

installation folder will contain platform-specific commands to start the

editors and windows can share the same

IDE. Windows users will use the netbeans.exe file, while Linux users

area; the IDE provides tabs for selecting the

will use the netbeans file. The IDE will open with a welcome page (see

one displayed.

Figure 1).

Most of the time, youll use the Projects

window to browse and edit Java code. The

E If you have used the archive instead of the native installer, youll get a license

Navigator Window displays the structure of

agreement dialog on the IDEs first run. Dont worry; the Sun Public License (SPL)
used by NetBeans is an OSI-approved open source software license.

the artifact being edited; for example for Java

code youll see class attributes and methods,
and for GUI design youll see the component

At the top of the IDE window, you see the main menu and toolbar.

tree. The Files window is used when you

If you dont like the big toolbar icons configured by default, righ-click

need to see the physical file structure of your

any empty spot in the toolbar and choose the Small Toolbar icons

projects, and the Runtime window shows IDE

menu entry.

processes and other environment resources

like databases and Java EE servers.

A1

Figure 1
The NetBeans
main window
and welcome
page

To tweak your NetBeans environment,

the two most used tools are the Options
Window under Tools|Options on the main
menu, and the Library Manager also under
Tools. Figure 2 shows the pre-configured
libraries included with NetBeans 5.0, and
Figure 3 shows the first option I change
before starting GUI development: the idiom
for the code generated for Swing event
listeners.
Most Swing tutorials and samples from
books use anonymous inner classes (which

A
Figure 2
NetBeans Library
Manager showing
default libraries
configured with
NetBeans 5.0

A2

is the installation default for NetBeans), but

I find this idiom difficult to read and maintain.
You get giant methods containing the code
for handling many unrelated events. I prefer
instead to have each listener as a named
inner class, as shown in the figure.
The IDE provides a lot more customization
than is shown by the Options window. Just
click on the Advanced Options button and

 N NetBeans Magazine

A Complete App Using NetBeans 5

A3

priority, so users can focus first on higher-priority

tasks;

Tasks should have a due date, so users can

instead focus on tasks with are closer to their

deadline;
There should be visual cues for tasks that are

A
Figure 3
NetBeans Options
window: changing
the default codegeneration style
for event listeners

either late or near their deadlines;

Tasks can be marked as completed, but this
doesnt mean they have to be deleted or hidden.

A4

Most applications will have longer lists of

requirements, and implementing even these simple
example is not a trivial task. Building prototypes of
the application UI helps end-users to state their
requirements, and that's one of the reasons visual
GUI builders became so popular. But even with a

A
Figure 4
NetBeans
Advanced Options
window, enabling
text anti-aliasing
for code editors.

GUI builder, a quick sketch on paper can be of

great help. We plan two main windows for the Todo
application: a tasks list and a task-editing form. A
rough sketch for both is shown in Figure 5.
After building the initial user interface prototype,
its important to show end-users a kind of functional
prototype, which helps discuss the dynamics of
youll be presented with an expanded

user interaction in the application and the basic

options dialog, as shown in Figure 4. This

business process involved (if you are developing an Information

time you get a tree structure with hundreds

System). This functional prototype reacts to user input but wont

of options grouped into categories. Most

persist data.

developers will want to enable anti-aliased

Thats where Object-Oriented development helps, because its

text rendering on the editors, as shown by

easy to create an initial set of objects the prototype can manipulate,

the figure, because this makes the code

and you can go very far developing the code to show and change

more readable.

Developing
the sample app

A5

A
Figure 5
A sketch for the
Todo user interface

Now that you had your first

try at NetBeans 5, lets see
the sample application well
develop in the rest of this
article. Here is a short list of
requirements for it:

Tasks should have a

First Edition N 

IDE Overview & Matisse

NetBeans
plug-in
catalog

netbeans.org/catalogue

these objects without the need of persistent storage. Only when you

Form (or choose File|New File from the main

have your functional specs and their implementation well advanced,

menu, and then select the JFrame Form

at the end of the development process, do you need to worry about

from the Java GUI Forms category). Type

file formats or databases.

TasksWindow as the class name. Notice

In my experience, this two-level prototyping approach improves

that the IDE opens the visual form editor, as

productivity, and mixes well with TDD and other Extreme Programming

shown in Figure 6; notice also the location

practices, while keeping costs and schedule under control and meeting

of the Projects, Navigator and Properties

user demands. That leads us to developing the Todo application in

windows, the Palette and the editor area.

three steps:

An orange frame highlights the selected

1. Build a static visual prototype of the user interface, using a

visual GUI builder.

component (the JFrame content pane in the

figure). The navigator displays all visual

2. Build a dynamic prototype of the application, coding user

and non-visual components on the JFrame,

interface events and associated business logic, and creating

which is handy when you need to change

customized UI components as needed.

the properties of a component hidden by

3. Code the persistence logic.

another or too small to be selected in the

drawing area.

Designing the tasks list window

Lets go back to NetBeans. Any work in the IDE is done inside a
project. Click on the New Project toolbar icon

To the right theres a component palette,

which shows by default the standard Swing

and select the Java

components (you can also add third-party

Application entry in the General Category. Use Todo as the project

JavaBeans), as well as the properties

name and choose a suitable project location (anywhere in your hard

windows. Properties are categorized to

disk). Then click Finish.

ease access to the ones most commonly

NetBeans creates the project containing a Java package named

after the project name and with a class named Main (in our case,

used, and changed properties have their

names highlighted in bold.

todo.Main). Java conventions dictate that you should use your company

To change the visual editor IDE layout, you

DNS name as a prefix for all your package names, but in this example

can drag each window to another corner

well waive that to keep things simple.

of the main window or even leave some

Now right-click the todo package icon and choose New JFrame

windows floating around.

The NetBeans 5 visual editor is unlike

A
Figure 6
Visual editor with
an empty JFrame

A6

other visual Java editors you may have

seen. Just click right-click inside the JFrame
and select the Set Layout menu item. Youll
see the default choice is not a traditional
Swing/AWT layout manager; its something
named Free Design. This means you are
using the Matisse visual GUI builder, one of
the highlights of NetBeans 5.
Matisse configures the JFrame to use the
GroupLayout layout manager developed in
the SwingLabs java.net project, which will
be included as a standard layout manager

 N NetBeans Magazine

A Complete App Using NetBeans 5

A7

As toolbars are usually attached to the window borders, move our

toolbar to the top left corner of the JFrame (another set of guidelines
will provide visual feedback helping component placement). Click to
attach the toolbar at the desired location, and drag the right border
so it becomes attached to the right JFrame border. Figure 8 illustrates

A
Figure 7
Visual guidelines
help positioning
and sizing controls
in the visual editor

this process.
Repeat the process to insert a JLabel attached to the left, bottom
and right corners of the JFrame. This label will be used as a status
message area for the tasks window. Then insert a JScrollPane,
attaching it to the left and right corners of the JFrame and to the
in Java SE 6.0. (You can learn more about

bottom of the JToolbar and top of the JLabel. Just leave some spacing

GroupLayout in an article in this edition.)

between the JScrollPane and JFrame borders, the JToolbar and the

If you choose any other layout, Matisse

JLabel. The result so far should look like Figure 9.

will be disabled and you will have the old

Now try resizing the JFrame content panel (the drawing area). The

NetBeans Visual Form editor. But of course

JToolbar, JLabel and JScrollPane should resize to keep the borders

well use Matisse, and youll see how it

attached to the JFrames corners and to each of the other borders.

brings a whole new meaning to Swing

Icons and Menus

visual design.
Select the Toolbar icon

on the palette

By now you should have a pretty good idea about how to use

and move the mouse over the drawing

NetBeans 5 to rapidly design a Swing UI. After adding buttons to

area. Youll notice that a placeholder for

the JToolbar and a JTable to the JScrollPane, the TasksWindow class will

the toolbar follows the mouse pointer, and

start to resemble the sketch we saw earlier. JLabels are used as

that the visual editor displays guidelines

separators between each group of JButtons inside the JToolbar (the

when its close to the edges of the JFrame,

Swing JSeparator wont behave as expected). Later on well customize

as shown in Figure 7.

the JTable.

These guidelines help you keep controls

aligned and spaced out
inside

the

container.

NetBeans doesnt come with a good set of icons for use by

A8

Matisse generates the

layout

constraints

to

maintain the positioning

of each component when
the container is resized
or when the Look and
Feel (LAF) is changed.
You design like you were
in a free-form drawing
area, but wont loose

A9

A
Figure 8
Positioning and resizing
the toolbar so it is attached
to the left, top and right
corners of the JFrame.
Notice the guidelines over
the drawing borders

A
Figure 9
Positioning the
JLabel and the
JScrollPane

any of the advantages

of using a Java layout
manager.

First Edition N 

IDE Overview & Matisse

A
Figure 11
JTable model
customizer after
adding a few
columns

A 11

applications, so I borrowed some from a few other open

source projects; they are provided together with the
sources for this article (see the URL at the last page).
But instead of referring to the icons by file system paths,
which would lead to additional logic to find the icon files
on the user machine, I created an icons folder under
the project src folder (which corresponds to the Source
Packages item in the Projects window) and copied all icon
files there. The NetBeans Projects window will display
non-Java files inside the source folder, so you wont need
to switch to the Files window just to see them.
Non-Java files inside the Source Package folder will be

A
Figure 12
TasksWindow UI
so far

added by NetBeans to the application jar file, and the

A 12

application will be able to refer to them as classpath

resources, no matter where the jar file is installed on the
user machine. As a bonus, the application code doesnt
have to worry about platform-specific details like path
separators and drive letters.
NetBeans provides a customizer for editing a
components icon property. Click on the ellipsis button at
the right side of the icon property to open the customizer
shown in Figure 10. Use this customizer to configure the

icon for the component. After selecting the Classpath radio button,

A
Figure 10
NetBeans
customizer
for the icon
property Library
Manager, showing
default libraries
configured with
NetBeans 5.0

the Select File button will allow you to browse the icon files and select

But even if the customization done using

interactively the one to use (including icon files inside jar packages).

the NetBeans visual editor wont be used

NetBeans also provide a customizer for JTables model property;

in the final application, its useful to do that

see Figure 11. Well use it to make the JTable appear in the visual

work. A prototype should display actual data

editor with correct column names and some sample data. This is

(or at least data a typical user would input,

not the way the final

instead of placeholder text). This will help

application will look

users understand the prototype and make

like. Typically, the

sure the UI allows for sufficient space for

customization

displaying the actual data.

A 10

of

JTables will require

the
of

development
custom

Now the prototype should look like

Figure 12. The main element still missing

Java

is the application menu bar. To add it, select

cell

the JMenuBar control on the palette and click

and

anywhere inside the drawing area (except

models

inside the JToolbar or its JButtons). To edit the

because JTables

menu bar, you dont use the component

are views for Java

palette or Matisse features. Just open the

objects, not just for

JMenuBar context menu (right-click) and

classes
renderers
column

10 N NetBeans Magazine

plain Strings like in other GUI toolkits.

like

A Complete App Using NetBeans 5

choose Add JMenu. Then you can select

Exit). These are configured respectively by the

the new JMenu and configure its properties.

mnemonic and accelerator properties.

For the Todo application, we need to add

The meaning of each menu item should be self-

menus with labels File, Edit, Options

explanatory, given the application requirements and the fact

and Help.

well use a file-based database as persistent storage for tasks.

Adding menu items follows a similar

procedure. You use the context menu for the
JMenu and open the submenu Add to select
between

Designing the
task details dialog

JCheckBoxMenuItem,

Now well create the TaskDetailsDialog. Right-click the todo Java

JRadioButtonMenuItem, JMenu and JSeparator,

package and select New>File/Folder. Then choose JDialog Form in

as shown in Figure 13.

the Java GUI Forms category. We start with a JLabel attached to the

JMenuItem,

The added menu items wont be shown

left, top and right borders of the dialog, with no spacing. It will serve

in the drawing area, so they cant be

as a message area for validation errors and the like. Set its opaque

selected directly for customization. But

property and the background color so it looks like a band at the top

the Navigator window allows access to the

of the dialog. Also add an EmptyBorder (border property) so theres

items, and the Properties window reacts to

empty space around the text and the bands borders.

selection on the Navigator the same way it

Now add three JLabels for the description, priority and due date

does in the drawing area. Figure 14 shows

fields. Attach all three to the left of the JDialog internal area (the

all menus to guide you in completing the

drawing area). Leave some spacing between the components

TasksWindow.

and the border. Resize the two shorter labels to attach their right

In the last figure you may have noticed

underlined characters (like the F in File)
and keyboard accelerators (like Alt-x for

borders to the right border of the larger one. Figure 15 illustrates

this procedure.
Then select the three labels (with shift + click) and change the

A 13

horizontalAlignment property to RIGHT. After

that, insert a JTextField, a JSpinner and a
JFormattedTextField at the left of each label.
Note that the guidelines keep the label
and text field baseline aligned, as shown in

A
Figure 13
Adding items do
a JMenu inside a
JMenuBar

Figure 16.
The JSpinner does not provide any property
to set a preferred or minimum width, while
the JTextField and JFormattedTextField use
the column property for this. But you can
resize the JSpinner and Matisse will set the
components preferred size in pixels.

A 14

E Sizing GUI components in pixels is not

guaranteed to work well in
different platforms, or if your users change the
default Swing LAF. Use this Matisse feature with
care!

A
Figure 14
Complete
menus for the
TasksWindow
JFrame

First Edition N 11

IDE Overview & Matisse

A 15

Figure 15
Sizing the
TaskDetailsDialog
labels

By now you should not

have

problems

positioning

and aligning the remaining

components

in

TaskDetailsDialog. Figure

A 16

statements.
You can then use command Run | Run Main

the

Project from the main menu, the toolbar

17

button

shows its final appearance as

Figure 16
The free design
layout aligns
different kinds of
controls by the
text baseline

the missing pieces, like package and import

a reference to the reader.

or press F6 to run the prototype.

After checking that it looks as intended (it

does nothing besides displaying the two

Good UI design makes all

windows) you can use either the menu item

buttons from a logical group

Build | Build Main Project or F11 to create

the same size, and Matisse

an executable jar that can be deployed on

can enforce this good practice.

end user machines for prototype validation.

Just select all desired buttons

The jar package is created in the dist

(actually you can select any control you want) and right-click

project folder. You can verify this in the

any of the selected buttons. Then check the Same Size | Same

Files window. NetBeans also creates the

Width checkbox menu item. The drawing area will indicate that

folder dist/lib containing any libraries

the controls were configured to always have the same size, as

used by the application, and configures

shown in Figure 18.

the jar manifest to point to the projects

main class and libraries. Figure 19

Deploying the first prototype

To finish the prototype, the todo.Main class needs code to create the

the NetBeans Files window, and Listing 2

TasksWindow and make it visible. Besides, there should be an Action

shows the manifest file generated for the

listener in any toolbar button or menu item to show the TaskDetailDialog.

Todo.jar archive.

The code is shown in Listing 1. The reader should be able to fill

presents the dist project folder as seen in

A 17

Figure 17
Finished
prototype for the
TaskDetailsDialog

Note

the

library

swing-layout-1.0.jar

inside the dist/lib folder. This contains

the GroupLayout used by UIs built with
Matisse.
So all you need to do is copy the
contents of the dist folder to the user
machine (you dont need to preserve
the file name dist), and then run java -jar
Todo.jar.

End of Step 1
This prototype is almost the finished
application from the UI design perspective,
but in real projects you shouldnt spend too
much time perfecting its looks. Remember,

A
Figure 18
The IDEs visual
hint for same-size
components

12 N NetBeans Magazine

A 18

the prototype is a tool to gather and validate

user requirements and lessen the risk of
missing important application functionality.
The problem is the user often cannot un-

A Complete App Using NetBeans 5

A 19

B Listing 1. Code to finish the first prototype.

Figure 19
Distributable files
for deploying
the prototype to
end-users

todo.Main (todo/Main.java)
(...)
public static void main(String[] args) {
JFrame w = new TasksWindow();
w.pack();
w.setVisible(true);
}

todo.view.TasksWindow (todo/view/TasksWindow.java)
(...)
private void addButtonActionPerformed (
java.awt.event.ActionEvent evt) {
JDialog d = new TaskDetailsDialog(this, true);
d.pack();
d.setVisible(true);
}

derstand that an almost ready UI is not an

almost finished application. That makes
many developers avoid prototyping during
development.

B Listing 2. jar archive manifest file

An interesting approach to mitigate this

(META-INF/MANIFEST.MF) generated by NetBeans

problem is to use a custom look-and-feel

that makes the application look unfin-

Manifest-Version: 1.0
Ant-Version: Apache Ant 1.6.5
Created-By: 1.5.0_05-b05 (Sun Microsystems Inc.)
Main-Class: todo.Main
Class-Path: lib/swing-layout-1.0.jar
X-COMMENT: Main-Class will be added automatically by build

ished. The Napkin Project at SourceForge

(napkinlaf.sf.net) provides such a LAF. See
the sidebar Using the Napkin LAF in a NetBeans project for details.

Using the Napkin LAF in a NetBeans project

unfinished look to your prototype. Follow these
steps to use it in the example application:
1. Visit the Napkin home page (napkinlaf.sf.net),
click on the link next to latest release and down-

5. Add the following code to the start of the main

method:
UIManager.setLookAndFeel(
net.sourceforge.napkinlaf.NapkinLookAndFeel);

As an alternative, include the command-line op-

load the archive napkinlaf-version.zip; unpack the

tion

zip to a folder of your choice;

kinLookAndFeel when starting the application.

2. Right-click the Todo project icon on the NetBeans Project window and select the Properties
menu item.
3. Select the Libraries category and click
the button Add JAR/Folder, and browse for
the archive napkinlaf.jar inside the folder

G
napkinlaf.sf.net

The Napkin Look-and-Feel can give an important

Napkin
custom
Swing LAF
home page

Dswing.defaultlaf=net.sourceforge.napkinlaf.Nap-

Figure S1 shows the look of the Todo app using

the Napkin LAF.

A S1

A
Figure S1
Sketch for the
Todo user interface

where you unpacked the Napkin download.

4.

Rebuild

the

application

so

the

napkinlaf.jar archive gets copied to the

dist/lib folder and the jar manifest gets updated with a reference to the new library.

First Edition N 13

IDE Overview & Matisse

Todo Applicaton
Architecture
The second step building
the

dynamic

netbeans.org/community/releases/55/

NetBeans
5.5 preview,
featuring
UML CASE
features

A
Figure 20
UML class diagram
for the main
application classes

14 N NetBeans Magazine

for above 60% of

the application is closed.

If you think of the TasksWindow as a black

prototype

box that can display a collection of task

aims to implement as

objects, and of the TaskDetailDialog as a

much user interaction as

black box capable of displaying a single

possible without using

task object, its not hard to think in terms of

a persistent storage or

mock objects.

implementing complex

Well use two well-known design patterns

business logic. Its well

in the Todo application: DAO (Data Access

known that in most GUI

Object) and the MVC (Model-View Controller).

applications the event-

Well also define a VO (Value Object) named

handling code accounts

change an object and see the changes until

Task

for

moving

information

between

the total application code. Therefore

application tiers. Therefore the view classes

it pays off to develop the UI code incrementally. Another reason to

(such as the TasksWindow and TaskDetailsDialog)

build this second prototype is most users have trouble imagining how

will receive and return either Task objects or

an application should behave if theres nothing they can click and see

collections of Task objects. The controller

results in.

classes will transfer those VOs from view

This can be achieved by creating mock objects for business logic

classes to model classes, and back.

and data access. Such objects should have the same public interface

Figure 20 shows a UML class diagram for

as the real objects (and will help validate the intended interface before

the main application classes. Methods and

its implemented and changes become too expensive), but will return

attributes were omitted, but well describe

hard-coded data. You can use the Java collections API so the user can

the most important ones. The full sources

A 20

A Complete App Using NetBeans 5

for the finished application are available for

The finished application will contain more classes, some of

download; see the link at the end of the

which can be considered internal to their respective packages.

article.

Others play just an accessory role, such as exception classes.

E This UML model was drawn using ArgoUML

Figure 21 shows all classes from the finished application in the

Now

well

create

Java

packages

corresponding to the MVC class roles:

todo.view,

todo.controller

and

todo.model.

NetBeans Projects window.

Heres the plan for building the second prototype:
1. Adjust column widths for the tasks list and display the visual
cues for late and completed tasks;
2. Handle selection events to enable and disable menu and
toolbar items;
3. Handle action events to sort and filter the tasks list;

G
argouml.org

(argouml.org) a powerful open source software

CASE tool written in Java. Developers interested in
CASE tools can also check NetBeans 5.5 currently
in preview, which includes UML tools originally
developed as part of Sun Java Studio Enterprise.

ArgoUML,
Open Source
UML CASE
tool written
in Java

4. Handle action events to create, edit and remove tasks.

Create these packages by right-clicking

the Source Packages icon on the Projects

Items 1 to 3 can be implemented and tested with a mock model

window, and selecting New|Java Package.

object (TaskManager) that always returns the same task collection.

Then move the classes already created for

Item 4 can be tested with a mock object that simply adds or removes

the first prototype to the todo.view package

objects from that collection.

by right-clicking each one and selecting

Refactor|Move Class. While nothing stops

Customizing a JTable

you from using the Java code editor to

In order to customize the Swing JTable so it displays a collection of

change the package statement for each

Task objects, we provide adequate column widths for each column in

class (and even the class name), using the

the task list (which corresponds to Task attributes) and change each

Refactor menu automatically changes all

row background colors according to the task status: red for late

references in other classes.

tasks, yellow for tasks with an alert set, blue for completed tasks,
and white otherwise.

A 21

Most task list columns have a short content and can have fixed
width. Just the description column/attribute can have wider content,
so it should get whatever space is left after the fixed-width columns
are sized. To implement all these features, we need to create three

A
Figure 21
All classes for the
Todo application

classes:
The TasksTableModel class receives requests for data at a specific

row/column from the JTable control and returns a task attribute
value, such as the description or due date, for the task at the given
row. It also has the ability to filter the task collection to exclude
completed tasks, or to change the sorting criteria. Sometimes it
will be better to leave these sorting and filtering tasks to the model
(which can delegate them to the database) but if the dataset is
not too big, doing these operations in-memory will improve user
experience.
The TaskColumnModel class adds columns to the JTable and

configures each column with its preferred width, label and

First Edition N 15

IDE Overview & Matisse

resizeability. It completely replaces at runtime the DefaultTableModel

created and configured by the NetBeans visual editor.
TaskCellRenderer provides a Swing JLabel configured with the

correct background color for the task being shown. It also formats
the dueDate and completed attributes as strings.
Figure 22 shows the final appearance of the TasksWindow, with the
customized JTable.

classes. Dont make your model classes implement

Swing model interfaces, and dont make them
subclasses of Swing classes. From the application
architecture point of view, Swing model classes
are part of the view tier if the application uses
MVC.
To code an internal event handler, either
right-click on the control that is the event
source and select the desired event from

Handling Internal Events

Swing trail
of the Java
Tutorial

java.sun.com/docs/books/tutorial/uiswing

the Events sub menu, or select the Events

Having a display of tasks ready, its time to add some event-handling.

category from the Properties window. Both

It will be useful to separate UI events into two mutually exclusive

the context menu and the Property window

categories:

will highlight in boldface the events that

1. Internal events, that affect just the view itself.

2. External events, which cause model methods to execute.

already have a handler.

You can change the implementation of
an event-handler method, but you cannot

Among internal events, are selection changes and clicks on Cancel

remove the method or change its name

buttons. These are handled by the view classes themselves, and

in the source editor. To do this, you have

are not exposed as part of the view classes public interfaces. For

to use the Properties window. Figure 23

example, the selection of a task should enable the Edit task and

shows some event handlers in the source

Remove task menu item, and the corresponding toolbar buttons.

editor.

ESwing itself was designed using the MVC architecture, but dont be

Handling External Events

confused: Swing model classes have nothing to do with application model

The category of events we call external

should not be handled by view classes.

A 22

They should instead be forwarded to

controller classes, which usually implement
the workflow logic for a specific use case
or a related set of use cases.
To help with this, the application includes
the

todo.view.ActionSupport

class.

This

class simply keeps a list of ActionListeners

and forwards ActionEvents to them. But
ActionSupport is itself an ActionListener. This

A
Figure 23
Event handler
declarations are
guarded (i.e. noneditable) code
sections in the
source editor

16 N NetBeans Magazine

is done to avoid having lots of event-related

A 23

methods, e.g. add/removeNewTaskListener(),

add/removeEditTaskListener()

and

so

on.

Instead, view classes generate only an

ActionEvent. The ActionSupport classes capture
ActionEvents from the view components
and forward them to the controller, which

A Complete App Using NetBeans 5

registers itself as a view ActionListener.

However, if the same ActionListener inside
the controller class receives ActionEvents

persistence logic, preferably using TDD. They can work in parallel

and join at the end, putting together functional view and controller
implementations with functional model implementations.

originated from multiple sources inside a

Most of the work in this step was just coding. NetBeans provides

view class, how can the controller know

nice code editors and a good debugger that eases the task

which operation is being performed by the

providing the usual benefits: code-completion, JavaDoc integration

user? The secret is the actionCommand

and refactoring support. But it can go beyond: its very easy to build

attribute from the ActionEvent, which is

in NetBeans 5 new plug-in modules to package your project coding

initialized from the actionCommand property

standards, such as project templates, controller class templates

from the source component. So the

and so on.

implementations of the controller classes

statements checking for the actionCommand
string.
Many developers balk at this idea, claiming
this is not an object-oriented way of doing

Model classes
The TaskManager class is a DAO (Data Access Object). Being the
only DAO on the application, it contains many methods that would
otherwise be in an abstract superclass. Its implementation is very
simple, so theres lots of room for improvement.

things. But nothing prevents you to create

Theres another model class: Parameter. It uses the Java SE

to a generic controller framework, where

Preferences API to store configuration data such as the path to the

the event dispatch information comes

current tasks database. A desktop application should be as plug-

from an XML configuration file and/or is

and-play as possible, so the application will initialize a default tasks

handled by an IoC controller.

database if there isnt one available. But its flexible enough to allow
the user to open task databases at other locations, and remember

End of Step 2

the last one used.

Now that we have fully functional view and

The Todo application uses HSQLDB (hsqdb.org), an embedded

model classes, its time to start replacing

Java database. This allows the application to meet the ease-of-

the mock implementations of the model

deployment requirements for a typical desktop application. You just

classes by real logic using persistent

need to download HSQLDB and add the archive hsqldb.jar to the

storage.

NetBeans project libraries.

G
hsqldb.org

are basically a sequence of if/else if

HSQLDB, an
Open Source
embedded
100%-Java
database

In large application projects, you could

have a team working on the UI, building

Inspecting the Database

the two prototypes in sequence as we did,

When developing and debugging persistence code, developers

and another team working on business and

usually need a way to tap into the database. Maybe they need to

A 24

check the effect of an update, or change some table definition.

NetBeans provides direct support for browsing any JDBC-compliant

Figure 24
Configuring the
HSQLDB JDBC
driver in the IDE

database and submit SQL commands.

Switch to the Runtime window (it is normally hidden by the Projects
and Files windows) or open it from the Window menu. Expand the
Databases and then the Drivers categories. Right-click on the Drivers
icon, and select Add Driver. Fill the dialogs fields with the location of
your hsqldb.jar archive, as shown in Figure 24. NetBeans will often
set the database driver class name by itself.

First Edition N 17

IDE Overview & Matisse

Fernando Lozano
([email protected])
is an independent consultant with more than
10 years experience doing IS development and
network integration. He
has many professional
certifications, and is also
a technical writer and
open source software
advocate, serving as
Linux.java.net community manager, LPI Brazil
Technical Director and
GNU Project webmaster
in charge of Brazillian
Portuguese translations.

A
Figure 25
Connecting to
the Todo task
database

Now right-click the HSQLDB driver icon, and choose the Connect
using menu item. Provide the parameters to connect to your local

beyond visual development by supporting

Todo database, using Figure 25 as a template. The default database

coding activities with specialized editors

location is db/todo under the {user.home} folder, which is usually

for Java, Ant, XML and other languages,

/home/user under Linux or C:\Documents And Settings\UserName

besides CVS, JUnit and refactoring support

under Windows.

and a database console. N

Then you can open the connection and browse the database
catalog for tables, indexes and other database objects. Each item
has a context menu for operations like creating new tables, altering
columns and viewing data (Figure 26). Most operations

A 25

have easy-to-use wizards.

EThe Todo application uses HSQLDB in the stand-alone mode,

which locks the database files for exclusive access. So it wont be
possible to use the NetBeans database console while the application
is running. However its possible to run HSQLDB in server mode
accepting concurrent connections from multiple clients, allowing the
inspection of a live task list database. Check the HSQLDB manual for
instructions on how to start and connect to the database server.

End of Step 3 & Conclusions

The Todo application is completed. Although simple
in scope and with only a few

classes, it demonstrates many

Figure 26
Executing SQL
statements

practices that could improve

your desktop Java application quality and development
speed.
Also

shown

features

that

were

many

NetBeans

provides to increase developer

productivity.

18 N NetBeans Magazine

NetBeans

goes

A 26

netbeans.org/community/
magazine/code/nb-completeapp.zip