here are many Java user interface toolkits. The most common, of course, are AWT and Swing, each of which has its advantages and drawbacks. Swing in particular, while it looks great, can be burdensome to develop and leads to large code footprints. As an example, Figure 1 shows a very simple Swing GUI developed with the excellent Oracle JDeveloper IDE.

Without any code to activate this GUI and respond to events such as the Button Click, Figure 1 already involves 114 lines of code, including the necessary imports. A snippet of this code is shown below, where you can see that four lines of code alone are needed to describe the button. This verbosity isn’t the fault of the IDE?it’s just the way that AWT and Swing work, and this IDE uses components from these frameworks as appropriate.

button1.setLabel("btnButton");button1.setBounds(new Rectangle(240, 55, 110, 25));button1.setForeground(Color.cyan);button1.setBackground(Color.magenta); 

With Swing you also have the problem of the application logic and the UI description potentially being munged together. With careful work, these can be separated, but most of the time you will use an IDE, and IDEs generally munge the code together if you use their designers. Building a GUI without using a designer tends to be a lot of work, so you end up being stuck with an application where GUI layout and implementation tend to be merged together. Therefore, if you need to separate UI and implementation, you’ll need a source management system and build process even for the simplest of projects, and you’ll likely have to sort out a lot of the GUI details by hand.

Figure 1. Swing GUI: This simple Java GUI (shown on the JDeveloper stage), developed with a Swing/AWT-based editor, requires a lot of code.

XUI is an open-source project, available on the artistic license that is intended to make GUI development clearer, cleaner, separated, and well modeled. Perhaps most importantly, it will dramatically reduce the amount of code necessary for Java GUIs?and as any developer can tell you, the less code, the less chance of bugs. XUI may be downloaded from its home page on Sourceforge.

It isn’t intended as a replacement for the Swing and AWT frameworks, but instead it is a suite of supporting tools to make coding with these frameworks a lot easier. The best way to understand how it works is by example, so over the course of this article you’ll use XUI to build some GUIs and gain an understanding of what it does for you.

Getting Started?Building Forms in XML
User interfaces are called ‘forms’ in XUI and these forms may be entirely defined using XML. In addition, the API includes a form designer as a download or an add-in form designer for NetBeans. The latter is still under development and can be unstable, but the XUI folks are very fast at turning around bug fixes (usually within a day or two). Your forms can be integrated into any Java modules, be they pages themselves or just pure application logic.

Figure 2. The XUI Editor: The XUI IDE is pretty standard.

Perhaps the best use for a framework like XUI is in the clean separation between the UI and the app logic, and in this article I’ll show you how to do just that. The first thing to do is to download and unzip the release build of XuiALL. This contains the libraries and the UI editor IDE.

When you’ve unpacked the zip, you should see these files:

To launch the IDE, edit the start.bat file to refer to your JDK installation; it should look something like this:

c:j2sdk1.4.2_04injava -cp XuiAll.jar;jh.jar;c:j2sdk1.4.2_04lib	ools.jarnet.xoetrope.builder.editor.XuiEditor

Note that Windows tends to choke on files called start.bat, so it is also a good idea to rename this file. I called mine runEd.bat. When you run this file, the IDE will launch (see Figure 2).

The IDE gives you the facility to design a GUI in pretty much the standard way that every IDE does?by dragging and dropping controls, sizing them using the mouse, and customizing them using property editors. What the XUI editor brings to the table is that it takes your visual work and generates XML describing your UI on the fly. Listing 1 shows the XML for the simple tax form shown in Figure 2.

You now have a nicely encapsulated description for your user interface, which is also easy to read (for a human) and fairly straightforward to parse. When you save out this form, it will be saved as the XML shown in Listing 1. The next thing to do is to hook this UI up to your business logic to make it useful instead of just pretty. In traditional Java, your definitions of your UI would be in Java code and you would have a lot of work to create separate modules that interoperate between the UI and the functionality. From experience, it is almost always the case that the UI description and the functionality and business logic are mixed up within the Java classes.

Figure 3. Handling the Action: Editing your XUI Java code-behinds.

With XUI, separating them isn’t just easy, it’s automatic. Using the XUI editor, you select an item, associate the name of the event that processes that item, and XUI will create a separate Java class containing the stubs for running that event.

To try it out, download the sample tax application for this article. Run it and click the Exit button. You’ll see that the Action Handler for this button is called appExit. Put the cursor in the ActionHandler property field, over the appExit text, and press Enter. You will be taken to the Java module containing the appExit function (see Figure 3).

This method has the code System.exit(0), which closes the current application.

Now, on to more interesting tasks: You want to write some business logic that interacts with your display, but is still totally separate from it. In this case, you are going to calculate taxes, for which the formula is (0.2* ( Salary + Income – Deductions)), with the values of Salary, Income, and Deductions coming from the GUI. You’ll then load the answer into the lTaxes label. Thus you can see how the application interacts with the GUI for input to and output from your Java code.

