get started with jigloo, a gui builder for eclipse · get started with jigloo, a gui builder for...

Get started with Jigloo, a GUI builder for EclipseCreate a workflow application using an SWT GUI

Skill Level: Intermediate

Michael Galpin ([email protected])DeveloperMichaelDKelly.com

03 Apr 2007

Jigloo is an Eclipse plug-in that enables you to build sophisticated graphical userinterfaces (GUIs) rapidly that run on the Java™ platform. It can be used to buildSwing-based applications and Standard Widget Toolkit (SWT)-based applications. Itis an easy-to-use visual editor, so you can create the UI for your desktop applicationquickly. In this tutorial, we build a simple workflow application and use Jigloo tocreate its UI. Learn how easy it is to get started with Jigloo and to tap into itsadvanced features, such as visual inheritance. Finally, we test an application andpackage it for others to use.

Section 1. Before you start

This tutorial is intended for Java developers who want to build desktop applicationsand use the Eclipse plug-in called Jigloo to create the UI for their applications. Thesample application makes use of XML, XML Schema, and JAXB, as well as someJava 5 features, such as Annotations and Generics.

About this tutorial

Java is a great platform for building rich desktop applications. When Java debuted in1995, it shipped with the Abstract Window Toolkit (AWT). This was Java's first UIlibrary for building desktop applications. The release of JDK 1.2 in 1998 includedSwing, a much-improved toolkit. Since then, there have been many improvements toSwing. It is now a powerful UI library that performs well on many different platforms.SWT is a competing UI toolkit for Java that offers many advantages. Now withJigloo, you can rapidly build UIs targeting Swing or SWT. You can even build SWT

Get started with Jigloo, a GUI builder for Eclipse© Copyright IBM Corporation 1994, 2008. All rights reserved. of 49

mailto:[email protected]

http://www.ibm.com/legal/copytrade.shtml

applications that include Swing components, but that's beyond the scope of thistutorial.

In this tutorial, you'll learn about Jigloo by building a simple workflow application.You will use Jigloo, which is an Eclipse plug-in, to create the UI for the application.You will then build and test your application and package it for others to use.

Prerequisites

Familiarity with UI programming concepts like event handlers and data binding ishelpful, but not absolutely necessary. Exposure to AWT/Swing or SWT is alsohelpful, but not a requirement.

System requirements

Eclipse V3.2Since Jigloo is a plug-in for Eclipse, you need Eclipse, of course. Theapplication will use SWT, and Eclipse also includes the SWT libraries you'llneed for that.

JiglooJigloo is a plug-in for Eclipse. In the tutorial, you will see how to install Jigloodirectly from Eclipse using Eclipse's powerful update manager.

Java 5+The application in this tutorial makes use of some Java 5 features, such asAnnotations and Generics. Download Java 5 or Java 6.

JAXB V2.0The application in this tutorial uses XML as a data store and uses JAXB forparsing and serializing XML. If you're using Java 6, JAXB is included andthere's nothing to do. If you're using Java 5, you'll need Sun's JAXB 2.0Reference Implementation (RI).

Section 2. Overview

In this section, we look at the Jigloo plug-in and what you can do with it beforewalking through the steps to install it and set it up.

What is Jigloo?

Jigloo is a visual Java GUI builder. It is an Eclipse (and WebSphere® Studio) plug-in

developerWorks® ibm.com/developerWorks

Get started with Jigloo, a GUI builder for Eclipse of 49 © Copyright IBM Corporation 1994, 2008. All rights reserved.

http://www.eclipse.org/downloads/

http://www.cloudgarden.com/jigloo/dnld_redirect.html

http://java.sun.com/javase/downloads/index_jdk5.jsp

http://java.sun.com/javase/downloads/index.jsp

https://jaxb.dev.java.net/2.1.2/

https://jaxb.dev.java.net/2.1.2/


made by CloudGarden. It is free for noncommercial use. You can use Jigloo forcommercial use by obtaining a professional license from CloudGarden.

What can you do with Jigloo?

Jigloo is a classic WYSIWYG editor for building Swing and SWT GUIs. If you want todevelop a graphical, desktop application in Java, Jigloo is a great option. That's justthe beginning, though.

Jigloo supports round-tripping. That means you can not only make visual changesthat cause the underlying code to change but you can also directly edit the code andsee the changes that causes in the GUI. This makes Jigloo a great choice if youhave an existing, legacy GUI. It can interpret your existing application and allow youto edit visually. It also means you can use Jigloo in conjunction with other IDEs, likeNetBeans or JBuilder.

Jigloo was built with Swing/SWT compatibility in mind. It supports the many layoutoptions supported by either technology. Not only can you use either technology forbuilding a new GUI but you can even convert between Swing and SWT using Jigloo.Jigloo can also let you mix in Swing components within a SWT application using theSWT_AWT bridge. In this tutorial, however, we will build our workflow applicationusing an SWT GUI.

Installing Jigloo

Jigloo is an Eclipse plug-in, so it is very easy to install. If you've been using Eclipsefor several years, you've probably downloaded a plug-in and installed it by simplyunzipping it to the Eclipse installation directory. More recent versions of Eclipse havemade this even easier. All you have to do is use Eclipse's Update Manager feature.To access this, select Help > Software Updates > Find and Install. This will openthe Install/Update dialog. You'll want to select the "Search for new features to install"option. Then simply click Next, and you will go to the Update Site dialog.

