411 REFERENCE · Wikibooks
XForms/Hierarchical Bookmarks
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
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 <repeat> to achieve this.
Screen Image
frame|center|Screen image using FireFox XForms extension
Link to working example
Bookmarks Example
Sample Programs
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>
<!-- For each section -->
<xf:repeat nodeset="section" id="repeatSections">
<div class="repeat-section-container">
<xf:input ref="@name">
<xf:label class="sectionLabel">Section: </xf:label>
</xf:input>
<!-- For all bookmarks in this section -->
<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>
<!-- For each section -->
<xf:repeat nodeset="section" id="repeatSections">
<xf:input ref="@name" >
<xf:label class="sectionLabel">Section: </xf:label>
</xf:input>
<!-- For all bookmarks in this section -->
<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.
<?xml version="1.0" encoding="UTF-8"?>
<!--bookmarks.xml-->
<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.
Outline Editor Web Service Tester