You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
13 KiB
375 lines
13 KiB
<!DOCTYPE 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>
|
|
|