If you've already installed Eclipse plug-ins, chances are, there will be other sitesalready listed in the "Sites to include in search." If that is the case, you want to makesure you've deselected any other sites in this list. Click New Remote Site, which willbring up the New Update Site dialog, as shown below.

Figure 1. New Update Site

ibm.com/developerWorks developerWorks®



The important thing here is to enter http://cloudgarden1.com/update-sitefor the URL field. You can actually use anything you want for the Name field, butyou'll probably want to use something descriptive like Jigloo Update Site. Click OK,and this will take you back to the Update Site dialog, but now the update site you justentered should appear in the list of sites to include. Click Finish. This will bring upthe Search Results dialog. From the Search Results dialog, select Jigloo and clicNext. This will take you to the Feature License.

As mentioned, Jigloo can be used for free, but only for noncommercial use.Otherwise, you'll need to obtain a professional license from CloudGarden. Afteryou've read the license, select the "I accept the terms in the license agreement" toaccept the license. Then simply click Next. This will take you to the Installationdetails dialog. Click Finish. This will take you to the Feature Verification dialog. Youcan just click Install or Install All. This will initiate the installation. Eclipse willdownload the plug-in from CloudGarden and install it. Once it is done, you willprobably need to restart Eclipse so it can finish the installation process.

Congratulations! You installed Jigloo. Like most Eclipse plug-ins, it is a painlessexperience. You are now ready to start using Jigloo. Start with a little configuration.

Setting up Jigloo

Create a new Java project using Eclipse. Select File > New > Project, then selectJava Project. Clicking Next will take you to the New Project dialog.

In this tutorial, the project is called "workflow." You can use any name you want.Once you've given it a name, click Finish.

As mentioned, you can build Swing or SWT GUIs using Jigloo. In this tutorial, we willbuild an SWT GUI. This requires a little extra configuration. You need to add theSWT JAR to your project's classpath. To do this, select your project and then File >Properties from the main menu. This will bring up the Project Properties screen.Select the Java Build Path in the left navigation, and this will bring up the JavaBuild Path dialog.

Click on the Libraries tab, then the Add External JARs button. This brings up a fileexplorer dialog. You'll want to navigate to $ECLIPSE_HOME/plug-ins, where




$ECLIPSE_HOME is the location of your Eclipse installation, as shown below.

Figure 2. Eclipse plug-ins directory

You'll want to look for the org.eclipse.swt.X.X.X.jar. The X.X.X. will be differentdepending on what platform you're using and the exact version of Eclipse. ClickOpen, then click OK back in your Java Build Path screen.

You've created a basic Java project and added the SWT library to its classpath. Youare now ready to start using Jigloo to design and develop the workflow application.

Workflow application

Our example is a very simple workflow application. There will be two kinds of usersin our application: workers and managers. The application will be used by workers toenter in a purchase request. They will be able to enter in pertinent information aboutthe purchase order. They will also be able to see the status of all the orders entered.Each purchase order can have one of three possible statuses: pending, approved,rejected. The application will be a little different for managers. A manager will beable to see all purchase orders with pending status. The manager will then be ableto approve or reject the purchase order.

This will be a simple application, so we won't worry about users logging in and out.Instead, we will simply present a list of users in the system; an application user cansimply pick the user he wants to log in as. In a real workflow system, concurrency is




a big issue. We won't worry about that for our application, since it won't be runningon multiple systems. A real workflow system also needs to persist the workflow datain a shared repository, usually a relational database. We'll make ours simpler bysimply persisting the data in an XML file. We'll use JAXB for marshalling andunmarshaling the XML data.

We dive into actually writing the code for our GUI next.

Section 3. Setting up the GUI

Now that we have the basic design for our system, it's time to start writing somecode. We'll concentrate on the GUI and using Jigloo.

Designing the GUI for our workflow application

Let's get started designing the GUI for our workflow application. First, let's create apackage for our workflow application. Right-click on your project in the PackageExplorer pane and select New > Package. Let's call our base packageorg.developerworks.workflow. Click Finish.

Now let's create our application in this package. Right-click on the package andselect New > Other. This brings up the "Select a wizard" screen. All the Jigloowizards are found in the GUI Forms folder in this screen. Open that folder, then openthe SWT folder and select the SWT Main Application option, shown in Figure 3.

Figure 3. Select a wizard




Click Next to kick off the New SWTApp wizard. Let's call our main classWorkflowMain, as shown in Figure 4.

Figure 4. New SWTApp wizard




You can leave everything else as is and just click Finish.

The Jigloo visual designer view

Now your Eclipse workspace should look something like Figure 5.

Figure 5. Eclipse displaying WorkflowMain




There are many interesting things to notice here. First, our main window shows acustom view used by Jigloo. This view is a split screen. At the top is the Jigloo visualdesigner. We'll do a lot of work in this dialog, as it allows us to design our GUI byusing drag and drop. We'll talk a lot more about this view. In the bottom of the splitscreen is the Java code for our application, which we'll get into later. Notice howJigloo has already generated a lot of code for us.

