source: Dev/trunk/src/client/dijit/tests/_WidgetsInTemplateMixin.html @ 529

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

Added Dojo 1.9.3 release.

File size: 24.3 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5                <title>WidgetsInTemplateMixin.js</title>
6
7                <style type="text/css">
8                        @import "../themes/claro/document.css";
9                        @import "../themes/claro/claro.css";
10
11                        /* Make our tests stand out as easily identifiable content */
12                        .testcontainer {
13                                border: 10px yellow;
14                                border-style: dashed;
15                                padding: 1em;
16                                margin: 1em;
17                        }
18                        .testcontainer > p {
19                                padding: 0 1em;
20                                font-weight: bold;
21                        }
22                </style>
23
24                <script type="text/javascript" src="../../dojo/dojo.js"
25                        data-dojo-config="isDebug: true, async: true"></script>
26                <script type="text/javascript">
27                        require([
28                                "doh", "dojo/_base/array", "dojo/_base/declare", "dojo/_base/window", "dojo/dom", "dojo/dom-geometry",
29                                "dojo/html", "dojo/query", "dojo/parser",
30                                "dijit/registry", "dijit/_WidgetBase", "dijit/_Widget",
31                                "dijit/_AttachMixin", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
32                                "dijit/form/Button", "dijit/form/CheckBox", "dijit/form/TextBox",
33                                "dijit/ProgressBar", "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/_Container",
34                                "dijit/_Contained", "dijit/layout/_LayoutWidget", "dijit/tests/resources/TestContextRequireWidget",
35                                "dijit/focus",
36                                "dojo/domReady!"
37                        ], function(doh, array, declare, win, dom, domGeom, html, query, parser,
38                                        registry, _WidgetBase, _Widget, _AttachMixin, _TemplatedMixin, _WidgetsInTemplateMixin,
39                                        Button, CheckBox, TextBox, ProgressBar, ContentPane, TabContainer,
40                                        _Container, _Contained, _LayoutWidget, TestContextRequireWidget, focusUtil){
41
42                                declare('Test1Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
43                                        templateString: dom.byId('Test1Template').value,
44                                        onClick: function(e){
45                                                if(e.target){
46                                                        alert('onClick widgetId='+e.target.id);
47                                                }else{
48                                                        if(e._counter == undefined){
49                                                                e._counter = 1;
50                                                        }else{
51                                                                e._counter++;
52                                                        }
53                                                }
54                                        }
55                                });
56
57                                declare('Test3Widget', [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
58                                        templateString: dom.byId('Test3Template').value
59                                });
60
61                                declare('Test4Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
62                                        templateString: dom.byId('Test4Template').value
63                                });
64               
65                                function validateTest4Widget(t, testW){
66                                        var selectedTab = query(".dijitTabChecked", testW.domNode)[0];
67                                        var selectedPane = query(".dijitVisible > .dijitTabPane", testW.domNode)[0];
68                                        var tabBox = selectedTab ? domGeom.getContentBox(selectedTab) : null;
69                                        var paneBox = selectedPane ? domGeom.getContentBox(selectedPane) : null;
70                                        doh.t(tabBox && tabBox.w> 0 && tabBox.h> 0, "tabBox && tabBox.w> 0 && tabBox.h> 0");
71                                        doh.t(paneBox && paneBox.w> 0 && paneBox.h> 0, "paneBox && paneBox.w> 0 && paneBox.h");
72                                        // Check that everything got started
73                                        doh.t(testW._started, "testW._started");
74                                        doh.t(testW.tabCont._started, "tabCont._started");
75                                        doh.t(testW.tab1._started, "tab1._started");
76                                        doh.t(testW.tab2._started, "tab2._started");
77                                }
78                       
79                                declare('TestLayoutWidget', _LayoutWidget, {
80                                        startup: function(){
81                                                if(this._started){
82                                                        this._doubleStarted = true;
83                                                }
84                                                this.inherited(arguments);
85                                        },
86                                        destroy: function(){
87                                                if(this._destroyed){
88                                                        this._doubleDestroyed = true;
89                                                }
90                                                this.inherited(arguments);
91                                                this._destroyed = true;
92                                        }
93                                });
94
95                                declare('TestCtnrWidget', [_WidgetBase, _Container], {
96                                        startup: function(){
97                                                if(this._started){
98                                                        this._doubleStarted = true;
99                                                }
100                                                this.inherited(arguments);
101                                        },
102                                        destroy: function(){
103                                                if(this._destroyed){
104                                                        this._doubleDestroyed = true;
105                                                }
106                                                this.inherited(arguments);
107                                                this._destroyed = true;
108                                        }
109                                });
110
111                                declare('TestCtndWidget', [_WidgetBase, _Contained], {
112                                        startup: function(){
113                                                if(this._started){
114                                                        this._doubleStarted = true;
115                                                }
116                                                this.inherited(arguments);
117                                        },
118                                        destroy: function(){
119                                                if(this._destroyed){
120                                                        this._doubleDestroyed = true;
121                                                }
122                                                this.inherited(arguments);
123                                                this._destroyed = true;
124                                        }
125                                });
126
127                                declare('TestNonCtnrWidget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
128                                        templateString: "<div data-dojo-attach-point=containerNode></div>",
129                                        startup: function(){
130                                                if(this._started){
131                                                        this._doubleStarted = true;
132                                                }
133                                                this.inherited(arguments);
134                                        },
135                                        destroy: function(){
136                                                if(this._destroyed){
137                                                        this._doubleDestroyed = true;
138                                                }
139                                                this.inherited(arguments);
140                                                this._destroyed = true;
141                                        }
142                                });
143
144                                declare('TestStubWidget', _WidgetBase, {
145                                        startup: function(){
146                                                if(this._started){
147                                                        this._doubleStarted = true;
148                                                }
149                                                this.inherited(arguments);
150                                        },
151                                        destroy: function(){
152                                                if(this._destroyed){
153                                                        this._doubleDestroyed = true;
154                                                }
155                                                this.inherited(arguments);
156                                                this._destroyed = true;
157                                        }
158                                });
159       
160                                declare('Test5Widget',
161                                        [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],
162                                {
163                                        templateString: dom.byId('Test5Template').value,
164                                        startup: function(){
165                                                if(this._started){
166                                                        this._doubleStarted = true;
167                                                }
168                                                this.inherited(arguments);
169                                        },
170                                        destroy: function(){
171                                                if(this._destroyed){
172                                                        this._doubleDestroyed = true;
173                                                }
174                                                this.inherited(arguments);
175                                                this._destroyed = true;
176                                        }
177                                });
178
179                                declare('Test6Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
180                                        templateString: dom.byId('Test6Template').value,
181                                        clickCount: 0,
182                                        handleClick: function(){
183                                                this.clickCount++;
184                                        }
185                                });
186
187                                declare("Missing", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
188                                        templateString: '<div>' +
189                                                                                '<div data-dojo-type="dijit/layout/ContentPane">' +
190                                                                                        '<div data-dojo-type="dijit/form/Button" data-dojo-props="id: \'missingButtonId\'" ' +
191                                                                                        'data-dojo-attach-point="missingButton">Missing...</div>' +
192                                                                                '</div>' +
193                                                                        '</div>'
194                                });
195
196                                function getTestWidgets(testW){
197                                        return [
198                                                testW,
199                                                testW.layout,
200                                                testW.layChild1,
201                                                testW.layChild2,
202                                                testW.container,
203                                                testW.contained1,
204                                                testW.contained2,
205                                                testW.nonContainer,
206                                                testW.nonContained1,
207                                                testW.nonContained2,
208                                                testW.threeLevel,
209                                                testW.secondLevel,
210                                                testW.bottomLevel,
211                                                testW.anotherThree,
212                                                testW.anotherSecond,
213                                                testW.anotherBottom,
214                                                testW.stub1
215                                        ];
216                                }
217               
218                                function validateTest5Widget(t, testW){
219                                        // Check that everything got started, but not double-started
220                                        array.forEach(getTestWidgets(testW), function(w){
221                                                doh.t(w._started, "w._started: " + w);
222                                                doh.is(undefined, w._doubleStarted, "w._doubleStarted: " + w);
223                                        });
224                                }
225               
226                                function validateTest5WidgetDestroy(t, testW){
227                                        var savedWidgets = getTestWidgets(testW);
228                                        testW.destroy();
229                                        array.forEach(savedWidgets, function(w, idx){
230                                                doh.t(w._destroyed, "w._destroyed: " + w);
231                                                doh.is(undefined, w._doubleDestroyed, "w._doubleDestroyed: " + w);
232                                        });
233                                }
234
235                                doh.register("_AttachMixin-widgetInTemplate", [
236                                        function createAttachWidgetsCombo() {
237                                                /*** TEST _AttachMixin combined with _WidgetsInTemplateMixin ***/
238                                                var AttachWidgetsCombo = declare([ _WidgetBase, _AttachMixin, _WidgetsInTemplateMixin ], {
239
240                                                        postCreate: function() {
241                                                                html.set(this.heading, "Amazing things will happen if you click this button!!!");
242                                                        },
243                                                        _buttonClicked: function(e) {
244                                                                html.set(this.heading, "Well that was boring. " +
245                                                                                "My attach point button thinks it is a " + (this.mybutton.isInstanceOf(Button) ? 'dijit/form/Button':'Gruffalo'));
246                                                        }
247                                                });
248
249                                                var myawc = new AttachWidgetsCombo({}, dom.byId('attachMeThree'));
250
251                                                doh.t(myawc.heading, "heading");
252                                                doh.t(myawc.mybutton, "mybutton");
253                                                doh.is("Amazing things will happen if you click this button!!!", myawc.heading.innerHTML, "Initial value");
254
255                                                // Simulate a change
256                                                myawc.mybutton.onClick();
257
258                                                doh.is("Well that was boring. My attach point button thinks it is a dijit/form/Button", myawc.heading.innerHTML, "Post-op value");
259                                        },
260
261                                        function containerNode(){
262                                                // Test that widgets inside of containerNode aren't parsed by _WidgetsInTemplateMixin
263
264                                                declare("OuterWidget", [ _WidgetBase, _AttachMixin, _WidgetsInTemplateMixin ], {
265                                                        // Prevent the main parser call from hitting my supporting widgets.
266                                                        // But this also stops the parser from hitting anything inside my containerNode, so I need
267                                                        // to do a recursive parse() like ContentPane does (or just extend ContentPane)
268                                                        stopParser: true,
269
270                                                        postCreate: function(){
271                                                                doh.is(0, this.getChildren().length, "contained widget not created yet");
272                                                                parser.parse(this.containerNode);
273                                                        }
274                                                });
275                                                declare("SupportingWidget", _WidgetBase);
276                                                declare("ContainedWidget", _WidgetBase);
277                                                parser.parse(dom.byId("containerNode"));
278
279                                                doh.t("outerWidget" in window, "outer widget created");
280                                                doh.t(outerWidget.supportingWidget, "supporting widget instantiated");
281                                                doh.f(outerWidget.containedWidget, "contained widget not instantiated by _WidgetsInTemplateMixin parse call");
282
283                                                doh.is(1, outerWidget.getChildren().length, "contained widget created too");
284                                        }
285                                ]);
286
287                                doh.register("_Templated-widgetsInTemplate", [
288                                        function parse(){
289                                                parser.parse("templateTests");
290                                        },
291                                        {
292                                                name: "data-dojo-attach-point",
293                                                runTest: function(t){
294                                                        var testW = registry.byId("test1Widget");
295                                                        doh.t(testW, "test1Widget was instantiated");
296                                                        doh.t(testW.normalNode, "normalNode");
297                                                        doh.f(isNaN(testW.normalNode.nodeType), "normalNode.nodeType");
298                                                        doh.t(testW.buttonWidget instanceof Button, "buttonWidget is Button");
299                                                        doh.t(testW.checkboxWidget instanceof CheckBox, "checkboxWidget is CheckBox");
300                                                        doh.t(testW.progressBarWidget instanceof ProgressBar, "progressBarWidget is ProgressBar");
301                                                }
302                                        },
303                                        {
304                                                name: "data-dojo-attach-event",
305                                                runTest: function(t){
306                                                        var testW = registry.byId("test1Widget");
307                                                        testW.buttonWidget._counter=0;
308                                                        testW.buttonWidget.onClick(testW.buttonWidget);
309                                                        testW.checkboxWidget._counter=0;
310                                                        testW.checkboxWidget.onClick(testW.checkboxWidget);
311                                                        testW.progressBarWidget._counter=0;
312                                                        testW.progressBarWidget.onChange(testW.progressBarWidget);
313                                                        doh.is(1,testW.buttonWidget._counter, "buttonWidget._counter");
314                                                        doh.is(1,testW.checkboxWidget._counter, "checkboxWidget._counter");
315                                                        doh.is(1,testW.progressBarWidget._counter, "progressBarWidget._counter");
316                                                }
317                                        },
318                                        {
319                                                name: "data-dojo-attach-event strange name",
320                                                runTest: function(t){
321                                                        // This is for testing data-dojo-attach-event to attach to a method in the widget,
322                                                        // rather than using _WidgetBase.on(...).   Remove for 2.0.
323                                                        var SubWidget = declare("SubWidget", _WidgetBase, {
324                                                                f: function(){
325                                                                        // just for attaching to
326                                                                }
327                                                        });
328                                                        var MainWidget = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
329                                                                templateString:
330                                                                        '<div>' +
331                                                                                '<div data-dojo-type="SubWidget" data-dojo-attach-point="sw" ' +
332                                                                                        ' data-dojo-attach-event="f: g">' +
333                                                                        '</div>',
334                                                                g: function(){
335                                                                        this.gWasCalled = true;
336                                                                }
337                                                        });
338                                                        var mw = new MainWidget();
339                                                        doh.t(mw.sw, "attach-point exists");
340                                                        mw.sw.f();
341                                                        doh.t(mw.gWasCalled, "attach-event worked");
342                                                }
343                                        },
344                                        {
345                                                // Test that getDescendants ()
346                                                // finds direct descendants but skips widgetsInTemplates
347                                                // and also nested widgets (if direct==true)
348                                                name: "getChildren",
349                                                runTest: function(t){
350                                                        var testW = registry.byId("test3Widget");
351
352/*** performance tests
353                                                        var start = new Date();
354                                                        for(var i=0; i<1000; i++)
355                                                                testW.getChildren();
356                                                        console.log("*** time for getChildren(): " + (new Date()-start));
357                                                        var start = new Date();
358                                                        for(var i=0; i<1000; i++)
359                                                                testW.getDescendants();
360                                                        console.log("*** time for getDescendants(false): " + (new Date()-start));
361***/
362                                                        var chil = testW.getChildren();
363                                                        doh.is(5, chil.length, "number of direct descendants");
364                                                        doh.is(chil[0].id, "3.1");
365                                                        doh.is(chil[1].id, "3.2");
366                                                        doh.is(chil[2].id, "3.3");
367                                                        doh.is(chil[3].id, "3.4");
368                                                        doh.is(chil[4].id, "3.5");
369
370                                                        // remove this test for 2.0
371                                                        var desc = testW.getDescendants();
372                                                        doh.is(7, desc.length, "number of descendants (including nested ones)");
373                                                        doh.is(desc[0].id, "3.1");
374                                                        doh.is(desc[1].id, "3.2");
375                                                        doh.is(desc[2].id, "3.3");
376                                                        doh.is(desc[3].id, "3.nested");
377                                                        doh.is(desc[4].id, "3.nested2");
378                                                        doh.is(desc[5].id, "3.4");
379                                                        doh.is(desc[6].id, "3.5");
380                                                }
381                                        },
382                                        {
383                                                // Check that declarative widget with layout widgets in template is correctly created and rendered
384                                                name: "declarative widget with layout widgets",
385                                                runTest: function(t){
386                                                        validateTest4Widget(t, registry.byId("test4Widget"));
387                                                }
388                                        },
389                                        {
390                                                // Check that programatic widget with layout widgets in template is correctly created and rendered
391                                                name: "programmatic widget with layout widgets",
392                                                runTest: function(t){
393                                                        test4WidgetProgrammatic = new Test4Widget({}).placeAt("test4Widget", "after");
394                                                        test4WidgetProgrammatic.startup();
395                                                        validateTest4Widget(t, test4WidgetProgrammatic);
396                                                }
397                                        },
398                                        {
399                                                // Compare programmatic and declaratively created widget with layout widgets in template
400                                                name: "programmatic vs declarative with layout widgets",
401                                                runTest: function(t){
402                                                        // Focus the body, so that we don't have different classes on our
403                                                        // two widgets
404                                                        focusUtil.focus(win.body());
405                                                        var declW = registry.byId("test4Widget");
406                                                        var progW = test4WidgetProgrammatic;
407
408                                                        // Check that generated HTML in DOM is same
409                                                        var declNeutralHtml = declW.domNode.innerHTML.replace(/_\d+/g, "");
410                                                        var progNeutralHtml = progW.domNode.innerHTML.replace(/_\d+/g, "");
411                                                        if(declNeutralHtml != progNeutralHtml){
412                                                                for(var i=0; i<declNeutralHtml.length; i++){
413                                                                        if(progNeutralHtml.charAt(i) != declNeutralHtml.charAt(i)){
414                                                                                console.log("***Difference starting at " + i);
415                                                                                console.log("declarative: " + declNeutralHtml.substr(Math.max(0, i-5), 50));
416                                                                                console.log("programmatic: " + progNeutralHtml.substr(Math.max(0, i-5), 50));
417                                                                                break;
418                                                                        }
419                                                                }
420                                                                doh.t(declNeutralHtml == progNeutralHtml, "declNeutralHtml == progNeutralHtml");
421                                                        }
422
423                                                        // Check that dimensions are same
424                                                        var declBox = domGeom.getContentBox(declW.domNode);
425                                                        var progBox = domGeom.getContentBox(progW.domNode);
426                                                        doh.is(declBox.h, progBox.h, "progBox.h");
427                                                        doh.is(declBox.w, progBox.w, "progBox.w");
428                                                }
429                                        },
430                                        {
431                                                // Check that declarative widget with other widgets in template is correctly started
432                                                name: "declarative widget with many child widgets",
433                                                runTest: function(t){
434                                                        validateTest5Widget(t, registry.byId("test5Widget"));
435                                                }
436                                        },
437                                        {
438                                                // Check that programmatic widget with other widgets in template is correctly started
439                                                name: "programmatic widget with many child widgets",
440                                                runTest: function(t){
441                                                        test5WidgetProgrammatic = new Test5Widget().placeAt("test5Widget", "after");
442                                                        test5WidgetProgrammatic.startup();
443                                                        validateTest5Widget(t, test5WidgetProgrammatic);
444                                                }
445                                        },
446                                        {
447                                                // Check that destroying our declarative widget works correctly
448                                                name: "declarative widget destruction",
449                                                runTest: function(t){
450                                                        validateTest5WidgetDestroy(t, registry.byId("test5Widget"));
451                                                }
452                                        },
453                                        {
454                                                // Check that destroying our programmatic widget works correctly
455                                                name: "programmatic widget destruction",
456                                                runTest: function(t){
457                                                        validateTest5WidgetDestroy(t, test5WidgetProgrammatic);
458                                                }
459                                        },
460                                        {
461                                                // Test that data-dojo-attach-point inside of a ContentPane (inside of a template) works
462                                                name: "ContentPane",
463                                                runTest: function(){
464                                                        var testW = registry.byId("missing");
465                                                        doh.t(testW, "widget was created");
466                                                        doh.t(testW.missingButton, "data-dojo-attach-point created");
467                                                        doh.is("dijit.form.Button", testW.missingButton.declaredClass, "and it's to a widget");
468                                                        doh.t(registry.byId("missingButtonId"), "nested widget also registered by id");
469                                                }
470                                        },
471                                        {
472                                                // Test that data-dojo-attach-event bindings work with widgets in template, when
473                                                // binding to dijit/_Widget methods
474                                                name: "_Widget Deferred Connect methods",
475                                                runTest: function(){
476                                                        var test6Widget = registry.byId("test6Widget");
477                                                        doh.t(test6Widget.clickCount === 0, "click count was initially zero");
478                                                        // Issue a 'click' event directly on the interior input of the TextBox
479                                                        test6Widget.textbox.textbox.click();
480                                                        doh.t(test6Widget.clickCount === 1, "click count incremented properly");
481                                                }
482                                        }
483                                ]);
484
485                                // Test that "this" referenced from data-dojo-props can refer to the hosting widget
486                                doh.register("data-dojo-props this", function(){
487                                        var host = declare([dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
488                                                obj: {hello: "world"},
489                                                templateString:
490                                                        "<div>" +
491                                                                "<div data-dojo-type='dijit/_WidgetBase' data-dojo-props='hostObj: this.obj'" +
492                                                                " data-dojo-attach-point='subWidget'></div>" +
493                                                        "</div>"
494                                        });
495                                       
496                                        var hostWidget = new host(),
497                                                subWidget = hostWidget && hostWidget.subWidget;
498                                        doh.isNot(undefined, hostWidget, "created host widget");
499                                        doh.isNot(undefined, subWidget, "created sub widget");
500                                        doh.isNot(undefined, subWidget.hostObj, "sub widget got hostObj defined");
501                                        doh.is("world", subWidget.hostObj.hello, "object is correct")
502                                });
503
504                                // Test that a context require can be passed to the parser
505                                doh.register("context require", function(){
506                                        var cw = registry.byId("testContextWidget");
507                                        doh.is(typeof cw.fooNode, "object", "button created");
508                                        doh.is(cw.fooNode.fooNode.innerHTML, "TestWidget", "sub widget contains right properties");
509                                });
510
511                                doh.run();
512                        });
513                </script>
514        </head>
515        <body class="claro">
516                <h1>WidgetsInTemplateMixin</h1>
517
518                <!-- Tests for _WidgetsInTemplateMixin combined with _AttachMixin -->
519                <div class="testcontainer">
520                        <p>This test shows that a _AttachMixin dijit with _WidgetsInTemplate properly attaches widgets from the template.<br>
521                        <div id="attachMeThree">
522                                <h2 data-dojo-attach-point='heading'></h2>
523                                <button data-dojo-type='dijit/form/Button'
524                                                data-dojo-attach-point='mybutton'
525                                                data-dojo-attach-event='onClick: _buttonClicked'>A button</button>
526                        </div>
527                </div>
528
529                <!-- Test that widgets inside containerNode aren't parsed by _WidgetsInTemplateMixin-->
530                <div id="containerNode" class="testcontainer">
531                        <p>This tests that nodes inside of data-dojo-attach-point="containerNode" are ignored<br>
532                        <div data-dojo-id="outerWidget" data-dojo-type="OuterWidget">
533                                <h2 data-dojo-attach-point="heading">heading</h2>
534                                <div data-dojo-type="SupportingWidget" data-dojo-attach-point="supportingWidget">supporting widget</div>
535                                <div data-dojo-attach-point="containerNode">
536                                        <span data-dojo-type="ContainedWidget" data-dojo-attach-point="containedWidget">contained widget</span>
537                                </div>
538                        </div>
539                </div>
540
541                <!-- Tests for _WidgetsInTemplateMixin combined with _TemplatedMixin -->
542                <div id="templateTests">
543                        <textarea id="Test1Template" style="display:none;">
544                                <div>
545                                        <div data-dojo-attach-point="normalNode">normal node</div>
546                                        <button data-dojo-attach-point="buttonWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit/form/Button">button #1</button>
547                                        <div data-dojo-attach-point="checkboxWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit/form/CheckBox"></div> checkbox #1
548                                        <div data-dojo-attach-point="progressBarWidget" data-dojo-attach-event="onChange:onClick"
549                                                 data-dojo-type="dijit/ProgressBar" data-dojo-props='value: 20, maximum: 200, style: "width:400px;"'></div>
550                                </div>
551                        </textarea>
552
553                        <div data-dojo-type="Test1Widget" data-dojo-props="id: 'test1Widget'"></div>
554
555
556                        <textarea id="Test3Template" style="display:none;">
557                                <div>
558                                        <div data-dojo-attach-point="checkboxWidget" data-dojo-type="dijit/form/CheckBox"></div> checkbox #3
559                                        <div data-dojo-attach-point="containerNode"></div>
560                                </div>
561                        </textarea>
562
563                        <div data-dojo-type="Test3Widget" data-dojo-props="id: 'test3Widget'">
564                                <span>hello world</span>
565                                <b style="border: 1px solid blue;">this is my
566                                        <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.1'">first button</button>
567                                </b>
568                                <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.2'">another button</button>
569                                <i>and some more</i>
570                                <div style="border: 1px solid red;">
571                                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="style: {border: '1px solid gray'}, id: '3.3'">
572                                                <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.nested'">a nested button</button>
573                                                <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.nested2'">another nested button</button>
574                                        </div>
575                                        <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.4'">yet another button</button>
576                                        <button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.5'">yet yet another button</button>
577                                </div>
578                        </div>
579
580                        <!-- Test templated widget containing layout widgets in template -->
581                        <textarea id="Test4Template" style="display:none;">
582                                <div>
583                                        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {height: '5em', width: '100em'}" data-dojo-attach-point="tabCont">
584                                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Tab 1'" data-dojo-attach-point="tab1">
585                                                        pane 1
586                                                </div>
587                                                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Tab 2'" data-dojo-attach-point="tab2">
588                                                        pane 2
589                                                </div>
590                                        </div>
591                                </div>
592                        </textarea>
593
594                        <div data-dojo-type="Test4Widget" data-dojo-props="id: 'test4Widget'"></div>
595
596                        <!-- Test templated widget containing container and nested widgets in template -->
597                        <textarea id="Test5Template" style="display:none;">
598                                <div>
599                                        <div data-dojo-type="TestLayoutWidget" data-dojo-attach-point="layout">
600                                                <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild1"></div>
601                                                <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild2"></div>
602                                        </div>
603                                        <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="container">
604                                                <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained1"></div>
605                                                <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained2"></div>
606                                        </div>
607                                        <div data-dojo-type="TestStubWidget" data-dojo-attach-point="stub1"></div>
608                                        <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="nonContainer">
609                                                <div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained1"></div>
610                                                <div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained2"></div>
611                                        </div>
612                                        <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="threeLevel">
613                                                <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="secondLevel">
614                                                        <div data-dojo-type="TestStubWidget" data-dojo-attach-point="bottomLevel"></div>
615                                                </div>
616                                        </div>
617                                        <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="anotherThree">
618                                                <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="anotherSecond">
619                                                        <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="anotherBottom"></div>
620                                                </div>
621                                        </div>
622                                </div>
623                        </textarea>
624
625                        <div data-dojo-type="Test5Widget" data-dojo-props="id: 'test5Widget'"></div>
626
627                        <div data-dojo-type="Missing" data-dojo-props="id: 'missing'"></div>
628
629                        <!-- Test templated widget containing relative MIDs for data-dojo-type -->
630                        <div data-dojo-type="dijit/tests/resources/TestContextRequireWidget" data-dojo-props="id: 'testContextWidget'"></div>
631
632                        <!-- Test templated widget for back-compat with inherited onClick etc events when using widgets in template -->
633                        <textarea id="Test6Template" style="display:none;">
634                                <div>
635                                        <div data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="textbox" data-dojo-attach-event="onClick: handleClick"></div>
636                                </div>
637                        </textarea>
638
639                        <div data-dojo-type="Test6Widget" data-dojo-props="id: 'test6Widget'"></div>
640
641                </div>
642
643        </body>
644</html>
Note: See TracBrowser for help on using the repository browser.