XForms, Graph Viewer

Motivation

Sometimes you need to have a form edit data structures that are recursive. In other words: a structure that references itself.

This example has nodes that have links. These links in turn point back to nodes. This is an example of a self-referential data structure. This is common when manipulating graphs. Workflow systems frequently use these structures.

Link to Working Example

Graph Editor

XML Schema

Here is a sample XML Schema with a recursive data type (a data type that includes an instance of itself):

graph.xsd

xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
name="Graph">

Comment describing your root element

name="graph-name">

The name of the graph

name="graph-description" minOccurs="0"/>
name="node" type="nodeType" minOccurs="0" maxOccurs="unbounded">

A node that has zero or more links

name="nodeType">

A node in a graph with 0 to n links

name="node-id">

node identifier

name="links" type="linkType" minOccurs="0"/>

name="linkType">

A link from one node to another.

name="link-id">

link identifier

name="node" type="nodeType" maxOccurs="unbounded"/>

Instance Document

USA
Example of graph with states, counties, cities and neighborhoods.

usa

states-in-the-us

california

kansas

illinois

iowa

minnesota

counties-in-minnesota

carver

dakota

hennepin

cities in hennpin county

bloomington

minneapolis

richfield

st-louis-park

neighborhoods-in-st-louis-park

aquila

cobblecrest

elmwood

ramsey

cities in ramsey county

eagan

st-paul

new-york

XForms Example

This example allows you to view a graph of geographic regions.

Make sure to copy and past from the edit view of cookbook since the greater than symbols get converted.

xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema">;

XForms Graph Viewer
type="text/css">
body { font-family: Verdana, Helvetica, sans-serif }
output {font-size: 10pt}
.bold {font-weight: bold}
.indent {margin-left: 250px}

xmlns="" id="saved-data" src="usa.xml" />
xmlns="" id="path">

usa

id="current-node-id" nodeset="instance('path')/current-node-id" />
id="save-to-file" method="put" action="usa.xml" replace="instance" instance="saved-data" />

XForms Graph Viewer
Example of viewing arbitrarily deep hierarchies with XForms v0.1

ref="graph-name">
Graph Name:

/>
ref="graph-description">
Description:

/>
/>
bind="current-node-id" incremental="true">
Search for node id:

/>
class="bread-crumbs">
Sample short-cuts:

usa
ev:event="DOMActivate">
bind="current-node-id" value="'usa'" />

->

minnesota
ev:event="DOMActivate">
bind="current-node-id" value="'minnesota'" />

->

hennepin
ev:event="DOMActivate">
bind="current-node-id" value="'hennepin'" />

->

st-louis park
ev:event="DOMActivate">
bind="current-node-id" value="'st-louis-park'" />

Current Node
ref="instance('path')/current-node-id" class="bold">
Current node id:

ref="//node[node-id=instance('path')/current-node-id]/links/link-id" class="bold">
Link type:

nodeset="//node[node-id=instance('path')/current-node-id]/links/node" id="repeat-node1">
class="indent">

ref="node-id" />

ev:event="DOMActivate">
ref="instance('path')/current-node-id" value="instance('saved-data')//node[node-id=instance('path')/current-node-id]/links/node[position()=index('repeat-node1')]/node-id" />

All Nodes:
nodeset="//node" id="repeat-node2">
ref="node-id">
Node Name:

Link Types:
nodeset="//links" id="repeat-link">
ref="link-id">
Link Name:

submission="save-to-file">
Save graph

Discussion

Most of this is straight-forward XForms code.
But there is one very tricky line. This is when you click on a node listed in the list of links and you want to make the node you just selected the current node.

The trick is is to use the position() to match the index() value. When the position matches the index you can set the current-node-id equal to this node.

Thanks to Fraser for the tip!

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.