Below the main window, we see the GUI Properties window. This view shows usdetailed properties for any visual component selected in the visual designer window.We'll use this view a lot, too. Finally, notice that in the Package Explorer view thereis another package present: com.cloudscape.resource. This package containsgenerated class SWTResourceManager. As its name implies, this class managesSWT resources such as fonts, colors, and images. If you've ever used visual designtools like Jigloo, you've probably seen classes like this. Often these include sternwarnings about not modifying anything in the class since they are either very brittleand modification will probably cause exceptions, or whatever changes you make willprobably be overwritten. That's not the case for the SWTResourceManager. Youcan modify it to change the resources that it manages, like the default font for yourapplication, and Jigloo will not overwrite the changes, and it won't cause anything tobreak.




Let's start using the visual designer. If you're used to working with Eclipse, youprobably know you can maximize any window by simply double-clicking its name.Let's do that and maximize the WorkflowMain window, as shown in Figure 6.

Figure 6. WorkflowMain maximized

Not only does this give our visual designer more real estate to work with but it makesit easier to access the GUI properties (bottom right corner.) It also shows ahierarchical representation of our GUI in the top right corner. It's pretty simple rightnow, but as we add more components to our GUI, we'll see them added to thehierarchy. It also gives us useful controls for previewing our application or running itto test it. Now that we're a little more familiar with the visual designer, let's start usingit to configure our application.

Developing with the visual designer

If you've developed a Swing or SWT application before, you're probably familiar withthe many kinds of layout managers available. Layout managers have always been apowerful feature of Java GUI applications. They allow for different algorithms to beapplied when laying out a GUI. Java's motto has always been "write once, runeverywhere," and these layout algorithms are consistent with this. They allow for aGUI application's layout to work regardless of the size and geometry of the screen orwindow displaying the GUI.




The only downside to these layout algorithms is that they can present a learningcurve to developers, especially those from other platforms who are used to absolutepositioning of elements. With absolute positioning, you simply put your componentwhere you want it to be on the screen, and that's where it will be. The problem withthis kind of layout is that it "breaks" when the screen size varies.

Since this is meant to be a simple example application, we will use an absolutelayout to make things simple. To do this, we'll use the GUI properties. Click on theLayout tab and change the value of Layout to Absolute, as shown in Figure 7.

Figure 7. Configure layout




Next, let's make our main application a little bigger. To do this, simply grab the mainwindow by the bottom right corner and stretch it to whatever size you like.

Now we're ready to start adding visual components to our application. We'll need tobe able to switch between different kinds of users. We could provide a login screenthat asks for user name and password, but let's keep things simple. Let's just have adrop-down list where you can select what user to log in as.

The visual designer has a toolbar at its top that contains various visual componentsyou can select and add to the application. This is a tabbed toolbar. We want to add acontrol, so select the Controls tab. Each control has an intuitive icon, but you canalso mouseover each control to see its name. Select the combo control and drop iton our main window. This will bring up a properties editor for our new control, asshown in Figure 8.

Figure 8. Property editor for combo control

We've changed the name of the component to be something intuitive(userListCombo) and given it some default text of Users. Click OK, and youshould see it inside your application.




Now we have a way to pick and change users. When we pick a user, what do wewant to happen? For workers, they should be able to see all of the purchase ordersthey've entered to date and the status of those purchase orders. For managers, theyneed to see the orders that are pending so they can approve or reject the orders.Let's create a table to display the purchase orders.

To add a table, switch the toolbar tab to the Containers tab. Look for the icon thatlooks like a table and select it. Once you select the table, you can use the mouse toput it anywhere you want it. Let's put it just below our user combo list. Once youselect a location for it, a dialog will appear to ask you to name the table. Again, let'suse an intuitive name, so type in purchaseOrderTable. Click OK, and your tableshould appear in the visual designer.

You can expand the table to make it bigger by grabbing its bottom right corner. Let'sconfigure the table a little more. Its properties are in the GUI Properties view in thebottom right of Eclipse window. Click the Properties tab and expand the Expert listof properties. Change the lines-visible property to true by clicking the checkbox, asshown in Figure 9.

Figure 9. Editing table properties

Let's add some columns to our table. To do this, use the Containers tab on thetoolbar to select the Add TableColumn to Table icon, right next to the table icon weselected earlier. Now you can simply drop the TableColumn into the




purchaseOrderTable, and this will bring up the TableColumn property editor.Again, use a descriptive name, poItemNameColumn, since this will have the nameof the item that was ordered. The text is going to the label of the column, so type inItem for it and click OK.

After we've added this, the visual designer should look something like Figure 10.

Figure 10. Visual designer after one column added

At this point, you may not see the name of the column. If so, fix that by accessingthe table's expert properties again. Just click on the table, and the GUI Propertieswill switch back to the table. Open up the Expert section look for the property calledheaderVisible, as shown in Figure 11.

Figure 11. Editing table properties




That property has a checkbox, so it can be set to true or false. Switch it to true, andnow you should see the header on the table and the item label for the first column.

Let's go ahead and add four more columns: Price, Quantity, Status, and ID. Afterwe're done, the designer should look like Figure 12.

Figure 12. All columns added to table

Now we can display all orders as needed. We need a way to either approve or rejectorders. Let's add a couple of buttons to do this, one for each operation. To add abutton, switch to the Controls tab on the toolbar and pick the icon for the Buttoncontrol. Again, you can just drag the button to wherever you want to put it. Let's put itjust below our table. Once you drop it, you'll be greeted with the button's propertyeditor dialog. Let's make the first button the one for approving a purchase order, sowe'll name it approveButton and give it a text label of Approve. Click OK, and thevisual editor should show your new button.

