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.
609 lines (549 loc) • 22.9 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Templated Widgets Tests</title>
<!-- DOH test for the dojox/mobile widgets which support templatization:
Button, CheckBox, Heading, ListItem, RadioButton, Slider,
Switch, ToggleButton, and View. -->
<script type="text/javascript" src="../../../deviceTheme.js"></script>
<script type="text/javascript" src="../../../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
<script type="text/javascript">
// Templates
// Without widgets (pure HTML); with attach point for label node.
var templateListItem1 = // pure HTML
"<div>A template." +
" <div data-dojo-attach-point=\'labelNode\'></div>" +
"</div>";
// With widgets; with attach point for labelNode.
var templateListItem2 =
"<div>" +
" <div data-dojo-type='dojox/mobile/RoundRect'>" +
" A template." +
" <div data-dojo-attach-point='labelNode'></div>" +
" </div>" +
"</div>";
// With widgets; without attach point for labelNode.
var templateListItem3 =
"<div>" +
" <div data-dojo-type='dojox/mobile/RoundRect'>" +
" A template." +
" </div>" +
"</div>";
var templateHeading1 =
"<div class='mblHeading mblHeadingCenterTitle'>" +
" <span data-dojo-type='dojox/mobile/ToolBarButton'" +
" data-dojo-attach-point='backButton'" +
" data-dojo-props='arrow: \"left\", back: true, transitionDir: -1'>" +
" </span>" +
" <ul data-dojo-type='dojox/mobile/TabBar'" +
" style='float:right;'" +
" data-dojo-props='barType:\"segmentedControl\", selectOne:false'>" +
" <li data-dojo-type='dojox/mobile/TabBarButton'" +
" data-dojo-props='icon:\"mblDomButtonWhiteUpArrow\"'></li>" +
" <li data-dojo-type='dojox/mobile/TabBarButton'" +
" data-dojo-props='icon:\"mblDomButtonWhiteDownArrow\"'></li>" +
" </ul>" +
" <span class='mblHeadingSpanTitle'" +
" data-dojo-attach-point='labelNode'>" +
" </span>" +
" <div class='mblHeadingDivTitle'" +
" data-dojo-attach-point='labelDivNode'>" +
" </div>" +
"</div>";
var templateSlider1 =
"<div class='mblSlider mblSliderH' tabindex='0'" +
" aria-valuenow='${value}'" +
" data-dojo-attach-point='focusNode'>" +
" <input data-dojo-attach-point='valueNode'" +
" type='hidden' value='${value}'>" +
" <div data-dojo-attach-point='relativeParent'" +
" style='position: relative; height: 100%; width: 100%;'>" +
" <div data-dojo-attach-point='progressBar'" +
" style='position: absolute; left: 0px; width: 100%;'" +
" class='mblSliderProgressBar mblSliderTransition'>" +
" </div>" +
" <div data-dojo-attach-point='touchBox'" +
" style='position: absolute;' class='mblSliderTouchBox'>" +
" </div>" +
" <div data-dojo-attach-point='handle'" +
" style='position: absolute; left: 100%;'" +
" class='mblSliderHandle mblSliderTransition'>" +
" </div>" +
" </div>" +
"</div>";
var templateButton1 =
"<button class='${baseClass}' data-dojo-attach-point='containerNode'></button>";
var templateToggleButton1 =
"<span>" +
" <button class='${baseClass}' tabindex='0'" +
" style='-webkit-user-select: none;' aria-pressed='true'" +
" data-dojo-attach-point='containerNode'>" +
" </button>" +
"</span>";
var templateCheckBox1 =
"<input type='checkbox'" +
" class='mblCheckBox mblCheckBoxChecked' value='${value}' tabindex='0'" +
" style='-webkit-user-select: none;' aria-checked='true'>";
var templateRadioButton1 =
"<input type='radio' value='Small' class='mblRadioButton mblRadioButtonChecked'" +
" tabindex='0' style='-webkit-user-select: none;' aria-checked='true'>";
var templateSwitch1 =
"<span class='mblSwitch mblSwDefaultShape mblSwitchOn' tabindex='0' >" +
" <div class='mblSwitchInner' data-dojo-attach-point='inner'>" +
" <div class='mblSwitchBg mblSwitchBgLeft'" +
" data-dojo-attach-point='left'>" +
" <div class='mblSwitchText mblSwitchTextLeft'>ON</div>" +
" </div>" +
" <div class='mblSwitchBg mblSwitchBgRight' style='display: none;'" +
" data-dojo-attach-point='right'>" +
" <div class='mblSwitchText mblSwitchTextRight'>OFF</div>" +
" </div>" +
" <div class='mblSwitchKnob' data-dojo-attach-point='knob'></div>" +
" <input type='hidden' value='on' data-dojo-attach-point='input'>" +
" </div>" +
"</span>";
var templateView1 =
"<div>" +
" <div data-dojo-type='dojox/mobile/Heading'" +
" data-dojo-props='label: \"Templated View\"'>" +
" </div>" +
" <div data-dojo-attach-point='myAttachPoint'>" +
"${myProp}" + // no indentation here such that we can test by comparing the
"</div>" + // innerHTML of the attach point with the value of myProp
" <ul data-dojo-type='dojox/mobile/RoundRectList'>" +
" <li data-dojo-type='dojox/mobile/ListItem'>" +
" Apple" +
" </li>" +
" <li data-dojo-type='dojox/mobile/ListItem'>" +
" Banana" +
" </li>";
" </ul>" +
"</div>";
// Templated widget classes
var TemplatedListItem1, TemplatedWithWidgetsListItem1,
TemplatedWithWidgetsHeading1, TemplatedSwitch, TemplatedView1;
require([
"dojo/ready",
"dojo/dom",
"dojo/dom-class",
"dojo/sniff",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojo/_base/declare",
"dojo/dom-construct",
"doh/runner",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojox/mobile/ListItem",
"dojox/mobile/Heading",
"dojox/mobile/Switch",
"dojox/mobile/View",
"dojox/mobile/Button",
"dojox/mobile/TabBar",
"dojox/mobile/TabBarButton",
"dojox/mobile/CheckBox",
"dojox/mobile/ToggleButton",
"dojox/mobile/RadioButton",
"dojox/mobile/Slider",
"dojox/mobile/RoundRect",
"dojox/mobile/RoundRectList",
"dojox/mobile/ScrollableView"
], function(ready, dom, domClass, has, registry, parser, mobile, compat, declare, domConstruct,
runner, TemplatedMixin, WidgetsInTemplateMixin,
ListItem, Heading, Switch, View){
// 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified
TemplatedListItem1 = declare(
[ListItem, TemplatedMixin], {
label: "Some label",
templateString: templateListItem1
}
);
// 2.2 With widgets; with attach point for labelNode but no label property specified
TemplatedWithWidgetsListItem1 = declare(
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
templateString: templateListItem2
}
);
// 2.3 With widgets; without attach point for labelNode and no label property specified
TemplatedWithWidgetsListItem2 = declare(
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
templateString: templateListItem3
}
);
// 2.4 With widgets; without attach point for labelNode but label property specified
// (error case)
TemplatedWithWidgetsListItem3 = declare(
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
label: "Some label",
templateString: templateListItem3
}
);
TemplatedWithWidgetsHeading1 = declare(
[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
templateString: templateHeading1
}
);
TemplatedWithWidgetsHeading2 = declare(
[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
back:"Back",
label: "Templated by: <code>Heading2.html</code> (using declare)",
templateString: templateHeading1
}
);
TemplatedSwitch = declare(
[Switch, TemplatedMixin], {
templateString: templateSwitch1
}
);
TemplatedView1 = declare(
[View, TemplatedMixin, WidgetsInTemplateMixin], {
myProp: "myValue",
templateString: templateView1
}
);
ready(function(){
runner.register("dojox.mobile.test.doh.TemplatedWidgetsTests", [
function testTemplatedListItem(){
// 1. Using markup
// 1.1 With attach point for labelNode and label property specified
var listItem = registry.byId("listItem1");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertEqual("Some label", listItem.label);
runner.assertTrue(!!listItem.labelNode, "1.1 labelNode");
runner.assertEqual("Some label", listItem.labelNode.innerHTML, "1.1 labelNode.innerHTML");
// 1.2 With attach point for labelNode but no label property specified
listItem = registry.byId("listItem2");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertFalse(!!listItem.label, "1.2 label");
runner.assertTrue(!!listItem.labelNode, "1.2 labelNode");
// 1.3 Without attach point for labelNode and no label property specified
listItem = registry.byId("listItem3");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertFalse(!!listItem.label, "1.2 label");
runner.assertFalse(!!listItem.labelNode, "1.2 labelNode");
// 2. Using declare
// 2.1 With attach point for labelNode and label property specified
listItem = registry.byId("listItem4");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertEqual("Some label", listItem.label);
runner.assertTrue(!!listItem.labelNode);
runner.assertEqual("Some label", listItem.labelNode.innerHTML, "2.1 labelNode.innerHTML");
// 2.2 With attach point for labelNode but no label property specified
listItem = registry.byId("listItem5");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertFalse(!!listItem.label, "2.2 label");
runner.assertTrue(!!listItem.labelNode, "2.2 labelNode");
// 2.3 Without attach point for labelNode and no label property specified
listItem = registry.byId("listItem6");
runner.assertTrue(!!listItem.domNode);
runner.assertTrue(domClass.contains(listItem.domNode, "mblListItem"));
runner.assertFalse(!!listItem.label, "2.3 label");
runner.assertFalse(!!listItem.labelNode, "2.3 labelNode");
// 2.4 Without attach point for labelNode but label property specified
// (error case)
try{
new TemplatedWithWidgetsListItem3({
label: "Some label"
});
runner.assertTrue(false,
"Creating a templated ListItem without attach point for labelNode " +
"should throw Error if label property is set");
}catch(err){
// error as expected
}
},
function testTemplatedHeading(){
// 3. Using markup
// 3.1 With back specified and no attach point
var heading = registry.byId("heading1");
runner.assertTrue(!!heading.domNode);
runner.assertTrue(domClass.contains(heading.domNode, "mblHeading"));
runner.assertFalse(!!heading.label);
runner.assertFalse(!!heading.labelNode);
runner.assertFalse(!!heading.labelDivNode);
runner.assertTrue(!!heading.backButton, "3.1 backButton");
runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label");
// 3.2 With attach points; back and label specified
heading = registry.byId("heading2");
runner.assertTrue(!!heading.domNode, "heading2.domNode");
runner.assertTrue(domClass.contains(heading.domNode, "mblHeading"));
runner.assertEqual("Some label", heading.label);
runner.assertTrue(!!heading.labelNode);
runner.assertTrue(!!heading.labelDivNode);
runner.assertEqual("Some label", heading.labelNode.innerHTML);
runner.assertTrue(!!heading.backButton, "3.2 backButton");
runner.assertEqual("Back", heading.backButton.label, "1.1 backButton.label");
// 3.3 Without attach point for backButton but back property specified
// (error case)
try{
new TemplatedWithWidgetsHeading1({
back: "Back"
});
runner.assertTrue(false,
"Creating a templated Heading without attach point for backButton " +
"should throw Error if back property is set");
}catch(err){
// error as expected
}
// 3.4 Without attach point for labelNode but label property specified
// (error case)
try{
new TemplatedWithWidgetsHeading1({
label: "Some label"
});
runner.assertTrue(false,
"Creating a templated Heading without attach point for labelNode " +
"should throw Error if label property is set");
}catch(err){
// error as expected
}
},
function testTemplatedFormControls(){
// Button
var widget = registry.byId("button1");
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, "mblButton"));
// Slider
widget = registry.byId("slider1");
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, "mblSlider"));
runner.assertTrue(!!widget.focusNode);
runner.assertTrue(!!widget.valueNode);
runner.assertTrue(!!widget.relativeParent);
runner.assertTrue(!!widget.progressBar);
runner.assertTrue(!!widget.touchBox);
runner.assertTrue(!!widget.handle);
// CheckBox
widget = registry.byId("checkbox1");
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
"mblCheckableInputContainer" : "mblCheckBox"));
// ToggleButton
widget = registry.byId("togglebutton1");
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, "mblToggleButton"));
// Switch
widget = registry.byId("switch1");
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
"mblSwitchContainer" : "mblSwitch"));
runner.assertTrue(!!widget.inner);
runner.assertTrue(!!widget.left);
runner.assertTrue(!!widget.right);
runner.assertTrue(!!widget.knob);
runner.assertTrue(!!widget.input);
runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner"));
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg"));
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft"));
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg"));
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight"));
runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob"));
widget = registry.byId("switch2"); // using declare
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
"mblSwitchContainer" : "mblSwitch"));
runner.assertTrue(!!widget.inner);
runner.assertTrue(!!widget.left);
runner.assertTrue(!!widget.right);
runner.assertTrue(!!widget.knob);
runner.assertTrue(!!widget.input);
runner.assertTrue(domClass.contains(widget.inner, "mblSwitchInner"));
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBg"));
runner.assertTrue(domClass.contains(widget.left, "mblSwitchBgLeft"));
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBg"));
runner.assertTrue(domClass.contains(widget.right, "mblSwitchBgRight"));
runner.assertTrue(domClass.contains(widget.knob, "mblSwitchKnob"));
// RadioButton
widget = registry.byId("rb1"); // using declare
runner.assertTrue(!!widget.domNode);
runner.assertTrue(domClass.contains(widget.domNode, has("windows-theme") ?
"mblCheckableInputContainer" : "mblRadioButton"));
},
function testTemplatedView(){
var view = registry.byId("view1");
runner.assertTrue(!!view.domNode);
runner.assertTrue(domClass.contains(view.domNode, "mblView"));
runner.assertTrue(!!view.myAttachPoint);
runner.assertTrue(!!view.myAttachPoint.innerHTML);
runner.assertEqual("myValue", view.myAttachPoint.innerHTML, "view.myAttachPoint.innerHTML");
}
]);
runner.run();
});
})
</script>
<style type="text/css">
html,body{
height: 100%;
}
.mblRoundRect {
margin-left: 32px;
margin-right: 32px;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="main" data-dojo-type="dojox/mobile/View">
<!-- Templated ListItem -->
<div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView">
<ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-props="variableHeight: true">
<!-- Templated ListItem -->
<!-- 1. In markup -->
<!-- 1.1 With attach point for labelNode and label property specified -->
<li id="listItem1" data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="label:'Some label',
templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
</li>
<!-- 1.2 With attach point for labelNode but no label property specified -->
<li id="listItem2" data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
</li>
<!-- 1.3 Without attach point for labelNode and no label property specified -->
<li id="listItem3" data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'">
</li>
<!-- 2. In markup using classes created with declare -->
<!-- 2.1 Without widgets (pure HTML); with attach point for labelNode and label property specified -->
<li id="listItem4" data-dojo-type=TemplatedListItem1>
</li>
<!-- 2.2 With widgets; with attach point for labelNode but no label property specified -->
<li id="listItem5" data-dojo-type=TemplatedWithWidgetsListItem1>
</li>
<!-- 2.3 Without attach point for labelNode and no label property specified -->
<li id="listItem6" data-dojo-type=TemplatedWithWidgetsListItem2>
</li>
<!-- Templated Heading -->
<!-- 3.1 With back specified and no attach point -->
<div id="heading1" data-dojo-type="dojox/mobile/Heading"
data-dojo-props="back:'Back',
templateString: '<div>My inline <i>HTML</i> template (markup)</div>'"
data-dojo-mixins="dijit/_TemplatedMixin">
</div>
<!-- 3.2 With attach points; back and label specified -->
<div id="heading2" data-dojo-type=TemplatedWithWidgetsHeading1
data-dojo-props="back:'Back', label: 'Some label'">
</div>
<!-- Templated Button -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">Button</span></td>
<td style="text-align:right">
<button id="button1" data-dojo-type="dojox/mobile/Button"
data-dojo-props="templateString: templateButton1"
data-dojo-mixins="dijit/_TemplatedMixin">
Press me!
</button>
</td>
</tr>
</table>
</div>
<!-- Templated Slider -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">Slider</span></td>
<td style="float:right">
<input id="slider1" data-dojo-type="dojox/mobile/Slider"
style="width:200px;" type="range"
data-dojo-props="templateString: templateSlider1,
value:10, min:0, max:40, step:0.1"
data-dojo-mixins="dijit/_TemplatedMixin">
</td>
</tr>
</table>
</div>
<!-- Templated CheckBox -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">CheckBox</span></td>
<td style="text-align:right">
<label for="checkbox1">Click me</label>
<input type="checkbox" id="checkbox1"
data-dojo-type="dojox/mobile/CheckBox"
data-dojo-props="templateString: templateCheckBox1">
</td>
</tr>
</table>
</div>
<!-- Templated ToggleButton -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">ToggleButton</span></td>
<td style="text-align:right">
<button id="togglebutton1" data-dojo-type="dojox/mobile/ToggleButton"
data-dojo-props="templateString: templateToggleButton1">
Toggle me
</button>
</td>
</tr>
</table>
</div>
<!-- Templated Switch -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">Switch</span></td>
<td style="text-align:right">
<input id="switch1" type="checkbox" value="on"
data-dojo-type="dojox/mobile/Switch"
data-dojo-props="templateString: templateSwitch1"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
</td>
<td style="text-align:right">
<input id="switch2" type="checkbox" value="on"
data-dojo-type=TemplatedSwitch>
</td>
</tr>
</table>
</div>
<!-- Templated RadioButton -->
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
<table style="width:100%">
<tr>
<td><span class="bold">Radio Button</span></td>
<td style="text-align:right">
<input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton"
data-dojo-props="templateString: templateRadioButton1"
name="mobileRadio" value="Large" checked>
<label for="rb1">1</label>
<input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton"
data-dojo-props="templateString: templateRadioButton1"
name="mobileRadio" value="Large">
<label for="rb2">2</label>
<input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton"
data-dojo-props="templateString: templateRadioButton1"
name="mobileRadio" value="Large">
<label for="rb3">3</label>
</tr>
</table>
</div>
</ul>
</div>
<!-- Templated View -->
<div id="view1" data-dojo-type=TemplatedView1>
</div>
</div>
</body>
</html>