Open XUL Alliance: XUL Grand Coding Challenge 2004

Announcements

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 the xul-challenge-2004 package (~800k)) or as an alternative you can browse the CVS repository online. For more than 15+ XML UI language (XUL) formats side-by-side, see the Counter Sample Showcase.

Thanks to Marc Clifton, Arron Ferguson, Adam Kinney, Paul Colton, Pierre Dezon, Luan O'Carroll, 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.

PS: If you want to get your samples for your XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. included, it's 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.

Introduction

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.

The challenge #1 is 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.

(*) 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. It's up to the reader to judge and decide what XUL/XUI/XAML/XML-UI toolkit/player/parser/etc. to use.

Why?

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 as challenge2004.zip or similar that includes all examples plus readme docs.

Who Signed Up

Gerald Bauer - Luxor
Marc Clifton - MyXAML
Arron Ferguson - Purnama XUI
Charles Goodwin - Vexi
Adam Kinney - Microsoft Longhorn/Avalon XAML
Paul Colton - Xamlon
Pierre Dezon - xWidglets
Luan O'Carroll - Xoetrope XUI
Mathew McBride - Jazilla
Wenzel Jakob - Beryl
Wolf Paulus - SwiXml
Jon Lipsky - XMLFace
Ovi Comes - Zulu (Macromedia Flash)
Mark Birbeck - FormsPlayer (W3C XForms Toolkit)
Pierre Morel - Ultrid
Pete Cole, Jerry Mead - Zeepe (DHTML)
Jacob Lister - Keystone
Laurent Jouanneau, Hans Harder - Mozilla
Robert Bajzat - Thinlet
Dirk von der Weiden - WiSer
Kris Luyten - UIML.NET

Guidelines

Please create real working examples not just pretty UI mockups.

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 don't 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.

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. can't separate code and markup go ahead and use inline code (after all we want real working samples).

Please publish your source code samples under an open source license so we can republish your source code samples in articles. If you don't include an open source license with your samples we will assume an Apache 2.0 license.

Challenge #1: Counter Sample

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. That's it.

XML UI Markup Sample 1:

<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>

XML UI Markup Sample 2:

<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>

Challenge #2: Calculator Sample

Challenge #2 is a simple calculator.

XML UI Markup Sample 1:

<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>

XML UI Markup Sample 2:

<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 #3: Free-Style Sample (Optional)

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 the XulNewsReader Wiki page.

Packaging Up Your Samples

To package up your samples please use the common directory structure (that is, counter, calc and freestyle) below and add a readme.txt document in plain text and a screenshot for every sample.

citron
 + readme.txt
 + counter
   + citron-counter.png
   + [your code]
 + calc
   + citron-calc.png
   + [your code]
 + freestyle
   + citron-freestyle.png
   + [your code]

Sample readme.txt in plain text:

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 send comments on our web pages to our public xul-talk mailinglist or to a member of our web team.	Copyright © 2003, 2004, 2005 Open XUL Alliance