Similarly, we'll add a Reject button to the application. After you've done that, thevisual designer should look like Figure 13.

Figure 13. Both buttons added




You might notice in the picture that our two buttons aren't exactly lined up. It's hardto eyeball such things, but luckily, Jigloo provides an easy way to line upcomponents. Simply pick the two components -- in this case, the two buttons -- anduse the styling toolbar on the left side of the designer. We'll use the Align tops ofselected elements button, as shown in Figure 14.

Figure 14. Aligning buttons




The buttons should look nice and lined up. Jigloo makes it easy to make our GUIlook very professional.

Now we can pick users, see purchase orders, and even approve or reject apurchase order. All we need to do is add a purchase order. We'll create a form forentering the data for a new purchase order. The form will involve severalcomponents corresponding to the various types of data needed to model a purchaseorder. Let's create a grouping of these components. That will give us a way toaddress all the components as a group, which could be very useful. For example, wemight want to make it so only certain users can add a new purchase order. For suchusers, we might want to make the form invisible. It will be easier to do that if all theelements in the form are grouped together.

To create this grouping, we will add a Composite component to our application.Change to the Containers tab in the toolbar and select the Composite icon, asshown in Figure 15.

Figure 15. Add Composite using toolbar




Drop it wherever you want. There's a large chunk of open space on the right side ofour application, so that's where we'll drop it. This will not surprisingly bring up theComposite's Property Editor dialog, as shown in Figure 16.

Figure 16. Composite property editor




We'll call our Composite itemForm, since that's what it's intended to hold. Makesure to change its Layout to Absolute. That's because a Composite can have its ownLayout manager. After you click OK, you should see the Composite in the visualdesigner, as shown in Figure 17.

Figure 17. Composite in visual designer




We can make the Composite bigger by grabbing it by its bottom right corner. Let'sexpand it so that we have plenty of room to add the form elements.

Now let's design our form. Our form will mostly be text boxes and labels. We'll usethe toolbar for adding these elements to our form. Switch to the Controls tab andselect the label icon. Just as you might expect, you can drop this wherever you want.Put it at the top left of our form container. Once again, this will bring up the usualproperty editor, this time for the Label Control, as shown in Figure 18.

Figure 18. Label Control property editor




You should now see the label in the visual designer. Once again, you can resize itby dragging its corners.

Once we have the label, let's add a text box next to it for users to enter in the nameof the item in the purchase order. Select the Text Control from the toolbar. By now,you know the routine: drop it where you want it, and it will bring up the propertyeditor for it as shown in Figure 19.

Figure 19. Text Control property editor

We gave it a descriptive name, formItemText. We also cleared the Text value.This would be used for some kind of default value, but we don't really need that.Now we should see our text box in the visual editor and we can resize it.

We'll go ahead and repeat this for two more fields: Price and Quantity. Each gets alabel and a text box. Once they are added, our visual editor should look like Figure20.

Figure 20. Price and quantity fields added




Notice that we did give a default value for quantity of 1. Those are all the basic dataelements we need for our purchase order. Now we just need a way to submit ourform for processing. Let's add a button for this. We could do this just as we didearlier, by selecting the Button Control from the toolbar, etc. Let's use a differenttechnique this time. Simply right-click inside the Composite and select Add SWTObject > Button, as shown in Figure 21.

Figure 21. Adding button using context menu




This will take us to the familiar property editor dialog. Name the componentaddButton and give it the text Add PO. Clicking OK, we see our new button thedesigner, as shown in Figure 22.

Figure 22. Add button added




The biggest difference between this method and using the toolbar is that we'll needto adjust its position and alignment relative to the other controls. This gives us anopportunity to use another of the alignment controls. Select the three text boxes andthe add button (use the shift key for multiple selections), and click on the Spaceselected elements evenly vertically," as shown in Figure 23.

Figure 23. Spacing elements evenly vertically




Feel free to explore some of the other alignment controls. Once you're done the finalUI should look something like Figure 24.

Figure 24. Final UI design




Previewing the GUI

We have a pretty picture of our GUI now. It's not functional yet, since we haven'thooked up any data to it. We'll get to that shortly, but this is a good time to takeadvantage of another one of Jigloo's nice features: Preview. Click on Preview in thetop right window. This will bring up a graphical preview of the GUI, as shown inFigure 25.

Figure 25. Preview of Workflow GUI




This is exactly what our final application will look like. One great thing you'll notice isthat this looks just like a Windows® application. That's because we used SWT onWindows. As mentioned, it uses native widgets.

Section 4. Creating the data model for the application

If you're familiar with classic Model-View-Control (MVC) architecture, you recognizethat what we've done so far is create the view of our application. That's one of theareas where Jigloo really shines. At some point, it's time to create the model. Thatmeans writing some Java code to read and act upon the data that drives our system.Jigloo shines at this, too, but it does it without even trying. Jigloo is simply a plug-infor Eclipse, so you have the full power of Eclipse always at your fingertips whenusing Jigloo. Since Eclipse is great for writing Java code and working with data,Jigloo is also great for doing these things.

Creating the schema

As mentioned, we will store our data in XML and use JAXB for reading and writing toour XML file. That means we need to create a schema.

Listing 1. Workflow XML schema

