The Future of the Web: Rich Clients, Rich Browsers, Rich Portals

A Look at XUL, XForms, Curl, Rebol and other emerging technologies

Gerald Bauer (Chairman, CEO, CFO and CTO of Me, Myself & I, Inc.)
Vancouver XML Developers Association (VanX) Talk, March 2003


Table of Contents

Rich Clients, Rich Browsers, Rich Portals

Who is this guy?


Agenda - The Road Ahead


Why Rich Clients? Why Rich Browsers? Isn't Dynamic HTML (aka HTML, DOM, JavaScript) enough?


Rich Client/Browser Architecture: Beyond Hairballs and Spaghetti Code

One Language Can't Do It All. Prefer the single-purpose languages below to general-purpose languages such as Java, C# or Shark.

Building Block What for?
Why XHTML? Rich (Styled) Hypelinked Text
Why XUL (XML User Interface Language)? Rich Widget Set (such as menus, toolbars, forms, datagrids, trees, and so on)
Why SVG (Scalable Vector Graphics)? Rich 2D Graphics (such as charts, maps, logos, and so on)
Why XForms? Form Data Submission (XML In, XML Out), Auto-Fill, Pre-Fill, and more
Why CSS (Cascading Stylesheets)? Visual Styling for XHTML, XUL and SVG
Why Python? Scripting
Why XPath? XML Tree Node Addressing
Why SQL? Data Queries, Updates, Inserts, Deletes, etc.
Why String Tables? Internationalization
Why Velocity, XSL-T? Templates

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.


Celebrating 10 Years of HTML Forms

<form action="http://www.google.com/search" method="GET">
  <input type="text" name="q" />
  <input type="submit" value="Go" />
</form>

HTML Forms Widget Set (=Form Controls) Brush Up

Syntax Describtion
<textarea></textarea> Multi-line textbox
<select></select> Drop-Down listbox; (specify values using <option>)
<input type="text"> Single-line textbox
<input type="password"> Single-line masked textbox obscuring chars
<input type="checkbox"> Checkbox
<input type="radio"> Radio button
<input type="hidden"> Hidden value
<input type="image"> Image (auto-submits on mouse click)
<input type="button"> Button (triggers script on mouse click)
<input type="submit"> Button submitting form
<input type="reset"> Button clearing/reseting form
<input type="file"> Single-line textbox plus browse button to choose filename

HTML 4.0 Form Tags Additions

<fieldset> groups input controls (similar to <div>)
<label> assigns a label to an input control
<legend> assigns a caption to a fieldset/groupbox

Summary: Nothing New; Tags Improve Accessiblity


What's wrong with HTML Forms?


What are XForms?


XForms Widget Set (=Form Controls)

10 widgets; yes, that's all folks

XForms HTML Description
<input> <input type="text"> Single-line textbox; or if bound to datatype lets you enter date, time, and so on using a pop-up calendar or other helpers
<textarea> <textarea> Multi-line textbox
<secret> <input type="password"> Single-line masked textbox obscuring chars
<output> - Displays calculated, read-only text
<range> - Slider to "visually" select a value (e.g. volume control)
<upload> <input type="file"> Upload file or get data from scanner, digital camera, microphone, video or other device
<trigger> <button> Button
<submit> <input type="submit"> Submit form data
<select> <select multiple="true"> or <input type="checkbox"> Multiple choice (select zero, one or many options); offering three styles: minimal, compact and full (drop-down, list, checkboxes)
<select1> <select> or <input type="radio"> Single choice (must select one and one option only)

XForms In Action - Example

<html xmlns="http://www.w3.org/2002/06/xhtml2"
      xmlns:xforms="http://www.w3.org/2002/08/xforms/cr">
  <head>
    <title>XHTML plus XForms Example</title>
    <xforms:model id="search">
       <xforms:submission action="https://www.google.com/search" />
    </xforms:model>
  </head>
  ...
  <p>More than two billion pages in store</p>
  <xforms:input ref="q">
    <xforms:label>Search For:</xforms:label>
  </xforms:input>
  ...
  <xforms:submit>
    <xforms:label>Go</xforms:label>
  </xforms:submit>
  ...

XForms Goodies

Form data separated from form controls (that is, no hard-coded values)

Before (HTML): Value hard-coded in form control

<input type="text" value="Hello Vancouver">

After (XForms): XPath expression "binds" value from XML doc to form control


<greeting>Hello Vancouver</greeting>
...
<input ref="greeting" />

New form control attributes such as required, read-only, hint, alert, etc.

XML In, XML Out; form data submitted as structured data (aka XML)


XML In, XML Out - XForms Data Submission

Encoding

Transport


Advanced XForms


What's wrong with XForms?

Whatch your language - plain-English, please; no academese or jaron-filled mumbo jumbo

trigger what's wrong with button?
secret what's wrong with password?
relevant what's wrong with if?
instanceData how about just plain data?
model how about something more concrete such as form?

Markup bloat; don't overdo tags; allow attribute shortcuts

<trigger>
  <label>Touch Me</label>
</trigger>

vs.

<trigger label="Touch Me" />

XML fever; don't replace scripting with bloated markup

<trigger>
  <label>Click To Recalculate</label>
  <action ev:event="xforms-active">
    <recalculate/>
  </action>
</trigger>

vs.

<trigger label="Click To Recalculate" onclick="recalculate()" />

Drop namespaces; ditch the useless bloat from core markup

<html xmlns="http://www.w3.org/2002/06/xhtml2"
      xmlns:xforms="http://www.w3.org/2002/08/xforms/cr">
  <head>
    <title>XHTML plus XForms Mumbo Jumbo</title>
    <xforms:model id="search">
       <xforms:submission action="http://www.google.com/search" />
    </xforms:model>
  </head>
  ...

vs.

<html>
  <head>
    <title>XHTML plus XForms Cleaned Up</title>
    <form id="search" action="http://www.google.com/search" />
  </head>
  ...

XForms Past, Present, Future


XForms Links

W3C XForms Spec
http://www.w3.org/TR/xforms/

W3C XForms Site
http://www.w3.org/MarkUp/Forms/
Latest XForms News; Lists XForms Browsers; XForms Mailing List and more

Get Ready for XForms
http://www-106.ibm.com/developerworks/xml/library/x-xforms/
IBM DeveloperWorks Article by Joel Rivera and Len Taing (IBM Research Summer Interns), September 2002

What are XForms?
http://www.xml.com/pub/a/2001/09/05/xforms.html
xml.com Article by Micah Dubinko (XForms Spec Editor, Cardiff San Jose)

O'Reilly XForms Essentials Book in Progress
http://dubinko.info/writing/xforms/book.html
by Micah Dubinko (XForms Spec Editor, Cardiff San Jose); upcoming sometime in mid-2003; text also available under GNU Free Documentation License

XForms in Mozilla
http://bugzilla.mozilla.org/show_bug.cgi?id=97806
Bugzilla Bug# 97806 Tracks XForms Support In Mozilla


XHTML 2.0 Goodies

Links, Links, Everywhere

XHTML 2.0 has no more anchor (link) tag (that is, <a href="">). Instead you can turn every tag into a link using the href attribute.

Example: Hyperlinking Before Big Bang 2.0

<li>
  <a href="http://www.vanx.org">VanX</a>
</li>

Example: Hyperlinking After Big Bang 2.0

<li href="http://www.vanx.org">VanX</li>

XHTML 2.0 Style Hyperlinking In The Real-World

Usage Examples in Luxor XUL

<menuitem label="The Richmond Post" href="http://luxor-xul.sf.net/post" />
<menuitem label="XUL Tag Reference" href="chrome://tagref/index.html" target="help" />

or

<button label="About Me" href="http://vamphq.com/pam.html" />
<button label="Memory Usage" href="portal:memory" target="top" />

XHTML 2.0 Links

W3C XHTML 2.0 Working Draft
http://www.w3.org/TR/xhtml2/
W3C's Burn All Bridges (=Non-Backward Compatible/Legacy Free) Upcoming Official "HTML Killer" Scheduled for 2005 Includes SVG, XForms, XFrames and more

The Web's Future: XHTML 2.0: A Sneak Peek At The Changes
http://www-106.ibm.com/developerworks/xml/library/wa-xhtml/
IBM DeveloperWorks Article by Nicholas Chase (President Chase and Chase), September 2002


What is Curl?


First Impression: Curl In Action

{curl 2.0 applet}

Ciao Vancouver!

{bold Ciao Vancouver!}
{bold
  {italic Ciao Vancouver!}
}
{bold font-style="underline", Ciao Vancouver!}

Second Impression: User-Defined Styles

{curl 2.0 applet}

|| Define mytitle style
{define-text-format public mytitle as text with
   color="red",
   font-size=35pt,
   font-family="Verdana"}

|| Now use it
{mytitle Ciao Vancouver!}

Third Impression: UI and 2D Graphics: Pie Chart Example

{curl 2.0 applet}

{HBox spacing=4mm, background="beige",
   {EllipticalArcGraphic
      wedge-size=220degrees,
      height=5cm,
      width=5cm,
      color={FillPattern.get-blue},
      border-width=1pt,
      border-color={FillPattern.get-black}
   }
}

Last Impression: Curl Form

{import * from CURL.IO.HTTP}

{let name:TextField    = {TextField max-chars=50, value="Ogopogo" },
     address:TextField = {TextField max-chars=50, value="77 Okanaga Lake" },
     city:TextField    = {TextField max-chars=50, value="Kamloops" }
}

{define-proc {do-submit}:void

  let form-data:HttpFormData = {new HttpFormData}
  {form-data.append {new HttpFormStringParam, "name", name.value }}
  {form-data.append {new HttpFormStringParam, "address", address.value }}
  {form-data.append {new HttpFormStringParam, "city", city.value }}

  {{get-the-applet}.browse-url-form {url "./submit"}, form-data, method="post"}
}

{Dialog
  {table
     {row {cell Name:}      {cell {value name}}}
     {row {cell Address:}   {cell {value address}}}
     {row {cell City:}      {cell {value city}}}
     {row {cell colspan=2,
        {CommandButton label="Submit",
           {on Action do 
              {with-busy-cursor  
                  {do-sumbit}
              }
           }
        }
     }
  }
}

Curl Links

Official Curl Site
http://www.curl.com
Curl Surge Labs; US Start-up in Boston; MIT spinoff

Curl Breaker Web Zine
http://www.curlbreaker.com
Curl Online Magazine

Curl Examples
http://www.curlexamples.com
Curl Example Archive

Dmoz (Directory Mozilla) Curl Chapter
http://directory.google.com/Top/Computers/Programming/Languages/Curl/
More Curl Links

Books

Curl Bible
by Bruce Mount, Gary Gray and Nikhil Damle; 800 pages, John Wiley, ISBN: 0764549421, May 2002


What is Rebol?


First Impression: Rebol In Action

Commentary: Window with white background and image on top. If you click on the image, you browse to the Rebol website.

view layout [
    backcolor white
    image http://www.rebol.com/graphics/link.jpg [
        browse http://www.rebol.com
    ]
]

Rebol Links

Official Rebol Site
http://www.rebol.com

Dmoz (Directory Mozilla) Rebol Chapter
http://directory.google.com/Top/Computers/Programming/Languages/REBOL/
More Rebol Links

Books

Rebol For Dummies
by Ralph Roberts, 408 pages, John Wiley, ISBN: 0764507451, September 2000


Rich Client Example - Explore the Amazon

Amazon Browser - Thinlet XUL Edition

Robert Bajzet's Thinlet - the world's tiniest XUL engine squeezed into a 26 k jar - sports an Amazon browser that you can fire off using Web Start to browse the bookshelfs at Amazon.

Amazon Browser - Mozilla XUL Edition


Widget Galore - "Eclipse UI" Widget Set Sampling

Widgets, Widgets, Widgets - SWT (Standard Widget Toolkit)

Widget Comments
Button includes radio, toggle and checkbox
Canvas
Combo
Composite similar to box or panel or container
CoolBar, CoolItem similar to a toolbar
Group similar to a titled box or groupbox with caption
Label
List
Menu, MenuItem
ProgressBar
Sash similar to a splitter dividing a box into two
Scale similar to slider
ScrollBar
Shell similar to window or frame or dialog
Slider
TabFolder, TabItem similar to tabbox
Table, TableColumn, TableItem
Text includes single-line, multi-line and password
ToolBar, ToolItem
Tree, TreeItem

Misc Widgets: Caret, Tracker

Ready-Made Standard Dialogs: ColorDialog, DirectoryDialog, FileDialog, FontDialog, MessageBox, PrintDialog


Cross-Platfrom UI Toolkits

The Oldie

The Big Three: Classic Desktop OS

The Big Two: Modern Network OS


The Tk Story


The Qt Story


The wxWindows Story


The Gtk+ Story


Platforms: OS Galore

Classic Desktop OS

The Big Three

The Fringe

Modern Network OS

The Big Three

Mobile Devices OS


Cross-Platform UI Toolkits: Write Once, Run Anywhere

Pick Your OS (Beyond Windows)

Linux Mac Windows
Qt Yes Yes (Non-Free) Yes (Non-Free)
wxWindows Yes ? Yes
Gtk+ Yes ? So-So

Pick Your Language (Beyond C/C++)

Python Mono (C-Sharp) Java
Qt PyQt Qt# ?
wxWindows wxPython wxNet ?
Gtk+ PyGtk Gtk# ?

UI Toolkit Criteria:


XML for UIs - Qt Designer Example

XUL Version

<window id="Form1">
  <vbox>
    <label value="Luxor Rocks" />
    <hbox>
      <button id="PushButton1"  label="Big Time" />
      <button id="PushButton2"  label="Yup" />
    </hbox>
  </vbox>
</window>

Qt Designer XML UI Version

<UI>
<class>Form1</class>
<widget>
    <class>QDialog</class>
    <property stdset="1">
        <name>name</name>
        <cstring>Form1</cstring>
    </property>
    <property>
        <name>geometry</name>
        <rect>
            <x>0</x>
            <y>0</y>
            <width>206</width>
            <height>74</height>
        </rect>
    </property>
    <property>
        <name>caption</name>
        <string>Form1</string>
    </property>
    <widget>
        <class>QLayoutWidget</class>
        <property stdset="1">
            <name>name</name>
            <cstring>Layout2</cstring>
        </property>
        <property>
            <name>geometry</name>
            <rect>
                <x>10</x>
                <y>10</y>
                <width>170</width>
                <height>49</height>
            </rect>
        </property>
        <vbox>
            <property>
                <name>margin</name>
                <number>0</number>
            </property>
            <property>
                <name>spacing</name>
                <number>6</number>
            </property>
            <widget>
                <class>QLabel</class>
                <property stdset="1">
                    <name>name</name>
                    <cstring>TextLabel1</cstring>
                </property>
                <property>
                    <name>text</name>
                    <string>Luxor Rocks</string>
                </property>
            </widget>
            <widget>
                <class>QLayoutWidget</class>
                <property stdset="1">
                    <name>name</name>
                    <cstring>Layout1</cstring>
                </property>
                <hbox>
                    <property>
                        <name>margin</name>
                        <number>0</number>
                    </property>
                    <property>
                        <name>spacing</name>
                        <number>6</number>
                    </property>
                    <widget>
                        <class>QPushButton</class>
                        <property stdset="1">
                            <name>name</name>
                            <cstring>PushButton1</cstring>
                        </property>
                        <property>
                            <name>text</name>
                            <string>Big Time</string>
                        </property>
                    </widget>
                    <widget>
                        <class>QPushButton</class>
                        <property stdset="1">
                            <name>name</name>
                            <cstring>PushButton2</cstring>
                        </property>
                        <property>
                            <name>text</name>
                            <string>Yup</string>
                        </property>
                    </widget>
                </hbox>
            </widget>
        </vbox>
    </widget>
</widget>
</UI>

XML for UIs - Glade Example

XUL Version

<window id="window1">
  <vbox>
    <label value="Luxor Rocks"/>
    <hbox>
      <button id="button1" label="Big Time"/>
      <button id="button2" label="Yup"/>
    </hbox>
  </vbox>
</window>

Glade XML UI Version

<widget>
  <class>GtkWindow</class>
  <name>window1</name>
  <title>window1</title>
  <type>GTK_WINDOW_TOPLEVEL</type>
  <position>GTK_WIN_POS_NONE</position>
  <modal>False</modal>
  <allow_shrink>False</allow_shrink>
  <allow_grow>True</allow_grow>
  <auto_shrink>False</auto_shrink>

  <widget>
    <class>GtkVBox</class>
    <name>vbox1</name>
    <homogeneous>False</homogeneous>
    <spacing>0</spacing>

    <widget>
      <class>GtkLabel</class>
      <name>label1</name>
      <label>Luxor Rocks</label>
      <justify>GTK_JUSTIFY_CENTER</justify>
      <wrap>False</wrap>
      <xalign>0.5</xalign>
      <yalign>0.5</yalign>
      <xpad>0</xpad>
      <ypad>0</ypad>
      <child>
	<padding>0</padding>
	<expand>False</expand>
	<fill>False</fill>
      </child>
    </widget>

    <widget>
      <class>GtkHBox</class>
      <name>hbox1</name>
      <homogeneous>False</homogeneous>
      <spacing>0</spacing>
      <child>
	<padding>0</padding>
	<expand>True</expand>
	<fill>True</fill>
      </child>

      <widget>
	<class>GtkButton</class>
	<name>button1</name>
	<can_focus>True</can_focus>
	<label>Big Time</label>
	<relief>GTK_RELIEF_NORMAL</relief>
	<child>
	  <padding>0</padding>
	  <expand>False</expand>
	  <fill>False</fill>
	</child>
      </widget>

      <widget>
	<class>GtkButton</class>
	<name>button2</name>
	<can_focus>True</can_focus>
	<label>Yup</label>
	<relief>GTK_RELIEF_NORMAL</relief>
	<child>
	  <padding>0</padding>
	  <expand>False</expand>
	  <fill>False</fill>
	</child>
      </widget>
    </widget>
  </widget>
</widget>

Why XUL? Do More With Less (Lines of Code)

Productivity Case Study: Markup vs. Scripting vs. Hard-Core Programming

XUL version

<window title="Salve" onclosing="exit()">
  <button label="Ciao Vancouver" style="width: 200; height: 50;" onclick="exit()" />
</window>

Python version

import java.lang as lang
import javax.swing as swing

def exit( event ): 
  lang.System.exit(0)

frame = swing.JFrame( 'Salve', windowClosing=exit )
button = swing.JButton( 'Ciao Vancouver', preferredSize=(200,50), actionPerformed=exit )
frame.contentPane.add( button )
frame.pack()
frame.show()

Java version

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class CiaoVancouver extends JFrame
{
   public CiaoVancouver( String title )
   {
      super( title );

      addWindowListener( new WindowAdapter() {
         public void windowClosing( WindowEvent ev )
         {
            exit();
         }
      } );

      JButton button = new JButton( "Ciao Vancouver" ); 
      button.setPreferredSize( new Dimension( 200, 50 ) );
      button.addActionListener( new ActionListener() {
         public void actionPerformed( ActionEvent ev )
         {
            exit();
         }
      } );

      getContentPane().add( button );     
   }

   public void exit()
   {
      System.exit( 0 );
   }

   public static void main( String args[] )
   {
      CiaoVancouver frame = new CiaoVancouver( "Salve" );

      frame.pack();
      frame.show();
   }
}

C++ version Spare me the pain.

Assembler version Anyone?


Industry Giants At Work: Pushing Their Own Agenda

Who's pushing XUL? How about you. Join the Free World and help secure a rich internet for everyone.


Inside Redhell: What's the Politburo up to?

Internet Exploder Frozen Since 1999 - No New Features

Forget XUL Use Micropoly Windows Forms
Forget SVG Use Micropoly Windows GDI+
Forget XForms Use Micropoly Office InfoPath (XDocs)
Forget XHTML (2.0) Use Micropoly Office Word
Forget XML Build Tools Use Micropoly Visual Studio

and so on

Conclusio: New features added to Windows or Office using patentend, closed-source, single-vendor technology. Avoid XML formats use APIs or binary formats instead for maximum vendor lock-in.


Let a Thousand Browsers Bloom

You're special. Demand Your Own Browser.

Gecko Family

KHTML Family

Luxor Family


Project Eldorado - Gold, Gold, Gold - Kicking Off A New Stampede

Rich Browser Propelled by Luxor - Upcoming Fall 2003

How does Eldorado outshine existing Java browsers?


UI Toolkit Links

Gtk+ http://www.gtk.org

Trolltech Qt http://www.trolltech.com/products/qt

wxWindows http://www.wxwindows.org

Python Bindings

PyGtk http://www.daa.com.au/~james/pygtk

PyQt http://www.riverbankcomputing.co.uk/pyqt

wxPython http://www.wxpython.org

Tkinter http://www.python.org/topics/tkinter

Mono Bindings

Gtk# http://gtk-sharp.sourceforge.net

Qt# http://qtcsharp.sourceforge.net

wxNet http://wxnet.sourceforge.net

Java

Swing/JFC http://java.sun.com/products/jfc

SWT http://dev.eclipse.org/viewcvs/index.cgi/~checkout~/platform-swt-home/dev.html


UI Designer Links

Glade / Gtk+ http://glade.gnome.org

Qt Designer / Qt http://www.trolltech.com/products/qt/designer.html

Theodore / Thinlet http://www.carlsbadcubes.com/theodore


Background Reading - Articles Online

Tk

Charming Python: Tk programming in Python
http://www-106.ibm.com/developerworks/library/l-tkprg/
Tips for beginners using Python's GUI library by David Mertz, December 2000

An Introduction to Tkinter
http://www.pythonware.com/library/tkinter/introduction
by Fredrik Lundh, 1999

Qt

Qt and PyQt: An advanced GUI library for Python
http://www-106.ibm.com/developerworks/linux/library/l-qt/
by Boudewijn Rempt and David Mertz, February 2003

GUI Programming with Python: QT Edition
http://www.opendocs.org/pyqt
by Boudewijn Rempt, 2001

SWT

Using the Eclipse GUI outside the Eclipse Workbench, Part 1
http://www-106.ibm.com/developerworks/library/os-ecgui1/
Using JFace and SWT in stand-alone mode:Building a simple file explorer application by Adrian Van Emmenis, January 2003


That's it - The Future Just Happened

Visit http://luxor-xul.sourceforge.net for more info