来自专栏 XForms · 第 84 篇，共 137 篇
Motivation
We often need to be able to edit groupings of data. This example demonstrates how groupings of records (a section of bookmarks) can be modified as a block. This example uses nested **** to achieve this.
Link to working example
Firefox XForms Example
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">;
<head>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
.repeat-section-container {width:90%; background:#ccc; margin:auto; margin-bottom:20px; padding:10px 0;}
.sectionLabel, .delete-section {margin:0 0 10px 10px;}
#repeatBookmarks .xf-repeat-index {
background:#faa;
}
xf|label.sectionLabel {
font-size: 20px;
font-weight: bold;
color: blue;
}
.bookmark xf|label {
font-weight: bold;
color: black;
}
.bookmark {
margin-left: 12px;
margin: 5px 5px;
}
/* custom fields widths using FireFox value property */
.bookmark-name .xf-value {width:30ex}
.url .xf-value {width:60ex}
</style>
<title>Editing Hierarchical Bookmarks With Firefox XForms Extension</title>
<xf:model id="bookmarks">
<xf:instance src="bookmarks.xml" id="bookmarks" />
<xf:submission id="update-from-local-file" method="get" action="bookmarks.xml" replace="instance" instance="bookmarks" />
<xf:submission id="save-to-local-file" method="put" action="bookmarks.xml" />
</xf:model>
</head>
<body>
<xf:repeat nodeset="section" id="repeatSections">
<div class="repeat-section-container">
<xf:input ref="@name">
<xf:label class="sectionLabel">Section: </xf:label>
</xf:input>
<xf:repeat nodeset="bookmark" id="repeatBookmarks">
<div class="bookmark">
<xf:input class="bookmark-name" ref="@name">
<xf:label>Name: </xf:label>
</xf:input>
<xf:input class="url" ref="@href">
<xf:label>URL: </xf:label>
</xf:input>
<xf:trigger>
<xf:label>Delete</xf:label>
<xf:delete nodeset="." at="index('repeatBookmarks')" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger>
<xf:label>Insert</xf:label>
<xf:insert nodeset="." at="index('repeatBookmarks')" position="after" ev:event="DOMActivate" />
</xf:trigger>
</div>
</xf:repeat>
<xf:trigger class="delete-section">
<xf:label>Delete Section</xf:label>
<xf:delete nodeset="." at="index('repeatSections')" ev:event="DOMActivate" />
</xf:trigger>
</div>
</xf:repeat>
<xf:trigger id="insertbutton">
<xf:label>Insert bookmark</xf:label>
<xf:insert nodeset="section[index('repeatSections')]/bookmark" at="index('repeatBookmarks')" position="after" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger id="insertsectionbutton">
<xf:label>Insert section</xf:label>
<xf:insert nodeset="section" at="index('repeatSections')" position="after" ev:event="DOMActivate" />
</xf:trigger>
<xf:submit submission="update-from-local-file">
<xf:label>Reload</xf:label>
<xf:hint>Reload from local file</xf:hint>
</xf:submit>
<xf:submit submission="save-to-local-file">
<xf:label>Save</xf:label>
<xf:hint>Save to local file</xf:hint>
</xf:submit>
</body>
</html>
FormFaces Example
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms">;
<head>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
xf|label.sectionLabel {
font-size: 20px;
font-weight: bold;
color: blue;
}
.bookmark xf|label {
font-weight: bold;
color: black;
}
.bookmark {
margin-left: 12px;
margin: 5px 5px;
}
/* custom fields widths using FireFox value property */
.bookmark-name .xf-value {width:30ex}
.url .xf-value {width:60ex}
</style>
<title>Editing Hierarchical Bookmarks With Firefox XForms Extension</title>
<xf:model id="bookmarks">
<xf:instance src="bookmarks.xml" id="bookmarks" />
<xf:submission id="update-from-local-file" method="get" action="bookmarks.xml" replace="instance" instance="bookmarks" />
<xf:submission id="save-to-local-file" method="put" action="bookmarks.xml" />
</xf:model>
</head>
<body>
<xf:repeat nodeset="section" id="repeatSections">
<xf:input ref="@name" >
<xf:label class="sectionLabel">Section: </xf:label>
</xf:input>
<xf:repeat nodeset="bookmark" id="repeatBookmarks">
<div class="bookmark">
<xf:input class="bookmark-name" ref="@name">
<xf:label>Name: </xf:label>
</xf:input>
<xf:input class="url" ref="@href">
<xf:label>URL: </xf:label>
</xf:input>
</div>
</xf:repeat>
</xf:repeat>
<xf:trigger id="insertbutton">
<xf:label>Insert bookmark</xf:label>
<xf:insert nodeset="section[index('repeatSections')]/bookmark"
at="index('repeatBookmarks')" position="after" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger id="delete">
<xf:label>Delete bookmark</xf:label>
<xf:delete nodeset="section[index('repeatSections')]/bookmark"
at="index('repeatBookmarks')" ev:event="DOMActivate" />
</xf:trigger>
<br/>
<xf:trigger id="insertsectionbutton">
<xf:label>Insert section</xf:label>
<xf:insert nodeset="section" at="index('repeatSections')" position="after"
ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger id="deletesectionbutton">
<xf:label>Delete section</xf:label>
<xf:delete nodeset="section" at="index('repeatSections')" ev:event="DOMActivate" />
</xf:trigger>
<br/>
<xf:submit submission="update-from-local-file">
<xf:label>Reload</xf:label>
<xf:hint>Reload from local file</xf:hint>
</xf:submit>
<xf:submit submission="save-to-local-file">
<xf:label>Save</xf:label>
<xf:hint>Save to local file</xf:hint>
</xf:submit>
</body>
</html>
Sample bookmarks.xml File
This is the file that is read into the instance and updated when save is clicked.
<bookmarks>
<section name="Book Homepage">
<bookmark href="http://en.wikibooks.org/wiki/XForms" name="XForms Tutorial and Cookbook"></bookmark>
</section>
<section name="Introduction">
<bookmark href="http://en.wikibooks.org/wiki/XForms/Background" name="Background"></bookmark>
<bookmark href="http://en.wikibooks.org/wiki/XForms/Benefits" name="Benefits"></bookmark>
<bookmark href="http://en.wikibooks.org/wiki/XForms/Installing_and_Testing" name="Installing and Testing"></bookmark>
<bookmark href="http://en.wikibooks.org/wiki/XForms/Naming_Conventions" name="Naming Conventions"></bookmark>
</section>
<section name="Beginning Examples">
<bookmark href="http://en.wikibooks.org/wiki/XForms/HelloWorld" name="Hello World"></bookmark>
<bookmark href="http://en.wikibooks.org/wiki/XForms/Message" name="Benefits"></bookmark>
</section>
</bookmarks>
Discussion
This example does not have re-ordering.
References
This version was inspired by an example program on the w3c web site.
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
留言
