Welcome, guest ( Login )

WikiHome » DojoDataUseCases » Binding Tree to Data

Binding Tree to Data

Version 10, changed by jaredj 02/21/2007.   Show version history


Summary:  

A tree can use property and attribute binders to the contents of a DataStore.

Note: This example use case uses an XML datastore implementation; so, XPath notation is used as a datastore-specific path accessor on the bindings.  For JSON datastore, or other JavaScript object-based datastores, dot notation should be used for property access.

Scenario:

User enters an ISBN in an input field, and presses Find button.  This executes the search against the datastore, and populates the search result items into a Tree.

Programmatic:

TREE_P01: Programmatic Tree widget binding with different title and child properties at different levels
...
var controller1 = dojo.widget.createWidget("dojo:TreeBasicControllerV3");
var tree1 = dojo.widget.createWidget("dojo:TreeV3", {widgetId: "Tree1", listeners:[controller1.widgetId]});
var tree1Div = dojo.byId("Tree1Div");
tree1Div.appendChild(tree1.domNode);
...
var store1 = new ibm.data.XmlStore({documentUrl: "../data/bookStore.xml"});
var args1 = {
    oncompleted: function(result) {},
    onerror: function(error) {}
};
...
var nodeBinding1 = {
    titleAccessor: {dataStore: store1, path: "isbn/text()"},
    children: [{
        accessor: {dataStore: store1, path: "title"},
        titleAccessor: {dataStore: store1, path: "text()"}
    }, {
        accessor: {dataStore: store1, path: "author"},
        titleAccessor: {dataStore: store1, path: "text()"}
    }]
};

dojox.data.bind({scope: args1, event: "oncompleted"},
    {property: "[0].items", nodeBinding: nodeBinding1},
    {object: tree1, property: "children"});
...

Declarative:

TREE_D01: Declarative Tree widgets with simple bindings to data islands. No need specify what info to display (uses simple automatic defaults)
<div dojoType="SimpleTree" id="widget_B1" dataSrc="#dataIsland_A"></div>
<div dojoType="SimpleTree" id="widget_B2" dataSrc="#dataIsland_G"></div>
<div dojoType="SimpleTree" id="widget_B3" dataSrc="#dataIsland_H"></div>
<div dojoType="SimpleTree" id="widget_B5" dataSrc="#dataIsland_K"></div>

TREE_D02: Declarative Tree widgets with simple bindings to data stores. Specify which attribute to use as a tree-node label
<div dojoType="SimpleTree" id="widget_C2" dataStore="#dataStore_A" label="title"></div>

TREE_D03: Declarative Tree widget with specific bindings to data stores
<div dojoType="SimpleTree" id="widget_G" dataSrc="#dataIsland_J" label="#title">
  <ul nodes="/world/continent">
     <li label="name">
       <ul nodes="cities/city">
         <li label="cityname"></li>
       </ul>
     </li>
   </ul>
</div>

TREE_D04: Declarative Tree binding with different title and child properties at different levels
                    See also TREE_P01
...
var controller1 = dojo.widget.createWidget("dojo:TreeBasicControllerV3");
var tree1 = dojo.widget.createWidget("dojo:TreeV3", {widgetId: "Tree1", listeners:[controller1.widgetId]});
var tree1Div = dojo.byId("Tree1Div");
tree1Div.appendChild(tree1.domNode);
...
<!-- Model -->
<div dojoType="dojox.data:XmlStore" widgetId="Store1" documentUrl="../data/bookStore.xml"></div>
<div dojoType="dojox.data:Data" widgetId="Args1"></div>
...
<div dojoType="dojox.data:TreeBinding" widgetId="Binding3"
    trigger="Args1.data"
    triggerEvent="oncompleted"
    source="arguments[0].items"   
    sourceStore="Store1.store"
    target="Tree1.children">
    <div dojoType="dojox.data:NodeBinding" widgetId="Node1"
        titlePath="isbn/text()">
        <div dojoType="dojox.data:NodeBinding" widgetId="Node2"
            path="title"
            titlePath="text()"></div>
        <div dojoType="dojox.data:NodeBinding" widgetId="Node3"
            path="author"
            titlePath="text()"></div>
    </div>
</div>
...

  [JJ] where is arguments[0] coming from?

TestCases:

Example of binding the author information from an XML datastore to a Tree widget.

Programmatic:

<html>
<head>
<title>Test Tree</title>
<script>
//var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.binding.common");
dojo.require("dojox.data.binding.Property");
dojo.require("dojox.data.binding.Tree");
dojo.require("dojox.data.binding.XmlItemAttribute");
dojo.require("dojox.data.xmlStore");
</script>
</head>
<body>
<!-- View -->
ISBN@(* for listing all): <input type="text" id="Text1" />
<input type="button" id="Button1" value="Find" />
<div id="Tree1Div"></div>
<script>
var controller1 = dojo.widget.createWidget("dojo:TreeBasicControllerV3");
var tree1 = dojo.widget.createWidget("dojo:TreeV3", {widgetId: "Tree1", listeners:[controller1.widgetId]});
var tree1Div = dojo.byId("Tree1Div");
tree1Div.appendChild(tree1.domNode);
</script>

<!-- Model -->
<script>
var store1 = new ibm.data.XmlStore({documentUrl: "../data/bookStore.xml"});
var args1 = {
    oncompleted: function(result) {},
    onerror: function(error) {}
};
</script>

<!-- Controller -->
<script>
var text1 = dojo.byId("Text1");
dojox.data.bind({scope: text1, event: "onblur"},
    {object: text1, property: "value"},
    {object: args1, property: "query.isbn"});

var button1 = dojo.byId("Button1");
dojo.event.connect(button1, "onclick", function() {
    store1.find(args1);
});

var nodeBinding1 = {
    titleAccessor: {dataStore: store1, path: "isbn/text()"},
    children: [{
        accessor: {dataStore: store1, path: "title"},
        titleAccessor: {dataStore: store1, path: "text()"}
    }, {
        accessor: {dataStore: store1, path: "author"},
        titleAccessor: {dataStore: store1, path: "text()"}
    }]
};
dojox.data.bind({scope: args1, event: "oncompleted"},
    {property: "[0].items", nodeBinding: nodeBinding1},
    {object: tree1, property: "children"});

dojo.event.connect(args1, "onerror", function(error) {
    alert(error);
});
</script>
</body>
</html>

Declarative:

<html>
<head>
<title>Test TreeBinding</title>
<script>
//var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.widget.Action");
dojo.require("dojox.data.widget.Binding");
dojo.require("dojox.data.widget.TreeBinding");
dojo.require("dojox.data.widget.NodeBinding");
dojo.require("dojox.data.widget.Data");
dojo.require("dojox.data.widget.XmlStore");
</script>
</head>
<body>
<!-- View -->
ISBN@(* for listing all): <input type="text" id="Text1" />
<input type="button" id="Button1" value="Find" />
Error: <input type="text" id="Text2" />
<div id="Tree1Div"></div>
<script>
dojo.addOnLoad(function() { // code below does not work wihout addOnLoad()...
var controller1 = dojo.widget.createWidget("dojo:TreeBasicControllerV3");
var tree1 = dojo.widget.createWidget("dojo:TreeV3", {widgetId: "Tree1", listeners:[controller1.widgetId]});
var tree1Div = dojo.byId("Tree1Div");
tree1Div.appendChild(tree1.domNode);
});
</script>

<!-- Model -->
<div dojoType="dojox.data:XmlStore" widgetId="Store1" documentUrl="../data/bookStore.xml"></div>
<div dojoType="dojox.data:Data" widgetId="Args1"></div>

<!-- Controller -->
<div dojoType="dojox.data:Binding" widgetId="Binding1"
    trigger="Text1"
    triggerEvent="onblur"
    source="Text1.value"
    target="Args1.data.query.isbn"></div>

<div dojoType="dojox.data:Action" widgetId="Action1"
    trigger="Button1"
    triggerEvent="onclick"
    object="Store1"
    method="find"
    params="Args1.data"></div>

<div dojoType="dojox.data:Binding" widgetId="Binding2"
    trigger="Args1.data"
    triggerEvent="onerror"
    source="arguments[0]"
    target="Text2.value"></div>

<div dojoType="dojox.data:TreeBinding" widgetId="Binding3"
    trigger="Args1.data"
    triggerEvent="oncompleted"
    source="arguments[0].items"
    sourceStore="Store1.store"
    target="Tree1.children">
        <div dojoType="dojox.data:NodeBinding" widgetId="Node1"
            titlePath="isbn/text()">
        <div dojoType="dojox.data:NodeBinding" widgetId="Node2"
            path="title"
            titlePath="text()"></div>
        <div dojoType="dojox.data:NodeBinding" widgetId="Node3"
            path="author"
            titlePath="text()"></div>
    </div>
</div>
</body>
</html>

Discussion:







Attachment (1)

  File By Size Attached Ver.
datastore-to-tree.jpg chrism 7K 02/20/2007 2 Delete attachment