Welcome, guest ( Login )

WikiHome » DojoDataUseCases » Binding Widget to Action

Binding Widget to Action

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

Summary:

Bind some event on a widget to invoke an Action, which is usually on another widget. The primary purpose of the <action/> tags are for a declarative method of doing dojo.event.connect(). This makes it simpler for tools to generate HTML to do all the connections.

Programmatic:


...

ISBN@(* for listing all):
<input type="text" id="Text1" />
<input type="button" id="Button1" value="Find" />
...

var store1 = new dojox.data.XmlStore({documentUrl: "../data/bookStore.xml"});
var args1 = {
oncompleted: function(result) {},
onerror: function(error) {}
};
...

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);
});
...

Declarative:

...

ISBN@(* for listing all):
<input type="text" id="Text1" />
<input type="button" id="Button1" value="Find" />
Error:
<input type="text" id="Text2" />

<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>
...


Test Cases:

This example is based on the more complex example of binding a datastore to a tree. Only the action specific events, such as the binding of a button click to a find invocation on a DataStore widget are shown.

<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.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.XmlStore");
dojo.require("dojox.data.binding.common");
dojo.require("dojox.data.binding.Property");
     
</script>
</head>
<body>
<!-- View -->
ISBN@(* for listing all): <input type="text" id="Text1" />
<input type="button" id="Button1" value="Find" />
     
<!-- Model -->
<script>
var store1 = new dojox.data.XmlStore({documentUrl: "../data/bookStore.xml"});
var args1 = {
    oncompleted: function(result) {},
    onerror: function(error) {}
};
</script>
     
<!-- Controller -->
<script>
var text1 = dojo.byId("Text1");
ibm.binding.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);
});
   
</script>
</body>
</html>


Declarative:

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.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" />
     
<!-- 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>
     
</body>
</html>


Discussion:

Attachment (1)

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