Welcome, guest ( Login )

WikiHome » DojoDataUseCases » Binding Properties of a Widget to DataStore

Binding Properties of a Widget to DataStore

Version 10, changed by chrism 02/20/2007.   Show version history




Summary:  

A value change on a widget can push the data to a datastore and save it.   For example, taking the value from an input text box and saving it as an item in a DataStore.

Scenario:

User inputs ISBN# into an input field, and presses Save button to save changes to an XML datastore.

Note: XML store is just used for purposes of example.  Any kind of store could be used instead (just change accessor paths to match the type of store)

Programmatic:

<!-- View -->
ISBN:
<input type="text" id="Text1" />
<input type="button" id="Button1" value="Save" />
...
<!-- Model -->
var store1 = new dojox.data.XmlStore();
var data1 = {};

<!-- Controller -->
var text1 = dojo.byId("Text1");
dojox.data.bind({scope: text1, event: "onblur"},
    {object: text1, property: "value"},
    {object: data1, property: "item", dataStore: store1, path: "/book/isbn/text()"});

dojo.event.connect(dojo.byId("Button1"), "onclick", function() { //This is only needed to trigger the Save
    var saved = store1.save();
    if (!saved)
        alert("Nothing has been saved.");
});

Declarative:

<!-- View -->
ISBN: <input type="text" id="Text1" /><input type="button" id="Button1" value="Save" />
Return: <input type="text" id="Text4" />

<!-- Model -->
<div dojoType="ibm:XmlStore" widgetId="Store1"></div>
<div dojoType="ibm:Data" widgetId="Item1"></div>

<!-- Controller -->
<div dojoType="ibm:Binding" widgetId="Binding1"
    trigger="Text1"
    triggerEvent="onblur"
    source="Text1.value"
    target="Item1.data.item"
    targetStore="Store1.store"
    targetPath="/book/isbn/text()"></div>

<!-- Note: This action is only needed for triggering the Save... -->
<div dojoType="ibm:Action" widgetId="Action1"
    trigger="Button1"
    triggerEvent="onclick"
    object="Store1"
    method="save"
    result="Text4.value"></div>
</body>
</html>


Test Cases

Note: Once binding code is available in nightlies, these will be linked to code.

Programmatic:

<html>
<head>
<title>Test XmlStore.save()</title>
<script>
var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.require("dojo.event.*");
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.binding.common");
dojo.require("dojox.data.binding.Property");
dojo.require("dojox.data.binding.XmlItemAttribute");
dojo.require("dojox.data.XmlStore");
</script>
</head>
<body>
<!-- View -->
ISBN: <input type="text" id="Text1" />
Title: <input type="text" id="Text2" />
Author: <input type="text" id="Text3" />
<input type="button" id="Button1" value="Save" />

<!-- Model -->
<script>
var store1 = new ibm.data.XmlStore();
var data1 = {};
</script>

<!-- Controller -->
<script>
var text1 = dojo.byId("Text1");
dojox.data.bind({scope: text1, event: "onblur"},
    {object: text1, property: "value"},
    {object: data1, property: "item", dataStore: store1, path: "/book/isbn/text()"});

var text2 = dojo.byId("Text2");
dojox.data.bind({scope: text2, event: "onblur"},
    {object: text2, property: "value"},
    {object: data1, property: "item", dataStore: store1, path: "/book/title/text()"});

var text3 = dojo.byId("Text3");
dojox.data.bind({scope: text3, event: "onblur"},
    {object: text3, property: "value"},
    {object: data1, property: "item", dataStore: store1, path: "/book/author/text()"});

dojo.event.connect(dojo.byId("Button1"), "onclick", function() {
    var saved = store1.save();
    if (!saved)
        alert("Nothing has been saved.");
});
</script>
</body>
</html>

Declarative:

<html>
<head>
<title>Test XmlStore.save()</title>
<script>
var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.decl.Action");
dojo.require("dojox.data.decl.Binding");
dojo.require("dojox.data.decl.Data");
dojo.require("dojox.data.decl.XmlStore");
dojo.hostenv.writeIncludes();
</script>
</head>
<body>
<!-- View -->
ISBN: <input type="text" id="Text1" />
Title: <input type="text" id="Text2" />
Author: <input type="text" id="Text3" />
<input type="button" id="Button1" value="Save" />
Return: <input type="text" id="Text4" />

<!-- Model -->
<div dojoType="dojox.data:XmlStore" widgetId="Store1"></div>
<div dojoType="dojox.data:Data" widgetId="Item1"></div>

<!-- Controller -->
<div dojoType="dojox.data:Binding" widgetId="Binding1"
    trigger="Text1"
    triggerEvent="onblur"
    source="Text1.value"
    target="Item1.data.item"
    targetStore="Store1.store"
    targetPath="/book/isbn/text()"></div>

<div dojoType="dojox.data:Binding" widgetId="Binding2"
    trigger="Text2"
    triggerEvent="onblur"
    source="Text2.value"
    target="Item1.data.item"
    targetStore="Store1.store"
    targetPath="/book/title/text()"></div>

<div dojoType="dojox.data:Binding" widgetId="Binding3"
    trigger="Text3"
    triggerEvent="onblur"
    source="Text3.value"
    target="Item1.data.item"
    targetStore="Store1.store"
    targetPath="/book/author/text()"></div>

<div dojoType="dojox.data:Action" widgetId="Action1"
    trigger="Button1"
    triggerEvent="onclick"
    object="Store1"
    method="save"
    result="Text4.value"></div>
</body>
</html>


Discussion:







Attachment (1)

  File By Size Attached Ver.
widget-to-data.jpg jaredj 5K 02/16/2007 1 Delete attachment