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

Beyond HTML: A Look at Markup Languages For Creating Rich "Classic Desktop-Style" UIs

Gerald Bauer (Chairman, CEO, CFO and CTO of Me, Myself & I, Inc.)
FH Hagenberg Talk, Austria, May 2004


Table of Contents

A Look at Markup Languages For Creating Rich "Classic Desktop-Style" UIs

Who is this guy?

Gerald Bauer

Agenda - The Road Ahead


What is XUL?

XUL Logo

XUL Vision

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

use XML tags and CSS stylesheets to create UIs for rich desktop apps


Lines of Code Benchmark: MFC vs. WindowsForms vs. XUL

MFC Contestant

// HelloMFC.H

class CSimpleApp : public CWinApp
{
  public:
    virtual BOOL InitInstance()
    {
      m_pMainWnd = new CSimpleFrame;  
      m_pMainWnd->ShowWindow( m_nCmdShow );
      m_pMainWnd->UpdateWindow();
 
      return TRUE; 
   }
};

class CSimpleFrame:public CFrameWnd
{
  public:
    CSimpleFrame()
    {
      Create( NULL, "Hello MFC" );
    }
  protected:
    DECLARE_MESSAGE_MAP();
    afx_msg void OnPaint();
};
--------------------------------------------
// HelloMFC.CPP

CSimpleApp helloApp;

BEGIN_MESSAGE_MAP( CSimpleFrame, CFrameWnd )
  ON_WM_PAINT()
END_MESSAGE_MAP() 

void CSimpleFrame::OnPaint()
{ 
  CPaintDC dc( this );
  dc.TextOut( 200, 200, "Hello World from MFC" );
}              

Windows Forms Contestant

using System;
using System.Windows.Forms;

public class SimpleForm : Form 
{
  private Label label1;

  public SimpleForm() 
  { 
    label1 = new Label();
    label1.Text = "Hello World from Windows Forms";
    Controls.Add( label1 );
  }
  [STAThread()]
  static void Main() {
    Application.Run(new SimpleForm());	
  }  
}

XUL Contestant

<window>
  <label value="Hello World from XUL" />
</window>

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


XUL Architecture - Beyond Hairballs and Spaghetti Code

Break UI into Four Parts


One Language Can't Do It All: Beyond Hairballs and Spaghetti Code

The Death of General Purpose Languages and Monolithic Applications.

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


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.


XUL Tag Sampling

Layout/Box Tags: <hbox>, <vbox>, <groupbox>, <tabbox> <table>

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

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

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

Portal Tags: <portal>, <portlet>

And Much More


First Impression - XUL In Action - Counter Example

<xul>
  <vbox id="COUNTER">
   <groupbox>
     <caption label="Counter"/>
     <textbox id="DISPLAY" 
           style="align: center; color: yellow; background: black; font: 24 bold monospace;" />
   </groupbox>
   <hbox>
     <button label="Dec (-)"  command="dec"   style="width: 90px" />
     <button label="Clear"    command="clear" style="width: 90px" />
     <button label="Inc (+)"  command="inc"   style="width: 90px" />
   </hbox>
  </vbox>
</xul>

Man vs. Machine - XUL (XML UI Language) vs. General All-Purpose XML Formats

Sun Java Bean Swing XML Persistance Haystack (Bad):

<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 (Good)

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

Second Impression - XUL In Action - Calculator Example

<xul>
  
  <window id="window" style="width: 640; height: 400;" 
    title="Xul Challenge 2004 Calculator Example" icon="CALC" >

    <menubar id="MAIN">

      <menu id="Edit" label="Edit" accesskey="E">
        <menuitem id="EditCopy" label="Copy"
	       accesskey="C" key="EditCopy" command="EditCopy" />
	       
        <menuitem id="EditPaste" label="Paste"
		accesskey="P" key="EditPaste" command="EditPaste" />
      </menu>
  
      <menu id="Help" label="?" accesskey="?">
         <menuitem id="About"  label="About..."  accesskey="A" command="About" />
      </menu>
   
   </menubar>

  <vbox id="calculator">
   <hbox>
     <textbox id="display" 
           style="align: right; color: yellow; background: black; font: 22 bold monospace;" />
   </hbox>
   <hbox>
     <button label="C"  command="C" style="width: 100px"/>
     <button label="CE" command="C" flex="1"/>
   </hbox>
   <hbox>
     <button label="7" command="7" key="digit7" style="width: 50px"/>
     <button label="8" command="8" key="digit8" style="width: 50px"/>
     <button label="9" command="9" key="digit9" style="width: 50px"/>
     <button label="/" command="/" key="div"    style="width: 50px" flex="1"/>
   </hbox>
   <hbox>
     <button label="4" command="4" key="digit4" style="width: 50px"/>
     <button label="5" command="5" key="digit5" style="width: 50px"/>
     <button label="6" command="6" key="digit6" style="width: 50px"/>
     <button label="*" command="*" key="mul"    style="width: 50px" flex="1"/>
   </hbox>
   <hbox>
     <button label="1" command="1" key="digit1" style="width: 50px"/>
     <button label="2" command="2" key="digit2" style="width: 50px"/>
     <button label="3" command="3" key="digit3" style="width: 50px"/>
     <button label="-" command="-" key="sub"    style="width: 50px" flex="1"/>
   </hbox>
   <hbox>
     <button label="0" command="0" key="digit0" style="width: 50px"/>
     <button label="." command="." key="dot"    style="width: 50px"/>
     <button label="+" command="+" key="add"    style="width: 50px"/>
     <button label="=" command="=" key="enter"  style="width: 50px" flex="1"/>
   </hbox>
  </vbox>

  </window>
