Luxor: The "Linux Kernel" for Desktop Apps

Uniting XUL, SVG, HTML, Velocity, Web Start, XSL/T, Python and more

Gerald Bauer (Chairmain, CEO, CFO and CTO of Me, Myself & I, Inc.)
Vancouver XML Developers Association (VanX) Talk, July 2002

Table of Contents

Luxor Overview

Who is this guy?

Agenda - The Road Ahead

What is XUL?

XUL Vision

make building cross-platform user interfaces as easy as building web pages

-> no hard-coded, os-specific, toolkit-specific user interfaces (e.g. MFC, WindopeForms, Swing, Gtk+, etc.)
-> the answer is not yet another GUI API

use XML tags to create UIs for rich desktop apps

XUL Tag Sampling

Box Tags: <box>, <hbox>, <vbox>, <groupbox>, <caption>

Grid Tags: <grid>, <columns>, <column>, <rows>, <row>

Table Tags: <table>, <tr>, <td>

Tab Box Tags: <tabbox>, <tabs>, <tab>, <tabpanels>, <tabpanel>

Widget Tags: <button>, <checkbox>, <choice>, <label>, <spacer>, <text>, <image>, <gadget>

Menu Tags: <menubar>, <menu>, <menuref>, <menitem>, <displayurl>

Data Tags: <list>, <map>, <entry>

Portal Tags: <portal>, <portlet>

And Much More

First Impression - Xul In Action - Toolbar Example

<xul>

  <toolbar id="MAIN">

     <toolbarbutton command="COPY_FORM"
         label="Copy Form"
         icon="COPY_FORM"
         tooltip="Copy Form Data To Clipboard"
         accesskey="C" />

     <toolbarbutton command="PASTE_FORM"
         label="Paste Form"
         icon="PASTE_FORM"
         tooltip="Paste Form Data From Clipboard; Auto-Fill"
         accesskey="P" />

  </toolbar>

</xul>

What is a Rich Desktop App? Mind Your Language

Synonyms

(!) taboo word likely to shock and best avoided

Why Xul? Isn't Dynamic HTML (aka HTML, DOM, JavaScript) enough?

Excurs: What's wrong with Applets for rich zero-admin desktop apps?

Beyond DHTML/Javascript: Inside a Rich Desktop App

Real World Desktop App Example

Venus Application Publisher (Vamp)

Component Provider
HTML Browser Swing JEditorPane
HTTP Server Rachel (Open-Source, Ultra-Light Weight, Multi-Threaded HTTP Server)
Template Engine Apache Velocity, XSL-T
Portal Engine Luxor (Porlet API, Portal Markup)
XUL Motor Luxor (Nile)
Scripting Engine Jython (Python)
SVG 2D Graphics Apache Batik
Download/Upload Manager Homegrown (Upcoming)
Bookmark/History Manager Homegrown (Upcoming)
Themes, Skins, Look & Feels CSS, Skin L&F, Kunststoff L&F, Oyoaha L&F
Zero-Admin, Zero-Hassle, Always Up-To-Date Web Start (Single-Click Magic)

Xul Motors: The Big Three

Mozilla - Xul Granddaddy; runs on Mac OS, Linux, Solaris, FreeBSD, Irix, BeOS, HPUX, OS/2, BSD, and more

Luxor - Xul toolkit includes web server, portal engine, template engine, scripting interpreter and more

XML Windowing Toolkit (XWT) - Xul "Lite"; available as self-installing ActiveX browser plug-in

More Xul Motors: The Minor League

The Late HP 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>

Sun Java Bean Persistance - Java Rules, XML is not for Humans

Swing XML Java Bean Persistance Haystack: 

<object class="javax.swing.JPanel">
  <void method="add">
    <object id="button1" class="javax.swing.JButton"/>
  </void>
  <void method="add">
    <object class="javax.swing.JLabel">
      <void method="setLabelFor">
        <object idref="button1"/>
      </void>
    </object>
  </void>
</object>

Java Swing Hard-Core Version: 

JPanel panel1 = new JPanel();
JButton button1 = new JButton();
JLabel label1 = new JLabel();
panel1.add(button1);
panel1.add(label1);
label1.setLabelFor(button1);

XUL Contestant: 

<hbox>
  <button id="button1" />
  <label  for="button1" />   
</hbox>

And the winner is... Do I need to comment?

XUL Architecture - Beyond Hairballs and Spaghetti Code

Break UI into Four Parts

Xul Apps: Proof of the Pudding

Mozilla XUL World Wonder:

Komodo / Active State - Dev Studio for Perl, Python, XSL-T and more

Xul Apps Continued: Please, Touch Me

Luxor XUL Beauty Queen:

Venus Application Publisher (Vamp) / Boy Toys (including Hazel, Vanessa, Clare, Pam, Alice, and so on)

Menu Example

