dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
345 lines (333 loc) • 14 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DOH MVC Mobile Demo Test</title>
<link rel="stylesheet" type="text/css" href="../1.7/mobile/demo/demo.css"/>
<style>
html, body{
height: 100%;
overflow: hidden;
position: relative;
}
.mblEdgeToEdgeList {
background-color: #DBDDE2;
}
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var ctrl, listCtrl;
var updateView, updateModel;
require([
"doh/runner",
"dojo/_base/declare",
"dojo/_base/json",
"dojo/when",
"dojo/dom",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mvc/getPlainValue",
"dojox/mvc/getStateful",
"dojox/mvc/EditModelRefController",
"dojox/mvc/ListController",
"dojox/mvc/StoreRefController",
"dojox/mvc/at",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/Button",
"dojox/mobile/TextArea",
"dojox/mobile/TextBox",
"dojox/mobile/ViewController",
"dojox/mobile/FixedSplitter",
"dojox/mobile/EdgeToEdgeList",
"dojox/mobile/EdgeToEdgeCategory",
"dojox/mobile/deviceTheme",
"dojox/mobile/RoundRectCategory",
"dojox/mobile/Heading",
"dojox/mvc/Group",
"dojox/mvc/Generate",
"dojox/mvc/Repeat",
"dojo/domReady!"
], function(doh, declare, djson, when, ddom, JsonRest, Memory, registry, parser, getPlainValue, getStateful, EditModelRefController, ListController, StoreRefController, at){
window.at = at;
ctrlClass = declare([EditModelRefController, ListController], {});
ctrl = new ctrlClass({sourceModel: getStateful({
Serial: "360324",
First: "John",
Last: "Doe",
Email: "jdoe@us.ibm.com",
ShipTo: {
Street: "123 Valley Rd",
City: "Katonah",
State: "NY",
Zip: "10536"
},
BillTo: {
Street: "17 Skyline Dr",
City: "Hawthorne",
State: "NY",
Zip: "10532"
}
})});
ctrl.set("cursorIndex", "ShipTo");
// used in the Generate View demo
var genmodel;
updateView = function() {
try {
genmodel = getStateful(djson.fromJson(ddom.byId("modelArea").value));
registry.byId("view").set("children", genmodel);
ddom.byId("outerModelArea").style.display = "none";
ddom.byId("viewArea").style.display = "";
}catch(err){
console.error("Error parsing json from model: "+err);
}
};
// used in the Generate View demo
updateModel = function() {
ddom.byId("outerModelArea").style.display = "";
try {
ddom.byId("modelArea").focus(); // hack: do this to force focus off of the textbox, bug on mobile?
ddom.byId("viewArea").style.display = "none";
registry.byId("modelArea").set("value", djson.toJson(getPlainValue(genmodel), true));
} catch(e) {
console.log(e);
};
};
var listCtrlClass = declare([StoreRefController, EditModelRefController, ListController], {
addEmpty: function(){
var modelToInsert = getStateful({
First: "",
Last: "",
Location: "CA",
Office: "",
Email: "",
Tel: "",
Fax: ""
});
this.model.push(modelToInsert);
this.set("cursor", modelToInsert);
}
});
listCtrl = new listCtrlClass({cursorIndex: 0});
parser.parse();
ddom.byId("wholepage").style.display = "";
when((new JsonRest({target: require.toUrl("dojox/mvc/tests/_data/mvcRepeatData.json")})).query({}), function(results){
listCtrl.set("store", new Memory({data: results.items}));
when(listCtrl.queryStore({Location: "CA"}), function(results){
doh.register("Ship to - Bill to Address page", [{
name: "Initial",
runTest: function(){
registry.byId("settings").show();
doh.is("360324", registry.byId("serialInput").get("value"), "Order# should be set");
doh.is("123 Valley Rd", registry.byId("streetInput").get("value"), "Street should be set of Ship To");
}
}, {
name: "TestBillTo",
runTest : function(){
ctrl.set("cursorIndex", "BillTo");
doh.is("17 Skyline Dr", registry.byId("streetInput").get("value"), "Street should be set of Bill To");
}
}, {
name: "TestReset",
runTest: function(){
var addr1 = registry.byId("streetInput");
addr1.set("value", "Foo");
doh.is("Foo", ctrl.get("Street"), "Street should be Foo");
ctrl.reset();
doh.is("17 Skyline Dr", addr1.get("value"), "Street should be set back to of Bill To");
}
}]);
doh.register("Repeat Data Binding Example page", [{
name: "Initial",
runTest: function(){
registry.byId("repeat").show();
doh.is("Chad", registry.byId("nameInput0").get("value"), "nameInput0 should be Chad");
doh.is("Hunter", registry.byId("nameInput1").get("value"), "nameInput1 should be Hunter");
doh.is("John", registry.byId("nameInput2").get("value"), "nameInput2 should be John");
}
}, {
name: "ChangeCursor",
runTest: function(){
listCtrl.set("cursorIndex", 1);
doh.is("Hunter", registry.byId("firstnameInputDetail").get("value"), "firstnameInputDetail should be Hunter");
}
}, {
name : "ResetAll",
runTest : function(){
var first = registry.byId("firstnameInputDetail");
first.set("value", "Foo");
doh.is("Foo", listCtrl.get("First"), "First should be Foo");
listCtrl.reset();
doh.is("Hunter", registry.byId("firstnameInputDetail").get("value"), "firstnameInputDetail should be Hunter");
}
}]);
doh.register("Simple Form Generate Example page", [{
name: "Initial",
runTest: function(){
registry.byId("generate").show();
updateView();
var tb0 = registry.byId("TB0");
doh.is("11111", tb0 && tb0.get("value"), "Serial should be 11111");
var tb6 = registry.byId("TB6");
doh.is("111-111-1111", tb6 && tb6.get("value"), "Office should be 111-111-1111");
tb6.set("value", "333-333-3333");
updateModel();
doh.t(ddom.byId("modelArea").value.indexOf("\"Office\": \"333-333-3333\""), "Model should be updated with newer Office phone number");
}
}]);
doh.run();
});
});
}); // end function
</script>
</head>
<body>
<div id="wholepage" style="display:none">
<div id="foo" data-dojo-type="dojox.mobile.View" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Mobile MVC Demo</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Mobile MVC Views</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="sdb" data-dojo-type="dojox.mobile.ListItem" icon="../1.7/mobile/demo/images/i-icon-1.png" transition="slide" moveTo="settings">
Simple Data Binding
</li>
<li id="rdb" data-dojo-type="dojox.mobile.ListItem" icon="../1.7/mobile/demo/images/i-icon-2.png" transition="slide" moveTo="repeat">
Repeat Data Binding
</li>
<li id="sfg" data-dojo-type="dojox.mobile.ListItem" icon="../1.7/mobile/demo/images/i-icon-3.png" transition="slide" moveTo="generate">
Simple Form Generate
</li>
</ul>
</div>
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
<h1 id="home" data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Data Binding Example</h1>
<form name="testForm" id="testForm">
<div class="field-title">Ship to - Bill to Address</div>
<div class="fieldset" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model')">
<div class="field-row">
<span>Order #</span>
<input id="serialInput" placeholder="Order #" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Serial')" />
</div>
<div class="field-row">
<span>Last</span>
<input placeholder="Last" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Last')" />
</div>
<div class="field-row">
<span>Email</span>
<input placeholder="Last" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Email')" />
</div>
</div>
<div class="spacer"></div>
<button id="shipto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.set('cursorIndex', 'ShipTo');">Ship To</button>
<button id="billto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.set('cursorIndex', 'BillTo');">Bill To</button>
<br/>
<div class="fieldset" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'cursor')">
<div class="field-row">
<span>Street</span>
<input id="streetInput" placeholder="Street" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Street')" />
</div>
<div class="field-row">
<span>City</span>
<input placeholder="City" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'City')" />
</div>
<div class="field-row">
<span>State</span>
<input placeholder="State" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'State')" />
</div>
<div class="field-row">
<span>ZIP Code</span>
<input placeholder="ZIP Code" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Zip')" />
</div>
</div>
<div class="spacer"></div>
<button id="reset1" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.reset()">Reset</button>
</form>
</div>
<div id="repeat" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Repeat Data Binding Example</h1>
<form name="repeatTestForm" id="repeatTestForm">
<div class="field-title">Search Results</div>
<div class="fieldset" class="row" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at(listCtrl, 'model')">
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', '${this.index}')">
<div class="row">
<input id="nameInput${this.index}" placeHolder="First Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'First')" />
<button id="details${this.index}" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.set('cursorIndex', '${this.index}')">Details</button>
</div>
</div>
</div>
<div class="spacer"></div>
<div id="detailsBanner">Details for selected index:</div>
<div class="fieldset" id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(listCtrl, 'cursor')">
<div class="field-row">
<span>First Name</span>
<input id="firstnameInputDetail" placeholder="First Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'First')" />
</div>
<div class="field-row">
<span>Last Name</span>
<input placeholder="Last Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Last') "/>
</div>
<div class="field-row">
<span>Email</span>
<input placeholder="Email" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Email')" />
</div>
<div class="field-row">
<span>Telephone</span>
<input placeholder="Telephone" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Tel')" />
</div>
</div>
<div class="spacer"></div>
<button id="add" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.addEmpty();">Add</button>
<button id="save" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.commit();">Save</button>
<button id="reset2" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.reset();">Reset</button>
</form>
</div>
<div id="generate" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Simple Form Generate Example</h1>
<div class="field-title"></div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent" class="generate-maincontent">
<div id="outerModelArea">
<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Model</h3>
<div class="generate-textarea-row">
<textarea class="generate-textarea-cell" data-dojo-type="dojox.mobile.TextArea" id="modelArea">
{
"Serial": "11111",
"First": "John",
"Last": "Doe",
"Email": "jdoe@example.com",
"Phones": [
{
"Office": "111-111-1111"
},
{
"Mobile": "222-222-2222"
}
]
}
</textarea>
</div>
<div class="fieldset">
<div class="spacer"></div>
<button id="generate1" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateView()">Generate Form</button>
</div>
</div>
<div id="viewArea" style="display:none">
<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Generated View</h3>
<div class="fieldset">
<div id="view" data-dojo-type="dojox.mvc.Generate" data-dojo-props="widgetMapping: {'String': 'dojox.mobile.TextBox'}, idNameMapping: {'String' : 'TB'}"></div>
</div>
<div class="fieldset">
<div class="spacer"></div>
<button id="updateModel" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateModel()">Update Model</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>