XForms/幻燈片
< XForms
您希望在頁面上有一個區域，當用戶選擇按鈕時，該區域會更改影像。
在例項中儲存指向幻燈片影像的連結列表。使用另一個例項變數儲存當前選定影像的狀態。使用觸發器來更新影像編號。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Slide Show</title>
<xf:model id="data-model">
<xf:instance id="data" xmlns="">
<links>
<link href="http://www.bav-astro.de/sterne/monv838/monv838-hubble-20040304.jpg">Image 1</link>
<link href="http://aether.lbl.gov/Images/resizenowmap.jpg">Image 2</link>
<link href="http://www.nasa.gov/images/content/143744main_hubble_spiral_2006.jpg">Image 3</link>
<link href="http://www.space.gc.ca/asc/img/sci_core-hubble.jpg">Image 4</link>
</links>
</xf:instance>
<xf:bind nodeset="instance('data')/link/@href" type="xs:anyURI"/>
<xf:instance id="state" xmlns="">
<state>
<cycle>0</cycle>
</state>
</xf:instance>
<xf:action ev:event="cycle-next">
<xf:setvalue ref="instance('state')/cycle" value="(. + 1) mod 4"/>
<xf:dispatch name="update-model" target="data-model"/>
</xf:action>
<xf:action ev:event="update-model">
<xf:rebuild/>
<xf:recalculate/>
<xf:revalidate/>
<xf:refresh/>
</xf:action>
</xf:model>
</head>
<body>
<xf:trigger>
<xf:label>Next</xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="cycle-next" target="data-model"/>
</xf:action>
</xf:trigger>
<xf:output ref="instance('state')/cycle"/>) <xf:output ref="instance('data')/link[1 + instance('state')/cycle]"/>
<br/>
<xf:output ref="instance('data')/link[1 + instance('state')/cycle]/@href" mediatype="image/*"/>
</body>
</html>
該程式具有 Next 觸發器，當按下該觸發器時，會呼叫名為“cycle-next”的事件。此事件在模型中定義，它更新迴圈並在幻燈片結束時將其重置為 1。之後，它指示表單重新計算其依賴關係圖。這將更新可見影像。
請注意，輸出必須設定 mediatype 為 image/*，才能使瀏覽器正確地將連結呈現為影像。
此示例由 Chris Wallace 和西英格蘭大學建立。