349 lines
14 KiB
HTML
349 lines
14 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>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script src="../../../dojo/dojo.js" type="text/javascript"
|
|
djConfig="parseOnLoad: false, 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("dojox.mvc.Repeat");
|
|
dojo.require("dijit.form.TextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojo.data.ItemFileWriteStore");
|
|
dojo.require("dojo.store.DataStore");
|
|
dojo.require("dojo.parser");
|
|
|
|
var results, selectedIndex = 0;
|
|
// declared here for convenience
|
|
templateString = '<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'${this.index}\'">' +
|
|
'<label class="cell">Name:</label>' +
|
|
'<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: \'First\'"></input>' +
|
|
'<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext(\'${this.index}\');}">Details</button>' +
|
|
'</div>';
|
|
|
|
function setup() {
|
|
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})});
|
|
modelPromise.then(function(model){
|
|
results = model;
|
|
dojo.parser.parse();
|
|
|
|
// Can test with either the dojox.mvc.Repeat or my.Repeat
|
|
var repeat = new my.Repeat({
|
|
//var repeat = new dojox.mvc.Repeat({
|
|
// templateString: templateString, // not needed with my.Repeat since it is set there.
|
|
ref: model
|
|
}).placeAt('repeat2');
|
|
repeat.startup();
|
|
startTests();
|
|
});
|
|
};
|
|
|
|
dojo.declare('my.Repeat', [dojox.mvc.Repeat], {
|
|
templateString : templateString
|
|
});
|
|
dojo.addOnLoad(setup);
|
|
</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
|
|
function startTests(){
|
|
// should be able to verify all of the inputs
|
|
doh.register("Check initial values and bindings", [
|
|
{
|
|
name: "initial",
|
|
runTest: function(){
|
|
var name1, bind1, firstInput;
|
|
name1 = dijit.byId("dijit_form_TextBox_10");
|
|
if (name1) {
|
|
console.log("testing dijit_form_TextBox_10");
|
|
bind1 = name1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Anne",bind1.data,"bind1.data should be set");
|
|
doh.is("Anne",bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
|
|
name1 = dijit.byId("dijit_form_TextBox_0");
|
|
if (name1) {
|
|
console.log("testing dijit_form_TextBox_0");
|
|
bind1 = name1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Anne",bind1.data,"bind1.data should be set");
|
|
doh.is("Anne",bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
|
|
firstInput = dijit.byId("firstInput");
|
|
if (firstInput) {
|
|
bind1 = firstInput.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Anne",bind1.data,"bind1.data should be set");
|
|
doh.is("Anne",bind1.value,"bind1.value should be set");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
|
|
doh.register("select Ben", [
|
|
{
|
|
name: "testBen",
|
|
runTest: function(){
|
|
setDetailsContext(1);
|
|
var name1, bind1, firstInput;
|
|
name1 = dijit.byId("dijit_form_TextBox_11");
|
|
if (name1) {
|
|
bind1 = name1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Ben",bind1.data,"bind1.data is wrong");
|
|
doh.is("Ben",bind1.value,"bind1.value is wrong");
|
|
}
|
|
}
|
|
name1 = dijit.byId("dijit_form_TextBox_1");
|
|
if (name1) {
|
|
bind1 = name1.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Ben",bind1.data,"bind1.data is wrong");
|
|
doh.is("Ben",bind1.value,"bind1.value is wrong");
|
|
}
|
|
}
|
|
|
|
firstInput = dijit.byId("firstInput");
|
|
if (firstInput) {
|
|
bind1 = firstInput.get("binding");
|
|
if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
console.debug("firstInput.value="+firstInput.value);
|
|
doh.is("Ben",bind1.data,"firstInput bind1.data is wrong");
|
|
doh.is("Ben",bind1.value,"firstInput bind1.value is wrong");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
|
|
|
|
doh.register("select John and update John to Johnny test valueOf and toString", [
|
|
{
|
|
name: "testJohn",
|
|
runTest: function(){
|
|
setDetailsContext(9); //select John
|
|
var name9, bind9, firstInput;
|
|
name9 = dijit.byId("dijit_form_TextBox_19");
|
|
if (name9) {
|
|
bind9 = name9.get("binding");
|
|
if (bind9 && bind9.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("John",bind9.data,"bind9.data is wrong");
|
|
doh.is("John",bind9.value,"bind9.value is wrong");
|
|
doh.is("John",bind9.valueOf(),"bind9.valueOf() is wrong");
|
|
doh.is("John",bind9.toString(),"bind9.toString() is wrong");
|
|
}
|
|
}
|
|
name9 = dijit.byId("dijit_form_TextBox_9");
|
|
if (name9) {
|
|
bind9 = name9.get("binding");
|
|
if (bind9 && bind9.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("John",bind9.data,"bind9.data is wrong");
|
|
doh.is("John",bind9.value,"bind9.value is wrong");
|
|
doh.is("John",bind9.valueOf(),"bind9.valueOf() is wrong");
|
|
doh.is("John",bind9.toString(),"bind9.toString() is wrong");
|
|
}
|
|
}
|
|
|
|
firstInput = dijit.byId("firstInput");
|
|
dojo.byId("firstInput").focus();
|
|
firstInput.set('value',"Johnny");
|
|
dojo.byId("lastInput").focus();
|
|
|
|
if (firstInput) {
|
|
bind9 = firstInput.get("binding");
|
|
if (bind9 && bind9.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Johnny",bind9.value,"firstInput bind9.value is wrong");
|
|
doh.is("Johnny",firstInput.value,"firstInput firstInput.value is wrong");
|
|
doh.is("Johnny",bind9.valueOf(),"firstInput bind9.valueOf() is wrong");
|
|
doh.is("Johnny",bind9.toString(),"firstInput bind9.toString() is wrong");
|
|
}
|
|
}
|
|
|
|
// Test the value of and toString
|
|
valueOfTest = new dojox.mvc.StatefulModel({ data: 42 });
|
|
doh.is(42,valueOfTest.data,"valueOfTest.data is wrong");
|
|
doh.is(42,valueOfTest.value,"valueOfTest.value is wrong");
|
|
doh.is(42,+valueOfTest,"valueOfTest.valueOf() is wrong");
|
|
doh.is("42",'' + valueOfTest,"valueOfTest.toString() is wrong");
|
|
|
|
toStringTest = new dojox.mvc.StatefulModel({ data: 'abc' });
|
|
doh.is('abc',toStringTest.data,"toStringTest.data is wrong");
|
|
doh.is('abc',toStringTest.value,"toStringTest.value is wrong");
|
|
doh.is(NaN,+toStringTest,"toStringTest.valueOf() is wrong");
|
|
doh.is('abc','' + toStringTest,"toStringTest.toString() is wrong")
|
|
|
|
|
|
}
|
|
}
|
|
]);
|
|
|
|
doh.register("test Commit and Reset", [
|
|
{
|
|
name: "testC&R",
|
|
runTest: function(){
|
|
setDetailsContext(8); //select Irene
|
|
var name8, bind8, firstInput, lastInput;
|
|
name8 = dijit.byId("dijit_form_TextBox_18");
|
|
if (name8) {
|
|
bind8 = name8.get("binding");
|
|
if (bind8 && bind8.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Irene",bind8.data,"bind8.data is wrong");
|
|
doh.is("Irene",bind8.value,"bind8.value is wrong");
|
|
}
|
|
}
|
|
name8 = dijit.byId("dijit_form_TextBox_8");
|
|
if (name8) {
|
|
bind8 = name8.get("binding");
|
|
if (bind8 && bind8.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("Irene",bind8.data,"bind8.data is wrong");
|
|
doh.is("Irene",bind8.value,"bind8.value is wrong");
|
|
}
|
|
}
|
|
|
|
//update Irene to IreneThisUpdateShouldBeSaved and commit
|
|
firstInput = dijit.byId("firstInput");
|
|
dojo.byId("firstInput").focus();
|
|
firstInput.set("value","IreneThisUpdateShouldBeSaved");
|
|
dojo.byId("lastInput").focus();
|
|
results.commit();
|
|
|
|
lastInput = dijit.byId("lastInput");
|
|
dojo.byId("lastInput").focus();
|
|
lastInput.set("value", "IraThisUpdateShouldBeReset");
|
|
dojo.byId("firstInput").focus();
|
|
results.reset();
|
|
|
|
if (firstInput) {
|
|
bind8 = firstInput.get("binding");
|
|
if (bind8 && bind8.isInstanceOf(dojox.mvc.StatefulModel)) {
|
|
doh.is("IreneThisUpdateShouldBeSaved",bind8.value,"firstInput bind8.value is wrong");
|
|
doh.is("IreneThisUpdateShouldBeSaved",firstInput.value,"firstInput firstInput.value is wrong");
|
|
doh.is("Ira",lastInput.value,"lastInput lastInput.value is wrong");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
|
|
doh.run();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<h1 class="testTitle">doh_mvc_programmatic-repeat-store.html automated tests (non-robot)</h1>
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h2>Master Detail Example - With repeat container, using a store, with save, commit and reset.</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav">
|
|
</div>
|
|
<div id="mainContent">
|
|
<div id="searchBanner">Search Results for term: </div>
|
|
<!--
|
|
The repeat container denotes a templated UI that operates over a collection
|
|
of data records.
|
|
The UI can be customized for each iteration using properties such as
|
|
${this.index} for the iteration index.
|
|
<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'results', templateString: templateString"></div>
|
|
<div id="repeatId" data-dojo-type="my.Repeat" data-dojo-props="ref: 'results'"></div>
|
|
-->
|
|
<table><tbody><tr>
|
|
<td>
|
|
<div>
|
|
<div>Programatic Repeat using my.Repeat and its templateString: </div>
|
|
<div id="repeat2"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<div>Declarative Repeat using my.Repeat does not pass templateString: </div>
|
|
<div id="repeatId2" data-dojo-type="my.Repeat" data-dojo-props="ref: 'results'"></div>
|
|
</div>
|
|
</td>
|
|
</tr></tbody></table>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'results'">
|
|
<div id="detailsBanner">Details for selected index:</div>
|
|
|
|
<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
|
|
<div class="row">
|
|
<label class="cell" for="firstInput">First Name:</label>
|
|
<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="lastInput">Last Name:</label>
|
|
<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="locationInput">Location:</label>
|
|
<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="officeInput">Office:</label>
|
|
<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"></input>
|
|
</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'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="telInput">Telephone:</label>
|
|
<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="faxInput">Fax:</label>
|
|
<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<div class="spacer"></div>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results[selectedIndex].toPlainObject());results[selectedIndex].commit();}">Save Item</button>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results.toPlainObject());results.commit();;}">Commit All</button>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){results.reset();}">Reset to last saved</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// called to change the selected item
|
|
function setDetailsContext(index) {
|
|
selectedIndex = index;
|
|
var widget = dijit.byId("detailsGroup");
|
|
widget.set("ref", index);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|