</xul>

Third Impression - XUL In Action - Alternative Calculator Example

<MyXaml>
  <Form Name="AppMainForm"
        Text="CalcIt!"
        StartPosition="CenterScreen"
        Size="170, 230"
        FormBorderStyle="FixedSingle">

    <Style def:Name="ButtonStyle">
      <StyleProperties>
	    <PropertyStyle TextAlign="MiddleCenter"/>
	    <PropertyStyle Size="30, 28"/>
	    <PropertyStyle FlatStyle="System"/>
	    <PropertyStyle Font="MS Sans Serif, 10pt, style=Bold"/>
	  </StyleProperties>
    </Style>

    <Style def:Name="NumberStyle" BasedOn="{ButtonStyle}">
      <StyleProperties>
	    <PropertyStyle Click="OnDigit"/>
	  </StyleProperties>
    </Style>

    <Style def:Name="OpStyle" BasedOn="{ButtonStyle}">
      <StyleProperties>
	    <PropertyStyle Width="60"/>
	  </StyleProperties>
    </Style>

    <Menu>
      <MenuItems>
        <MenuItem Text='&Edit'>
          <MenuItems>
            <MenuItem Text='Copy' ShortcutText='Ctrl+C' Shortcut='CtrlC' Click="OnCopy"/>
            <MenuItem Text='Paste' ShortcutText='Ctrl+V' Shortcut='CtrlV' Click="OnPaste"/>
          </MenuItems>
        </MenuItem>
        <MenuItem Text='&About' Click="OnAbout"/>
      </MenuItems>
    </Menu>

    <Controls>
      <Panel SubForm="Clear" Location="0, 0" Dock="Top" Height="30"/>
      <TextBox Name="Results"
               Dock="Top"
               Height="25"
               Text="0.00" 
               TextAlign="Right" 
               BackColor="Black" 
               ForeColor="Yellow" 
               Font="Microsoft Sans Serif, 10pt, style=Bold"/>
      <Panel SubForm="KeyPad" Location="3, 55" Size="93, 123"/>
      <Panel SubForm="Operations" Location="98, 55" Size="63, 123"/>
    </Controls>
  </Form>

  <Panel Name="Clear">
    <Controls>
      <Button Style="{ButtonStyle}" Text="C" Location="3, 0" Width="60" Click="OnClear"/>
      <Button Style="{ButtonStyle}" Text="CE" Location="63, 0" Click="OnClearEntry"/>
      <Button Style="{ButtonStyle}" Text="=" Location="98, 0" Width="60" Click="OnEqual"/>
    </Controls>
  </Panel>
  
  <Panel Name="KeyPad">
    <Controls>
      <Button Text="7" Location="0, 0" Style="{NumberStyle}"/>
      <Button Text="8" Location="30, 0" Style="{NumberStyle}"/>
      <Button Text="9" Location="60, 0" Style="{NumberStyle}"/>
      <Button Text="4" Location="0, 30" Style="{NumberStyle}"/>
      <Button Text="5" Location="30, 30" Style="{NumberStyle}"/>
      <Button Text="6" Location="60, 30" Style="{NumberStyle}"/>
      <Button Text="1" Location="0, 60" Style="{NumberStyle}"/>
      <Button Text="2" Location="30, 60" Style="{NumberStyle}"/>
      <Button Text="3" Location="60, 60" Style="{NumberStyle}"/>
      <Button Text="0" Location="0, 90" Style="{NumberStyle}"/>
      <Button Text="." Location="60, 90" Style="{NumberStyle}"/>
    </Controls>
  </Panel>  
  
  <Panel Name="Operations">
    <Controls>
      <Button Text="+" Location="0, 0" Style="{OpStyle}" Click="OnAdd"/>
      <Button Text="-" Location="0, 30" Style="{OpStyle}" Click="OnSubtract"/>
      <Button Text="*" Location="0, 60" Style="{OpStyle}" Click="OnMultiply"/>
      <Button Text="/" Location="0, 90" Style="{OpStyle}" Click="OnDivide"/>
    </Controls>
  </Panel>
  
  <Form Name="About"
		StartPosition="CenterScreen"
        Size="220, 90"
        FormBorderStyle="FixedSingle">
    <Controls>
      <Label Text="XUL Grand Coding Challenge 2004" Location="0, 0" Size="220, 20" TextAlign="MiddleCenter"/>
      <Label Text="Simple Calculator Demonstration" Location="0, 30" Size="220, 20" TextAlign="MiddleCenter"/>
    </Controls>
  </Form>
</MyXaml>

The XUL/XUI/XAML Naming Debate

XUL - XML UI Language, eXtensible UI Language

XUI - XML UI, eXtensible UI

XAML - eXtensible Application Markup Language

XUL, XUI and XAML are generic terms like RAD, IDE, GUI, DOM, MVC or IDL and *not* trademarks like Amazon (TM), Google (TM), Flash (TM) and so on.

Mozilla XUL != Luxor XUL != Thinlet XUL != Microsoft XUL != Macromedia XUL


XML UI Languages & Acronyms Abound


Why are there so many XUL/XML UI formats?

It's impossible for everyone to agree on a common markup language for UIs.

Who will control the gold standard?

There's no money in open royality-free standards for vendors.

Q: Why doesn't Microsoft invest in open royality-free standards?

Robert Scoble (Microsoft Tech Evangelist): We're not a charity. We are investing billions of dollars in our technology and our shareholders want a return on investment.

2847 Microsoft patents and counting.


Industry Giants At Work

Who will own/control the next-gen universal client/browser (aka "HTML killer")?

Microsoft:

Adobe:

Sun:

IBM:

Macromedia:

Microsoft

XAML - eXtensible Application Markup Language
Longhorn (Next Version of Windows/Windows 2006)/Avalon (Code-Name For Windows Graphics Kernel)

WFML - Windows Forms Markup Language
Windows Forms (.Net)

Office InfoPath

Adobe

XDP (XML Data Package)
Acrobat Reader

IBM

RCPML - Rich Client Platform Markup Language
Lotus Workplace (Eclipse)

Macromedia

Flex/MXML - (Flash) MX Markup Language
Flash Player

Sun

JDNC/JCCL - Java Desktop Network Components/Java Component Configuration Language
Java Runtime


What about the W3C?

W3C Logo

Web Forms 2.0 Spec - Work In Progress Sponsored by Opera; XForms Alternative


The Five Freedoms of the XUL Charter


Free, Open Source XUL Projects

Mozilla
http://www.mozilla.org
Xul Granddaddy; runs on Mac OS, Linux, Solaris, FreeBSD, Irix, BeOS, HPUX, OS/2, BSD, and more

Luxor Logo

Luxor
http://luxor-xul.sourceforge.net
Xul toolkit includes web server, portal engine, template engine, scripting interpreter and more; GNU General Public License (GPL); Headed by Gerald Bauer

SwiXml
http://www.swixml.org
Tiny (less than 30k) XUL Motor in Java for creating Swing UIs for apps or applets; Apache-Style License; Headed By Wolf Paulus

MyXAML
http://www.myxaml.com
XUL/XAML toolbox for Mono/DotGNU/.Net; GNU General Public License (GPL); Headed by Marc Clifton

Jazilla
http://jazilla.sourceforge.net
Reborn Mozilla Browser Clone In Java Includes XUL Motor named JzXUL (forked off from jXUL); Mozilla Public License (MPL); Headed by Mathew McBride

Xoetrope XUI
http://xui.sourceforge.net
XUL motor in Java for building AWT UIs running on Java 1.1.8 and up; Artistic License; Headed by Luan O'Carroll

Thinlets
http://www.thinlet.com
Tiny XUL Motor in Java (less than 30k); designed for applets or mobile devices; runs even on Java 1.1; no Swing required; GNU Lesser Public License (LGPL); Headed By Robert Bajzat;

Ibex (formerly XWT - XML Windowing Toolkit)
http://www.xwt.org
Xul "Lite"; available as self-installing ActiveX browser plug-in; developed in Java; GNU General Public License (GPL); Headed By Adam Megacz

Beryl Logo

Beryl
http://xmlgui.tigris.org
XUL motor in Java for building Swing UIs; includes UI designer; GNU Lesser General Public License (LGPL); headed by Jakob Wenzel

Purnama XUI
http://geekkit.bcit.ca/xui/web
XUL motor in Java for building Swing UIs; headed by Arron Ferguson

Renaissance
http://www.gnustep.it/Renaissance
XUL motor that lets you build UIs for GNUStep; headed by Nicola Pero

JellySwing
http://jakarta.apache.org/commons/jelly/libs/swing
Jelly Add-On/Taglib For Building Swing UIs; Apache License; Headed By James Strachan (of dom4j, jaxen and more fame)

JellySWT
http://jakarta.apache.org/commons/jelly/jellyswt.html
Jelly Add-On/Taglib For Building SWT UIs; Apache License; Headed By James Strachan

and many more


XUL Grand Coding Challenge 2004

Helps you compare XUL/XUI/XAML/XForms toolkits/parsers/players/etc; Started about a week ago and will run for four weeks (until mid-May 2004)

2 challenges, 15 different XUL/XUI/XAML/XForms versions

Java

.Net/C#

Flash/ActionScript

ActiveX

More @ http://xul.sourceforge.net/challenge.html


MyXaml Counter Sample

<MyXaml>
  <Form Name="AppMainForm"
        Text="XUL Challenge 2004"
        StartPosition='CenterScreen'
        Size="256, 144"
        FormBorderStyle="FixedSingle">
    <Style def:Name="ButtonStyle">
      <StyleProperties>
	    <PropertyStyle FlatStyle="System"/>
	    <PropertyStyle Size="72, 25"/>
      </StyleProperties>
    </Style>
    <Controls>
      <GroupBox Name="GroupBox1" Text="Counter" Location="8, 8" Size="232, 96" FlatStyle="System">
        <Controls>
          <TextBox Name="TextBox1"
                   Text="0" 
                   Location="8, 24" 
                   Size="216, 23" 
                   TextAlign="Center" 
                   BackColor="Black" 
                   ForeColor="Yellow" 
                   Font="Microsoft Sans Serif, 10pt, style=Bold"/>
          <Button Name="Button1" Text="Dec(-)" Location="8, 56" Style="{ButtonStyle}" Click="OnDec"/>
          <Button Name="Button2" Text="Clear" Location="80, 56" Style="{ButtonStyle}" Click="OnClear"/>
          <Button Name="Button3" Text="Inc(+)" Location="152, 56" Style="{ButtonStyle}" Click="OnInc"/>
        </Controls>
      </GroupBox>
    </Controls>
  </Form>
</MyXaml>

Jazilla Counter Sample

<window title="Xul Challenge 2004 Counter Example">
  <script type="text/javascript">
    var current = 0; // Start off with a default of 0
    function update() {
      var display = document.getElementById("DISPLAY");
      display.setAttribute("value", current.toString());
    }
  </script>
  <vbox id="COUNTER">
    <groupbox>
       <caption label="Counter"/>
       <textbox id="DISPLAY" disabled="true" value="0"/>
    </groupbox>
    <hbox>
      <button label="Dec (-)"  command="dec"   style="width: 90px" 
          oncommand="current = current - 1; update();"/>
      <button label="Clear"    command="clear" style="width: 90px" 
          oncommand="current = 0; update();"/>
      <button label="Inc (+)"  command="inc"   style="width: 90px" 
          oncommand="current = current + 1; update();"/>
    </hbox>
  </vbox>
</window>

xWidglets Counter Sample

<window name="COUNTER" width="353" height="147" x="258" y="206" 
  QuitOnClose="true" PosAndSize="true" Tiled="false" BackgroundColor="F9F9F0" 
  border="Standard" titlebar="true" title="COUNTER">
  <Properties>
   <Class value="Window"/>
   <Description value=""/>
   <Events>
     <INIT><![CDATA[
       var control = new SysControl() ;
       var win = control.getWindow("COUNTER");
       var entry = control.getWidget(win,"ENTRYFIELD00001");
       entry.setText("0");
       var inc=0
       inc++;]]>
     </INIT>
   </Events>
   <MenuBar show="false"/>
  </Properties>

  <Controls>
   <Button Text="Clear" name ="BUTTON00003" number ="3" width ="103" 
     height ="23" x ="118" y ="71" opaque="true" contentAreaFilled="true" 
     fontName="Comic Sans MS" fontSize="16" fontStyle="plain" hPosText="0" 
     vPosText="0">
     <Events>
       <EXECUTED><![CDATA[
         inc=0;
         entry.setText(inc);]]>
       </EXECUTED>
     </Events>
   </Button>
   <Button Text="(+) INCR " name ="BUTTON00002" number ="2" width ="105" 
     height ="23" x ="223" y ="71" foreground="000000" opaque="true" 
     contentAreaFilled="true" fontName="Comic Sans MS" fontSize="16" 
     fontStyle="plain" hPosText="0" vPosText="0" Gradient="true" GradientType="6" 
     GradientForm="HORIZONTAL" GradientFirst="3333FF" GradientSecond="FFFFFF">
     <Events>
       <EXECUTED><![CDATA[         
         entry.setText(++inc);]]>
       </EXECUTED>
     </Events>
   </Button>
   <GroupBox text="Counter" name ="GROUPBOX00001" number ="1" width ="326" 
     height ="102" x ="8" y ="2" fontName="SansSerif" fontSize="12" 
     fontStyle="plain" foreground="003333" background="FFFFFF" opaque="false" 
     justification="3" />
   <Button Text="DECR (-)" name ="BUTTON00001" number ="1" width ="101" 
     height ="23" x ="15" y ="71" opaque="true" contentAreaFilled="true" 
     fittosize="true" fontName="Comic Sans MS" fontSize="16" fontStyle="plain" 
     hPosText="0" vPosText="0" Gradient="true" GradientType="5" 
     GradientForm="HORIZONTAL" GradientFirst="0000FF" GradientSecond="FFFFFF">
     <Events>
       <EXECUTED><![CDATA[
         entry.setText(--inc);]]>
       </EXECUTED>
     </Events>
   </Button>
   <EntryField  name ="ENTRYFIELD00001" number ="1" width ="311" height="44" 
     x="16" y="22" NumberOfCharacters="55" fontName="Arial" 
     fontSize="38" fontStyle="plain" justification="0" type="0" lockText="true" 
     controlTab=" " locale="FR" foreground="00CCCC" background="000000"/>
  </Controls>
</window>

XMLFace Counter Sample

Swing UI: (Java)

Eclipse UI: (Java)

Windows Forms UI (.Net/C#)

<xface:application
	xmlns:xface="http://www.xesoft.com/xmlns/xface"
	xmlns:counter="http://www.xesoft.com/xmlns/examples/counter"
	id="counter"
	bundle="application">

	<xface:window id="main" width="300" height="110" label="counter">

		<!-- Define the panel layout scheme to be used -->
		<xface:relative-layout constraints="main.layout.properties"/>

		<!-- Define the controls to be added to the panel -->
		<xface:label id="label_count"/>
		<xface:text-input id="count" defaultValue="0" editable="false"/>

		<xface:button id="decrease"/>
		<xface:button id="clear"/>
		<xface:button id="increase"/>

		<!-- Define the logic / event handlers related to the window -->
		<xface:show-adapter element="../.." event="STARTUP"/>
		<xface:exit-adapter element=".." event="CLOSE"/>
		<counter:logic-handler/>

	</xface:window>

</xface:application> 
label_count.left=_container.left+10
label_count.verticalCenter=count.verticalCenter

count.top=_container.top+10
count.left=label_count.right+5
count.right=_container.right-10

decrease.left=_container.left+10
decrease.bottom=_container.bottom-10
decrease.top=count.bottom+10

increase.right=_container.right-10
increase.bottom=_container.bottom-10
increase.top=count.bottom+10

clear.right=increase.left-10
clear.left=decrease.right+10
clear.bottom=_container.bottom-10
clear.top=count.bottom+10
counter=Counter
label_count=Count:
decrease=Dec (-)
increase=Inc (+)
clear=Clear

Ultrid Counter Sample

<ultrid context="/ultrid/" path="counter/">
    <jframe id="frame" title="Ultrid Counter" 
            default-close-operation="exit-on-close" resizable="false">
        <jpanel layout="vbox">
            <compound-border>                
                <empty-border thickness="12"/>
                <titled-border title="Counter"/>
            </compound-border>
            <jpanel layout="vbox">
                <empty-border thickness="12"/>
                <jpanel layout="border">
                    <bevel-border border-type="lowered" soft-corners="true"/>
                    <jtextfield id="counter-texfield" constraint="center" text="0" 
                        horizontal-alignment="center" background="black" 
                        foreground="yellow" editable="false"
                        font="Arial, Bold, 14">
                        <on-key method="typed" language="javascript" source="key-typed.js"/>
                    </jtextfield>
                </jpanel>
                <filler length="17"/>
                <jpanel layout="hbox">
                    <jbutton text="_Dec(-)" js-param="-">
                        <on-key method="typed" language="javascript" source="key-typed.js"/>
                        <on-mouse method="released" language="javascript" source="count.js"/>
                    </jbutton>
                    <filler length="5"/>
                    <jbutton text="_Clear" js-param="c">
                        <on-key method="typed" language="javascript" source="key-typed.js"/>
                        <on-mouse method="released" language="javascript" source="count.js"/>
                    </jbutton>
                    <filler length="5"/>
                    <jbutton text="_Inc(+)" js-param="+">
                        <on-key method="typed" language="javascript" source="key-typed.js"/>
                        <on-mouse method="released" language="javascript" source="count.js"/>
                    </jbutton>
                </jpanel>
            </jpanel>                       
        </jpanel>                       
        <laf.manager look-and-feel="System" component-ref="frame"/>
    </jframe>
</ultrid>

FormsPlayer Counter Sample (W3C XForms)

<html
 xmlns:xforms="http://www.w3.org/2002/xforms"
 xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <object id="formsPlayer" classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58">
      <b>formsPlayer has failed to load! Please check your installation.</b>
      <br />
    </object>

    <?import NAMESPACE="xforms" IMPLEMENTATION="#formsPlayer" ?>

    <title>XUL Challenge - Counter Example - formsPlayer</title>

    <xforms:model>
      <xforms:instance>
        <counter xmlns="">0</counter>
      </xforms:instance>
    </xforms:model>

    <style>
     body
     {
      font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;
     }
     xforms\:trigger { cursor: hand; }
     xforms\:hint { width: 200px; }
    </style>
  </head>
  <body>

    <xforms:output ref="/counter" style="width: 240px; color: yellow; background-color: black; font: 24 bold monospace;" />
    <hr />
    <xforms:trigger>
	<xforms:label>Dec (-)</xforms:label>
	<xforms:setvalue ev:event="DOMActivate" ref="/counter" value=". - 1" />
	<xforms:hint>Subtract one from the counter value (the result will be '<b><xforms:output value=". - 1" /></b>')</xforms:hint>
    </xforms:trigger>

    <xforms:trigger>
	<xforms:label>Clear</xforms:label>
	<xforms:hint>Set the counter back to zero</xforms:hint>
	<xforms:setvalue ev:event="DOMActivate" ref="/counter">0</xforms:setvalue>
    </xforms:trigger>

    <xforms:trigger>
	<xforms:label>Inc (+)</xforms:label>
	<xforms:setvalue ev:event="DOMActivate" ref="/counter" value=". + 1" />
	<xforms:hint>Add one to the counter value (the result will be '<b><xforms:output value=". + 1" /></b>')</xforms:hint>
    </xforms:trigger>
  </body>
</html>


Xoetrope XUI Counter Sample

<XPage class="com.xoetrope.controls.swing.Welcome">
  <Components>
    <Label x="10" y="10" w="48" h="20" content="Caption:" alignment="Left" opaque="true"/>
    <Edit name="Counter" x="60" y="10" w="176" h="20" alignment="Leading"/>
    <Panel x="10" y="40" w="225" h="20" layout="border">
      <Button name="DecBtn" content="Dec (-)" constraint="west"/>
      <Button name="ClearBtn" content="Clear" constraint="center"/>
      <Button name="IncBtn" content="Inc (+)" constraint="east"/>
    </Panel>
  </Components>
  <Events>
    <Event method="decrement" target="DecBtn" type="ActionHandler"/>
    <Event method="clear" target="ClearBtn" type="ActionHandler"/>
    <Event method="increment" target="IncBtn" type="ActionHandler"/>
  </Events>
  <Data>
    <Bind target="Counter" source="counterValue" output="counterValue"/>
  </Data>
</XPage>

Flex Counter Sample

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Number id="counter">0</mx:Number>
  <mx:Style>
      TextInput {
        font-family: monospace;
        font-size: 24pt;
        font-weight: bold;
        color:#ffff00;
        backgroundColor:#000000;
      }
  </mx:Style>
  <mx:Panel title="Counter">
    <mx:TextInput text="{counter}" textAlign="center" widthFlex="1"/>
    <mx:HBox>
      <mx:Button label="Dec(-)" click="counter--" widthFlex="2"/>
      <mx:Button label="Clear" click="counter = 0" widthFlex="1"/>
      <mx:Button label="Inc(+)" click="counter++" widthFlex="2"/>
    </mx:HBox>
  </mx:Panel>
</mx:Application>

SwiXml Counter Sample

<frame Title="XUL Challenge 2004">
  <panel Layout="BorderLayout" Border="TitledBorder(Counter)">
    <panel>
      <formattedtextfield id="ftf" Columns="20" Value="0" 
         Editable="false" Background="black" Foreground="yellow"/>
    </panel>
    <panel constraints="BorderLayout.SOUTH">
      <button Text="Dec (-)" Action="inc" ActionCommand="-1"/>
      <button Text="Clear" Action="clr"/>
      <button Text="Inc (+)" Action="inc" ActionCommand="1"/>
    </panel>
  </panel>
</frame>

Avalon XAML Counter Sample

<Window
   xmlns=http://schemas.microsoft.com/2003/xaml
   xmlns:def="Definition" def:Class="CounterSample.Counter"
   def:CodeBehind="Counter.xaml.cs"
   Text="Xul Challenge 2004"
   Visible="True"
   Width="268"
   Height="150"
   Loaded="OnLoaded">
<Window.Resources>
   <Style>
      <Button Margin="5" FontSize="14" />
   </Style>
</Window.Resources>
<FlowPanel>
   <FlowPanel.Background>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
         <LinearGradientBrush.GradientStops>
            <GradientStop Color="#E7E7E7" Offset="0" />
            <GradientStop Color="#FFFFFF" Offset="0.02" />
            <GradientStop Color="#FFF287" Offset="0.2" />
            <GradientStop Color="#F9E11A" Offset="0.98" />
            <GradientStop Color="#000000" Offset="1" />
         </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
   </FlowPanel.Background>
   <SimpleText Margin="5" FontSize="14">Counter Sample</SimpleText>
   <TextBox ID="ValueTextBox" FontSize="14" Width="250" Height="30" HorizontalAlignment="Center" IsReadOnly="True" Margin="5"></TextBox>
   <FlowPanel HorizontalAlignment="Center" Width="100%">
      <Button Click="Dec">Dec (-)</Button>
      <Button Click="Clear">Clear</Button>
      <Button Click="Inc">Inc (+)</Button>
   </FlowPanel>
</FlowPanel>
</Window>

Beryl Counter Sample

<UI version="1.0">
  <widget name="Counter" class="Frame">
    <property name="size" type="dimension">
      <width>300</width>
      <height>100</height>
    </property>
    <property name="visible" type="bool">true</property>
    <property name="title" type="istring">counter.title</property>
    <property name="defaultCloseOperation" type="enum">exit</property>
		
    <property name="border" type="border" border="titled">
      <title>counter.counter</title>
    </property>

    <widget class="Panel">
      <layout type="vbox"/>
      <property name="spacing" type="int">5</property>

      <widget class="TextField">
        <property name="background" type="color">#000000</property>
	<property name="foreground" type="color">#ffff00</property>
	<property name="horizontalAlignment" type="enum">center</property>
	<property name="font" type="font">
	  <name>Monospaced</name>
	  <style>bold</style>
	  <size>24</size>
	</property>
	<property name="key">number</property>
	<property name="editable" type="bool">false</property>
      </widget>

      <widget class="Panel">
	<layout type="flow"/>
	<widget class="Button">
	  <property name="text">counter.dec</property>
	  <emit event="clicked" name="dec"/>
	</widget>
	<widget class="Button">
	  <property name="text">counter.clear</property>
	  <emit event="clicked" name="clear"/>
	</widget>
	<widget class="Button">
	  <property name="text">counter.inc</property>
	  <emit event="clicked" name="inc"/>
	</widget>
      </widget>
    </widget>
  </widget>
</UI>
counter.title=XUL Challenge 2004 Counter
counter.counter=Counter
counter.inc=Increase
counter.dec=Decrease
counter.clear=Clear

The Richmond Post XUL Motor of the Year 2003 Award

Source: http://xul.sourceforge.net/post/2004/01/xul_motor_of_the_year_2003_award_and_the_winner_is.html


The Java Republic Poll: What Java XUL Toolkit Do You Use Most?

Source: http://viva.sourceforge.net/republic/2004/03/poll_results_the_most_used_free_java_xul_toolkits_and_the_winner_is.html


Internet Explorer Is Dead - The Next Browser Is Windows 2006 Itself

No Internet Explorer Logo

Microsoft has frozen Internet Explorer for years and Microsoft is busy to add all new features not to the browser but to the next-gen Windows OS codenamed Longhorn to force you to upgrade and to put the internet in Billy's trunk and have a 100 % market share and complete control over the desktop.

Microsoft refuses to support or work together to help build open royality-free standards such as SVG, XForms, XUL, XHTML 2.0, and other next-gen markup languages for a rich internet for everyone. Instead Microsoft now unveiled its very own all-in-one Windows-only markup language that competes head on with HTML, SVG, XUL, CSS, PDF, and many more open royality-free formats.


Quotes From the Microsoft Avalon Team

Rob Relyea (Avalon Program Manager, XAML "spec owner", Avalon Architect Team Member)

XAML is a markup language that can be used on Longhorn for many things including creating desktop apps, web pages, and printable documents.

Chris Anderson (Avalon Core Developer, Avalon Architect Team Member)

We are past the world of generating static snapshots of display and blasting them down to a client.

My not-to-hidden agenda here is simple - dynamic applications should be dynamic on the client. The server should send data - either through web services, database access, or any other wire protocol - and the client should consume that data and generate UI. The model of a server trying to generate the correct display for a client is just broken.

I'm a bit confused by the concern that Microsoft is somehow trying to threaten or take over the web with the introduction of a markup language to program Windows applications. XAML is a new programming model for the next release of Windows, code named "Longhorn". That's it.

Joe Beda (Avalon Core Graphics Developer)

Our rendering model is very much like that of SVG.

Our markup isn't the same mostly because XAML is a direct reflection of the programming model.

Our object model (OM) doesn't match the SVG DOM because we choose to go with an object model that more closely matches what we think our users expect.

XHTML and SVG both have image elements. We avoid this duplicity. Text is another area where we avoid a large amount of duplication.

Zhanbo Sun (Avalon Team Member)

A Longhorn application can run inside or outside Internet Explorer. The support for the new programming model is implemented by Avalon rather than by Internet Explorer. Technically speaking, Internet Explorer serves as the host when HelloPDC.xaml runs.

Source: http://article.gmane.org/gmane.comp.lang.xul.announce/146


Windows Longhorn Document Services - The End of HTML?

Microsoft Longhorn Developer Conference (PDC): "Avalon: Using the Document Platform Features" - Tech Talk Summary:

Integrated document services are a key component of "Longhorn". This session covers the end-to-end view of Windows "Longhorn" documents ranging from creation, to management, to consumption. Document scenarios include content-centric applications, stand-alone documents, and printing. Document-centric APIs and format are discussed in detail. Demos include document-centric application, adaptive flow and fixed documents, authoring via print driver, and more.

Source: http://msdn.microsoft.com/events/pdc/agendaandsessions/sessions/default.aspx

Longhorn SDK Docu: "Introduction to Adaptive-flow Format Documents"

Why the need for Adaptive-flow Format?

The advent of the World Wide Web posed several challenges for designers. Print media never required the adapting of layout to different media shapes. However, when pages were viewed using the World Wide Web, it was impossible to predict the size of the window in which the document would be viewed or the personal preferences that would be selected by the viewer. As a consequence, a document that looked great in one format might display poorly on another. While HTML and Cascading Style Sheets (CSS) made strides toward remedying this situation, the results were often less than ideal because the specifications were applied without regard to the readability of the page.

Source: http://longhorn.msdn.microsoft.com/lhsdk/docservices/overviews/edocs_adaptive.aspx

<TextPanel Background="white">
  <Section>
    <Heading>Adaptive-flow-format Example</Heading>
       <Paragraph>This example shows the advanced capabilities of adaptive-flow format. Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure.</Paragraph>
       <Paragraph>Notice how images and text are flowed intelligently to enhance the reading experience. Lorem ipsum dolor
 sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure.</Paragraph>
       <Paragraph>Adaptive-flow format is an exciting new feature. Lorem ipsum dolor sit amet, consectetuer adipiscing
 elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
 iriure.</Paragraph>
  </Section>
</TextPanel>

Avalon XAML vs. CSS2

XAML Tag CSS2 Feature Description
AdaptiveMetricsContext pt (pointsize), user-defined stylesheets. Styling of text for maximum user readability
Bold font-weight : bold Bold text
Border border Borders surrounding other content
FlowPanel display : block A multi-line block that reflows when resized
Inline display : inline A section of content held within a single line
Italic font-style : italic Italic text
PropertyTrigger pseudoselectors like :hover and :active. logic bound to common events in the UI
PageBreak page-break-after Support for paginated display.
ScrollViewer scroll scrolling support for content larger than its viewport.
SmallCaps font-variant : smallcaps Text in all small capitals.
Subscript vertical-align : sub; font-size : smaller Make the text smaller and raised above previous text
Superscript vertical-align : super; font-size : smaller Make the text smaller and lowered below previous text
Underline text-decoration: underline Text with an underscore beneath it

Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)


Avalon XAML vs. XHTML vs. Mozilla XUL

XAML Tag XHTML tag XUL tag
Audio embed, object
Block div
Break br
Button button button
Cell cell
CheckBox input type="checkbox" checkbox
Column th column listcol treecol
ComboBox select menupopup listbox
ComboBoxItem option menuitem listitem
Document body
Footer tfooter
Frame frame, iframe iframe
Header theader listheader treeheader
Heading h1, h2, h3, h4, h5, h6 caption
HyperLink a
Image img image
LineBreak br
List ul, ol
Listbox select listbox
ListElementItem listcell treecell
ListItem option listitem treeitem
Menu select menu menulist
MenuItem option menuitem
Note blockquote
Paragraph p description
RadioButton input type="radio" radio
RadioButtonList input type="radio name="?" radiogroup
Section section description
Table table grid
Text input type="text" textbox
TextBox textbox textbox multiline="true"
Video embed, object

Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)


Avalon XAML vs. Mozilla XUL

Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)


Avalon XAML vs. SVG

XAML Tag SVG tag Description
Canvas svg A drawing area
Ellipse ellipse circle A mathematical ellipse
Glyph glyph One or more textual characters
Line line A straight line
Path path A pathway across a drawing area that delimits where other content should be applied
Polygon polygon A mathematical polygon that is closed
Polyline polyline A mathematical polygon that is open
Rectangle rect A rectangle or square, possibly with corner modifications.
TransformDecorator transform (=attribute) A mathematical operation that rotates, scales, shears or relocates a shape.

Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)


Avalon XAML Only Tags

XAML Tag Web equivalent Tag use
ArrayListDataCollection JavaScript DOM 0 collection such as document.forms Provide programmer access to sets of tags.
Bind Mozilla's XBL system based on the CSS moz-binding extension. Attach programmer logic or further GUI elements to a tag.
CollectionContainer none Hold a set of related tags.
Document The DOM 0 window.document object. Represent the XML document.
FillPanel none Unused
FixedPage CSS2 fixed sizing and positioning. Override default layout for the page content.
FixedPanel CSS2 fixed sizing and positioning Override default layout for sub-content of the page.
HorizontalSlider VerticalSlider XForms range tag. Provides a widget used to select a value from a range.
HwndHost plugins Embed a Win32 application in a tag.
ItemsControl none Base class for lists and trees.
NavigationApplication JavaScript's window.navigator object. Provide context and control for moving within a multi-page application.
PageFunction none Control page display.
PageViewer none Print preview viewer for paged media.
Pane Approximately a JavaScript window.modify() Modifiable area within a document.
Panel Similar to XUL deck or stack content. Abstract base class.

Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)


Links, Links, Links

MyXaml Articles

MyXAML--XAML-style Gui Generator
By Marc Clifton
http://www.codeproject.com/cs/miscctrl/xmlGuiGenerator.asp

An RSS 2.0 Blog Reader Written In MyXaml
By Marc Clifton
http://www.codeproject.com/dotnet/RssMyXaml.asp

A Vector Graphics Rendered Animated Clock
By Marc Clifton
http://www.codeproject.com/dotnet/vgclock.asp

Writing XAML Friendly Assemblies
By Marc Clifton
http://www.codeproject.com/gen/design/xaml.asp

Microsoft Longhorn/Avalon/XAML

Code Name Avalon: Create Real Apps Using New Code and Markup Model
by Charles Petzold
http://msdn.microsoft.com/msdnmag/issues/04/01/Avalon/default.aspx

Introducing "Longhorn" for Developers: Chapter 3: Controls and XAML
by Brent Rector
http://msdn.microsoft.com/library/en-us/dnintlong/html/longhornch03.asp

XAML Tag Quick Reference
http://longhorn.msdn.microsoft.com/lhsdk/port_ref_elements.aspx

Inside XAML
by Ian Griffiths
http://www.ondotnet.com/pub/a/dotnet/2004/01/19/longhorn.html

Microsoft Windows Forms Markup Language (WFML)

Using Windows Forms Markup Language (WFML)
by Joe Stegman
http://windowsforms.net/articles/wfml.aspx

Microsoft Office InfoPath

Getting Started with Microsoft InfoPath 2003
by Wei-Meng Lee
http://www.oreillynet.com/pub/a/javascript/2003/12/09/infopath.html

XForms and Microsoft InfoPath
by Micah Dubinko
http://www.xml.com/pub/a/2003/10/29/infopath.html

Adobe XDP (XML Data Package)

The Adobe XML Architecture
http://www.adobe.com/enterprise/xml.html

Macromedia Flex/MXML

Product Page
http://www.macromedia.com/software/flex

Flex Developer Page
http://www.macromedia.com/devnet/flex

Flex Designer code-named "Brady"
http://www.macromedia.com/software/flex/productinfo/tooling/brady

Sun JDNC/JCCL Articles

Java Desktop Network Components
by Amy Fowler
http://www.javadesktop.org/articles/JDNC

W3C XForms

O'Reilly XForms Essentials (Free Online Edition)
by Micah Dubinko
http://xformsinstitute.com/essentials

Official W3C XForms FAQ
http://www.w3.org/MarkUp/Forms/2003/xforms-faq.html

XForms for HTML Authors
by Steven Pemberton
http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html

XForms Project Page
http://www.w3.org/MarkUp/Forms

Getting Started with XForms
by Bob DuCharme
http://www.xml.com/pub/a/2003/12/30/xforms.html

What Are XForms?
by Micah Dubinko
http://www.xml.com/pub/a/2001/09/05/xforms.html

Ten Favorite XForms Engines
by Micah Dubinko
http://www.xml.com/pub/a/2003/09/10/xforms.html

W3C SVG/RCC

SVG and XForms: A primer
by Antoine Quint
http://www-106.ibm.com/developerworks/xml/library/x-svgxf1.html

SVG and XForms: Rendering Custom Content (RCC)
by Antoine Quint
http://www-106.ibm.com/developerworks/xml/library/x-svgxf2

Opera Web Forms 2.0

Web Forms 2.0 Spec
by Ian Hickson
http://www.hixie.ch/specs/html/forms/web-forms


International XUL Meetup Day

XUL Meetup

The Meetup.com web service helps you to link up with fellow XUL coders and designers at local cafes (and other places) in 612 cities across 51 countries.

So far the top cities for XUL meetups are:

Next Meeting in Vienna: Tuesday, June 1 @ 7:00PM (1st Tuesday of every month.)

More @ http://xul.meetup.com


That's it - The Future Just Happened

XUL Alliance Logo

Visit the Open XUL Alliance site @ http://xul.sourceforge.net for more info