Éric Lemoine
378 lines
13 KiB
HTML
378 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>MVC DOH Test</title>
|
|
<style>
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "./css/dijitTests.css";
|
|
@import "css/app-format.css";
|
|
</style>
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
<script src="../../../dojo/dojo.js" type="text/javascript" djConfig="isDebug: true"></script>
|
|
<script type="text/javascript" src="./helpers.js"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("dojox.mvc");
|
|
dojo.require("dojox.mvc.Group");
|
|
dojo.require("dijit.form.TextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojo.parser");
|
|
|
|
// Initial data with a noticeable hierarchy
|
|
var order = {
|
|
"Serial" : "360324",
|
|
"First" : "John",
|
|
"Last" : "Doe",
|
|
"Email" : "jdoe@example.com",
|
|
"ShipTo" : {
|
|
"Type" : "Home",
|
|
"Address" : {
|
|
"Street" : "123 Valley Rd",
|
|
"City" : "Katonah",
|
|
"State" : "NY",
|
|
"Zip" : "10536"
|
|
},
|
|
"Telephone" : {
|
|
"AreaCode" : "123",
|
|
"Landline" : {
|
|
"Number" : "456-7890",
|
|
"Extension" : "42"
|
|
},
|
|
"Cell" : {
|
|
"Number" : "765-4321"
|
|
}
|
|
}
|
|
},
|
|
"BillTo" : {
|
|
"Type" : "Office",
|
|
"Address" : {
|
|
"Street" : "17 Skyline Dr",
|
|
"City" : "Hawthorne",
|
|
"State" : "NY",
|
|
"Zip" : "10532"
|
|
},
|
|
"Telephone" : {
|
|
"AreaCode" : "098",
|
|
"Landline" : {
|
|
"Number" : "765-4321",
|
|
"Extension" : "24"
|
|
},
|
|
"Cell" : {
|
|
"Number" : "123-4567"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// The dojox.mvc.StatefulModel class creates a data model instance
|
|
// where each leaf within the data model is decorated with dojo.Stateful
|
|
// properties that widgets can bind to and watch for their changes.
|
|
var model = dojox.mvc.newStatefulModel({ data : order });
|
|
var selectedAddr = dojox.mvc.newStatefulModel({ data : "ShipTo" });
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require('doh.runner');
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
|
|
dojo.addOnLoad(function() {
|
|
|
|
doh.register("parse", function() {
|
|
dojo.parser.parse();
|
|
});
|
|
|
|
// should be able to verify all of the inputs
|
|
doh.register("check initial values and bindings", [{
|
|
name : "initial",
|
|
runTest : function() {
|
|
var serial1, bind1, addr1;
|
|
//test serialInput
|
|
serial1 = dijit.byId("serialInput");
|
|
if (serial1) {
|
|
bind1 = serial1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("360324", bind1.data,"bind1.data should be set");
|
|
doh.is("360324", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test addrLabel
|
|
addr1 = dijit.byId("addrLabel");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("ShipTo", bind1.data,"bind1.data should be set");
|
|
doh.is("ShipTo", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test streetInput
|
|
addr1 = dijit.byId("streetInput");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("123 Valley Rd", bind1.data,"bind1.data should be set");
|
|
doh.is("123 Valley Rd", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
doh.register("check BillTo", [{
|
|
name : "testBillTo",
|
|
runTest : function() {
|
|
setRef('addrGroup', 'model.BillTo');
|
|
|
|
var serial1, bind1, addr1;
|
|
//test serialInput
|
|
serial1 = dijit.byId("serialInput");
|
|
if (serial1) {
|
|
bind1 = serial1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("360324", bind1.data,"bind1.data should be set");
|
|
doh.is("360324", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test addrLabel
|
|
addr1 = dijit.byId("addrLabel");
|
|
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("ShipTo", bind1.data,"bind1.data should be set");
|
|
doh.is("BillTo", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test streetInput
|
|
addr1 = dijit.byId("streetInput");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("17 Skyline Dr", bind1.data,"bind1.data should be set");
|
|
doh.is("17 Skyline Dr", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
doh.register("check ShipTo", [{
|
|
name : "testShipTo",
|
|
runTest : function() {
|
|
setRef('addrGroup', 'model.ShipTo');
|
|
|
|
var serial1, bind1, addr1;
|
|
//test serialInput
|
|
serial1 = dijit.byId("serialInput");
|
|
if (serial1) {
|
|
bind1 = serial1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("360324", bind1.data,"bind1.data should be set");
|
|
doh.is("360324", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test addrLabel
|
|
addr1 = dijit.byId("addrLabel");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("ShipTo", bind1.data,"bind1.data should be set");
|
|
doh.is("ShipTo", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test streetInput
|
|
addr1 = dijit.byId("streetInput");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("123 Valley Rd", bind1.data,"bind1.data should be set");
|
|
doh.is("123 Valley Rd", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
doh.register("change ShipTo", [{
|
|
name : "testShipTo",
|
|
runTest : function() {
|
|
setRef('addrGroup', 'model.ShipTo');
|
|
//set streetInput
|
|
addr1 = dijit.byId("streetInput");
|
|
if (addr1) {
|
|
addr1.set("value","456 Mountain Rd");
|
|
}
|
|
setRef('addrGroup', 'model.BillTo');
|
|
setRef('addrGroup', 'model.ShipTo');
|
|
|
|
var serial1, bind1, addr1;
|
|
//test serialInput
|
|
serial1 = dijit.byId("serialInput");
|
|
if (serial1) {
|
|
bind1 = serial1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("360324", bind1.data,"bind1.data should be set");
|
|
doh.is("360324", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test addrLabel
|
|
addr1 = dijit.byId("addrLabel");
|
|
if (addr1) {
|
|
bind1 = addr1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("ShipTo", bind1.data,"bind1.data should be set");
|
|
doh.is("ShipTo", bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
//test streetInput
|
|
var addr1s = dijit.byId("streetInput");
|
|
if (addr1s) {
|
|
bind1s = addr1s.get("binding");
|
|
if (bind1s && bind1s.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("456 Mountain Rd", bind1s.value,"bind1s.value should be set");
|
|
bind1s.commit();
|
|
doh.is("456 Mountain Rd", bind1s.data,"bind1s.value should be set after commit");
|
|
}
|
|
}
|
|
//test streetInput
|
|
var addr1c = dijit.byId("cityInput");
|
|
if (addr1c) {
|
|
bind1c = addr1c.get("binding");
|
|
if (bind1c && bind1c.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Katonah", bind1c.value,"bind1c.value should be set");
|
|
doh.is("Katonah", bind1c.data,"bind1c.data should be set");
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
doh.run();
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body class="claro">
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Order Shipping Details</h1>
|
|
<h2>Data Binding Example - Hierarchical data.</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav">
|
|
</div>
|
|
<div id="mainContent">
|
|
<!--
|
|
The group container denotes some logical grouping of widgets and also serves
|
|
to establish a parent data binding context for its children.
|
|
The ref attribute for the outermost container obtains the binding from the
|
|
"page scope" itself.
|
|
-->
|
|
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model'">
|
|
<div class="row">
|
|
<label class="cell" for="serialInput">Order #:</label>
|
|
<input class="cell" id="serialInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Serial'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="lastnameInput">Last name:</label>
|
|
<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Last'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="emailInput">Email:</label>
|
|
<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Email'"/>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Choose:
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.ShipTo');}">Ship To</button>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.BillTo');}">Bill To</button>
|
|
<br/>
|
|
<div class="row">
|
|
<label class="cell" for="addrLabel">Selected Address:</label>
|
|
<input class="cell" data-dojo-type="dijit.form.TextBox" id="addrLabel"
|
|
data-dojo-props="ref: 'selectedAddr'"/>
|
|
</div>
|
|
<br/>
|
|
<!--
|
|
For convenience, the widget hierarchy matches the data hierarchy
|
|
(see JSON literal above).
|
|
In this implementation, the child ref attributes are simple property names
|
|
of the parent binding context.
|
|
The ref attribute may support more advanced constructs, such as queries
|
|
over the parent widget's or other application specified binding context.
|
|
-->
|
|
<div id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model.ShipTo'">
|
|
<div class="row">
|
|
<label class="cell" for="typeInput">Type:</label>
|
|
<input class="cell" id="typeInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Type'"/>
|
|
</div>
|
|
<div id="postalGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Address'">
|
|
<div class="row">
|
|
<label class="cell" for="streetInput">Street:</label>
|
|
<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Street'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="cityInput">City:</label>
|
|
<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'City'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="stateInput">State:</label>
|
|
<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'State'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="zipInput">Zipcode:</label>
|
|
<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Zip'"/>
|
|
</div>
|
|
</div>
|
|
<div id="telGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Telephone'">
|
|
<div class="row">
|
|
<label class="cell" for="areacodeInput">Area code:</label>
|
|
<input class="cell" id="areacodeInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'AreaCode'"/>
|
|
</div>
|
|
<div id="llGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Landline'">
|
|
<div class="row">
|
|
<label class="cell" for="numberInput">Landline Number:</label>
|
|
<input class="cell" id="numberInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Number'"/>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="extInput">Extension:</label>
|
|
<input class="cell" id="extInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Extension'"/>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="cellGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Cell'">
|
|
<label class="cell" for="cellInput">Cell Number:</label>
|
|
<input class="cell" id="cellInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Number'"/>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Model:
|
|
<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
|
|
</div></div></div>
|
|
<script type="text/javascript">
|
|
function setRef(id, addrRef) {
|
|
var widget = dijit.byId(id);
|
|
widget.set("ref", addrRef);
|
|
if(addrRef == "model.ShipTo")
|
|
selectedAddr.set("value", "ShipTo");
|
|
else
|
|
selectedAddr.set("value", "BillTo");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|