<xul>

 <menubar id="MAIN">

  <menu id="View" label="View" accesskey="V">

   <menuitem id="ResetTransform"
             label="Initial View"
             icon="BLANK"
             accesskey="T"
             key="ResetTransform"
             command="ResetTransformAction" />

   <menuitem id="ZoomIn"
             label="Zoom In"
             icon="ZOOMIN"
             accesskey="I"
             key="ZoomIn"
             command="ZoomInAction" />

   <menuitem id="ZoomOut"
             label="Zoom Out"
             icon="ZOOMOUT"
             accesskey="O"
             key="ZoomOut"
             command="ZoomOutAction" />
     
   <menuseparator/>
 
   <menuref id="UseStylesheet" label="Use Stylesheet" icon="BLANK" />

   <menuseparator/>

   <menuitem id="PreviousTransform"
             label="Previous Transform"
             icon="BLANK"
             accesskey="P"
             key="PreviousTransform"
             command="PreviousTransformAction" />

   <menuitem id="NextTransform"
             label="Next Transform"
             icon="BLANK"
             accesskey="N"
             key="NextTransform"
             command="NextTransformAction" />

   <menuitem id="SetTransform"
             label="Transform"
             icon="BLANK"
             accesskey="S"
             key="SetTransform"
             command="SetTransformAction" />
      
   <menuseparator/>

   <menuitem id="ThumbnailDialog"
             label="Thumbnail"
             icon="BLANK"
             accesskey="M"
             key="ThumbnailDialog"
             command="ThumbnailDialogAction" />

   <menuitem id="ViewSource"
             label="View Source"
             icon="SOURCE"
             accesskey="V"
             key="ViewSource"
             command="ViewSourceAction" />
    
  </menu>

 </menubar>

</xul>

Menu Example Continued: Icons and Shortcuts

<xul>
  <icon id="BLANK"    ref="images/16x16/blank.gif" />
  <icon id="ZOOMIN"   ref="images/16x16/zoomin.gif" />
  <icon id="ZOOMOUT"  ref="images/16x16/zoomout.gif" />
  <icon id="SOURCE"   ref="images/16x16/source.gif" />

  <keyset>
     <key id="ResetTransform"    modifiers="control" key="T" />
     <key id="ZoomIn"            modifiers="control" key="I" />
     <key id="ZoomOut"           modifiers="control" key="O" />
     <key id="PreviousTransform" modifiers="control" key="K" />
     <key id="NextTransform"     modifiers="control" key="L" />
     <key id="SetTransform"      modifiers="control" key="S" />
     <key id="ThumbnailDialog"   modifiers="control" key="Y" />
     <key id="ViewSource"        modifiers="control" key="U" />
  </keyset>   
</xul>

Menu Example Benefits: XUL vs Java

XML Version: 

<menuitem id="ZoomIn"
   label="Zoom In"  icon="ZOOMIN"  accesskey="I"
   key="ZoomIn" command="ZoomInAction" />

Java Version: 

JMenuItem mi = new JMenuItem( "Zoom In" );
mi.addActionListener( cmdZoomIn );
mi.setMnemonic( 'I' );
mi.setAccelerator( KeyStroke.getKeyStroke( "control I" ) );
mi.setIcon( new ImageIcon( "images/16x16/zoomin.gif" ) );

DisplayURL Menu Example 

<menu id="help" label="Help" accesskey="H">

    <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-user"
        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 command="about"
        label="About..." icon="ABOUT_ICON" />
    
  </menu>

Target Attribute - Display in Built-In or Household Browser

Choice Example

<list id="card">
  <entry value="American Express" />
  <entry value="Discover" />
  <entry value="Master Card" />
  <entry value="Visa" />
</list>

<vbox>
  <label value="Choose a method of payment:" />
  <choice list="card" />       
</vbox>

<vbox>
  <label value="Choose a method of payment:" />
  <choice list="card" type="radio" />       
</vbox>

Multiple Choice Example

<list id="activity">
  <entry value="Aerobics" />
  <entry value="Aikido" />
  <entry value="Basketball" />
  <entry value="Bicycling" />
  <entry value="Golfing" />
  <entry value="Hiking" />
</list>

<vbox>
  <label value="Choose the activities you enjoy:" />
  <mchoice list="activity" />
</vbox>

<vbox>
  <label value="Choose the activities you enjoy:" />
  <mchoice list="activity" type="list" />
</vbox>

Box Layout Example

<list id="radio">
  <entry value="Mocha" />
  <entry value="Espresso" />
  <entry value="Cappucino" />
</list>

