source: Dev/trunk/src/client/dojox/mobile/tests/test_Templated-widgets.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 13.1 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport"
6                content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
7        <meta name="apple-mobile-web-app-capable" content="yes"/>
8        <title>Templated Mobile Widgets</title>
9
10        <script type="text/javascript" src="../deviceTheme.js"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js"
12                data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
13
14        <script type="text/javascript">
15                // Templates
16                var templateListItem1, templateListItem2, templateListItem3,
17                        templateHeading1, templateHeading2, templateButton1, templateCheckBox1,
18                        templateToggleButton1, templateSwitch1, templateSlider1, templateRadioButton1,
19                        templateView1;
20
21                // Templated widget classes
22                var TemplatedListItem, TemplatedWithWidgetsListItem,
23                        TemplatedHeading, TemplatedWithWidgetsHeading1,
24                        TemplatedWithWidgetsHeading2, TemplatedSwitch;
25               
26                var showMsg;
27                var onclick1 = function(e){
28                        showMsg("msgArea1", "Click!");
29                };
30                var onclick2 = function(e){
31                        showMsg("msgArea2", "Click!");
32                };
33               
34                require([
35                        "dojo/ready",
36                        "dojo/dom",
37                        "dijit/registry",
38                        "dojox/mobile/parser",
39                        "dojox/mobile",
40                        "dojox/mobile/compat",
41                        "dojo/_base/declare",
42                        "dojo/dom-construct",
43                        "dijit/_TemplatedMixin",
44                        "dijit/_WidgetsInTemplateMixin",
45                        "dojo/text!./templates/Button1.html",
46                        "dojo/text!./templates/CheckBox1.html",
47                        "dojo/text!./templates/Heading1.html",
48                        "dojo/text!./templates/Heading2.html",
49                        "dojo/text!./templates/ListItem1.html", // pure HTML
50                        "dojo/text!./templates/ListItem2.html", // contains widgets
51                        "dojo/text!./templates/ListItem3.html", // contains widgets
52                        "dojo/text!./templates/RadioButton1.html",
53                        "dojo/text!./templates/Slider1.html",
54                        "dojo/text!./templates/Switch1.html",
55                        "dojo/text!./templates/ToggleButton1.html",
56                        "dojo/text!./templates/View1.html",
57                        "dojox/mobile/ListItem",
58                        "dojox/mobile/Heading",
59                        "dojox/mobile/Switch",
60                        "dojox/mobile/TabBar",
61                        "dojox/mobile/TabBarButton",
62                        "dojox/mobile/ScrollableView"
63                ], function(ready, dom, registry, parser, mobile, compat, declare, domConstruct,
64                                        TemplatedMixin, WidgetsInTemplateMixin,
65                                        myTemplateButton1, myTemplateCheckBox1, myTemplateHeading1,
66                                        myTemplateHeading2, myTemplateListItem1, myTemplateListItem2,
67                                        myTemplateListItem3, myTemplateRadioButton1, myTemplateSlider1,
68                                        myTemplateSwitch1, myTemplateToggleButton1, myTemplateView1,
69                                        ListItem, Heading, Switch){
70               
71                templateListItem1 = myTemplateListItem1;
72                templateListItem2 = myTemplateListItem2;
73                templateListItem3 = myTemplateListItem3;
74                templateHeading1 = myTemplateHeading1;
75                templateHeading2 = myTemplateHeading2;
76                templateButton1 = myTemplateButton1;
77                templateCheckBox1 = myTemplateCheckBox1;
78                templateToggleButton1 = myTemplateToggleButton1;
79                templateRadioButton1 = myTemplateRadioButton1;
80                templateSwitch1 = myTemplateSwitch1;
81                templateSlider1 = myTemplateSlider1;
82                templateView1 = myTemplateView1;
83                       
84                TemplatedListItem = declare(
85                        [ListItem, TemplatedMixin], {
86                                templateString: "<div>My inline <i>HTML</i> template (using declare)<div data-dojo-attach-point=\'labelNode\'></div></div>",
87                                clickable: true,
88                                onClick: onclick1
89                        }
90                );
91               
92                TemplatedWithWidgetsListItem1 = declare(
93                        [ListItem, TemplatedMixin], {
94                                label: "Some label",
95                                templateString: templateListItem1, // pure HTML
96                                clickable: true,
97                                onClick: onclick1
98                        }
99                );
100               
101                TemplatedWithWidgetsListItem2 = declare(
102                        [ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
103                                label: "Some label",
104                                templateString: templateListItem2, // contains widgets
105                                clickable: true,
106                                onClick: onclick1
107                        }
108                );
109               
110                TemplatedHeading = declare(
111                        [Heading, TemplatedMixin], {
112                                back:"Back",
113                                templateString: "<div>My inline <i>HTML</i> template (programmatic)</div>"
114                        }
115                );
116               
117                TemplatedWithWidgetsHeading1 = declare(
118                        [Heading, TemplatedMixin, WidgetsInTemplateMixin], {
119                                back:"Back",
120                                templateString: templateHeading1
121                        }
122                );
123               
124                TemplatedWithWidgetsHeading2 = declare(
125                        [Heading, TemplatedMixin, WidgetsInTemplateMixin], {
126                                back:"Back",
127                                label: "Templated by: <code>Heading2.html</code> (using declare)",
128                                templateString: templateHeading2
129                        }
130                );
131               
132                TemplatedSwitch = declare(
133                        [Switch, TemplatedMixin], {
134                                templateString: templateSwitch1
135                        }
136                );
137               
138                var timer;
139                showMsg = function(msgAreaId, msg){
140                        if(timer){
141                                clearTimeout(timer);
142                        }
143                        var msgArea = dom.byId(msgAreaId);
144                        msgArea.innerHTML = msg;
145                        timer = setTimeout(function(){
146                                msgArea.innerHTML = ""; // clear, don't keep it too long
147                        }, 1000);
148                };
149               
150                ready(function(){
151                        // Testing the dynamic addition
152                        registry.byId("list").addChild(new TemplatedListItem({
153                                label: "added dynamically",
154                                clickable: true, onClick: onclick1}));
155                });
156        });
157        </script>
158
159        <style type="text/css">
160                html,body{
161                        height: 100%;
162                }
163                .mblRoundRect {
164                        margin-left: 12px;
165                        margin-right: 12px;
166                }
167                .bold {
168                        font-weight: bold;
169                }
170        </style>
171</head>
172<body style="visibility:hidden;">
173        <div id="main" data-dojo-type="dojox/mobile/View">
174                <ul data-dojo-type="dojox/mobile/TabBar"
175                        data-dojo-props="barType: 'slimTab', fixed: 'top'">
176                        <li data-dojo-type="dojox/mobile/TabBarButton"
177                                data-dojo-props="moveTo:'ListItem', selected: true">ListItem</li>
178                        <li data-dojo-type="dojox/mobile/TabBarButton"
179                                data-dojo-props="moveTo:'Heading'">Heading</li>
180                        <li data-dojo-type="dojox/mobile/TabBarButton"
181                                data-dojo-props="moveTo:'FormControls'">Form Controls</li>
182                        <li data-dojo-type="dojox/mobile/TabBarButton"
183                                data-dojo-props="moveTo:'View'">View</li>
184                </ul>
185
186                <!-- Templated ListItem -->
187                <div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView">
188                        <div id="msgArea1" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
189                        <ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
190                                data-dojo-props="iconBase:'images/tab-icon-11h.png', variableHeight: true">
191                                <li data-dojo-type="dojox/mobile/ListItem"
192                                        data-dojo-mixins="dijit/_TemplatedMixin"
193                                        data-dojo-props="label:'Some label',
194                                                clickable: true, onClick: onclick1,
195                                                templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
196                                </li>
197                                <li data-dojo-type="dojox/mobile/ListItem"
198                                        data-dojo-mixins="dijit/_TemplatedMixin"
199                                        data-dojo-props="clickable: true, onClick: onclick1,
200                                                templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'">
201                                </li>
202                                <li data-dojo-type=TemplatedListItem>
203                                </li>
204                                <li data-dojo-type="dojox/mobile/ListItem"
205                                        data-dojo-mixins="dijit/_TemplatedMixin"
206                                        data-dojo-props="label: '(markup, using data-dojo-mixins)',
207                                                templateString: templateListItem1,
208                                                clickable: true, onClick: onclick1">
209                                </li>
210                                <li data-dojo-type=TemplatedWithWidgetsListItem1
211                                        data-dojo-props="label: '(markup, using declare)'">
212                                </li>
213                                <li data-dojo-type=TemplatedWithWidgetsListItem2>
214                                </li>
215                                <li data-dojo-type="dojox/mobile/ListItem"
216                                        data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin"
217                                        data-dojo-props="templateString: templateListItem3,
218                                                clickable: true, onClick: onclick1">
219                                </li>
220                        </ul>
221                </div>
222               
223                <!-- Templated Form Controls -->
224                <div id="FormControls" data-dojo-type="dojox/mobile/ScrollableView">
225                        <h1 data-dojo-type="dojox/mobile/Heading">Form Controls</h1>
226                        <div id="msgArea2" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
227                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
228                        <table style="width:100%">
229                                <tr>
230                                        <td><span class="bold">Button</span></td>
231                                        <td style="text-align:right">
232                                                <button data-dojo-type="dojox/mobile/Button"
233                                                        data-dojo-props="templateString: '<button class=\'${baseClass}\' data-dojo-attach-point=\'containerNode\'></button>', onClick: onclick2"
234                                                        data-dojo-mixins="dijit/_TemplatedMixin">
235                                                         Press me! (inline template)
236                                                </button>
237                                                <button data-dojo-type="dojox/mobile/Button"
238                                                        data-dojo-props="templateString: templateButton1, onClick: onclick2"
239                                                        data-dojo-mixins="dijit/_TemplatedMixin">
240                                                        Press me! (external template)
241                                                </button>
242                                        </td>
243                                </tr>
244                        </table>
245                        </div>
246                       
247                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
248                        <table style="width:100%">
249                                <tr>
250                                        <td><span class="bold">Slider</span></td>
251                                        <td style="float:right">
252                                                <input data-dojo-type="dojox/mobile/Slider"
253                                                        style="width:150px;" type="range"
254                                                        data-dojo-props="templateString: templateSlider1,
255                                                                value:10, min:0, max:40, step:0.1,
256                                                                onChange:function(v){ showMsg('msgArea2', 'value: ' + this.get('value')); }"
257                                                        data-dojo-mixins="dijit/_TemplatedMixin">
258                                        </td>
259                                </tr>
260                        </table>
261                        </div>
262                       
263                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
264                        <table style="width:100%">
265                                <tr>
266                                        <td><span class="bold">CheckBox</span></td>
267                                        <td style="text-align:right">
268                                                <label for="cbox">Click me</label>
269                                                <input type="checkbox" id="cbox"
270                                                        data-dojo-type="dojox/mobile/CheckBox"
271                                                        data-dojo-props="templateString: templateCheckBox1,
272                                                                onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
273                                        </td>
274                                </tr>
275                        </table>
276                        </div>
277                       
278                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
279                        <table style="width:100%">
280                                <tr>
281                                        <td><span class="bold">ToggleButton</span></td>
282                                        <td style="text-align:right">
283                                                <button data-dojo-type="dojox/mobile/ToggleButton"
284                                                        data-dojo-props="templateString: templateToggleButton1,
285                                                                onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
286                                                                Toggle me
287                                                </button>
288                                        </td>
289                                </tr>
290                        </table>
291                        </div>
292                       
293                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
294                        <table style="width:100%">
295                                <tr>
296                                        <td><span class="bold">Switch</span></td>
297                                        <td style="text-align:right">
298                                                <input type="checkbox" value="on"
299                                                        data-dojo-type="dojox/mobile/Switch"
300                                                        data-dojo-props="templateString: templateSwitch1,
301                                                                onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }"
302                                                        data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
303                                        </td>
304                                        <td style="text-align:right">
305                                                <input type="checkbox" value="on"
306                                                        data-dojo-type=TemplatedSwitch
307                                                        data-dojo-props="onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }">
308                                        </td>
309                                </tr>
310                        </table>
311                        </div>
312                       
313                        <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
314                        <table style="width:100%">
315                                <tr>
316                                        <td><span class="bold">Radio Button</span></td>
317                                        <td style="text-align:right">
318                                                <input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton"
319                                                        data-dojo-props="templateString: templateRadioButton1,
320                                                                onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 1'); }"
321                                                        name="mobileRadio" value="Large" checked>
322                                                <label for="rb1">1</label>
323                                               
324                                                <input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton"
325                                                        data-dojo-props="templateString: templateRadioButton1,
326                                                                onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 2'); }"
327                                                        name="mobileRadio" value="Large">
328                                                <label for="rb2">2</label>
329                                               
330                                                <input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton"
331                                                        data-dojo-props="templateString: templateRadioButton1,
332                                                                onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 3'); }"
333                                                        name="mobileRadio" value="Large">
334                                                <label for="rb3">3</label>
335                                </tr>
336                        </table>
337                        </div>
338                </div>
339               
340                <!-- Templated Heading -->
341                <div id="Heading" data-dojo-type="dojox/mobile/ScrollableView">
342                        <!-- Template containing widgets -->
343                        <div data-dojo-type="dojox/mobile/Heading"
344                                data-dojo-props="label:'Some label', templateString: templateHeading1"
345                                data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
346                        </div>
347                        <!-- Pure HTML template -->
348                        <div data-dojo-type="dojox/mobile/Heading"
349                                data-dojo-props="back:'Back',
350                                        templateString: '<div>My inline <i>HTML</i> template (markup)</div>'"
351                                data-dojo-mixins="dijit/_TemplatedMixin">
352                        </div>
353                        <div data-dojo-type="dojox/mobile/Heading"
354                                data-dojo-props="back:'Back',
355                                        label: 'Templated by: <code>Heading2.html</code> (using data-dojo-mixins)',
356                                        templateString: templateHeading2"
357                                data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
358                        </div>
359                        <div data-dojo-type=TemplatedHeading>
360                        </div>
361                        <div data-dojo-type=TemplatedWithWidgetsHeading1>
362                        </div>
363                        <div data-dojo-type=TemplatedWithWidgetsHeading2
364                                data-dojo-props="back: 'Back'">
365                        </div>
366                </div>
367               
368                <!-- Templated View -->
369                <div id="View" data-dojo-type="dojox/mobile/View"
370                        data-dojo-props="templateString: templateView1"
371                        data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
372                </div>
373        </div>
374</body>
375</html>
Note: See TracBrowser for help on using the repository browser.