Hierarchical Bookmarks

XForms · Wikibooks

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From Wikibooks, under CC BY-SA 4.0, as the source states it. This page at Wikibooks.

    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

    Illustration
    Screen image using FireFox XForms extension

    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