Updated
This commit is contained in:
Éric Lemoine
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>DOH Async MVC Mobile Demo Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="./mobile/demo/demo.css"/>
|
||||
<style>
|
||||
|
||||
html, body{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.mblEdgeToEdgeList {
|
||||
background-color: #DBDDE2;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" djConfig="parseOnLoad:0,isDebug:1,async:1" src="../../../dojo/dojo.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var repeatModel, setRef, nextIndexToAdd, selectedIndex;
|
||||
var setRef, setDetailsContext, insertResult, updateView, updateModel;
|
||||
|
||||
require([
|
||||
'dojox/mobile/parser',
|
||||
'dojox/mvc',
|
||||
'dojox/mobile',
|
||||
'dojox/mobile/ScrollableView',
|
||||
'dojox/mobile/Button',
|
||||
'dojox/mobile/TextArea',
|
||||
'dojox/mvc/Group',
|
||||
'dojox/mvc/Generate',
|
||||
'dojox/mvc/Repeat',
|
||||
'dojox/mobile/TextBox',
|
||||
'dojox/mobile/ViewController',
|
||||
'dojox/mobile/FixedSplitter',
|
||||
'dojox/mobile/EdgeToEdgeList',
|
||||
'dojox/mobile/EdgeToEdgeCategory',
|
||||
'dojox/mobile/deviceTheme',
|
||||
'dojox/mobile/RoundRectCategory',
|
||||
'dojox/mobile/Heading',
|
||||
'dojo/data/ItemFileWriteStore',
|
||||
'dojo/store/DataStore'
|
||||
], function(){
|
||||
require([
|
||||
"dojox/mobile/compat"
|
||||
]);
|
||||
|
||||
var names = {
|
||||
"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"
|
||||
}
|
||||
};
|
||||
|
||||
selectedIndex = 0;
|
||||
|
||||
model = dojox.mvc.newStatefulModel({ data : names });
|
||||
repeatmodel = null; // use store for repeat data
|
||||
nextIndexToAdd = -1;
|
||||
|
||||
// used in the Ship to - Bill to demo
|
||||
setRef = function(id, addrRef) {
|
||||
var widget = dijit.byId(id);
|
||||
widget.set("ref", addrRef);
|
||||
}
|
||||
|
||||
// used in the Repeat Data binding demo
|
||||
setDetailsContext = function(index){
|
||||
selectedIndex = index;
|
||||
var groupRoot = dijit.byId("detailsGroup");
|
||||
groupRoot.set("ref", index);
|
||||
}
|
||||
|
||||
// used in the Repeat Data binding demo
|
||||
insertResult = function(index){
|
||||
if (repeatmodel[index-1].First.value !== ""){ // TODO: figure out why we are getting called twice for each click
|
||||
var insert = dojox.mvc.newStatefulModel({ "data" : {
|
||||
"First" : "",
|
||||
"Last" : "",
|
||||
"Location": "CA",
|
||||
"Office" : "",
|
||||
"Email" : "",
|
||||
"Tel" : "",
|
||||
"Fax" : ""}
|
||||
});
|
||||
repeatmodel.add(index, insert);
|
||||
setDetailsContext(index);
|
||||
nextIndexToAdd++;
|
||||
}else{
|
||||
setDetailsContext(index-1);
|
||||
}
|
||||
};
|
||||
|
||||
// used in the Generate View demo
|
||||
var genmodel;
|
||||
updateView = function() {
|
||||
try {
|
||||
var modeldata = dojo.fromJson(dojo.byId("modelArea").value);
|
||||
genmodel = dojox.mvc.newStatefulModel({ data : modeldata });
|
||||
dijit.byId("view").set("ref", genmodel);
|
||||
dojo.byId("outerModelArea").style.display = "none";
|
||||
dojo.byId("viewArea").style.display = "";
|
||||
}catch(err){
|
||||
console.error("Error parsing json from model: "+err);
|
||||
}
|
||||
};
|
||||
|
||||
// used in the Generate View demo
|
||||
updateModel = function() {
|
||||
dojo.byId("outerModelArea").style.display = "";
|
||||
try {
|
||||
dojo.byId("modelArea").focus(); // hack: do this to force focus off of the textbox, bug on mobile?
|
||||
dojo.byId("viewArea").style.display = "none";
|
||||
dijit.byId("modelArea").set("value",(dojo.toJson(genmodel.toPlainObject(), true)));
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// 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 writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
|
||||
var modelPromise = dojox.mvc.newStatefulModel({store: new dojo.store.DataStore({store: writeStore}), query:{"Location" : "CA"}}); // example of using a query parm for Location
|
||||
|
||||
require([
|
||||
'doh/runner', 'dijit/dijit'
|
||||
], function(){
|
||||
require([
|
||||
'dojo/domReady!'
|
||||
], function(){
|
||||
modelPromise.then(function(results){
|
||||
repeatmodel = results;
|
||||
nextIndexToAdd = repeatmodel.data.length;
|
||||
console.log("before call to parser.parse");
|
||||
dojox.mobile.parser.parse();
|
||||
console.log("before call to set the wholepage style for display");
|
||||
dojo.byId("wholepage").style.display = "";
|
||||
console.log("after call to set the wholepage style for display");
|
||||
doh.register("check initial display", [{
|
||||
name : "initial",
|
||||
runTest : function() {
|
||||
var x = dojo.query(".mblListItemLabel");
|
||||
var y0 = dojo.query(".mblListItemLabel", dijit.byId("sdb").domNode)[0].innerHTML;
|
||||
var y1 = dojo.query(".mblListItemLabel", dijit.byId("rdb").domNode)[0];
|
||||
var y2 = dojo.query(".mblListItemLabel", dijit.byId("sfg").domNode)[0];
|
||||
console.debug("dijit.byId(sdb).domNode)[0].innerHTML is ["+y0+"]");
|
||||
doh.is("Simple Data Binding", dojo.trim(dojo.query(".mblListItemLabel", dijit.byId("sdb").domNode)[0].innerHTML),"first one should be Simple Data Binding");
|
||||
doh.is("Repeat Data Binding", dojo.trim(dojo.query(".mblListItemLabel", dijit.byId("rdb").domNode)[0].innerHTML),"first one should be Simple Data Binding");
|
||||
doh.is("Simple Form Generate", dojo.trim(dojo.query(".mblListItemLabel", dijit.byId("sfg").domNode)[0].innerHTML),"first one should be Simple Data Binding");
|
||||
}
|
||||
}]);
|
||||
doh.run();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
dojo.addOnLoad(function() {
|
||||
});
|
||||
|
||||
}); // end function
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wholepage" style="display:none">
|
||||
<div id="foo" dojoType="dojox.mobile.View" selected="true">
|
||||
<h1 dojoType="dojox.mobile.Heading">Mobile MVC Demo</h1>
|
||||
<h2 dojoType="dojox.mobile.RoundRectCategory">Mobile MVC Views</h2>
|
||||
<ul dojoType="dojox.mobile.RoundRectList">
|
||||
<li id="sdb" dojoType="dojox.mobile.ListItem" icon="images/i-icon-1.png" transition="slide" moveTo="settings">
|
||||
Simple Data Binding
|
||||
</li>
|
||||
<li id="rdb" dojoType="dojox.mobile.ListItem" icon="images/i-icon-2.png" transition="slide" moveTo="repeat">
|
||||
Repeat Data Binding
|
||||
</li>
|
||||
<li id="sfg" dojoType="dojox.mobile.ListItem" icon="images/i-icon-3.png" transition="slide" moveTo="generate">
|
||||
Simple Form Generate
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="settings" dojoType="dojox.mobile.ScrollableView">
|
||||
<h1 id="home" dojoType="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" dojoType="dojox.mvc.Group" ref="model">
|
||||
<div class="field-row">
|
||||
<span>Order #</span>
|
||||
<input id="lastnameInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Order #" ref="'rel:Serial'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>Last</span>
|
||||
<input id="serialInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Last" ref="'rel:Last'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>Email</span>
|
||||
<input id="emailInput1" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Last" ref="'rel:Email'"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button id="shipto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
|
||||
<button id="billto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>
|
||||
<br/>
|
||||
<div class="fieldset" id="addrGroup" dojoType="dojox.mvc.Group" ref="model.ShipTo">
|
||||
<div class="field-row">
|
||||
<span>Street</span>
|
||||
<input id="streetInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Street" ref="'rel:Street'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>City</span>
|
||||
<input id="cityInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="City" ref="'rel:City'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>State</span>
|
||||
<input id="stateInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="State" ref="'rel:State'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>ZIP Code</span>
|
||||
<input id="zipInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="ZIP Code" ref="'rel:Zip'"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button id="reset1" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="repeat" dojoType="dojox.mobile.ScrollableView">
|
||||
<h1 dojoType="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" dojoType="dojox.mvc.Repeat" class="row" ref="repeatmodel">
|
||||
<div dojoType="dojox.mvc.Group" ref="'rel:${this.index}'">
|
||||
<div class="row">
|
||||
<input dojoType="dojox.mobile.TextBox"
|
||||
id="nameInput${this.index}" ref="'rel:First'" placeHolder="First Name"/>
|
||||
<button id="details${this.index}" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setDetailsContext('${this.index}')">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div dojoType="dojox.mvc.Group" ref="repeatmodel">
|
||||
<div id="detailsBanner">Details for selected index:</div>
|
||||
<div class="fieldset" id="detailsGroup" dojoType="dojox.mvc.Group" ref="'rel:0'">
|
||||
<div class="field-row">
|
||||
<span>First Name</span>
|
||||
<input id="firstInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="First Name" ref="'rel:First'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>Last Name</span>
|
||||
<input id="lastInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Last Name" ref="'rel:Last'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>Email</span>
|
||||
<input id="emailInput2" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Email" ref="'rel:Email'"/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span>Telephone</span>
|
||||
<input id="telInput" dojoType="dojox.mobile.TextBox"
|
||||
placeholder="Telephone" ref="'rel:Tel'"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button id="add" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="insertResult(nextIndexToAdd)">Add</button>
|
||||
<button id="save" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="console.log(repeatmodel[selectedIndex].toPlainObject());repeatmodel[selectedIndex].commit()">Save</button>
|
||||
<button id="reset2" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="repeatmodel.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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user