Gerald Bauer (Chairman, CEO, CFO and CTO of Me, Myself & I, Inc.)
FH Hagenberg Talk, Austria, May 2004
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
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?
Break UI into Four Parts
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.
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.
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
<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> |
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> |
<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> |
<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> |
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
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.
Who will own/control the next-gen universal client/browser (aka "HTML killer")?
Microsoft:
Adobe:
Sun:
IBM:
Macromedia:
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
XDP (XML Data Package)
Acrobat Reader
RCPML - Rich Client Platform Markup Language
Lotus Workplace (Eclipse)
Flex/MXML - (Flash) MX Markup Language
Flash Player
JDNC/JCCL - Java Desktop Network Components/Java Component Configuration Language
Java Runtime
Web Forms 2.0 Spec - Work In Progress Sponsored by Opera; XForms Alternative
Mozilla
http://www.mozilla.org
Xul Granddaddy; runs on Mac OS, Linux, Solaris, FreeBSD, Irix, BeOS, HPUX, OS/2, BSD, and more
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
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
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
<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> |
<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> |
<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> |
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 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> |
<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> |
<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> |
<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> |
<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> |
<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> |
<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 |
Source: http://xul.sourceforge.net/post/2004/01/xul_motor_of_the_year_2003_award_and_the_winner_is.html
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.
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
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> |
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)
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)
Source: A Standards-based Look at XAML's Features; Nigel McFarlane (2004)
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)
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)
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
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
Using Windows Forms Markup Language (WFML)
by Joe Stegman
http://windowsforms.net/articles/wfml.aspx
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
The Adobe XML Architecture
http://www.adobe.com/enterprise/xml.html
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
Java Desktop Network Components
by Amy Fowler
http://www.javadesktop.org/articles/JDNC
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
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
Web Forms 2.0 Spec
by Ian Hickson
http://www.hixie.ch/specs/html/forms/web-forms
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
Visit the Open XUL Alliance site @ http://xul.sourceforge.net for more info