Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


XUL: The Gatekeeper to Higher-level Web UIs : Page 2

Why wait for XAML? XUL is available now, tightly integrated with the Mozilla browsers and provides a full framework for building desktop or Web applications.

Describing the Application with XUL
The complete user interface for this application is described in XUL. It is available for you to use in the download with this article (see left column). A snippet of this code—describing the Display and Command buttons—is shown below.

<groupbox> <caption label="Display"/> <text id="display"/> </groupbox> <hbox> <button label="GetTemperature" command="G" style="width: 100px"/> <button label="C" command="C" flex="1"/> </hbox>

As you can see, the XUL is very straightforward XML. The <groupbox> node describes the grouping of the display frame and the display textbox as indicated in Figure 2.

Figure 2. Group Picture: Relating the XUL Code to the UI.
You will notice an unusual attribute within the XUL: 'command.' This attribute is used in the case that you use a button to tie the XUL to your Java code. When the user clicks the button, the XUL framework bubbles an event (actionPerformed, more on this later) up to be processed by your code, with the contents of this attribute (in this case, "C" or "G") as a parameter. It is from this that you know which button has been pressed.

The other XUL tags used in this application are <hbox>, which creates a horizontal layer and container for the controls within this tag. In this case the <hbox> tag contains a number of <button> controls. For example, to make the numbers 7, 8, and 9 appear in a horizontal line, write the following:

<hbox> <button label="7" command="7" style="width: 50px"/> <button label="8" command="8" style="width: 50px"/> <button label="9" command="9" style="width: 50px"/> </hbox>

You will notice that the buttons have a command attribute. This is used to map the button to the underlying logic within the application. You will see more on this later.

Using XUL In Your Java Application
The full source for the application is in the download. The main function is found in the GetTemperature.java file. It accepts an argument, which is the name of the startup directory that contains the XUL. If, for example, your XUL is located in C:\XUL\STARTUP\GETTEMPERATURE.XUL, then you use C:\XUL here. Note that the XUL has to be in a directory called Startup for the application to work.

The constructor for the GetTemperature class contains the logic that loads and interprets the XUL. It uses the following Luxor classes to achieve this:

Table 1. The Luxor XUL classes used to load the XUL document.



XulResourceLoader Base Resource Loading Class for XUL Documents
XulFileResourceLoader Implements XulResourceLoader, used for loading XUL Documents from the File System
XulManager Provides centralized access to your GUI resources

For more detailed information on these and the other XUL classes, take a look at the XUL Alliance homepage at http://xul.sourceforge.net/.

This code shows how they are used to get the XUL and render it in a JFrame content pane:

File rootPath = new File(strStartupPath); XulResourceLoader xrl = new XulFileResourceLoader(rootPath); XulManager xul = XulManager.getXulManager(); xul.setResourceLoader(xrl); xul.load(); getContentPane().add(new TemperatureForm().getJComponent());

Now that the XUL is loaded and rendered, the next thing you want to do is to tie it up with the internal logic of the application. This is done using the TemperatureForm class. In the design of the application it was identified that the buttons have two different types of operation. Some buttons act as digits, namely that they are simply used for entering numbers, and the others act as operations, meaning that they are used to run some functionality.

The digit buttons are straightforward, implementing only GUI logic, allowing the numbers 0-9 to be entered. The GUI keeps track of the order in which they are entered so that tens, hundreds etc. can be handled. There are two operation buttons, the 'C' (for Clear) button that resets the display to '0' and the 'GetTemperature' button, which reads the current display setting and passes it as a ZIP code to the Web service, gets the response from the Web service, and renders it on the display.

These button types are realized with the 'EnterDigit' and 'EnterOperation' classes, respectively. The 10-digit buttons are implemented using instances of the EnterDigit class, and assigned to a helper class called 'TemperatureLogic' that intercepts the events from the XUL framework when an action is performed on the button. In other words, when you press a button, the XUL framework generates an 'actionPerformed' event, which triggers the 'execute' action on EnterDigit, which extends XulAction. EnterOperation works in a very similar way.

These actions raise events on TemperatureLogic called 'enterDigit' and 'enterOperation,' respectively. In the case of the former, the display is updated with the current digit. In the case of the latter, if the operation is 'C' (the XUL command attribute for the clear button), then the display will be cleared, otherwise 'G' (the XUL command attribute for the 'Get Temperature' button) is assumed, and the Web service is consumed. Note that these command attributes are completely under your control, and are specified in the XUL document, so you don't have to use pre-assigned command attributes.

There are many ways of consuming a Web service with Java. Most IDEs have a wizard that creates a stub for you, or you could hand code the SOAP proxy yourself. The download contains a Web services proxy created by the Oracle JDeveloper IDE. As such it contains some Oracle-specific JAR references. If you're not using JDeveloper, be sure to remove this proxy and replace it with the appropriate one for your environment.

If you are using a different IDE or coding your own Web services stub, make sure that you build your proxy to consume the Web service described by the WSDL hosted by xmethods.net at http://www.xmethods.net/sd/2001/TemperatureService.wsdl.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date