by June 29, 2007 0 comments

Jigloo is an Eclipse plug-in that enables you to build sophisticated
graphical user interfaces (GUIs) for applications to run on Java platform. It
has been made by CloudGarden for building user interfaces using Swing or SWT. It
is available for free for non-commercial use whereas a professional license can
be obtained from CloudGarden for commercial usage.

Direct Hit!

Applies To: Java developers
Build GUI for Swing or SWT based apps
Primary Link:
Google Keywords:

When Java was conceived, AWT was Java’s UI library for building desktop
applications. Later with JDK 1.2 release, Swing was introduced, which provided a
much better and sophisticated look and feel for GUIs. SWT is a competing Open
Source Java GUI toolkit comprising a widget set and a UI library that builds
GUIs with the look and feel of the native desktop applications. One main
advantage of SWT over Swing is that it is faster, more responsive and lighter on
system resource usage. Now with Jigloo you can rapidly build user interfaces
targeting Swing or SWT.

Jigloo is a WYSIWYG editor for building Swing and SWT user interfaces. It
creates and manages code for all the parts of Swing or SWT GUIs as well as code
to handle events. It supports round-tripping also, which means you can make
visual changes that cause the underlying code to change but you can also
directly apply changes to code and see the changes being reflected in the GUI.
It is compatible with both swing and SWT, and so can be used to convert between
both. It has support to handle most of Swing and SWT layouts, and also creates
Event-Handlers for the components of the GUI. Let’s see how well Jigloo works
with Eclipse.

The Jigloo wizards are under GUI Forms. Here
the support for both Swing and SWT components can be selected

Setting up

We have provided Jigloo on this month’s DVD. Just extract the Jigloo_395 zip
file and move the folder “plugins\ com. cloudgarden.jigloo_3.9.5” to the Plugins
folder under Eclipse directory and also move “features\com.cloudgarden.
jigloo_3.9.5” to the Features folder under Eclipse directory. Now just start
Eclipse and Jigloo is ready to be used.

To create a demo application explore the functionalities of the plug-in.
Select File > New > Project, and after selecting the Java Project proceed
further by clicking on the Next button. This will get us to the New Project
dialog box. Let’s name our project as PCQDemo. We will make an SWT based
application. For this some extra configuration needs to be done. First we need
to add SWT jar to project’s classpath. To do that select PCQDemo project and
right-click, select Properties from the menu. This will bring Project Properties
window, whereby selecting Java Build Path on left navigation will bring up Java
Build Path dialog on the right frame. Here click on Libraries tab and then on
Add External jars button. This will bring up a File Explorer dialog. Navigate to
Plugins folder under Eclipse installation directory. Look for
org.eclipse.swt.X.X.X.jar. The X.X.X will be different depending on what
platform that’s being used. Select that jar file and click Open, then click OK.
And, our Java Project has been created with SWT library added to its classpath.

Working with GUI
To start working with the GUI for our application, let’s create a package
namely com.pcqlabs.Jigloo. Right-click on the Package and select New > Other
which will bring up “Select a Wizard” screen. All Jigloo wizards can be found
under GUI Forms folder. Open the subfolder SWT. Select SWT Main Application
option as shown in figure. Clicking Next there and on “Create a new SWTApp”
screen, we name the class and proceed with the GUI builder.

The view that opens up is a split view with visual design window above and
below its editor window. We see that Jigloo already has created a lot of code.
Along that a new package has been created with name com.cloudspace.resource.
This package contains generated class SWTResourceManager. As the name implies,
this class contains SWT resource such as fonts, colors and images. Jigloo
provides liberty to change the SWTResourceManager for changing settings for the
fonts or colors that will be used by the application.

The visual designer with its toolbar tabs
and code editor shown on same perspective makes it easier to design and edit
the corresponding changes simultaneously

Let’s start using the visual designer. It has a toolbar on the top, which
contains various visual components for the application. From the Controls tab we
can directly drag/drop the controls over the container. Let’s place two labels,
two textboxes and a button. The GUI Properties tab shows the properties that are
related to the selected component on the container. The values set here get
reflected on the code and the visual design on the fly. The toolbar also has
tabs for containers, whereby containers for the application could be selected.
Similarly the Layout tab allows selecting the layout that we want to choose. The
left bar of the visual designer has various alignment options and with these the
controls on the container can be aligned.
Jigloo also makes the event handling for the components easy. You just have to
select the component for which you want to write the event, and then under the
Events tab select the appropriate listener and then its handler. In our case we
will select the button and mouse event listener for the Submit button.

Lastly, we can also preview the UI by clicking the Preview option on the
right panel.

For Java developers, Jigloo can lead to substantial time savings, as it
offers GUI to perform development and maintenance tasks, easily.

The Event Listeners related to the selected
component can be selected and added to the application

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.