Get started with Jigloo, a GUI builder for Eclipse Create a workflow application using an SWT GUI Skill Level: Intermediate Michael Galpin ([email protected]) Developer MichaelDKelly.com 03 Apr 2007 Jigloo is an Eclipse plug-in that enables you to build sophisticated graphical user interfaces (GUIs) rapidly that run on the Java™ platform. It can be used to build Swing-based applications and Standard Widget Toolkit (SWT)-based applications. It is an easy-to-use visual editor, so you can create the UI for your desktop application quickly. In this tutorial, we build a simple workflow application and use Jigloo to create its UI. Learn how easy it is to get started with Jigloo and to tap into its advanced features, such as visual inheritance. Finally, we test an application and package it for others to use. Section 1. Before you start This tutorial is intended for Java developers who want to build desktop applications and use the Eclipse plug-in called Jigloo to create the UI for their applications. The sample application makes use of XML, XML Schema, and JAXB, as well as some Java 5 features, such as Annotations and Generics. About this tutorial Java is a great platform for building rich desktop applications. When Java debuted in 1995, it shipped with the Abstract Window Toolkit (AWT). This was Java's first UI library for building desktop applications. The release of JDK 1.2 in 1998 included Swing, a much-improved toolkit. Since then, there have been many improvements to Swing. 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 with Jigloo, 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. Page 1 of 49 developerWorks® ibm.com/developerWorks applications that include Swing components, but that's beyond the scope of this tutorial. 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 is helpful, but not absolutely necessary. Exposure to AWT/Swing or SWT is also helpful, but not a requirement. System requirements Eclipse V3.2 Since Jigloo is a plug-in for Eclipse, you need Eclipse, of course. The application will use SWT, and Eclipse also includes the SWT libraries you'll need for that. Jigloo Jigloo is a plug-in for Eclipse. In the tutorial, you will see how to install Jigloo directly from Eclipse using Eclipse's powerful update manager. Java 5+ The application in this tutorial makes use of some Java 5 features, such as Annotations and Generics. Download Java 5 or Java 6. JAXB V2.0 The application in this tutorial uses XML as a data store and uses JAXB for parsing and serializing XML. If you're using Java 6, JAXB is included and there's nothing to do. If you're using Java 5, you'll need Sun's JAXB 2.0 Reference Implementation (RI). Section 2. Overview In this section, we look at the Jigloo plug-in and what you can do with it before walking 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 Get started with Jigloo, a GUI builder for Eclipse Page 2 of 49 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks® made by CloudGarden. It is free for noncommercial use. You can use Jigloo for commercial 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 to develop a graphical, desktop application in Java, Jigloo is a great option. That's just the beginning, though. Jigloo supports round-tripping. That means you can not only make visual changes that cause the underlying code to change but you can also directly edit the code and see the changes that causes in the GUI. This makes Jigloo a great choice if you have an existing, legacy GUI. It can interpret your existing application and allow you to edit visually. It also means you can use Jigloo in conjunction with other IDEs, like NetBeans or JBuilder. Jigloo was built with Swing/SWT compatibility in mind. It supports the many layout options supported by either technology. Not only can you use either technology for building 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 the SWT_AWT bridge. In this tutorial, however, we will build our workflow application using an SWT GUI. Installing Jigloo Jigloo is an Eclipse plug-in, so it is very easy to install. If you've been using Eclipse for several years, you've probably downloaded a plug-in and installed it by simply unzipping it to the Eclipse installation directory. More recent versions of Eclipse have made 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 open the 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 sites already listed in the "Sites to include in search." If that is the case, you want to make sure you've deselected any other sites in this list. Click New Remote Site, which will bring up the New Update Site dialog, as shown below. Figure 1. New Update Site Get started with Jigloo, a GUI builder for Eclipse © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 3 of 49 developerWorks® ibm.com/developerWorks The important thing here is to enter http://cloudgarden1.com/update-site for the URL field. You can actually use anything you want for the Name field, but you'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 just entered should appear in the list of sites to include. Click Finish. This will bring up the Search Results dialog. From the Search Results dialog, select Jigloo and clic Next. 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. After you've read the license, select the "I accept the terms in the license agreement" to accept the license. Then simply click Next. This will take you to the Installation details dialog. Click Finish. This will take you to the Feature Verification dialog. You can just click Install or Install All. This will initiate the installation. Eclipse will download the plug-in from CloudGarden and install it. Once it is done, you will probably need to restart Eclipse so it can finish the installation process. Congratulations! You installed Jigloo. Like most Eclipse plug-ins, it is a painless experience. 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 select Java 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 will build an SWT GUI. This requires a little extra configuration. You need to add the SWT 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 Java Build Path dialog. Click on the Libraries tab, then the Add External JARs button. This brings up a file explorer dialog. You'll want to navigate to $ECLIPSE_HOME/plug-ins, where Get started with Jigloo, a GUI builder for Eclipse Page 4 of 49 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks® $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 different depending on what platform you're using and the exact version of Eclipse. Click Open, 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. You are 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 users in our application: workers and managers. The application will be used by workers to enter in a purchase request. They will be able to enter in pertinent information about the purchase order.