<?xml version="1.0" encoding="UTF-8"?><schema xmlns="http://www.w3.org/2001/XMLSchema"targetNamespace="org:developerworks:workflow"xmlns:dw="org:developerworks:workflow">

<element name="workflow" type="dw:workflow"/>




<complexType name="workflow"><sequence>

<element name="user" type="dw:user" minOccurs="0"maxOccurs="unbounded"/>

<element name="po" type="dw:purchaseOrder"minOccurs="0" maxOccurs="unbounded"/>

</sequence></complexType>

<complexType name="user"><sequence>

<element name="username" type="string"/><element name="role" type="dw:role"/>

</sequence><attribute name="id" type="integer" use="required"/>

</complexType><simpleType name="role">

<restriction base="string"><enumeration value="worker"/><enumeration value="manager"/>

</restriction></simpleType>

<complexType name="purchaseOrder"><sequence>

<element name="priority" type="dw:priority"/><element name="dateRequested" type="date"/><element name="dateNeeded" type="date" minOccurs="0"/><element name="itemName" type="string"/><element name="itemDescription" type="string" minOccurs="0"/><element name="quantityRequested" type="integer"/><element name="url" type="anyURI" minOccurs="0"/><element name="price" type="decimal"/><element name="status" type="dw:orderStatus"/><element name="submittedBy" type="integer"/><element name="processedBy" type="integer" minOccurs="0"/>

</sequence><attribute name="id" type="integer" use="required"/>

</complexType>

<simpleType name="priority"><restriction base="string">

<enumeration value="normal"/><enumeration value="high"/>


<simpleType name="orderStatus"><restriction base="string">

<enumeration value="pending"/><enumeration value="approved"/><enumeration value="rejected"/>


</schema>

We can use JAXB to create Java classes that will bind to XML files that correspondto the schema. If you're using Java 6, JAXB is built in. If you're using Java 5, youneed to download it from Sun. You'll want to use the command-line tool xjc. You'llsimply use xjc workflow.xsd for example. This will cause the schema compiler toparse workflow.xsd and generate the classes. Then you can simply copy thoseclasses to your project. Let's also copy our schema to our project and create an XMLdirectory for this file. Then, create a sample XML file.

Listing 2. Initial XML data

<?xml version="1.0" encoding="UTF-8"?>




<dw:workflow xmlns:dw="org:developerworks:workflow"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="org:developerworks:workflowworkflow.xsd "><user id="0">

<username>homer</username><role>worker</role>

</user><user id="1">

<username>bart</username><role>manager</role>

</user><po id="0">

<priority>normal</priority><dateRequested>2001-01-01</dateRequested><dateNeeded>2001-01-01</dateNeeded><itemName>stapler</itemName><itemDescription>A great stapler</itemDescription><quantityRequested>2</quantityRequested><url>http://www.thinkgeek.com/homeoffice/gear/61b7/</url><price>21.99</price><status>pending</status><submittedBy>0</submittedBy>

</po></dw:workflow>

Once all these artifacts are added, our Package Explorer should look like Figure 26.(If necessary, add the JAXB jars to the Java Build Path.)

Figure 26. Package explorer with JAXB classes and XML files added




Data access

You might have noticed a couple of other files in the explorer: WorkflowDao andXmlWorkflow. WorkflowDao is an interface defining the operations we would need todo with our data (see Listing 3).

Listing 3. WorkflowDao interface

package org.developerworks.workflow;

import java.util.List;

public interface WorkflowDao {public List<User> getUsers();public List<PurchaseOrder> getAllOrders();public List<PurchaseOrder> getAllPendingOrders();public List<PurchaseOrder> getOrdersForUser(int userId);public void saveOrder(PurchaseOrder order);public void setOrderStatus(int orderId, OrderStatus status);

}




We are using a classic Data Access Object pattern. We simply define the interfaceand code our application to this interface. We'll use an XML JAXB-basedimplementation in this application, but by using this design, we could easily switch toa different implementation, such as a database-based implementation. Theimplementation of our interface is XmlWorkflow.

Listing 4. XmlWorkflow interface implementation

package org.developerworks.workflow;

import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.InputStream;import java.math.BigInteger;import java.util.ArrayList;import java.util.List;

import javax.xml.bind.JAXBContext;import javax.xml.bind.JAXBElement;import javax.xml.bind.JAXBException;import javax.xml.bind.Marshaller;import javax.xml.bind.Unmarshaller;

