XForms/Hierarchical Bookmarks

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

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.

Next Page: Outline Editor | Previous Page: Web Service Tester
Home: XForms