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.
376 lines (348 loc) • 13.4 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 Mobile Widgets</title>
<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
var templateListItem1, templateListItem2, templateListItem3,
templateHeading1, templateHeading2, templateButton1, templateCheckBox1,
templateToggleButton1, templateSwitch1, templateSlider1, templateRadioButton1,
templateView1;
// Templated widget classes
var TemplatedListItem, TemplatedWithWidgetsListItem,
TemplatedHeading, TemplatedWithWidgetsHeading1,
TemplatedWithWidgetsHeading2, TemplatedSwitch;
var showMsg;
var onclick1 = function(e){
showMsg("msgArea1", "Click!");
};
var onclick2 = function(e){
showMsg("msgArea2", "Click!");
};
require([
"dojo/ready",
"dojo/dom",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojo/_base/declare",
"dojo/dom-construct",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/Button1.html",
"dojo/text!./templates/CheckBox1.html",
"dojo/text!./templates/Heading1.html",
"dojo/text!./templates/Heading2.html",
"dojo/text!./templates/ListItem1.html", // pure HTML
"dojo/text!./templates/ListItem2.html", // contains widgets
"dojo/text!./templates/ListItem3.html", // contains widgets
"dojo/text!./templates/RadioButton1.html",
"dojo/text!./templates/Slider1.html",
"dojo/text!./templates/Switch1.html",
"dojo/text!./templates/ToggleButton1.html",
"dojo/text!./templates/View1.html",
"dojox/mobile/ListItem",
"dojox/mobile/Heading",
"dojox/mobile/Switch",
"dojox/mobile/TabBar",
"dojox/mobile/TabBarButton",
"dojox/mobile/ScrollableView"
], function(ready, dom, registry, parser, mobile, compat, declare, domConstruct,
TemplatedMixin, WidgetsInTemplateMixin,
myTemplateButton1, myTemplateCheckBox1, myTemplateHeading1,
myTemplateHeading2, myTemplateListItem1, myTemplateListItem2,
myTemplateListItem3, myTemplateRadioButton1, myTemplateSlider1,
myTemplateSwitch1, myTemplateToggleButton1, myTemplateView1,
ListItem, Heading, Switch){
templateListItem1 = myTemplateListItem1;
templateListItem2 = myTemplateListItem2;
templateListItem3 = myTemplateListItem3;
templateHeading1 = myTemplateHeading1;
templateHeading2 = myTemplateHeading2;
templateButton1 = myTemplateButton1;
templateCheckBox1 = myTemplateCheckBox1;
templateToggleButton1 = myTemplateToggleButton1;
templateRadioButton1 = myTemplateRadioButton1;
templateSwitch1 = myTemplateSwitch1;
templateSlider1 = myTemplateSlider1;
templateView1 = myTemplateView1;
TemplatedListItem = declare(
[ListItem, TemplatedMixin], {
templateString: "<div>My inline <i>HTML</i> template (using declare)<div data-dojo-attach-point=\'labelNode\'></div></div>",
clickable: true,
onClick: onclick1
}
);
TemplatedWithWidgetsListItem1 = declare(
[ListItem, TemplatedMixin], {
label: "Some label",
templateString: templateListItem1, // pure HTML
clickable: true,
onClick: onclick1
}
);
TemplatedWithWidgetsListItem2 = declare(
[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
label: "Some label",
templateString: templateListItem2, // contains widgets
clickable: true,
onClick: onclick1
}
);
TemplatedHeading = declare(
[Heading, TemplatedMixin], {
back:"Back",
templateString: "<div>My inline <i>HTML</i> template (programmatic)</div>"
}
);
TemplatedWithWidgetsHeading1 = declare(
[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
back:"Back",
templateString: templateHeading1
}
);
TemplatedWithWidgetsHeading2 = declare(
[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
back:"Back",
label: "Templated by: <code>Heading2.html</code> (using declare)",
templateString: templateHeading2
}
);
TemplatedSwitch = declare(
[Switch, TemplatedMixin], {
templateString: templateSwitch1
}
);
var timer;
showMsg = function(msgAreaId, msg){
if(timer){
clearTimeout(timer);
}
var msgArea = dom.byId(msgAreaId);
msgArea.innerHTML = msg;
timer = setTimeout(function(){
msgArea.innerHTML = ""; // clear, don't keep it too long
}, 1000);
};
ready(function(){
// Testing the dynamic addition
registry.byId("list").addChild(new TemplatedListItem({
label: "added dynamically",
clickable: true, onClick: onclick1}));
});
});
</script>
<style type="text/css">
html,body{
height: 100%;
}
.mblRoundRect {
margin-left: 12px;
margin-right: 12px;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body style="visibility:hidden;">
<div id="main" data-dojo-type="dojox/mobile/View">
<ul data-dojo-type="dojox/mobile/TabBar"
data-dojo-props="barType: 'slimTab', fixed: 'top'">
<li data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props="moveTo:'ListItem', selected: true">ListItem</li>
<li data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props="moveTo:'Heading'">Heading</li>
<li data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props="moveTo:'FormControls'">Form Controls</li>
<li data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props="moveTo:'View'">View</li>
</ul>
<!-- Templated ListItem -->
<div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView">
<div id="msgArea1" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
<ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-props="iconBase:'images/tab-icon-11h.png', variableHeight: true">
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="label:'Some label',
clickable: true, onClick: onclick1,
templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
</li>
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="clickable: true, onClick: onclick1,
templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'">
</li>
<li data-dojo-type=TemplatedListItem>
</li>
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin"
data-dojo-props="label: '(markup, using data-dojo-mixins)',
templateString: templateListItem1,
clickable: true, onClick: onclick1">
</li>
<li data-dojo-type=TemplatedWithWidgetsListItem1
data-dojo-props="label: '(markup, using declare)'">
</li>
<li data-dojo-type=TemplatedWithWidgetsListItem2>
</li>
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin"
data-dojo-props="templateString: templateListItem3,
clickable: true, onClick: onclick1">
</li>
</ul>
</div>
<!-- Templated Form Controls -->
<div id="FormControls" data-dojo-type="dojox/mobile/ScrollableView">
<h1 data-dojo-type="dojox/mobile/Heading">Form Controls</h1>
<div id="msgArea2" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
<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 data-dojo-type="dojox/mobile/Button"
data-dojo-props="templateString: '<button class=\'${baseClass}\' data-dojo-attach-point=\'containerNode\'></button>', onClick: onclick2"
data-dojo-mixins="dijit/_TemplatedMixin">
Press me! (inline template)
</button>
<button data-dojo-type="dojox/mobile/Button"
data-dojo-props="templateString: templateButton1, onClick: onclick2"
data-dojo-mixins="dijit/_TemplatedMixin">
Press me! (external template)
</button>
</td>
</tr>
</table>
</div>
<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 data-dojo-type="dojox/mobile/Slider"
style="width:150px;" type="range"
data-dojo-props="templateString: templateSlider1,
value:10, min:0, max:40, step:0.1,
onChange:function(v){ showMsg('msgArea2', 'value: ' + this.get('value')); }"
data-dojo-mixins="dijit/_TemplatedMixin">
</td>
</tr>
</table>
</div>
<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="cbox">Click me</label>
<input type="checkbox" id="cbox"
data-dojo-type="dojox/mobile/CheckBox"
data-dojo-props="templateString: templateCheckBox1,
onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
</td>
</tr>
</table>
</div>
<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 data-dojo-type="dojox/mobile/ToggleButton"
data-dojo-props="templateString: templateToggleButton1,
onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
Toggle me
</button>
</td>
</tr>
</table>
</div>
<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 type="checkbox" value="on"
data-dojo-type="dojox/mobile/Switch"
data-dojo-props="templateString: templateSwitch1,
onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
</td>
<td style="text-align:right">
<input type="checkbox" value="on"
data-dojo-type=TemplatedSwitch
data-dojo-props="onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }">
</td>
</tr>
</table>
</div>
<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,
onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 1'); }"
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,
onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 2'); }"
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,
onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 3'); }"
name="mobileRadio" value="Large">
<label for="rb3">3</label>
</tr>
</table>
</div>
</div>
<!-- Templated Heading -->
<div id="Heading" data-dojo-type="dojox/mobile/ScrollableView">
<!-- Template containing widgets -->
<div data-dojo-type="dojox/mobile/Heading"
data-dojo-props="label:'Some label', templateString: templateHeading1"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
</div>
<!-- Pure HTML template -->
<div 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>
<div data-dojo-type="dojox/mobile/Heading"
data-dojo-props="back:'Back',
label: 'Templated by: <code>Heading2.html</code> (using data-dojo-mixins)',
templateString: templateHeading2"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
</div>
<div data-dojo-type=TemplatedHeading>
</div>
<div data-dojo-type=TemplatedWithWidgetsHeading1>
</div>
<div data-dojo-type=TemplatedWithWidgetsHeading2
data-dojo-props="back: 'Back'">
</div>
</div>
<!-- Templated View -->
<div id="View" data-dojo-type="dojox/mobile/View"
data-dojo-props="templateString: templateView1"
data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
</div>
</div>
</body>
</html>