public class XmlWorkflow implements WorkflowDao {private static final String DATA_FILE = "data.xml";private static XmlWorkflow instance;

private Workflow workflow;

private XmlWorkflow() {try {

JAXBContext ctx = this.getContext();Unmarshaller unm = ctx.createUnmarshaller();File dataFile = this.getDataFile();InputStream inputStream;if (dataFile.exists() && dataFile.length() > 0){

inputStream = new FileInputStream(dataFile);} else {

inputStream =Thread.currentThread().getContextClassLoader().getResourceAsStream("xml/"+DATA_FILE);

}JAXBElement element = (JAXBElement) unm.unmarshal(inputStream);this.workflow = (Workflow) element.getValue();

} catch (JAXBException e) {e.printStackTrace();throw new RuntimeException("Failed to read data file",e);

} catch (FileNotFoundException e) {e.printStackTrace();throw new RuntimeException("Could not open data file", e);

}}

public static XmlWorkflow getInstance(){if (instance == null){

instance = new XmlWorkflow();}return instance;

}

public List<PurchaseOrder> getAllOrders() {return this.workflow.getPo();

}

public List<PurchaseOrder> getAllPendingOrders() {List<PurchaseOrder> allOrders = this.getAllOrders();List<PurchaseOrder> pending = new ArrayList<PurchaseOrder>();for (PurchaseOrder order : allOrders){

if (order.getStatus().equals(OrderStatus.PENDING)){




pending.add(order);}

}return pending;

}

public List<PurchaseOrder> getOrdersForUser(int userId) {List<PurchaseOrder> allOrders = this.getAllOrders();List<PurchaseOrder> userOrders = new ArrayList<PurchaseOrder>();for (PurchaseOrder order : allOrders){

if (order.getSubmittedBy().intValue() == userId){userOrders.add(order);

}}return userOrders;

}

public List<User> getUsers() {return this.workflow.getUser();

}

public void saveOrder(PurchaseOrder order) {int index = 0;for (PurchaseOrder po : this.workflow.getPo()){

if (po.getId().intValue() == order.getId().intValue()){this.workflow.getPo().set(index, order);this.saveData();return;

}index++;

}// add new orderorder.setId(new BigInteger(Integer.toString(this.workflow.getPo().size())));this.workflow.getPo().add(order);this.saveData();

}

public void setOrderStatus(int orderId, OrderStatus status) {for (PurchaseOrder po : this.workflow.getPo()){

if (po.getId().intValue() == orderId){po.setStatus(status);this.saveData();return;

}}

}

private void saveData(){File dataFile = this.getDataFile();try {

JAXBContext ctx = this.getContext();Marshaller marshaller = ctx.createMarshaller();FileOutputStream stream = new FileOutputStream(dataFile);marshaller.marshal(this.workflow, stream);

} catch (JAXBException e) {e.printStackTrace();throw new RuntimeException("Exception serializing data file",e);

} catch (FileNotFoundException e) {e.printStackTrace();throw new RuntimeException("Exception opening data file");

}}

private File getDataFile() {String tempDir = System.getProperty("java.io.tmpdir");File dataFile = new File(tempDir + File.separatorChar + DATA_FILE);return dataFile;

}

private JAXBContext getContext() throws JAXBException {JAXBContext ctx = JAXBContext.newInstance("org.developerworks.workflow");return ctx;

}




public static void main(String[] args){XmlWorkflow dao = XmlWorkflow.getInstance();List<User> users = dao.getUsers();assert(users.size() == 2);for (User user : users){

System.out.println("User: " + user.getUsername() + " ID:" + user.getId());}List<PurchaseOrder> orders = dao.getAllOrders();assert(orders.size() == 1);for (PurchaseOrder order : orders){

System.out.println("Order:" + order.getItemName() + "ID:" + order.getId() + " Status:" + order.getStatus());

}PurchaseOrder order = orders.get(0);order.setStatus(OrderStatus.APPROVED);order.setProcessedBy(new BigInteger("1"));dao.saveOrder(order);

}}

Notice that we read from our sample file initially, but we save changes to a file calleddata.xml that will be stored in the system temporary directory. Not exactly the safestplace for our data, but good enough for this sample application. You'll also noticethere's a simple main method in this class. This allows for a simple unit test of theJAXB mechanics. Also, if you're using Java 5, you'll need to add the JAXB jars to theclasspath of your project. You may want to go ahead and copy them to your project,or you can reference them in a location outside the project.

Initializing the application

Before we can interact with our application, we need to initialize everything. First weneed to declare some model objects to use within the application. Just add the linesin Listing 5 to the member variable declaration in WorkflowMain.

Listing 5. Model objects declared

// Data Model Objectsprivate java.util.List<User> users;private User user;

// Service Objectprivate WorkflowDao dao = XmlWorkflow.getInstance();

To access the code, right-click the Workflow.java file and choose Open With > JavaEditor.

We'll modify the code to the application's initGUI() method. We'll create a privatemethod for initializing our list of users.

Listing 6. Creating the users method

private void initUserList(){this.users = dao.getUsers();for (User u : users){

this.userListCombo.add(u.getUsername());}

}




Call this method in the initGUI() right after the userListCombo is defined.

Listing 7. Calling the users method

{userListCombo = new Combo(this, SWT.NONE);userListCombo.setText("Users");userListCombo.setBounds(28, 35, 105, 21);this.initUserList();

}

Gluing together the view and the model using events

We have our view and our model, so we just need to glue them together. We need acontroller. SWT (and Swing) employ a simple technique used by virtually all UIframeworks: They are event-driven systems. We'll use events to know when theinvoke operations on our model and modify our view.

Let's go back to our visual designer. The first UI event we need to associate with ourmodel is when a user is selected from the user combo list. Select the combo controland change to the Events tab in the GUI Properties view, as shown in Figure 27.

Figure 27. Accessing the combo controls events




You'll see several listeners to the combo control. We'll pick the




SelectionListener. This listener fires a SelectionEvent whenever a selectionis made in the combo control. We can choose to handle it inline with an anonymousmethod, or we can define a method for handling the event. We'll choose the latter.This will cause the code editor to show a generated methoduserListComboWidgetSelected. The code for handling this event is shown inListing 8.

