302 lines
9.6 KiB
HTML
302 lines
9.6 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="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.parser");
|
|
|
|
// Raw records for the master detail
|
|
var search_results_init =
|
|
{
|
|
"Query" : "Engineers",
|
|
"Results" : [
|
|
{
|
|
"First" : "Anne",
|
|
"Last" : "Ackerman",
|
|
"Location": "NY",
|
|
"Office" : "1S76",
|
|
"Email" : "a.a@test.com",
|
|
"Tel" : "123-764-8237",
|
|
"Fax" : "123-764-8228"
|
|
},
|
|
{
|
|
"First" : "Ben",
|
|
"Last" : "Beckham",
|
|
"Location": "NY",
|
|
"Office" : "5N47",
|
|
"Email" : "b.b@test.com",
|
|
"Tel" : "123-764-8599",
|
|
"Fax" : "123-764-8600"
|
|
},
|
|
{
|
|
"First" : "Chad",
|
|
"Last" : "Chapman",
|
|
"Location": "CA",
|
|
"Office" : "1278",
|
|
"Email" : "c.c@test.com",
|
|
"Tel" : "408-764-8237",
|
|
"Fax" : "408-764-8228"
|
|
},
|
|
{
|
|
"First" : "David",
|
|
"Last" : "Durham",
|
|
"Location": "NJ",
|
|
"Office" : "C12",
|
|
"Email" : "d.d@test.com",
|
|
"Tel" : "514-764-8237",
|
|
"Fax" : "514-764-8228"
|
|
},
|
|
{
|
|
"First" : "Emma",
|
|
"Last" : "Eklof",
|
|
"Location": "NY",
|
|
"Office" : "4N76",
|
|
"Email" : "e.e@test.com",
|
|
"Tel" : "123-764-1234",
|
|
"Fax" : "123-764-4321"
|
|
},
|
|
{
|
|
"First" : "Fred",
|
|
"Last" : "Fisher",
|
|
"Location": "NJ",
|
|
"Office" : "V89",
|
|
"Email" : "f.f@test.com",
|
|
"Tel" : "514-764-8567",
|
|
"Fax" : "514-764-8000"
|
|
},
|
|
{
|
|
"First" : "George",
|
|
"Last" : "Garnett",
|
|
"Location": "NY",
|
|
"Office" : "7S11",
|
|
"Email" : "gig@test.com",
|
|
"Tel" : "123-999-8599",
|
|
"Fax" : "123-999-8600"
|
|
},
|
|
{
|
|
"First" : "Hunter",
|
|
"Last" : "Huffman",
|
|
"Location": "CA",
|
|
"Office" : "6532",
|
|
"Email" : "h.h@test.com",
|
|
"Tel" : "408-874-8237",
|
|
"Fax" : "408-874-8228"
|
|
},
|
|
{
|
|
"First" : "Irene",
|
|
"Last" : "Ira",
|
|
"Location": "NJ",
|
|
"Office" : "F09",
|
|
"Email" : "i.i@test.com",
|
|
"Tel" : "514-764-6532",
|
|
"Fax" : "514-764-7300"
|
|
},
|
|
{
|
|
"First" : "John",
|
|
"Last" : "Jacklin",
|
|
"Location": "CA",
|
|
"Office" : "6701",
|
|
"Email" : "j.j@test.com",
|
|
"Tel" : "408-764-1234",
|
|
"Fax" : "408-764-4321"
|
|
}
|
|
]
|
|
};
|
|
|
|
// 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 searchRecords = dojox.mvc.newStatefulModel({ data : search_results_init });
|
|
</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 name1, bind1, firstInput;
|
|
name1 = dijit.byId("nameInput0");
|
|
if (name1) {
|
|
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("nameInput1");
|
|
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.run();
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<h1 class="testTitle">doh_mvc_search-results-repeat.html automated tests (non-robot)</h1>
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Employee Search</h1>
|
|
<h2>Master Detail Example - With repeat container.</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 data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'searchRecords'">
|
|
<div class="row">
|
|
<label class="cell" for="queryInput">Search for:</label>
|
|
<input class="cell" id="queryInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Query'"/>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setSearchBanner();}">Search</button>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
|
|
<div id="searchBanner">Search Results for term: Engineers</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 data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'Results'">
|
|
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
|
|
<label class="cell" for="nameInput${this.index}">Name:</label>
|
|
<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="ref: 'First'"/>
|
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext('${this.index}');}">Details</button>
|
|
</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
|
|
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Results'">
|
|
<div id="detailsBanner">Details for result index: 0</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'"/>
|
|
</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'"/>
|
|
</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'"/>
|
|
</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'"/>
|
|
</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 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'"/>
|
|
</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'"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
function setDetailsContext(index) {
|
|
var widget = dijit.byId("detailsGroup");
|
|
widget.set("ref", index);
|
|
var detailsBanner = dojo.byId("detailsBanner");
|
|
detailsBanner.innerHTML = "Details for result index: " + index;
|
|
}
|
|
function setSearchBanner() {
|
|
var searchBanner = dojo.byId("searchBanner");
|
|
searchBanner.innerHTML = "Search Results for term: " + searchRecords.Query.get("value");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|