XForms/Event Logger

Motivation

You want to be able to see a record of events as they happen. This is a great way to learn about how XML Events work.

↑Jump back a section

Method

We create an instance and add a element to that for each event.

↑Jump back a section

Screen Image

XForms Event Logging Screen Image
↑Jump back a section

Link to Example

Load XForms application

↑Jump back a section

Sample Code

<html 
   xmlns:xf="http://www.w3.org/2002/xforms"
   xmlns:ev="http://www.w3.org/2001/xml-events"
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Demo of XForms Event Logging</title>
      <style type="text/css" media="screen">
          body {font-family: Helvetica, sans-serif;}
          #log {
          font-size: 8pt; 
          color: SlateGray;
          background-color: lavender; 
          border: 1px solid SlateGray;                  
          }     
      </style>
      <xf:model>
          <xf:instance id="my-form">
             <data xmlns="">
                <element1/>
                <element2/>
                <element3/>
             </data>
          </xf:instance>               
           <!-- this is were we log events -->
           <xf:instance id="log">
              <data xmlns="">
                 <event/>
              </data>
           </xf:instance>                      
             <!-- put the cursor in the first field when the form becomes ready -->
            <xf:action ev:event="xforms-ready">
               <xf:setfocus control="field-1"/>
               <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
               <xf:setvalue ref="instance('log')/event[last()]" value="'Set Focus on Field-1'" />
            </xf:action>
        </xf:model>
   </head>
   <body>
      <h2>Demonstration of XForms Event Logging</h2>
       <xf:input ref="instance('my-form')/element1" incremental="true" id="field-1">
            <xf:label>Input 1:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'DOMFocusIn in input 1'" />
           </xf:action>
            <xf:action ev:event="xforms-value-changed">
               <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
               <xf:setvalue ref="instance('log')/event[last()]" value="'xforms-value-changed in input 1'" />
            </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'Out of input 1'" />
           </xf:action>
        </xf:input>
        <br/>
 
        <xf:input ref="instance('my-form')/element2" incremental="true">
           <xf:label>Input 2:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'DOMFocusIn in input 2'"/>
           </xf:action>
           <xf:action ev:event="xforms-value-changed">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'xforms-value-changed in input 2'" />
           </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'Out of input 2'" />
           </xf:action>
        </xf:input>
        <br/>
 
        <xf:input ref="instance('my-form')/element3" incremental="true">
           <xf:label>Input 3:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'DOMFocusIn in input 3'" />
           </xf:action>
           <xf:action ev:event="xforms-value-changed">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'xforms-value-changed in input 3'" />
           </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
              <xf:setvalue ref="instance('log')/event[last()]" value="'Out of input 3'" />
           </xf:action>
        </xf:input>
 
       <div id="log">
          <p>Event Log</p>
          <xf:repeat id="results-repeat" nodeset="instance('log')/event">
                   <xf:output ref="."/>
          </xf:repeat>
       </div>
 
    </body>
</html>
↑Jump back a section

Sample code 2

The above code doesn't work in the mozilla xforms plugin 0.8.5 with firefox 2.0.0.12 (it seems buggy dealing with instance). Try this code instead:

<html xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/1999/xhtml">
<!-- mozilla xforms 0.8.5, firefox 2.0.0.12
-->
   <head>
      <title>Demo of XForms Event Logging</title>
      <style type="text/css">
          body {font-family: Helvetica, sans-serif;}
          #log {
          font-size: 8pt; 
          color: SlateGray;
          background-color: lavender; 
          border: 1px solid SlateGray;                  
          }     
      </style>
      <xf:model>
          <xf:instance id="my-form">
             <data xmlns="">
                <element1/>
                <element2/>
                <element3/>
                 <event/>
              </data>
           </xf:instance>                      
             <!-- put the cursor in the first field when the form becomes ready -->
            <xf:action ev:event="xforms-ready">
               <xf:setfocus control="field-1"/>
               <xf:insert nodeset="/data/event" at="last()" position="after"/>
               <xf:setvalue ref="/data/event[last()]" value="'Set Focus on Field-1'"/>
            </xf:action>
        </xf:model>
   </head>
   <body>
      <h2>Demonstration of XForms Event Logging</h2>
       <xf:input ref="/data/element1" incremental="true" id="field-1">
            <xf:label>Input 1:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'DOMFocusIn in input 1'"/>
           </xf:action>
            <xf:action ev:event="xforms-value-changed">
               <xf:insert nodeset="/data/event" at="last()" position="after"/>
               <xf:setvalue ref="/data/event[last()]" value="'xforms-value-changed in input 1'"/>
            </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'Out of input 1'"/>
           </xf:action>
        </xf:input>
        <br/>
 
        <xf:input ref="/data/element2" incremental="true">
           <xf:label>Input 2:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'DOMFocusIn in input 2'"/>
           </xf:action>
           <xf:action ev:event="xforms-value-changed">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'xforms-value-changed in input 2'"/>
           </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'Out of input 2'"/>
           </xf:action>
        </xf:input>
        <br/>
 
        <xf:input ref="/data/element3" incremental="true">
           <xf:label>Input 3:</xf:label>
           <xf:action ev:event="DOMFocusIn">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'DOMFocusIn in input 3'"/>
           </xf:action>
           <xf:action ev:event="xforms-value-changed">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'xforms-value-changed in input 3'"/>
           </xf:action>
           <xf:action ev:event="DOMFocusOut">
              <xf:insert nodeset="/data/event" at="last()" position="after"/>
              <xf:setvalue ref="/data/event[last()]" value="'Out of input 3'"/>
           </xf:action>
        </xf:input>
 
       <div id="log">
          <p>Event Log</p>
          <xf:repeat id="results-repeat" nodeset="/data/event">
                   <xf:output ref="."/>
          </xf:repeat>
       </div>
 
    </body>
</html>


↑Jump back a section

Discussion

This uses the insert element to insert text into an event log.

Next Page: Replace Tester | Previous Page: Supply and Demand

Home: XForms

↑Jump back a section
Last modified on 9 July 2009, at 20:45