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

Intro

Who is this guy?

Agenda

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

<xul>
  <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" />
    <separator/>
    <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" />
  </toolbar>
</xul>

What is available?

The Good

The Ugly

And many more

Bluestone's XwingML - Failed Early XUL Attempt

Example:

<XwingML>
  <JFrame name="MainFrame" title="Bluestone XMLEdit" image="icon.gif" x="10%" y="10%" width="80%" height="80%">
    <JMenuBar>
      <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"/>
        ...
    <JTabbedPane>
     <Tab title="XML">
       <JScrollPane>
        <JTextArea name="EditorArea" tabSize="3" fontName="Monospaced" fontSize="14"/>
       </JScrollPane>
     </Tab>
     <Tab title="DOM">
       <JScrollPane>
         <JTree name="DocumentTree" className="DOMTree">
 	 </JTree>
       </JScrollPane>
     </Tab>
    </JTabbedPane>
   </JSplitPane>
  </JFrame>
</XwingML>

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

<action>
<anim>
<border>
<button>
<checkbox>
<choice>
<command>
<componentref>
<displayurl>
<entry>
<icon>
 		<key>
<keyset>
<label>
<list>
<map>
<menu>
<menubar>
<menuitem>
<menupopup>
<menuref>
<menuseparator>
 		<panel>
<password>
<popup>
<portal>
<portlet>
<separator>
<text>
<textarea>
<toolbar>

Menu Example - Part 1 of 3

<xul>
 <menubar id="MAIN_MENUBAR">
  <menu id="file" label="File" accesskey="F">
   <menupopup>
    <menuitem action="new"
        label="New..."
        accesskey="N"
        key="new"
        icon="NEW_ICON" />
    <menuitem action="newApplication"
        label="New Application"
        accesskey="A"
        icon="BLANK_ICON" />
    <menuitem action="newApplet"
        label="New Applet"
        accesskey="P"
        icon="BLANK_ICON" />
    <menuitem action="newComponent"
        label="New Component"
        accesskey="C"
        icon="BLANK_ICON" />
    <menuitem action="newInstaller"
        label="New Installer"
        accesskey="I"
        icon="BLANK_ICON" />
    <menuseparator/>
    <menuitem action="open"
        label="Open..."
        accesskey="O"
        key="open"
        icon="OPEN_ICON" />
    <menuitem action="openUrl"
        label="Open URL..."
        accesskey="U"
        key="open-url"
        icon="BLANK_ICON" />
    <menuref id="RECENT_FILES"
        label="Open Recent File"
        icon="BLANK_ICON" />
    <menuseparator/>
    <menuitem action="save"
        label="Save"
        accesskey="S"
        key="save"
        icon="SAVE_ICON" />
    <menuitem action="saveAs"
        label="Save As..."
        accesskey="V"
        icon="BLANK_ICON" />
    <menuseparator/>
    <menuitem action="exit"
        label="Exit"
        accesskey="X"
        icon="EXIT_ICON" />
    </menupopup>
  </menu>

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" />

<keyset>
  <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" />
</keyset>

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()
  {
    _gui.exit();
  }
}

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">
  <menupopup>
    <displayurl label="Venus Application Publisher Home Page"
        url="http://www.vamphq.com"
        icon="BLANK_ICON" />
    <displayurl label="Venus Application Publisher Discussion Forum"
        url="http://groups.yahoo.com/group/vamp-feedback"
        icon="BLANK_ICON" />
    <displayurl label="Frequently Asked Questions (FAQ)"
        url="http://www.vamphq.com/faq.html"
        icon="BLANK_ICON" />

    <menuseparator/>

    <displayurl label="Java Web Start Home Page"
        url="http://java.sun.com/products/javawebstart"
        icon="BLANK_ICON" />
    <displayurl label="Java Web Start Discussion Forum"
        url="http://forum.java.sun.com/forum.jsp?forum=38"
        icon="BLANK_ICON" />
    <displayurl label="Java Web Start FAQ"
        url="http://java.sun.com/products/javawebstart/faq.html"
        icon="BLANK_ICON" />

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

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>

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">
  <layout>
    <table>
      <tr>
        <td component="LOCALE_LABEL" />
        <td component="LOCALE_INPUT" horz="MAX"/>
      </tr>
      <tr>
        <td component="TITLE_LABEL" />
        <td component="TITLE_INPUT" horz="MAX"/>
      </tr>
      <tr>
        <td component="VENDOR_LABEL" />
        <td component="VENDOR_INPUT" horz="MAX"/>
      </tr>
      <tr>
        <td component="HOMEPAGE_LABEL" />
        <td component="HOMEPAGE_INPUT" horz="MAX"/>
      </tr>
      <tr>
        <td/>
        <td component="OFFLINE_ALLOWED_INPUT"/>
      </tr>
      <tr>
        <td component="DESCRIPTION_PANEL" horz="MAX" vert="MAX" colspan="2"/>
      </tr>
    </table>
  </layout>

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>

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

<table><tr><td>

Look in:

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

<b>$current.getName()</b>

</tr></td></table>

Java Client Pages Example - 3/4

Create Icon Listing; Layout Table in Columns


#set ($columns = 3)

<table>
#foreach( $rows in $files.getTableRows( $columns ) )
  <tr>
  #foreach( $file in $rows )
    <td>

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

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

   </td>
  #end
   </tr>
#end
</table>

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="http://www.jenomics.de/vamp">

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

  <resources>
    <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" />
  </resources>

  <security>
    <all-permissions />
  </security>

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

</jnlp>

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.
Example: 
http://www.nasa.org/planet/venus.jar
http://www.olympus.gr/godess/venus.jar

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 http://www.vamphq.com for more info