A Clock in XForms

Steven Pemberton, CWI Amsterdam

Contents

local-dateTime()

<instance>
   <clock xmlns="">
      <time/>
   </clock>
</instance>

<bind ref="time" calculate="local-dateTime()"/>
 ...
<output ref="time" label="time"/>

local-dateTime()

<instance>
   <clock xmlns="">
      <time/>
   </clock>
</instance>

<bind ref="time" calculate="local-dateTime()"/>
 ...
<output ref="time" label="time"/>

Source

Fields

   <clock xmlns="">
      <time/>
      <h/><m/><s/>
   </clock>
 ...
<bind ref="h" calculate="substring(../time, 12, 2)"/>
<bind ref="m" calculate="substring(../time, 15, 2)"/>
<bind ref="s" calculate="substring(../time, 18, 2)"/> ...
 ...
<output value="concat(h, ':', m, ':', s)"/>

Fields

   <clock xmlns="">
      <time/>
      <h/><m/><s/>
   </clock>
 ...
<bind ref="h" calculate="substring(../time, 12, 2)"/>
<bind ref="m" calculate="substring(../time, 15, 2)"/>
<bind ref="s" calculate="substring(../time, 18, 2)"/> ...
 ...
<output value="concat(h, ':', m, ':', s)"/>

Source

Action!

<action ev:event="xforms-ready">
   <dispatch name="tick" targetid="model"/>
</action>

When XForms starts up a tick event is sent to the model

Action!

<action ev:event="xforms-ready">
   <dispatch name="tick" targetid="model"/>
</action>
<action ev:event="tick">
   <setvalue ref="time" value="local-dateTime()"/>
   <dispatch name="tick" targetid="model" delay="1000"/>
</action>

A tick event causes the value of time to be updated, and a new tick event to be sent to the model (delayed by 1 second). This is the only change.

Action!

<action ev:event="xforms-ready">
   <dispatch name="tick" targetid="model"/>
</action>
<action ev:event="tick">
   <setvalue ref="time" value="local-dateTime()"/>
   <dispatch name="tick" targetid="model" delay="1000"/>
</action>

A tick event causes the value of time to be updated, and a new tick event to be sent to the model (delayed by 1 second). This is the only change.

Source

Add hands to the instance

<instance>
   <clock xmlns="">
      <time/>
      <h/><m/><s/>
      <hand length="30" class="h"/>
      <hand length="40" class="m"/>
      <hand length="40" class="s"/>
   </clock>
</instance>
<bind ref="hand[@class='s']" calculate="../s * 6"/>
<bind ref="hand[@class='m']" calculate="../m * 6"/>
<bind ref="hand[@class='h']" calculate="(../h mod 12)*30 + (../m div 2)"/>

Add some svg

<svg ...>
   <circle r="45" class="bezel"/>
   <xf:repeat ref="hand">
     <line x1="0" y1="0" x2="0" y2="-{@length}"
           transform="rotate({.})" class="{@class}"/>
   </xf:repeat>
   <circle r="2" class="centre"/>
</svg>

Add some svg

<svg ...>
   <circle r="45" class="bezel"/>
   <xf:repeat ref="hand">
     <line x1="0" y1="0" x2="0" y2="-{@length}"
           transform="rotate({.})" class="{@class}"/>
   </xf:repeat>
   <circle r="2" class="centre"/>
</svg>

Add some svg

<svg ...>
   <circle r="45" class="bezel"/>
   <xf:repeat ref="hand">
     <line x1="0" y1="0" x2="0" y2="-{@length}" 
           transform="rotate({.})" class="{@class}"/>
   </xf:repeat>
   <circle r="2" class="centre"/>
</svg>

Source

Add some decoration

Source