XUL: The Gatekeeper to Higher-level Web UIs

or almost a year now Microsoft has been touting XAML, its XML Application Markup Language, as being a significant disruptive technology changing how you will develop your applications, and in particular the presentation layer for .NET applications.

But thanks to a juggling of internal resources, XAML, and its parent, Longhorn, have been pushed into the vague future with a constantly shifting release date sometime after 2006. However the underlying idea?the separation of user interface declaration and application service logic?is a good one and you don’t have to wait for Longhorn and XAML to start developing with that paradigm today.

Enter the Luxor XML UI Language Toolkit, or XUL for short. XUL is more than just the markup language to describe the user interface. It is also a lightweight Web server, a portal engine, a template engine, and a scripting interpreter. It was originally pioneered by Mozilla and is an integral part of the Mozilla browser.

The philosophy behind XUL is to separate the user interface into four distinct layers

  • Content: The structure and description of user interface elements
  • Appearance: The theme, look and feel or ‘skin’ of the application
  • Behavior: The underlying logic that the user interface exposes
  • Locale: The intended international location for the application.
Figure 1. Not So Hot: The Weather Finder application in action.

In this article you will build a desktop application in Java and XUL that consumes a public Web service to tell you the temperature at any location based on its ZIP code. You will also look into running XUL documents within the Mozilla browser. This is just the tip of the XUL iceberg, but hopefully enough to whet your appetite for more.

Getting Started
The application that you will develop as a sample in this article is adapted from the famous Luxor calculator app, but has been extended to make it a Web service consumer. XMethods.Net host a Web service that accepts a ZIP code and returns a temperature. The WSDL for this file is available for inspection at http://www.xmethods.net/sd/2001/TemperatureService.wsdl.

The download included with this article includes all the source code as well as the JDeveloper workspace and project files. You can use these, or if you prefer a different IDE, you will need access to the Luxor jar file, available for download from the Luxor XUL homepage at http://luxor-xul.sourceforge.net.

A screenshot of the application in action can be seen in Figure 1. You type in the ZIP code using the calculator keypad and hit the GetTemp button. The calculator then calls the XMethods Web service, passing the ZIP code and getting the temperature back, which it then displays on the screen.

In Figure 1, the ZIP code entered is 10036 (Midtown, New York City), which on the day the screen shot was taken was a cool 63 degrees.

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.

                         

As you can see, the XUL is very straightforward XML. The 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 , which creates a horizontal layer and container for the controls within this tag. In this case the tag contains a number of

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: