Gerald Bauer (Chairman, CEO, CFO and CTO of Me, Myself & I, Inc.)
Vancouver XML Developers Association (VanX) Talk, March 2003
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 |
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.
<form action="http://www.google.com/search" method="GET"> <input type="text" name="q" /> <input type="submit" value="Go" /> </form> |
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 |
<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
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) |
<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> ... |
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)
Encoding
application/x-www-form-urlencoded
) only supports ASCII charsmultipart/form-data
supports binary data (e.g file uploads) and non-ASCII charsTransport
<group>
)<switch>
/<case>
)<repeat>
)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> ... |
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
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" /> |
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
{}
) instead of
angle brackets (<>
)
or round braces(()
).
{curl 2.0 applet} Ciao Vancouver! {bold Ciao Vancouver!} {bold {italic Ciao Vancouver!} } {bold font-style="underline", Ciao Vancouver!} |
{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!} |
|
{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} } } } } } } |
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
Curl Bible
by Bruce Mount, Gary Gray and Nikhil Damle;
800 pages, John Wiley, ISBN: 0764549421, May 2002
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 ] ] |
Official Rebol Site
http://www.rebol.com
Dmoz (Directory Mozilla) Rebol Chapter
http://directory.google.com/Top/Computers/Programming/Languages/REBOL/
More Rebol Links
Rebol For Dummies
by Ralph Roberts, 408 pages,
John Wiley, ISBN: 0764507451, September 2000
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
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
The Oldie
The Big Three: Classic Desktop OS
The Big Two: Modern Network OS
Classic Desktop OS
The Big Three
The Fringe
Modern Network OS
The Big Three
Mobile Devices OS
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:
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> |
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> |
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?
Who's pushing XUL? How about you. Join the Free World and help secure a rich internet for everyone.
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.
You're special. Demand Your Own Browser.
Gecko Family
KHTML Family
Luxor Family
Rich Browser Propelled by Luxor - Upcoming Fall 2003
How does Eldorado outshine existing Java browsers?
Gtk+ http://www.gtk.org
Trolltech Qt http://www.trolltech.com/products/qt
wxWindows http://www.wxwindows.org
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
Gtk# http://gtk-sharp.sourceforge.net
Qt# http://qtcsharp.sourceforge.net
wxNet http://wxnet.sourceforge.net
Swing/JFC http://java.sun.com/products/jfc
SWT http://dev.eclipse.org/viewcvs/index.cgi/~checkout~/platform-swt-home/dev.html
Glade / Gtk+ http://glade.gnome.org
Qt Designer / Qt http://www.trolltech.com/products/qt/designer.html
Theodore / Thinlet http://www.carlsbadcubes.com/theodore
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 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
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