XForms/大綱編輯器
< XForms
有時您希望允許使用者能夠向列表新增屬性，這些屬性會更改列表中專案的顯示方式。在此示例中，縮排級別由列表中稱為“級別”的屬性控制，該屬性是大綱檢視中的縮排級別。
注意：此程式基於 Kurt Cagle 在 Mozilla XForms 開發者新聞組中釋出的示例。此示例經其允許釋出。
這是一個示例大綱編輯器程式。如果要測試此程式，請確保使用編輯檢視複製文字。此檔案包含多個製表符，這些製表符在檢視模式下無法正確顯示。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2007/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xbl="http://www.mozilla.org/xbl">
<head>
<!-- based on example posted by Kurt Cagle on Mozilla XForms Newsgroup in Feb. 2007 -->
<style type="text/css">
#itemEntry .xf-value {
width:250px;
}
#content {
border:inset 2px blue;
width:350px;
height:400px;
overflow-y:auto;
background: silver;
}
</style>
<xf:model id="data_model">
<xf:instance id="document_data" src="item-tree.xml" xmlns=""/>
<xf:bind nodeset="//delete-trigger-enabled" relevant="count(//item) > 1" />
<xf:action ev:event="xforms-ready">
<xf:setfocus control="itemEntry" />
</xf:action>
<xf:action ev:event="addItemEvent">
<xf:insert nodeset="//data//item[position() =
index('list')]" at="index('list')" position="after" />
<xf:setvalue ref="//data//item[position() =
index('list')]" value="" />
<xf:setvalue ref="//data//item[position() =
index('list')]/@level" value="//data//item[position() =
index('list') - 1]/@level" />
<xf:setfocus control="itemEntry" />
</xf:action>
<xf:action ev:event="removeItemEvent">
<xf:delete nodeset="//data//item[position() =
index('list')]" at="index('list')" />
<xf:setindex repeat="list" index="index('list')-1" />
<xf:setfocus control="itemEntry" />
</xf:action>
<xf:action ev:event="promoteItemEvent">
<xf:setvalue ref="//data//item[position() =
index('list')]/@level" value="if(number(.) - 1 < 1,1, number(.) - 1)" />
<xf:setfocus control="itemEntry" />
</xf:action>
<xf:action ev:event="demoteItemEvent">
<xf:setvalue ref="//data//item[position() =
index('list')]/@level" value="if(index('list') != 1,
if (number(.) > //data//item[position() =
index('list')-1]/@level,(//data//item[position() =
index('list')-1]/@level) + 1,number(.) + 1),1)" />
<xf:setfocus control="itemEntry" />
</xf:action>
<xf:submission id="save" method="put" action="item-tree.xml" instance="document_data"/>
</xf:model>
</head>
<body>
<xf:group ref="/container/data">
<div>
<xf:trigger id="addItem">
<xf:label>Add</xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="addItemEvent" target="data_model" />
</xf:action>
</xf:trigger>
<xf:trigger id="removeItem">
<xf:label>Remove</xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="removeItemEvent" target="data_model" />
</xf:action>
</xf:trigger>
<xf:trigger id="promote">
<xf:label>Promote <</xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="promoteItemEvent" target="data_model" />
</xf:action>
</xf:trigger>
<xf:trigger id="demote">
<xf:label>Demote ></xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="demoteItemEvent" target="data_model" />
</xf:action>
</xf:trigger>
<div id="content">
<xf:repeat nodeset="items/item" id="list">
<div>
<xf:input ref="." id="itemEntry" incremental="true">
<xf:label>
<xf:output value="concat(substring('                  ',
1, 3*(number(@level) - 1)),'* ')" />
</xf:label>
<xf:action ev:event="DOMActivate">
<xf:dispatch name="addItemEvent" target="data_model" />
</xf:action>
</xf:input>
</div>
</xf:repeat>
</div>
</div>
</xf:group>
<xf:submit submission="save">
<xf:label>Save</xf:label>
</xf:submit>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<container>
<data>
<items>
<item level="1">none</item>
<item level="2">Fiction</item>
<item level="3">Fantasy</item>
<item level="3">Mystery</item>
<item level="3">Religion</item>
<item level="3">Romance</item>
<item level="3">Science Fiction</item>
<item level="2">Non-Fiction</item>
<item level="3">Cooking</item>
<item level="3">History</item>
<item level="3">Biographies</item>
<item level="3">Computers</item>
<item level="4">Software</item>
<item level="5">XForms Tutorial and Cookbook</item>
<item level="3">Internet</item>
<item level="3">Nature</item>
<item level="3">Science</item>
<item level="1">Electronics</item>
<item level="1">Music</item>
</items>
</data>
</container>
此程式的結構使用自定義事件。請注意，模型中有一系列操作，每個操作都有其自己的事件名稱
<xf: model id="data_model">
...
<xf:action ev:event="addItemEvent">
...
這些事件直接在觸發器中呼叫，如下所示
<xf:dispatch name="addItemEvent" target="data_model" />
請注意，target 屬性是事件所在模型的名稱。
雖然操作可以直接放入觸發器中，但有時操作在邏輯上更適合與例項資料分組，因此應該直接放在模型中。這也允許其他需要重用這些操作的事件，因此將可重用操作直接放在模型中是一個好主意
此程式的版本最初由 Kurt Cagle 釋出在 Mozilla XForms 新聞組中。