XForms/Event Logger
< XForms
Motivation
editYou 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.
Method
editWe create an instance and add a element to that for each event.
Screen Image
editLink to Example
editSample Code
edit<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>
Sample code 2
editThe 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>
Discussion
editThis uses the insert element to insert text into an event log.