Jigloo: The GUI Plug-in for Eclipse

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.

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.

Features



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.

Conclusion



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