Beyond HTML and Swing

Building Rich, Cross-Platform, Zero-Administration Desktop Apps On Open Standards Today

Gerald Bauer
JUG Austria Talk, October 2001

Table of Contents


Who is this guy?


Part I: Java's Comeback On The Desktop

Real World Desktop App Examples

Reuse, Reuse, Reuse - What Is A Rich Desktop App?

Embedded HTML Browser

100 % Java, Open Source

Closed-Source Payware

Industry Strength Über-Browser

Embedded HTTP Server

100 % Java, Open Source

Embedded Template Engine

100 % Java, Open Source

Embedded Portal Engine

100 % Java, Open Source

Embedded XUL Engine

100 % Java, Open Source

Industry-Strength Über XUL Engine

Embedded Download/Upload Manager

100 % Java, Open Source

Themes, Skins, Look & Feels

Zero-Admin Apps

Example: Venus Application Publisher (Vamp)

Component Provider
HTML Browser JEditorPane
HTTP Server Homegrown (similar to Rachel's Open-Source, Ultra-Light Weight, Multi-Threaded HTTP Server)
Template Engine Apache Velocity
Portal Engine Homegrown
XUL Engine Homegrown - Open-Source Luxor
Download/Upload Manager Homegrown
Themes, Skins, Look & Feels CSS, Skin L&F, Oyoaha L&F, Kunststoff L&F
Zero-Admin Web Start

Part II: XUL - Building Gooeys (GUIs) Using XML

What is XUL?

XUL Vision

make cross-platform user interfaces as easy to built as web pages

-> no hard-coded, platform-specific user interfaces (e.g. MFC, WinForms, Swing, Qt, etc.)
-> the answer is not yet another GUI API/toolkit/framework

First Impression - Toolbar Example

  <toolbar id="MAIN_TOOLBAR">
    <button action="new"     caption="New"
            icon="NEW_ICON"  tooltip="Create new package"
            mnemonic="N" />
    <button action="open"    caption="Open"
            icon="OPEN_ICON" tooltip="Open existing Jnlp file"
            mnemonic="O" />
    <button action="save"    caption="Save"
            icon="SAVE_ICON" tooltip="Save Jnlp file"
            mnemonic="S" />
    <button action="test"    caption="Test"
            icon="TEST_ICON" tooltip="Test Jnlp Package"
            mnemonic="T" />
    <button action="addInformation"     caption="Info"
            icon="ADD_INFORMATION_ICON" tooltip="Add Information Section"
            mnemonic="I" />
    <button action="addIcon"            caption="Icon"
            icon="ADD_ICON_ICON"        tooltip="Add Icon"
            mnemonic="C" />
    <button action="addResources"       caption="Resources"
            icon="ADD_RESOURCES_ICON"   tooltip="Add Resources Section"
            mnemonic="R" />
    <button action="addJar"             caption="Jar"
            icon="ADD_JAR_ICON"         tooltip="Add Java Archive"
            mnemonic="J" />
    <button action="addNativeLib"       caption="Native Lib"
            icon="ADD_NATIVE_LIB_ICON"  tooltip="Add Native Library"
            mnemonic="L" />
    <button action="addExtension"       caption="Extension"
            icon="ADD_EXTENSION_ICON"   tooltip="Add Extension"
            mnemonic="E" />

What is available?

The Good

The Ugly

And many more

Bluestone's XwingML - Failed Early XUL Attempt


  <JFrame name="MainFrame" title="Bluestone XMLEdit" image="icon.gif" x="10%" y="10%" width="80%" height="80%">
      <JMenu text="File" mnemonic="F">
        <JMenuItem icon="open.gif" text="Open..." mnemonic="O"  accelerator="VK_O,CTRL_MASK" actionListener="OpenFile"/>
        <JMenuItem icon="save.gif" text="Save" mnemonic="S" accelerator="VK_S,CTRL_MASK" actionCommand="save"  actionListener="SaveFile"/>
     <Tab title="XML">
        <JTextArea name="EditorArea" tabSize="3" fontName="Monospaced" fontSize="14"/>
     <Tab title="DOM">
         <JTree name="DocumentTree" className="DOMTree">

Mozilla XUL

XUL Architecture

Break UI into Four Parts

XUL Benefits

Who Is Using XUL? - Real-World Desktop Apps Built On XUL

Luxor - Open-Source XUL Toolkit for Java

Main Pieces of Luxor

XUL Core - Luxor Tag Overview


Menu Example - Part 1 of 3

 <menubar id="MAIN_MENUBAR">
  <menu id="file" label="File" accesskey="F">
    <menuitem action="new"
        icon="NEW_ICON" />
    <menuitem action="newApplication"
        label="New Application"
        icon="BLANK_ICON" />
    <menuitem action="newApplet"
        label="New Applet"
        icon="BLANK_ICON" />
    <menuitem action="newComponent"
        label="New Component"
        icon="BLANK_ICON" />
    <menuitem action="newInstaller"
        label="New Installer"
        icon="BLANK_ICON" />
    <menuitem action="open"
        icon="OPEN_ICON" />
    <menuitem action="openUrl"
        label="Open URL..."
        icon="BLANK_ICON" />
    <menuref id="RECENT_FILES"
        label="Open Recent File"
        icon="BLANK_ICON" />
    <menuitem action="save"
        icon="SAVE_ICON" />
    <menuitem action="saveAs"
        label="Save As..."
        icon="BLANK_ICON" />
    <menuitem action="exit"
        icon="EXIT_ICON" />

Menu Example - Part 2 of 3

<icon id="NEW_ICON"  ref="images/20x20/newsheet.gif" />
<icon id="OPEN_ICON" ref="images/20x20/openproject.gif" />
<icon id="SAVE_ICON" ref="images/20x20/saveproject.gif" />
<icon id="EXIT_ICON" ref="images/20x20/exit.gif" />

  <key id="new"       modifiers="control" key="N" />
  <key id="open"      modifiers="control" key="O" />
  <key id="open-url"  modifiers="control" key="U" />
  <key id="save"      modifiers="control" key="S" />

Menu Example - Part 3 of 3 - Java Code

Register Action Items with XulManager

public class CmdExit extends XulAction
  GUI _gui;

  public CmdExit( GUI gui )
    super( ActionKeys.EXIT );
    _gui = gui;

  public void execute()

Create MenuBar

JMenuBar menuBar = xul.createMenuBar( MenuBarKeys.MAIN_MENUBAR );

Menu Example - Benefits

XML Version

<menuitem action="new" label="New..." accesskey="N"
          key="new" icon="NEW_ICON" />

Java Version

JMenuItem mi = new JMenuItem( "New..." );
mi.addActionListener( cmdNew );
mi.setMnemonic( 'N' );
mi.setAccelerator( KeyStroke.getKeyStroke( "control N" ) );
mi.setIcon( new ImageIcon( "images/newApplication.gif" ) );

DisplayURL Example

<menu id="help" label="Help" accesskey="H">
    <displayurl label="Venus Application Publisher Home Page"
        icon="BLANK_ICON" />
    <displayurl label="Venus Application Publisher Discussion Forum"
        icon="BLANK_ICON" />
    <displayurl label="Frequently Asked Questions (FAQ)"
        icon="BLANK_ICON" />


    <displayurl label="Java Web Start Home Page"
        icon="BLANK_ICON" />
    <displayurl label="Java Web Start Discussion Forum"
        icon="BLANK_ICON" />
    <displayurl label="Java Web Start FAQ"
        icon="BLANK_ICON" />

    <menuitem action="about"
        label="About..." icon="ABOUT_ICON" />

Target Attribute - Display in Internal or External Browser

Map Example - Part 1 of 2

<map id="ARCH" sort="true">
   <entry key="i386" value="i386 (Intel)"/>
   <entry key="68000" value="68000 (Motorola)"/>
   <entry key="Alpha" value="Alpha (Compaq)"/>
   <entry key="Sparc" value="Sparc (Sun)"/>

Map Example - Part 2 of 2

XulManager xul = XulManager.getXulManager();

// step 1: create map
XulMap archMap = xul.createMap( "ARCH" );

// step 2: populate combobox using values
JComboBox arch = new JComboBox( archMap.getValues() );

// example on how to get key from value
String key = archMap.lookupByValue(
  (String) arch.getSelectedItem() );

Panel Example - XHTML Layout - 1/4

<panel id="INFORMATION">
        <td component="LOCALE_LABEL" />
        <td component="LOCALE_INPUT" horz="MAX"/>
        <td component="TITLE_LABEL" />
        <td component="TITLE_INPUT" horz="MAX"/>
        <td component="VENDOR_LABEL" />
        <td component="VENDOR_INPUT" horz="MAX"/>
        <td component="HOMEPAGE_LABEL" />
        <td component="HOMEPAGE_INPUT" horz="MAX"/>
        <td component="OFFLINE_ALLOWED_INPUT"/>
        <td component="DESCRIPTION_PANEL" horz="MAX" vert="MAX" colspan="2"/>

Panel Example - Part 2 of 4

  <border title="Information"/>

  <choice id="LOCALE_INPUT" map="LOCALE" prepend="true" />
  <text id="TITLE_INPUT"    history="info.title" />
  <text id="VENDOR_INPUT"   history="info.vendor" />
  <text id="HOMEPAGE_INPUT" history="info.homepage" />
  <checkbox id="OFFLINE_ALLOWED_INPUT" caption="Offline allowed" />

  <label id="LOCALE_LABEL"   caption="Locale:" />
  <label id="TITLE_LABEL"    caption="Title:" />
  <label id="VENDOR_LABEL"   caption="Vendor:" />
  <label id="HOMEPAGE_LABEL" caption="Homepage:" />

Panel Example - Part 3 of 4 - Java Code

public class JnlpInformationPanel extends AbstractDetailPanel
  XInput _title;
  XInput _vendor;
  XInput _homepage;
  XInput _offlineAllowed;
  XInput _locale;

  public JnlpInformationPanel( GUI gui, JnlpEditorPanel control )
     super( gui, control, PanelKeys.INFORMATION );

  public void init()
    _locale         = new XInput( this, "LOCALE_INPUT" );
    _title          = new XInput( this, "TITLE_INPUT" );
    _vendor         = new XInput( this, "VENDOR_INPUT" );
    _homepage       = new XInput( this, "HOMEPAGE_INPUT" );
    _offlineAllowed = new XInput( this, "OFFLINE_ALLOWED_INPUT" );

Panel Example - Part 4 of 4 - Java Code continued

public void populate( JnlpUiTreeNode node )
    JnlpInformation data = (JnlpInformation) node.getNodeData();

    _locale.setText( data.getLocale() );
    _title.setText( data.getTitle() );
    _vendor.setText( data.getVendor() );
    _homepage.setText( data.getHomepage() );
    _offlineAllowed.setChecked( data.getOfflineAllowed() );

    _descriptionPanel.populate( node );

public void saveChanges( JnlpUiTreeNode node )
    JnlpInformation data = (JnlpInformation) node.getNodeData();

    data.setLocale( _locale.getText() );
    data.setTitle( _title.getText() );
    data.setVendor( _vendor.getText() );
    data.setHomepage( _homepage.getText() );
    data.setOfflineAllowed ( _offlineAllowed.isChecked() );

    _descriptionPanel.saveChanges( node );

What are Java Client Pages?

Java Client Pages Example - 1/4

Java Client Pages Example - 2/4

Create Breadcrumbs


Look in:

#foreach( $entry in $entries )
 <a href="http://localhost:5050/venus?action=$action&dir=$entry.getAbsolutePath()">



Java Client Pages Example - 3/4

Create Icon Listing; Layout Table in Columns

#set ($columns = 3)

#foreach( $rows in $files.getTableRows( $columns ) )
  #foreach( $file in $rows )

     #if( $file.getLengthInt() < 3000 )
       <img src="$file.url">
       (no preview)

     <font size=+1>
       <a href="http://localhost:5050/venus?action=$action&file=$file.getAbsolutePath()">


Java Client Pages Example - Java Code - 4/4

HashMap args = new HashMap();
args.put( "files", new ColumnList( icons ) );
args.put( "action", action );

XulManager xul = XulManager.getXulManager();
String html = xul.getHTML( args, "portlet/iconFileList.html" );

Luxor - That's Just The Beginning

Luxor - Future Plans - The Road Ahead

Part III: Zero-Admin Apps - Web Start

What's Wrong with Applets?

Conclusion: Applets Are Pretty Much Dead, Applets = No Future

5 Years Later - What Is Web Start?

Rachel - Web Start XML Startup File (=JNLP descriptor) Example

<jnlp href="rachel.jnlp" codebase="">

    <title>Rachel Example Application</title>
    <vendor>Gerald Bauer</vendor>
    <homepage href=""/>
    <description>An open-source resource loading toolkit for Java Web Start that makes resource loading easy again.</description>
    <icon href="rachel.gif"/>
    <offline-allowed />

    <j2se version="1.3" />
    <jar href="lib/hello.jar" />
    <jar href="lib/crossref.jar" />
    <jar href="lib/javadoc.jar" />
    <jar href="lib/themes.jar" />
    <jar href="lib/rachel.jar" />
    <jar href="lib/log4j.jar" />
    <jar href="lib/skinlf-0.31.jar" />

    <all-permissions />

  <application-desc main-class="HelloRachel" />


Web Page - App Catalog Example (apps.html)

Download Progress Pop Up

JNLP XML Tags Overview

Tag Description
Root Tags
jnlp The jnlp file's one and only root .
Top Level Structural Tags
applet-desc [ param ] Describes how to startup a Java applet. Contains information about main class, parameters, size and more.
application-desc [ argument ] Describes how to startup a Java application. Contains information about the main class and arguments.
component-desc Specifies a component extension.
information Contains various descriptive information about the application such as title, vendor and homepage.
installer-desc Specifies an installer extension.
resources Contains an ordered set of resources that make up an application.
security Describes the application's security requirements.
Information Tags
description Describes the application in a single line, in a paragraph or in a couple of words for a tooltip.
homepage Contains a web address to the application's homepage.
icon Describes an icon/image for the application.
offline-allowed Indicates if the application can be started offline (that is, without a connection to the originating server).
vendor Contains the vendor's name.
title Contains the application's name.
Resources Tags
extension [ ext-download ] Describes a component or installer extension that is required to run the app.
j2se Describes a supported JRE version that the application can run on.
jar Describes a jar file.
nativelib Describes a jar containing native libraries (e.g. .dll, .so).
package Defines a relationship between a Java package or class name and a part.
property Describes a name/value pair that is available to the application as a system property.
Security Tags
all-permissions Indicates that the application needs full access to the local system and network.
j2ee-application-client-permissions Indicates that the application needs the set of permissions defined for J2EE client apps.

Web Start Cache - End of Classpath Hell

URL + Version = Unique ID
  • Jars using the same URL are shared between apps and downloaded only once.
  • Jars using the same name but different URLs are kept separate.

Open Source Web Start Projects

Alive and kicking

Dead or neglected

Web Start App Catalogs

Check out the following catalogs that list Web Start apps:

Web Start Links

FAQs - Answers, Answers, Answers

XUL Links

That's it - The Future Just Happened

Visit for more info