<vbox>

  <hbox>
    <label value="Text field:" />
    <text id="name" value="Xul Rocks" cols="40" />
  </hbox>

  <hbox>
    <label value="Text area:" />
    <textarea rows="3" cols="20" />
    <label value="Password:" />
    <password cols="10" value="secrect" />
  </hbox>   

  <hbox>
    <label value="Radio buttons:" />
    <choice list="radio" type="radio" />
  </hbox>

  <hbox>
    <label value="Check boxes:" />
    <checkbox label="Cream" />
    <checkbox label="Sugar" />
    <checkbox label="Milk" />
    <checkbox label="Chocolate" />
  </hbox>

</vbox>

Portal Example

<portal id="select-icon">
  <portlet id="head"/>
  <div align="center">
    <table border="0" width="90%" cellspacing="0" cellpadding="0">
      <tr><td>     

        <portlet id="user-banner" />
        <portlet id="title"/>
        <portlet id="directory-breadcrumb" />
        <portlet id="icon-file-list" />
        <portlet id="directory-list" />
        <portlet id="file-root-list" />

      </td></tr>
    </table>
  </div>
</portal>

Luxor Xul Design Principles - Freedom, Choice, Excellence

Five Freedoms - Xul Charter

Luxor Combos - Pick and Choose

Runtime, Language / GUI Toolkit / Scripting

Walled Garden Deja Vu - The HTML Story Repeats Itself with XUL

Vendors push their own rich desktop app APIs hoping to lock-in a horde of suckers

Who is pushing Xul? How about you? Join the Free World.

XML is not ... / The "Golden Hammer" Fallacy

Golden Hammer - When you have a hammer in your hand, everything starts to look like a nail.

Don't get swamped away in the XML craze. XML has limits and is not the magic bullet that will solve everything from world hunger, to peace in the Middle East to folding your laundry and cleaning your carpet.

What's wrong with Javascript? Javascript vs. Python

Python's "object-based" subset is roughly equivalent to JavaScript. Like JavaScript (and unlike Java), Python supports a programming style that uses simple functions and variables without engaging in class definitions. However, for JavaScript, that's all there is. Python, on the other hand, supports writing much larger programs and better code reuse through a true object-oriented programming style, where classes and inheritance play an important role.

-- Guido van Rossum

Javascript's syntax is too complicated for casual use: Curly brackets, semicolons, and more

Summary: Javascript is too hard for beginners and too impotent for programmers.

DOM = Death by cOMmittee

JDOM Mission: There is no compelling reason for a Java API to manipulate XML to be complex, tricky, unintuitive, or a pain in the neck. JDOM is both Java-centric and Java-optimized. It behaves like Java, it uses Java collections, it is completely natural API for Java developers.

The Death of the General Purpose Language

Beyond Hairballs and Spaghetti Code.

Prefer the single-purpose languages below to general-purpose languages such as Java, C# or Shark.

Xul vs. XForms

Xul is to XForms what the USA is to Texas or what Canada is to Quebec.

Luxor will include a cleaned-up XForms engine.

Tags not found in XForms: <tree>, <datagrid>, <menubar>, <toolbar>, and many more

Modul-Mania: Luxor Building Blocks

XUL Benefits

Hello Web Start - Single-Click App Launcher Magic

Web Start XML Startup File (aka JNLP File)

Example: 

<jnlp href="venus.jnlp" codebase="http://www.jenomics.de/vamp">

  <information>
    <title>Venus Application Publisher</title>
    <vendor>Gerald Bauer</vendor>
    <homepage href="http://www.vamphq.com"/>
    <description>A user-friendly tool to help you package, sign and publish Java Network Launching Protocol (JNLP) apps.</description>
    <icon href="venus.gif"/>
    <offline-allowed />
  </information>

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

  <resources>
    <j2se version="1.4 1.3" />
    <jar href="lib/venus.jar" />
    <jar href="lib/luxor.jar" />
    <jar href="lib/bcel.jar" />
    <jar href="lib/kunststoff-1.11.jar" />
    <jar href="lib/velocity-1.1.jar" />
    ...
    <jar href="lib/log4j.jar" />
    <jar href="lib/skinlf-1.1.jar" />
    <jar href="lib/getopt108.jar" />
  </resources>

  <application-desc main-class="venus.Tool" />

</jnlp>

Web Start In Action: Start Me Up

Web Start downloads all required Jars from Web Server

Download Vamp

Web Start In A Nutshell

Secure One-Click Startup From Any Browser, For Any Platform, From Anywhere.

Xul Library: Books for the Beach

Essential Xul Programming - by Vaughn Bullard, Kevin Smith and Michael Daconta (July 2001); covers the whole Mozilla Xul machinery including CSS, XBL and RDF (448 pages)

Creating Applications with Mozilla - upcoming O'Reilly Xul thriller (September 2002) by David Boswell, Brian King, Ian Oeschger, Pete Collins and Eric Murphy (480 pages)

XUL Links

Web Start Links

Web Start/JNLP

FAQs - Answers, Answers, Answers

That's it - The Future Just Happened

Visit http://www.vamphq.com or http://luxor-xul.sourceforge.net for more info