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.
1,040 lines (966 loc) • 56.1 kB
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 "../../../../dijit/tests/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" data-dojo-config="isDebug: 1, async: 1, mvc: {debugBindings: 1, extensionPerWidget: true}"></script>
<script type="text/javascript" src="./helpers.js"></script>
<script type="text/javascript" >
require([
"doh/runner",
"dojo/dom",
"dojo/number",
"dojo/parser",
"dojo/when",
"dojo/Stateful",
"dojo/data/ItemFileReadStore",
"dojo/date/locale",
"dijit/registry",
"dijit/form/Button",
"dijit/form/ComboBox",
"dijit/form/DateTextBox",
"dijit/form/FilteringSelect",
"dijit/form/HorizontalSlider",
"dijit/form/NumberSpinner",
"dijit/form/NumberTextBox",
"dijit/form/TextBox",
"dijit/form/Select",
"dijit/form/SimpleTextarea",
"dijit/form/Textarea",
"dijit/Calendar",
"dijit/ColorPalette",
"dojox/mvc/at",
"dojox/mvc/atBindingExtension",
"dojox/mvc/EditModelRefController",
"dojox/mvc/Output"
], function(doh, ddom, number, parser, when, Stateful, ItemFileReadStore, locale, registry, Button,
ComboBox, DateTextBox, FilteringSelect, HorizontalSlider, NumberSpinner, NumberTextBox,
TextBox, Select, SimpleTextarea, Textarea, Calendar, ColorPalette,
at, atBindingExtension, EditModelRefController, Output){
for(var i = 0, l = arguments.length; i < l; ++i){
var proto = arguments[i].prototype;
if((proto || {})._blankGif){
atBindingExtension(proto);
}
}
store = new ItemFileReadStore({
data: {
identifier: "id",
label: "name",
items: [
{id: "1", name: "one"},
{id: "2", name: "two"},
{id: "3", name: "three"},
{id: "4", name: "four"},
{id: "5", name: "five"},
{id: "6", name: "six"},
{id: "7", name: "seven"},
{id: "8", name: "eight"},
{id: "9", name: "nine"},
{id: "10", name: "ten"},
{id: "11", name: "eleven"},
{id: "12", name: "twelve"},
{id: "13", name: "thirteen"}
]
}
});
store2 = new ItemFileReadStore({data: {
identifier: "value",
label: "label",
items: [
{value: "1", label: "one"},
{value: "2", label: "two"},
{value: "3", label: "three"},
{value: "4", label: "four"},
{value: "5", label: "five"},
{value: "6", label: "six"},
{value: "7", label: "seven"},
{value: "8", label: "eigth"},
{value: "9", label: "nine"},
{value: "10", label: "ten"},
{value: "11", label: "eleven"},
{value: "12", label: "twelve"},
{value: "13", label: "thirteen"},
{value: "14", label: "fourteen"}
]
}});
// create models for selects
selctrl = new EditModelRefController({sourceModel: new Stateful({number: "1"})});
decselctrl = new EditModelRefController({sourceModel: new Stateful({number: "1"})});
// create models for filtering selects
filctrl = new EditModelRefController({sourceModel: new Stateful({number: "2"})});
decfilctrl = new EditModelRefController({sourceModel: new Stateful({number: "2"})});
// create models for ComboBoxes
comboctrl = new EditModelRefController({sourceModel: new Stateful({number: "three"})});
deccomboctrl = new EditModelRefController({sourceModel: new Stateful({number: "three"})});
// create a model for DateTextBox
datectrl = new EditModelRefController({sourceModel: new Stateful({number: new Date(2011, 3, 4)})});
decdatectrl = new EditModelRefController({sourceModel: new Stateful({number: new Date(2011, 3, 4)})});
// create a model for Slider
sliderctrl = new EditModelRefController({sourceModel: new Stateful({number: "5"})});
decsliderctrl = new EditModelRefController({sourceModel: new Stateful({number: "5"})});
// create a model for NumberSpinner
numspinctrl = new EditModelRefController({sourceModel: new Stateful({number: 6})});
decnumspinctrl = new EditModelRefController({sourceModel: new Stateful({number: 6})});
// create a model for SimpleTextArea
simpTActrl = new EditModelRefController({sourceModel: new Stateful({number: "7"})});
decsimpTActrl = new EditModelRefController({sourceModel: new Stateful({number: "7"})});
// create a model for TextArea
textareactrl = new EditModelRefController({sourceModel: new Stateful({number: "8"})});
dectextareactrl = new EditModelRefController({sourceModel: new Stateful({number: "8"})});
// create a model for dijit.Calendar
deccalctrl = new EditModelRefController({sourceModel: new Stateful({date: new Date(2011, 3, 4)})});
// create a model for dijit.ColorPalette
deccolorctrl = new EditModelRefController({sourceModel: new Stateful({code: "#000000"})});
nanmodel = new Stateful({num: null});
dummyDateWid = new DateTextBox({constraints:{datePattern:"MM-dd-yyyy", strict:true}});
when(parser.parse(), function(){
// Handle the programmatic creation of widgets here:
// create the select, textbox, output and button
var sel = new Select({
store: store,
loadChildrenOnOpen: true,
value: at(selctrl, "number")
}, ddom.byId("sel"));
(new TextBox({value: at(selctrl, "number")}, ddom.byId("seltext"))).startup();
var selOutput = new Output({value: at(selctrl, "number")}, ddom.byId("selOutput"));
selOutput.startup();
var reset1 = new Button({
onClick: function(){ selctrl.reset(); },
id: "selReset",
label: "Reset"
}, ddom.byId("reset1"));
reset1.startup();
sel.startup();
// create the filtering select, textbox, output and button
var filsel = new FilteringSelect({
store: store,
value: at(filctrl, "number")
}, ddom.byId("filsel"));
var filtext = new TextBox({value: at(filctrl, "number")}, ddom.byId("filtext"));
var filoutput = new Output({value: at(filctrl, "number")}, ddom.byId("filoutput"));
filoutput.startup();
var filreset = new Button({
onClick: function(){ filctrl.reset(); },
id: "filReset",
label: "Reset"
}, ddom.byId("filreset"));
filreset.startup();
filtext.startup();
filsel.startup();
// create the comboBox, textbox, output and button
var combo = new ComboBox({
store: store,
value: at(comboctrl, "number")
}, ddom.byId("combosel"));
var combotext = new TextBox({value: at(comboctrl, "number")}, ddom.byId("combotext"));
var combooutput = new Output({value: at(comboctrl, "number")}, ddom.byId("combooutput"));
combooutput.startup();
var comboreset = new Button({
onClick: function(){ comboctrl.reset(); },
id: "comboReset",
label: "Reset"
}, ddom.byId("comboreset"));
comboreset.startup();
combotext.startup();
combo.startup();
// create the dijit.form.DateTextBox, textbox, output and button
var dateWid = new DateTextBox({
value: at(datectrl, "number"),
constraints: dummyDateWid.constraints
}, ddom.byId("datesel"));
var datetext = new TextBox({
value: at(datectrl, "number").transform(dummyDateWid.dateLocaleModule),
constraints: dummyDateWid.constraints
}, ddom.byId("datetext"));
var dateoutput = new Output({
value: at(datectrl, "number").transform(dummyDateWid.dateLocaleModule),
constraints: dummyDateWid.constraints
}, ddom.byId("dateoutput"));
dateoutput.startup();
var datereset = new Button({
onClick: function(){ datectrl.reset(); },
id: "dateReset",
label: "Reset"
}, ddom.byId("datereset"));
datereset.startup();
datetext.startup();
dateWid.startup();
// create the dijit.form.HorizontalSlider, textbox, output and button
var sliderWid = new HorizontalSlider({
style: {width: "190px"},
minimum: 0,
maximum: 100,
discreteValues: 21,
value: at(sliderctrl, "number") // bind to model.number
}, ddom.byId("slidersel"));
var slidertext = new TextBox({value: at(sliderctrl, "number").transform(number)}, ddom.byId("slidertext"));
var slideroutput = new Output({ value: at(sliderctrl, "number").transform(number)}, ddom.byId("slideroutput"));
slideroutput.startup();
var sliderreset = new Button({
onClick: function(){ sliderctrl.reset(); },
id: "sliderReset",
label: "Reset"
}, ddom.byId("sliderreset"));
sliderreset.startup();
slidertext.startup();
sliderWid.startup();
// create the dijit.form.NumberSpinner, textbox, output and button
var numspinWid = new NumberSpinner({value: at(numspinctrl, "number")}, ddom.byId("numspinsel"));
var numspintext = new TextBox({value: at(numspinctrl, "number").transform(number)}, ddom.byId("numspintext"));
var numspinoutput = new Output({value: at(numspinctrl, "number").transform(number)}, ddom.byId("numspinoutput"));
numspinoutput.startup();
var numspinreset = new Button({
onClick: function(){ numspinctrl.reset(); },
id: "numspinReset",
label: "Reset"
}, ddom.byId("numspinreset"));
numspinreset.startup();
numspintext.startup();
numspinWid.startup();
// create the dijit.form.SimpleTextarea, textbox, output and button
var simpTAWid = new SimpleTextarea({
style: {height: "20px", width: "180px"},
value: at(simpTActrl, "number")
}, ddom.byId("simpTAsel"));
var simpTAtext = new TextBox({value: at(simpTActrl, "number")}, ddom.byId("simpTAtext"));
var simpTAoutput = new Output({value: at(simpTActrl, "number")}, ddom.byId("simpTAoutput"));
simpTAoutput.startup();
var simpTAreset = new Button({
onClick: function(){ simpTActrl.reset(); },
id: "simpTAReset",
label: "Reset"
}, ddom.byId("simpTAreset"));
simpTAreset.startup();
simpTAtext.startup();
simpTAWid.startup();
// create the dijit.form.Textarea, textbox, output and button
var textareaWid = new Textarea({value: at(textareactrl, "number")}, ddom.byId("textareasel"));
var textareatext = new TextBox({value: at(textareactrl, "number")}, ddom.byId("textareatext"));
var textareaoutput = new Output({value: at(textareactrl, "number")}, ddom.byId("textareaoutput"));
textareaoutput.startup();
var textareareset = new Button({
onClick: function(){ textareactrl.reset(); },
id: "textareaReset",
label: "Reset"
}, ddom.byId("textareareset"));
textareareset.startup();
textareatext.startup();
textareaWid.startup();
var numBox = new dijit.form.NumberTextBox({value: at(nanmodel, "num")}, ddom.byId("nannb"));
numBox.startup();
doh.register("Check initial programatic values and bindings for select widget only", [
{
name: "InitialSelectOnly",
runTest: function(){
var wid, textboxval, outputval;
wid = registry.byId("sel");
textboxval = registry.byId("seltext").value;
outputval = registry.byId("selOutput").value;
//console.log("This test was commented out because it will fail if _FromSelectWidget is not updated to setup the store in postCreate instead of startup, see ticket 13372 for details.");
// Test Select
doh.is("1",wid.get("value"),"This test will fail if _FromSelectWidget is not updated to setup the store in postCreate instead of startup, see ticket 13372 for details.");
doh.is(textboxval,wid.get("value"),"wid.get(\"value\") should be set same as textboxval");
doh.is(outputval,wid.get("value"),"wid.get(\"value\") should be set same as outputval");
}
}
]);
doh.register("Check initial values and bindings widgets other than select", [
{
name: "InitialOtherThanSelect",
runTest: function(){
// Test FilteringSelect
var wid, textboxval, outputval;
wid = registry.byId("filsel");
textboxval = registry.byId("filtext").value;
outputval = registry.byId("filoutput").value;
doh.is("2", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("two", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
wid = registry.byId("combosel");
textboxval = registry.byId("combotext").value;
outputval = registry.byId("combooutput").value;
doh.is("three", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("three", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
wid = registry.byId("datesel");
textboxval = registry.byId("datetext").value;
outputval = registry.byId("dateoutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set it is:" + wid.get("value"));
doh.is("04-04-2011", wid.displayedValue, "wid.displayedValue should be set it is:" + wid.displayedValue);
doh.is("04-04-2011", textboxval, "textboxval should be set it is:" + textboxval);
doh.is("04-04-2011", outputval, "outputval should be set it is:" + outputval);
// Test dijit.form.HorizontalSlider
wid = registry.byId("slidersel");
textboxval = registry.byId("slidertext").value;
outputval = registry.byId("slideroutput").value;
doh.is("5", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
wid = registry.byId("numspinsel");
textboxval = registry.byId("numspintext").value;
outputval = registry.byId("numspinoutput").value;
doh.is("6", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
wid = registry.byId("simpTAsel");
textboxval = registry.byId("simpTAtext").value;
outputval = registry.byId("simpTAoutput").value;
doh.is("7", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
wid = registry.byId("textareasel");
textboxval = registry.byId("textareatext").value;
outputval = registry.byId("textareaoutput").value;
doh.is("8", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}, {
name: "Initial-declarative",
runTest: function(){
var wid, textboxval, outputval;
// Test Select
wid = registry.byId("decsel");
textboxval = registry.byId("decseltext").value;
outputval = registry.byId("decselOutput").value;
doh.is("1", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test FilteringSelect
wid = registry.byId("decfilsel");
textboxval = registry.byId("decfiltext").value;
outputval = registry.byId("decfilOutput").value;
doh.is("2", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("two", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
wid = registry.byId("deccombosel");
textboxval = registry.byId("deccombotext").value;
outputval = registry.byId("deccomboOutput").value;
doh.is("three",wid.get("value"),"wid.get(\"value\") should be set");
doh.is("three",wid.displayedValue,"wid.displayedValue should be set");
doh.is(textboxval,wid.get("value"),"wid.get(\"value\") should be set same as textboxval");
doh.is(outputval,wid.get("value"),"wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
wid = registry.byId("decdatesel");
textboxval = registry.byId("decdatetext").value;
outputval = registry.byId("decdateOutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set it is:" + wid.get("value"));
doh.is("04-04-2011", wid.displayedValue, "wid.displayedValue should be set it is:" + wid.displayedValue);
doh.is("04-04-2011", textboxval, "textboxval should be set it is:" + textboxval);
doh.is("04-04-2011", outputval, "outputval should be set it is:" + outputval);
// Test dijit.form.HorizontalSlider
wid = registry.byId("decslidersel");
textboxval = registry.byId("decslidertext").value;
outputval = registry.byId("decsliderOutput").value;
doh.is("5", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
wid = registry.byId("decnumspinsel");
textboxval = registry.byId("decnumspintext").value;
outputval = registry.byId("decnumspinOutput").value;
doh.is("6", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
wid = registry.byId("decsimpTAsel");
textboxval = registry.byId("decsimpTAtext").value;
outputval = registry.byId("decsimpTAOutput").value;
doh.is("7", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
wid = registry.byId("dectextareasel");
textboxval = registry.byId("dectextareatext").value;
outputval = registry.byId("dectextareaOutput").value;
doh.is("8", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}
]);
doh.register("Check initial/updated calendar and colorpalette values", [
{
name: "Initial-calendar-and-color",
runTest: function(){
var wid, textboxval, outputval;
// Test Calendar
wid = registry.byId("deccal");
textboxval = registry.byId("deccaltext").value;
outputval = registry.byId("deccalOutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set it is:" + wid.get("value"));
doh.is("04-04-2011", textboxval, "1-textboxval should be set");
doh.is("04-04-2011", outputval, "1-textboxval should be set");
// Test dijit.ColorPalette
wid = registry.byId("deccolor");
textboxval = registry.byId("deccolortext").value;
outputval = registry.byId("deccolorOutput").value;
doh.is("#000000", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}, {
name: "Updated-test-calendar-and-color",
runTest: function(){
var wid, textboxval, outputval;
// Test Update calendar
var d = new Date(2011, 10, 10);
wid = registry.byId("deccal");
wid.set("value", d);
textboxval = registry.byId("deccaltext").value;
outputval = registry.byId("deccalOutput").value;
doh.is(d.getTime(), wid.get("value").getTime(), "2-wid.get(\"value\") should be set " + wid.get("value"));
doh.is("11-10-2011", textboxval, "2-textboxval should be set" + textboxval);
doh.is("11-10-2011", outputval, "2-textboxval should be set" + outputval);
// Test dijit.ColorPalette
// update the text field
registry.byId("deccolortext").set("value", "#ffffff");
wid = registry.byId("deccolor");
textboxval = registry.byId("deccolortext").value;
outputval = registry.byId("deccolorOutput").value;
doh.is("#ffffff", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test Reset Calendar
button = registry.byId("deccalReset"); // reset the model
button.onClick();
wid = registry.byId("deccal");
textboxval = registry.byId("deccaltext").value;
outputval = registry.byId("deccalOutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "3-wid.get(\"value\") should be set " + wid.get("value"));
doh.is("04-04-2011", textboxval, "3-textboxval should be set" + textboxval);
doh.is("04-04-2011", outputval, "3-textboxval should be set" + outputval);
// Test reset the dijit.ColorPalette
button = registry.byId("deccolorReset"); // reset the model
button.onClick();
wid = registry.byId("deccolor");
textboxval = registry.byId("deccolortext").value;
outputval = registry.byId("deccolorOutput").value;
doh.is("#000000", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}
]);
// Update and Test all fields
doh.register("Test update for all values and bindings", [
{
name: "Update-programatic",
runTest: function(){
// update the text field
registry.byId("seltext").set("value", "10");
var wid, textboxval, outputval;
// Test Select
wid = registry.byId("sel");
textboxval = registry.byId("seltext").value;
outputval = registry.byId("selOutput").value;
doh.is("10", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test FilteringSelect
// update the text field
registry.byId("filtext").set("value", "10");
wid = registry.byId("filsel");
textboxval = registry.byId("filtext").value;
outputval = registry.byId("filoutput").value;
doh.is("10", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("ten", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
registry.byId("combotext").set("value", "ten");
wid = registry.byId("combosel");
textboxval = registry.byId("combotext").value;
outputval = registry.byId("combooutput").value;
doh.is("ten", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("ten", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
// update the text field
registry.byId("datetext").set("value", "10-10-2011");
wid = registry.byId("datesel");
textboxval = registry.byId("datetext").value;
outputval = registry.byId("dateoutput").value;
doh.is((new Date(2011, 9, 10)).getTime(), wid.get("value").getTime(), "wid.get(value) should be set " + wid.get("value"));
doh.is("10-10-2011", textboxval, "2-textboxval should be set" + textboxval);
doh.is("10-10-2011", outputval, "2-textboxval should be set" + outputval);
// Test dijit.form.HorizontalSlider
// update the text field
registry.byId("slidertext").set("value", "10");
wid = registry.byId("slidersel");
textboxval = registry.byId("slidertext").value;
outputval = registry.byId("slideroutput").value;
doh.is("10", wid.get("value"), "wid.get(value) should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
registry.byId("numspintext").set("value", "10");
wid = registry.byId("numspinsel");
textboxval = registry.byId("numspintext").value;
outputval = registry.byId("numspinoutput").value;
doh.is("10", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
registry.byId("simpTAtext").set("value", "10");
wid = registry.byId("simpTAsel");
textboxval = registry.byId("simpTAtext").value;
outputval = registry.byId("simpTAoutput").value;
doh.is("10", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
registry.byId("textareatext").set("value", "10");
wid = registry.byId("textareasel");
textboxval = registry.byId("textareatext").value;
outputval = registry.byId("textareaoutput").value;
doh.is("10", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}, {
name: "Update-declarative",
runTest: function(){
registry.byId("decsel").set("value", "4");
var wid, textboxval, outputval;
// Test Select
wid = registry.byId("decsel");
textboxval = registry.byId("decseltext").value;
outputval = registry.byId("decselOutput").value;
doh.is("4", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test FilteringSelect
wid = registry.byId("decfilsel");
wid.set("value", "4");
textboxval = registry.byId("decfiltext").value;
outputval = registry.byId("decfilOutput").value;
doh.is("4", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("four", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
wid = registry.byId("deccombosel");
wid.set("value", "four");
textboxval = registry.byId("deccombotext").value;
outputval = registry.byId("deccomboOutput").value;
doh.is("four", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("four", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
wid = registry.byId("decdatesel");
wid.set("value", new Date(2011, 8, 9));
textboxval = registry.byId("decdatetext").value;
outputval = registry.byId("decdateOutput").value;
doh.is((new Date(2011, 8, 9)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set " + wid.get("value"));
doh.is("09-09-2011", textboxval, "textboxval should be set" + textboxval);
doh.is("09-09-2011", outputval, "textboxval should be set" + outputval);
// Test dijit.form.HorizontalSlider
wid = registry.byId("decslidersel");
wid.set("value", "4");
textboxval = registry.byId("decslidertext").value;
outputval = registry.byId("decsliderOutput").value;
doh.is("4", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
wid = registry.byId("decnumspinsel");
wid.set("displayedValue", "4");
textboxval = registry.byId("decnumspintext").value;
outputval = registry.byId("decnumspinOutput").value;
doh.is("4", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
wid = registry.byId("decsimpTAsel");
wid.set("value", "4");
textboxval = registry.byId("decsimpTAtext").value;
outputval = registry.byId("decsimpTAOutput").value;
doh.is("4", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
wid = registry.byId("dectextareasel");
wid.set("value","4"); // update widget value
textboxval = registry.byId("dectextareatext").value;
outputval = registry.byId("dectextareaOutput").value;
doh.is("4", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}
]);
// Test RESET for all fields
doh.register("Test reset for all values and bindings", [
{
name: "Reset-programatic",
runTest: function(){
// reset the model
var button = registry.byId("selReset");
button.onClick();
var wid, textboxval, outputval;
// Test Select
wid = registry.byId("sel");
textboxval = registry.byId("seltext").value;
outputval = registry.byId("selOutput").value;
doh.is("1", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test FilteringSelect
button = registry.byId("filReset");
button.onClick();
wid = registry.byId("filsel");
textboxval = registry.byId("filtext").value;
outputval = registry.byId("filoutput").value;
doh.is("2", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("two", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
button = registry.byId("comboReset");
button.onClick();
wid = registry.byId("combosel");
textboxval = registry.byId("combotext").value;
outputval = registry.byId("combooutput").value;
doh.is("three", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("three", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
button = registry.byId("dateReset");
button.onClick();
wid = registry.byId("datesel");
textboxval = registry.byId("datetext").value;
outputval = registry.byId("dateoutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set " + wid.get("value"));
doh.is("04-04-2011", textboxval, "textboxval should be set" + textboxval);
doh.is("04-04-2011", outputval, "textboxval should be set" + outputval);
// test a second reset...
button.onClick();
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set " + wid.get("value"));
doh.is("04-04-2011", textboxval, "textboxval should be set" + textboxval);
doh.is("04-04-2011", outputval, "textboxval should be set" + outputval);
// Test dijit.form.HorizontalSlider
button = registry.byId("sliderReset");
button.onClick();
wid = registry.byId("slidersel");
textboxval = registry.byId("slidertext").value;
outputval = registry.byId("slideroutput").value;
doh.is("5", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
button = registry.byId("numspinReset");
button.onClick();
wid = registry.byId("numspinsel");
textboxval = registry.byId("numspintext").value;
outputval = registry.byId("numspinoutput").value;
doh.is("6", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
button = registry.byId("simpTAReset");
button.onClick();
wid = registry.byId("simpTAsel");
textboxval = registry.byId("simpTAtext").value;
outputval = registry.byId("simpTAoutput").value;
doh.is("7", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
button = registry.byId("textareaReset");
button.onClick();
wid = registry.byId("textareasel");
textboxval = registry.byId("textareatext").value;
outputval = registry.byId("textareaoutput").value;
doh.is("8", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}, {
name: "Reset-declarative",
runTest: function(){
var button = registry.byId("decselReset"); // reset the model
button.onClick();
var wid, textboxval, outputval;
// Test Select
wid = registry.byId("decsel");
textboxval = registry.byId("decseltext").value;
outputval = registry.byId("decselOutput").value;
doh.is("1", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test FilteringSelect
button = registry.byId("decfilReset"); // reset the model
button.onClick();
wid = registry.byId("decfilsel");
textboxval = registry.byId("decfiltext").value;
outputval = registry.byId("decfilOutput").value;
doh.is("2", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("two", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.ComboBox
button = registry.byId("deccomboReset"); // reset the model
button.onClick();
wid = registry.byId("deccombosel");
textboxval = registry.byId("deccombotext").value;
outputval = registry.byId("deccomboOutput").value;
doh.is("three", wid.get("value"), "wid.get(\"value\") should be set");
doh.is("three", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.DateTextBox
button = registry.byId("decdateReset"); // reset the model
button.onClick();
wid = registry.byId("decdatesel");
textboxval = registry.byId("decdatetext").value;
outputval = registry.byId("decdateOutput").value;
doh.is((new Date(2011, 3, 4)).getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set " + wid.get("value"));
doh.is("04-04-2011", textboxval, "textboxval should be set" + textboxval);
doh.is("04-04-2011", outputval, "textboxval should be set" + outputval);
// Test dijit.form.HorizontalSlider
button = registry.byId("decsliderReset"); // reset the model
button.onClick();
wid = registry.byId("decslidersel");
textboxval = registry.byId("decslidertext").value;
outputval = registry.byId("decsliderOutput").value;
doh.is("5", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.NumberSpinner
button = registry.byId("decnumspinReset"); // reset the model
button.onClick();
wid = registry.byId("decnumspinsel");
textboxval = registry.byId("decnumspintext").value;
outputval = registry.byId("decnumspinOutput").value;
doh.is("6", wid.displayedValue, "wid.displayedValue should be set");
doh.is(textboxval, wid.displayedValue, "wid.displayedValue should be set same as textboxval");
doh.is(outputval, wid.displayedValue, "wid.displayedValue should be set same as outputval");
// Test dijit.form.SimpleTextarea
button = registry.byId("decsimpTAReset"); // reset the model
button.onClick();
wid = registry.byId("decsimpTAsel");
textboxval = registry.byId("decsimpTAtext").value;
outputval = registry.byId("decsimpTAOutput").value;
doh.is("7", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
// Test dijit.form.Textarea
button = registry.byId("dectextareaReset"); // reset the model
button.onClick();
wid = registry.byId("dectextareasel");
textboxval = registry.byId("dectextareatext").value;
outputval = registry.byId("dectextareaOutput").value;
doh.is("8", wid.get("value"), "wid.get(\"value\") should be set");
doh.is(textboxval, wid.get("value"), "wid.get(\"value\") should be set same as textboxval");
doh.is(outputval, wid.get("value"), "wid.get(\"value\") should be set same as outputval");
}
}
]);
// Test reset all declarative
doh.register("Test NaN values and bindings", [
{
name: "NaN-test",
runTest: function(){
var button = registry.byId("decselReset"); // reset the model
button.onClick();
var wid, wid2;
// test for NaN stuff here, uses nanmodel, without fix for ticket 14190 FF crashes
wid = registry.byId("nannb");
wid.focus();
wid2 = registry.byId("textareatext");
wid2.focus();
wid = registry.byId("nannb");
wid.focus();
wid2.focus();
doh.t(isNaN(wid.get("value")), "isNaN(wid.get(\"value\") should be true");
}
}
]);
doh.run();
});
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="header" style="margin-top: 0px;">
<div id="navigation" style="margin-top: 0px;"></div>
<div id="headerInsert" style="margin-top: 0px;">
<h2>Data-bound Form Element Kitchen Sink MVC test</h2>
</div>
</div>
<div id="main" style="margin-top: 0px;">
<div id="leftNav"></div>
<div id="mainContent">
<h2 style="margin-top: 0px;">Programmatic creation of Form elements:</h2>
<table>
<tbody>
<tr>
<td><label>Widget</label></td>
<td><label></label></td>
<td><label>Textbox</label></td>
<td><label>Output</label></td>
<td><label>Model Reset</label></td>
</tr>
<tr>
<td><label for="sel">Select:</label></td>
<td><div id="sel"></div></td>
<td><div id="seltext"></div></td>
<td><div id="selOutput"></div></td>
<td><div id="reset1" ></div></td>
</tr>
<tr>
<td><label for="filsel">FilteringSelect:</label></td>
<td><div id="filsel"></div></td>
<td><div id="filtext"></div></td>
<td><div id="filoutput"></div></td>
<td><div id="filreset"></div></td>
</tr>
<tr>
<td><label for="combosel">ComboBox:</label></td>
<td><div id="combosel"></div></td>
<td><div id="combotext"></div></td>
<td><div id="combooutput"></div></td>
<td><div id="comboreset"></div></td>
</tr>
<tr>
<td><label for="datesel">DateTextBox:</label></td>
<td><div id="datesel"></div></td>
<td><div id="datetext"></div></td>
<td><div id="dateoutput"></div></td>
<td><div id="datereset"></div></td>
</tr>
<tr>
<td><label for="slidersel">Slider:</label></td>
<td><div id="slidersel"></div></td>
<td><div id="slidertext"></div></td>
<td><div id="slideroutput"></div></td>
<td><div id="sliderreset"></div></td>
</tr>
<tr>
<td><label for="numspinsel">NumberSpinner:</label></td>
<td><div id="numspinsel"></div></td>
<td><div id="numspintext"></div></td>
<td><div id="numspinoutput"></div></td>
<td><div id="numspinreset"></div></td>
</tr>
<tr>
<td><label for="simpTAsel">SimpleTextArea:</label></td>
<td><div id="simpTAsel"></div></td>
<td><div id="simpTAtext"></div></td>
<td><div id="simpTAoutput"></div></td>
<td><div id="simpTAreset"></div></td>
</tr>
<tr>
<td><label for="textareasel">TextArea:</label></td>
<td><div id="textareasel"></div></td>
<td><div id="textareatext"></div></td>
<td><div id="textareaoutput"></div></td>
<td><div id="textareareset"></div></td>
</tr>
<tr>
<td><label for="nannb">TextBox nan test:</label></td>
<td><div id="nannb"></div></td>
</tr>
</tbody>
</table>
<h2>Declarative creation of Form elements:</h2>
<table>
<tbody>
<tr>
<td><label>Widget</label></td>
<td><label></label></td>
<td><label>Textbox</label></td>
<td><label>Output</label></td>
<td><label>Model Reset</label></td>
</tr>
<tr>
<td><label for="decsel">Select:</label></td>
<td>
<select id="decsel" style="width: 188px;"
data-dojo-id="decsel" data-dojo-type="dijit/form/Select"
data-dojo-props="name: 'decsel', value: at(decselctrl, 'number')">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</td>
<td>
<input class="cell" id="decseltext" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at(decselctrl, 'number')"></input>
</td>
<td><span id="decselOutput" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(decselctrl, 'number')"></span></td>
<td>
<button id="decselReset" type="button" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){decselctrl.reset();}">Reset</button>
</td>
</tr>
<tr>
<td><label for="decfilsel">FilteringSelect:</label></td>
<td>
<input id="decfilsel" data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="store: store, value: at(decfilctrl, 'number')">
</td>
<td>
<input id="decfiltext" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at(decfilctrl, 'number')"></input>
</td>
<td><span id="decfilOutput" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(decfilctrl, 'number')"></span></td>
<td>
<button id="decfilReset" type="button" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){decfilctrl.reset();}">Reset</button>
</td>
</tr>
<tr>
<td><label for="deccombosel">ComboBox:</label></td>
<td>
<input id="deccombosel" data-dojo-type="dijit/form/ComboBox"
data-dojo-props="store: store, value: at(deccomboctrl, 'number')">
</td>
<td>
<input id="deccombotext" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at(deccomboctrl, 'number')"></input>
</td>
<td><span id="deccomboOutput" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(deccomboctrl, 'number')"></span></td>
<td>
<button id="deccomboReset" type="button" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){deccomboctrl.reset();}">Reset</button>
</td>
</tr>
<tr>
<td><label for="datesel">DateTextBox:</label></td>
<td>
<input id="decdatesel" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="store: store, value: at(decdatectrl, 'number'), constraints: dummyDateWid.constraints">
</td>
<td>
<input id="decdatetext" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at(decdatectrl, 'number').transform(dummyDateWid.dateLocaleModule),
constraints: dummyDateWid.constraints"></input>
</td>
<td>
<span id="decdateOutput"