Listing 8. User combo list slected code

private void userListComboWidgetSelected(SelectionEvent evt) {int index = this.userListCombo.getSelectionIndex();if (index >= 0){

this.user = this.users.get(index);System.out.println("User selected="+this.user.getUsername());purchaseOrderTable.removeAll();java.util.List<PurchaseOrder> orders;boolean isManager = this.user.getRole().equals(Role.MANAGER);if (isManager){

orders = dao.getAllPendingOrders();} else {

orders = dao.getOrdersForUser(this.user.getId().intValue());}this.approveButton.setVisible(isManager);this.rejectButton.setVisible(isManager);for (PurchaseOrder order : orders){

displayPurchaseOrder(order);}

}}

There's a lot going on here. First, we figure out if the user is a manager. If not, weshow all of his purchase orders. If it's a manager, we'll only show the pending offers.Next, we disable the approve/reject buttons if the user is not a manager. Finally, wedisplay all the orders we retrieved from the data access object in thepurchaseOrderTable.

Now we'll add events to our Approve button. To do this, select the Approve buttonin the visual designer and go to the Events tab in the GUI Properties. Once again,we'll pick the selection event, as this will be fired when the button is selected, asshown in Figure 28.

Figure 28. Configuring Approve button selection event




Then we add code to handle this event.

Listing 9. Approve button selection event code

private void approveButtonWidgetSelected(SelectionEvent evt) {TableItem[] selected = this.purchaseOrderTable.getSelection();if (selected != null){

for (TableItem item : selected){this.dao.setOrderStatus(Integer.parseInt(item.getText(4)), OrderStatus.APPROVED);

item.setText(3, OrderStatus.APPROVED.toString());}

}}

We'll do something very similar for the reject button: add a selection event listenerand execute similar code. The only difference will be that we change the status onthe order to REJECTED instead of APPROVED.

Listing 10. Reject button code

private void rejectButtonWidgetSelected(SelectionEvent evt) {TableItem[] selected = this.purchaseOrderTable.getSelection();if (selected != null){

for (TableItem item : selected){this.dao.setOrderStatus(Integer.parseInt(item.getText(4)), OrderStatus.REJECTED);

item.setText(3, OrderStatus.REJECTED.toString());}

}}

All that's left is handling the Submit button on our form. That will let us add purchaseorders. This is done just like the other buttons. Add an event handler for its selectionevent, as shown in Figure 29.

Figure 29. Add PO button selection listener




Add the code for handling the event.

Listing 11. Add PO button event-handler code

import java.math.BigDecimal;import java.math.BigInteger;import java.util.GregorianCalendar;

import javax.xml.datatype.DatatypeFactory;import javax.xml.datatype.XMLGregorianCalendar;

...

private void addButtonWidgetSelected(SelectionEvent evt) {try {

this.addPurchaseOrder();} catch (Exception e) {

throw new RuntimeException("Exception adding purchase order",e);}this.formItemText.clearSelection();this.formPriceText.clearSelection();this.formQuantityText.clearSelection();

}

private void addPurchaseOrder() throws Exception{String item = this.formItemText.getText();String priceString = this.formPriceText.getText();String quantityString = this.formQuantityText.getText();BigDecimal price = new BigDecimal(priceString);BigInteger quantity = new BigInteger(quantityString);PurchaseOrder po = new PurchaseOrder();int num = this.dao.getAllOrders().size();String numString = Integer.toString(num);BigInteger newId = new BigInteger(numString);po.setId(newId);po.setItemName(item);po.setPrice(price);po.setQuantityRequested(quantity);po.setPriority(Priority.NORMAL);po.setStatus(OrderStatus.PENDING);po.setSubmittedBy(this.user.getId());GregorianCalendar cal = (GregorianCalendar) GregorianCalendar.getInstance();DatatypeFactory factory = DatatypeFactory.newInstance();XMLGregorianCalendar now = factory.newXMLGregorianCalendar(cal);po.setDateRequested(now);this.dao.saveOrder(po);this.displayPurchaseOrder(po);

}

private void displayPurchaseOrder(PurchaseOrder order) {String[] row = new String[]

{order.getItemName(), order.getPrice().toString(),order.getQuantityRequested().toString(),

order.getStatus().toString(), order.getId().toString()};TableItem tableItem = new TableItem(purchaseOrderTable,0);tableItem.setText(row);this.purchaseOrderTable.showItem(tableItem);

}

Test the GUI

Time to test our GUI. Right-click on the class and select Run As > SWTApplication, as shown in Figure 30.

Figure 30. Running the application




This should launch the application.

Figure 31. The workflow application

The default data has a pending PO, so pick the user bart, and we can approve thePO.

Figure 32. Approving an order




Switch over to homer and see the PO's status.

Figure 33. Worker viewing his POs

You can add a new purchase order now.

Figure 34. Adding a PO




Clicking Add PO should add it to the table.

Figure 35. New PO added

Switch to bart, and we can approve or reject.

Figure 36. Updated manager screen




Section 5. Summary

In this tutorial, you've seen how to create a basic GUI using Jigloo. You've added afew different containers and controls. You've seen how to use events from thosecontrols to tie-in to a model implementing some kind of business logic. There's a lotyou can do from here. You're ready to dive into Jigloo's advanced features. Use canuse Jigloo to:

• Extract your forms to separate and reusable components

