Java Notes: GUI - Swixml

A very promising approach to solving the GUI mess is to use a XUL based approach where the user interface is specified using XML. Swixml (www.swixml.org) is one of the more attractive candidates for building Java applications, making UI creation fairly simple, and promoting a clean MVC pattern.

Also, check out the Swixml viewer that lets you look at an XML file to see what the interface looks like. swixml-viewer.sourceforge.net.

The following notes were generated in the process of testing Swixml. The following tags were used.

  1. Common attributes
  2. Container tags
  3. Component tags

Containers

<frame id="..." title="..." defaultCloseOperation="JFrame.EXIT_ON_CLOSE" layout="...">...</frame>

Layout panel <panel layout="..." constraints="..." border="...">...</panel>

There are two major uses for a panel - as a place to arrange components, and as an area to draw on.

Graphics panel <panel id="..." preferredSize="..."/>

<toolbar floatable="true/false" orientation="...">...</toolbar>

A toobar typically encloses buttons with icons and toolTipText.

Components

<button text="..." action="..." icon="..." toolTipText="..."/>

<label text="..."/>

<textfield id="..." columns="..." text="..."/>

Menus

<menubar>...</menubar>

The menubar contains the menus.

<menu text="..."/>

A menu has a name (text="...") that appears on the menubar. A menu contains

<menuitem text="..." action="..." icon="..." mnemonic="..."/>

<separator/>

Defining a new tag

It's possible to easily define a new tag. For example, to use a subclass of JPanel (eg, Diagram) which overrides paintComponent() for graphics with an associated tag called diagram (name doesn't have to match the class name), the following works.

SwingEngine swix = new SwingEngine(this);
swix.getTaglib().registerTag( "diagram", Diagram.class );
swix.render( "Skeema.xml" );

The corresponding XML can then contain the following.

<diagram id="x_panel" preferredSize="800,600" background="FFAAAA" constraints="BorderLayout.CENTER">
</diagram>

The Diagram class and its parameterless constructor must be public so the SwingEngine can reference them.

Layouts

GridBagLayout

<!-- Adapted from Swixml layout sample -->
<panel Layout="GridBagLayout">
    <button text="Wonderful">
        <gridbagconstraints id="gbc_1" insets="2,2,2,2" gridx="0" gridy="0" ipadx="15" ipady="15" weightx="1" weighty="1"/>
    </button>
    <button text="World">
        <gridbagconstraints refid="gbc_1" gridx="1"/>
    </button>
    <button text="of">
        <gridbagconstraints refid="gbc_1" gridy="1"/>
    </button>
    <button text="Swixml">
        <gridbagconstraints refid="gbc_1" gridx="1" gridy="1"/>
    </button>
</panel>

Note: Spelling the tag as "gridBagConstraints" caused an exception.

CardLayout

See the sample program. Each card's constraints value defines the card's name. The card layout object is obtained dynamically by calling getLayout().

Problems