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.
Method
We create an instance and add a element to that for each event.
Screen Image
XForms Event Logging Screen Image (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)
Link to Example
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>
<xf:instance id="log">
<data xmlns="">
<event/>
</data>
</xf:instance>
<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
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">;
<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>
<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
This uses the insert element to insert text into an event log.
Where this page came from
This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.
Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.
이 페이지가 속한 매거진XForms
이용 허락: CC BY-SA 4.0 · 출처 en.wikibooks.org
1
0
0
0
코멘트
