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
Challenge 2 is a simple calculator.
The challenge 3 is an optional free-style sample that you can use to highlight the strength of your XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. of choice. We suggest creating a RSS news reader/blog reader. For some samples see theXulNewsReader Wiki page.
The XUL Grand Coding Challenge 2004 starts on Tuesday, April 13th, 2004 and will run for four weeks. To take part in and complete the XUL Grand Coding Challenge you need to create two samples plus an optional bonus free-style sample with your XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. of choice.
Rich Internet for Everyone (RICHIE) Network:
Laurent Jouanneau, Hans Harder -Mozilla
The XUL Grand Challenge 2004 helps you promote your XUL/XUI/XAML/XML-UI toolkit/parser/player/etc. For example: Marc Clifton will write-up an article for the Code Project site. Gerald Bauer will write-up articles for the Richmond Post, the XUL News Wire, and so on and will bundle-up a package for easy download such aschallenge2004.zipor similar that includes all examples plus readme docs.
Pete Cole, Jerry Mead -Zeepe(DHTML)
Challenge 1 is a simple counter.Pressing the Inc button increments the counter (value), pressing the Dec button decrements it, and pressing Clear returns the counter (value) to zero. Thats it.
Please keep the samples in challenge 1 and 2 simple to help readers compare different XUL/XUI/XAML/XML-UI toolkit/parser/player/etc.
Please create real working examples not just pretty UI mockups.
Creating A Rich Internet For Everyone
citron + readme.txt + counter + citron-counter.png + [your code] + calc + citron-calc.png + [your code] + freestyle + citron-freestyle.png + [your code]
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=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
Adam Kinney -Microsoft Longhorn/Avalon XAML
Please send comments on our web pages to our publicxul-talk mailinglistor to a member of our web team.
Challenge 3: Free-Style Sample (Optional)
Thechallenge 1is a simple counter sample (20-30 minutes*). The challenge 2 is a simple calculator sample (40-60 minutes*). The challenge 3 is an optional free-style sample that you can use to highlight the strength of your XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. of choice. A RSS news reader/blog reader is suggested.
Please publish your source code samples under an open source license so we can republish your source code samples in articles. If you dont include an open source license with your samples we will assume an Apache 2.0 license.
Mark Birbeck -FormsPlayer(W3C XForms Toolkit)
To package up your samples please use the common directory structure (that is,counter,calcandfreestyle) below and add areadme.txtdocument in plain text and a screenshot for every sample.
(*) Note, that the XUL Grand Challenge 2004 is *not* a real-time challenge. You have four weeks for completion and the time estimate here are just rough (optimistic) estimates how long it might take you.
Note also that there will be no winners. Its up to the reader to judge and decide what XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. to use.
What is Citron? ————— Citron is a runtime that turns Citron XUL markup into live windows, dialogs, menus, toolbars and more without requiring a single-line of C Omega code. Pass on the chrome folder holding your XUL markup to Citron and see the XUL markup come to life. Running the Citron XUL Challenge 2004 Samples ——————————————— Before you can run the Citron samples you need to download all required libraries and configure your box. Get the Citron package at…. Appendix: Links – Find Out More About Citron ——————————————– Citron Project Page @ … Citron FAQ Page @ ….
Please dont forget to create and include a screenshot for every sample to help us create flashy articles that show your XUL/XUI/XAML/XML-UI toolkit/parser/player/etc. in action.
Thanks to Marc Clifton, Arron Ferguson, Adam Kinney, Paul Colton, Pierre Dezon, Luan OCarroll, Mathew McBride, Wenzel Jakob, Wolf Paulus, Jon Lipsky, Ovi Comes, Mark Birbeck, Pierre Morel, Pete Cole, Jerry Mead, Jacob Lister, Laurent Jouanneau and Hans Harder for sending in all the samples.
Update:Note, you can now download the XUL Grand Coding Challenge 2004 sample package that includes all markup samples, screenshots, code-behind sources, scripts, readme docs and more (see thexul-challenge-2004 package(~800k)) or as an alternative you canbrowse the CVS repository online. For more than 15+ XML UI language (XUL) formats side-by-side, see theCounter Sample Showcase.
Please keep the markup in challenge 1 and 2 clean and if possible avoid inline code and use separate code-behind files instead. Note, if your XUL/XUI/XAML/XML-UI toolkit/parser/player/etc. cant separate code and markup go ahead and use inline code (after all we want real working samples).
PS: If you want to get your samples for your XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. included, its not too late. Just send in your two XUL Challenge 2004 samples packed up in an archive following the guidelines below and we will add it to the showcase and download package.
United XAMLXUL AllianceXUL NewsXUL ForumThe Richmond PostRichCon 2005
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