• Use these components in other applications and even extend them usingvisual inheritance

• Add Swing components

• Convert the entire application to Swing

The schema supports more optional properties, so you can make the form morecomplex. You can add date pickers and combo controls for some of these dataelements.

Review the Resources for additional documentation and ideas for using Jigloo inyour applications.




Downloads

Description Name Size Download method

Part 4 source code os-eclipse-jigloo.workflow.zip18KB HTTP

Information about download methods



http://download.boulder.ibm.com/ibmdl/pub/software/dw/opensource/os-eclipse-jigloo.workflow.zip

http://www.ibm.com/developerworks/library/whichmethod.html


Resources

Learn

• Get the latest information about the Eclipse platform at Eclipse.org.

• Check out Jigloo at CloudGarden.

• Learn about creating SWT applications in the developerWorks article series "Agentle introduction to SWT and JFace."

• Learn about migrating legacy Swing applications to the higher-performing SWTplatform in "Migrate your Swing application to SWT."

• Examine the strengths and weaknesses of SWT, Swing, or AWT in "SWT,Swing, or AWT: Which is right for you?"

• Learn all about creating Eclipse plug-ins like Jigloo in the article about Eclipse'splug-in system.

• Learn about creating Eclipse Rich Client Platform applications using SWT in"Customizing Eclipse RCP Applications."

• Learn all about the various SWT widgets in the Eclipse SWT Widget referencemanual.

• Get acquainted with Swing in this developerWorks article "Introduction toSwing."

• For an introduction to the Eclipse platform, see "Getting started with the EclipsePlatform."

• Check out the "Recommended Eclipse reading list."

• Browse all the Eclipse content on developerWorks.

• Expand your Eclipse skills by checking out IBM developerWorks' Eclipse projectresources.

• To listen to interesting interviews and discussions for software developers,check out check out developerWorks podcasts.

• Stay current with developerWorks' Technical events and webcasts.

• Check out upcoming conferences, trade shows, webcasts, and other Eventsaround the world that are of interest to IBM open source developers.

• Visit the developerWorks Open source zone for extensive how-to information,tools, and project updates to help you develop with open source technologiesand use them with IBM's products.

Get products and technologies

• Download the Eclipse Platform and get started with Eclipse now.

• Download Jigloo.



http://www.eclipse.org/

http://www.cloudgarden.com/jigloo/

http://www.ibm.com/developerworks/views/opensource/libraryview.jsp?search_by=gentle+introduction+swt+jface

http://www.ibm.com/developerworks/views/opensource/libraryview.jsp?search_by=gentle+introduction+swt+jface

http://www.ibm.com/developerworks/edu/j-dw-java-swing2swt-i.html

http://www.ibm.com/developerworks/opensource/library/os-swingswt/

http://www.ibm.com/developerworks/opensource/library/os-swingswt/

http://www.eclipse.org/articles/Article-Your%20First%20Plug-in/YourFirstPlugin.html

http://www.eclipse.org/articles/Article-Your%20First%20Plug-in/YourFirstPlugin.html

http://www.ibm.com/developerworks/edu/os-dw-os-eclipse-rcp1.html

http://www.eclipse.org/swt/widgets/

http://www.eclipse.org/swt/widgets/

http://www.ibm.com/developerworks/edu/j-dw-java-intswing-i.html

http://www.ibm.com/developerworks/opensource/library/os-ecov/

http://www.ibm.com/developerworks/opensource/library/os-ecov/

http://www.ibm.com/developerworks/library/os-ecl-read

http://www.ibm.com/developerworks/views/opensource/libraryview.jsp?search_by=eclipse

http://www.ibm.com/developerworks/opensource/top-projects/eclipse.html

http://www.ibm.com/developerworks/opensource/top-projects/eclipse.html

http://www.ibm.com/developerworks/podcast/

http://www.ibm.com/developerworks/offers/techbriefings/?S_TACT=105AGX03&S_CMP=art

http://www.ibm.com/developerworks/views/opensource/events.jsp

http://www.ibm.com/developerworks/opensource

http://www.eclipse.org/downloads/

http://www.cloudgarden.com/jigloo/dnld_redirect.html


• Check out the latest Eclipse technology downloads at IBM alphaWorks.

• Innovate your next open source development project with IBM trial software,available for download or on DVD.

Discuss

• The Eclipse Platform newsgroups should be your first stop to discuss questionsregarding Eclipse. (Selecting this will launch your default Usenet news readerapplication and open eclipse.platform.)

• The Eclipse newsgroups has many resources for people interested in using andextending Eclipse.

• Subscribe to the Eclipse Platform SWT mailing list to get the latest Eclipsenews.

• Participate in developerWorks blogs and get involved in the developerWorkscommunity.

About the author

Michael GalpinMichael Galpin has been developing Java software professionally since 1998. Hecurrently works for eBay. He holds a degree in mathematics from the CaliforniaInstitute of Technology.



http://www.alphaworks.ibm.com/eclipse

http://www.alphaworks.ibm.com/

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX44

news://news.eclipse.org/eclipse.platform

http://www.eclipse.org/newsgroups/

https://dev.eclipse.org/mailman/listinfo/platform-swt-dev

http://www.ibm.com/developerworks/blogs


get started with jigloo, a gui builder for eclipse · get started with jigloo, a gui builder for...

Documents