This code is mapped to the Calculate button by setting its ActionHandler property to doCalc, which creates the function stub. Fill in this stub with the following:

public void doCalc(){  XEdit tmpText = (XEdit) findComponent("tSal");  Double tSal = new Double(tmpText.getText());  tmpText = (XEdit) findComponent("tInc");  Double tInc = new Double(tmpText.getText());  tmpText = (XEdit) findComponent("tDed");  Double tDed = new Double(tmpText.getText());  Double dTaxes = new Double((tSal.doubleValue()                       + tInc.doubleValue()                      - tDed.doubleValue())*.2);  XLabel tmpLbl = (XLabel) findComponent("lTaxes");  tmpLbl.setText(dTaxes.toString());}

What this code does is to create a reference (tmpText) to a control of type XEdit. An XEdit control is the basic text input control for XUI. It then searches for the control called tSal and when it finds it, it gets referred to as tmpText. The text is pulled out of tmpText using the getText() method and is passed to the constructor for a new Double tSal (for salary).

This process is repeated for tInc (Income) and tDed (Deductions). The taxes are calculated by adding the Salary to the Income, subtracting the Deductions, and dividing the whole lot by five. This calculation is passed to the constructor of a new Double, containing the calculated Taxes.

The taxes are displayed on the Form using a label called lTaxes. This label is found, and cast to an object of type XLabel, called tmpLbl. The setText() method is then used to amend it and the value of dTaxes is loaded into it.

Figure 4. Doing your Taxes with XUI: Wouldn’t it be nice to pay so little in taxes?

So, you can see from this function, that even though the GUI logic is nowhere to be found, you can still interact with it in XUI by using findComponent to get the appropriate controls. You can then associate the controls with a temporary object with which you can query or set the properties of the GUI controls. This is the principle of loosely coupled logic operating in a very useful manner!

While this simple example may not blow you away, consider how this can be used for something with high impact, such as the internationalization of a GUI. With this methodology, if you want to change the language of your GUI, simply change the XML defining it?your logic will have zero changes. If the control names stay the same, the program logic won’t care!

You can see the finished sample application in action in Figure 4.

Tying It All Together
When you use the XUI editor to create a project, it creates a directory for you containing subdirectories with your source, your compiled classes, your pages, and the XUI runtimes that are needed to execute your app. A copy of this directory is available in the download.

A very important file called startup.properties is found in the properties directory. There is no way to edit that in the GUI at the moment, so you have to do it by hand. This allows you to set up how your GUI will appear (size, start location, etc.) as well as whether it will appear as a ‘normal’ window (with titlebar, etc., as in Figure 4) or a windowless screen. The property setting is a little strange. If you want to have a window, you need to set it to UseWindow=False (the default is True). This is probably a bug in the framework, so your experience may differ.

The other important things to note in the sample app are the Startup package and class, com.devx.tax and Welcome, respectively. Welcome instructs XUI to start with the form defined as Welcome.xml and use the Welcome.class as code-behind. XUI creates a batch file for you from which you can run your application. If you have any trouble with this, change its name from start.bat to something else (I use runapp.bat) and make sure your paths are all set correctly to point to the XUI jars.

This batch file contains the following commands:

java -classpath .;.libXuiCoreSwing.jar;.classes;.
esources;.pages; net.xoetrope.swing.XApplet startup.propertiespause

As you can see, it takes startup.properties as a parameter, and from there it determines the first file to load. Multiple form applications are obviously possible, and the XUI core classes handle navigation between them. Check the documentation on XProjectManager (the XUI class that handles how all your forms knit together for workflow and navigation) for more details.

Other Goodies with XUI
XUI has a lot of stuff to offer that goes beyond the scope of this article, so check out the Sourceforge site for more details. Some of the more interesting aspects include:

• Data Model: This is an in-memory persistence layer between the XML defining the GUI and the Java handling the logic. It can be used to store state of items between dialogs, or can automatically be serialized to disk as an XML representation of your data. All data is keyed according to a text address such as taxes/firstName.
• NetBeans Editor: There is a version of the XUI available that integrates with NetBeans, making development and debugging of your code a lot easier.
• Navigation: Through the XProjectManager class you can navigate around all your forms.
• Styles: The styles associated with your controls and forms are also externalized as XML files. Take a look in your resources directory and you’ll see the styles used in the making of this application.

XUI isn’t perfect. It still has some bugs, and it isn’t the most user-friendly API to get up and running with. In addition, the documentation on the Web site is a work in progress and will take you some time to get your head around. However, from a design point of view, XUI is a major step in the right direction in properly architecting your Java GUI applications. It makes the separation of GUI logic from business logic, not just easy but natural?and it does it automatically for you.

It is for this reason that it makes a nice alternative, or indeed a nice complement to some of the better known XML-based GUI frameworks for Java such as Luxor-XUL and SWT. It has an advantage over both of these in that it is incredibly lightweight and it comes with the support structures to automate running the GUIs (as outlined above) built in. If you are (or will be) doing GUI in Java, you’ll certainly want to keep an eye on this project as it matures.