XForms/事件記錄器
< XForms
您希望能夠看到事件發生的記錄。這是瞭解 XML 事件如何工作的好方法。
我們建立一個例項，併為每個事件新增一個元素。
<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>
上面的程式碼在 mozilla xforms 外掛 0.8.5 與 firefox 2.0.0.12 中不起作用（它似乎在處理例項時有錯誤）。請嘗試使用此程式碼：
<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>
這使用插入元素將文字插入事件日誌。