source: Dev/branches/rest-dojo-ui/client/dijit/tests/_WidgetsInTemplateMixin.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 18.1 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                </style>
11
12                <script type="text/javascript" src="../../dojo/dojo.js"
13                        data-dojo-config="isDebug: true"></script>
14                <script type="text/javascript">
15                        dojo.require("doh.runner");
16
17                        dojo.require("dojo.parser");
18
19                        dojo.require("dijit._WidgetBase");
20                        dojo.require("dijit._Widget");          // for getDescendants() testing
21                        dojo.require("dijit._TemplatedMixin");
22                        dojo.require("dijit._WidgetsInTemplateMixin");
23                        dojo.require("dijit.form.Button");
24                        dojo.require("dijit.form.CheckBox");
25                        dojo.require("dijit.ProgressBar");
26                        dojo.require("dijit.layout.ContentPane");
27                        dojo.require("dijit.layout.TabContainer");
28                        dojo.require("dijit._Container");
29                        dojo.require("dijit._Contained");
30                        dojo.require("dijit.layout._LayoutWidget");
31                        dojo.require("dijit.focus");    // dijit.focus()
32
33                        dojo.ready(function(){
34                                dojo.declare('Test1Widget',
35                                        [dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin],
36                                {
37                                        templateString: dojo.byId('Test1Template').value,
38                                        onClick: function(e){
39                                                if(e.target){
40                                                        alert('onClick widgetId='+e.target.id);
41                                                }else{
42                                                        if(e._counter == undefined){
43                                                                e._counter = 1;
44                                                        }else{
45                                                                e._counter++;
46                                                        }
47                                                }
48                                        }
49                                });
50
51                                dojo.declare('Test3Widget',
52                                        [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin],
53                                {
54                                        templateString: dojo.byId('Test3Template').value
55                                });
56
57                                dojo.declare('Test4Widget',
58                                        [dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin],
59                                {
60                                        templateString: dojo.byId('Test4Template').value
61                                });
62               
63                                function validateTest4Widget(t, testW){
64                                        var selectedTab = dojo.query(".dijitTabChecked", testW.domNode)[0];
65                                        var selectedPane = dojo.query(".dijitTabPane.dijitVisible", testW.domNode)[0];
66                                        var tabBox = selectedTab ? dojo.contentBox(selectedTab) : null;
67                                        var paneBox = selectedPane ? dojo.contentBox(selectedPane) : null;
68                                        doh.t(tabBox && tabBox.w> 0 && tabBox.h> 0, "tabBox && tabBox.w> 0 && tabBox.h> 0");
69                                        doh.t(paneBox && paneBox.w> 0 && paneBox.h> 0, "paneBox && paneBox.w> 0 && paneBox.h");
70                                        // Check that everything got started
71                                        doh.t(testW._started, "testW._started");
72                                        doh.t(testW.tabCont._started, "tabCont._started");
73                                        doh.t(testW.tab1._started, "tab1._started");
74                                        doh.t(testW.tab2._started, "tab2._started");
75                                }
76                       
77                                dojo.declare('TestLayoutWidget', dijit.layout._LayoutWidget, {
78                                        startup: function(){
79                                                if(this._started){
80                                                        this._doubleStarted = true;
81                                                }
82                                                this.inherited(arguments);
83                                        },
84                                        destroy: function(){
85                                                if(this._destroyed){
86                                                        this._doubleDestroyed = true;
87                                                }
88                                                this.inherited(arguments);
89                                                this._destroyed = true;
90                                        }
91                                });
92                                dojo.declare('TestCtnrWidget', [dijit._WidgetBase, dijit._Container], {
93                                        startup: function(){
94                                                if(this._started){
95                                                        this._doubleStarted = true;
96                                                }
97                                                this.inherited(arguments);
98                                        },
99                                        destroy: function(){
100                                                if(this._destroyed){
101                                                        this._doubleDestroyed = true;
102                                                }
103                                                this.inherited(arguments);
104                                                this._destroyed = true;
105                                        }
106                                });
107                                dojo.declare('TestCtndWidget', [dijit._WidgetBase, dijit._Contained], {
108                                        startup: function(){
109                                                if(this._started){
110                                                        this._doubleStarted = true;
111                                                }
112                                                this.inherited(arguments);
113                                        },
114                                        destroy: function(){
115                                                if(this._destroyed){
116                                                        this._doubleDestroyed = true;
117                                                }
118                                                this.inherited(arguments);
119                                                this._destroyed = true;
120                                        }
121                                });
122                                dojo.declare('TestNonCtnrWidget', [dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
123                                        templateString: "<div data-dojo-attach-point=containerNode></div>",
124                                        startup: function(){
125                                                if(this._started){
126                                                        this._doubleStarted = true;
127                                                }
128                                                this.inherited(arguments);
129                                        },
130                                        destroy: function(){
131                                                if(this._destroyed){
132                                                        this._doubleDestroyed = true;
133                                                }
134                                                this.inherited(arguments);
135                                                this._destroyed = true;
136                                        }
137                                });
138                                dojo.declare('TestStubWidget', dijit._WidgetBase, {
139                                        startup: function(){
140                                                if(this._started){
141                                                        this._doubleStarted = true;
142                                                }
143                                                this.inherited(arguments);
144                                        },
145                                        destroy: function(){
146                                                if(this._destroyed){
147                                                        this._doubleDestroyed = true;
148                                                }
149                                                this.inherited(arguments);
150                                                this._destroyed = true;
151                                        }
152                                });
153       
154                                dojo.declare('Test5Widget',
155                                        [dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin],
156                                {
157                                        templateString: dojo.byId('Test5Template').value,
158                                        startup: function(){
159                                                if(this._started){
160                                                        this._doubleStarted = true;
161                                                }
162                                                this.inherited(arguments);
163                                        },
164                                        destroy: function(){
165                                                if(this._destroyed){
166                                                        this._doubleDestroyed = true;
167                                                }
168                                                this.inherited(arguments);
169                                                this._destroyed = true;
170                                        }
171                                });
172       
173                                dojo.declare("Missing", [dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
174                                        templateString: '<div>' +
175                                                                                '<div data-dojo-type="dijit.layout.ContentPane">' +
176                                                                                        '<div data-dojo-type="dijit.form.Button" data-dojo-props="id: \'missingButtonId\'" ' +
177                                                                                        'data-dojo-attach-point="missingButton">Missing...</div>' +
178                                                                                '</div>' +
179                                                                        '</div>'
180                                });
181
182                                function getTestWidgets(testW){
183                                        return [
184                                                testW,
185                                                testW.layout,
186                                                testW.layChild1,
187                                                testW.layChild2,
188                                                testW.container,
189                                                testW.contained1,
190                                                testW.contained2,
191                                                testW.nonContainer,
192                                                testW.nonContained1,
193                                                testW.nonContained2,
194                                                testW.threeLevel,
195                                                testW.secondLevel,
196                                                testW.bottomLevel,
197                                                testW.anotherThree,
198                                                testW.anotherSecond,
199                                                testW.anotherBottom,
200                                                testW.stub1
201                                        ];
202                                }
203               
204                                function validateTest5Widget(t, testW){
205                                        // Check that everything got started, but not double-started
206                                        dojo.forEach(getTestWidgets(testW), function(w){
207                                                doh.t(w._started, "w._started: " + w);
208                                                doh.is(undefined, w._doubleStarted, "w._doubleStarted: " + w);
209                                        });
210                                }
211               
212                                function validateTest5WidgetDestroy(t, testW){
213                                        var savedWidgets = getTestWidgets(testW);
214                                        testW.destroy();
215                                        dojo.forEach(savedWidgets, function(w, idx){
216                                                doh.t(w._destroyed, "w._destroyed: " + w);
217                                                doh.is(undefined, w._doubleDestroyed, "w._doubleDestroyed: " + w);
218                                        });
219                                }
220
221                                doh.register("parse", function(){
222                                        dojo.parser.parse();
223                                });
224
225                                doh.register("_Templated-widgetsInTemplate",
226                                        [
227                                                {
228                                                        name: "data-dojo-attach-point",
229                                                        runTest: function(t){
230                                                                var testW = dijit.byId("test1Widget");
231                                                                doh.t(testW, "test1Widget was instantiated");
232                                                                doh.t(testW.normalNode, "normalNode");
233                                                                doh.f(isNaN(testW.normalNode.nodeType), "normalNode.nodeType");
234                                                                doh.t(testW.buttonWidget instanceof dijit.form.Button, "buttonWidget is Button");
235                                                                doh.t(testW.checkboxWidget instanceof dijit.form.CheckBox, "checkboxWidget is CheckBox");
236                                                                doh.t(testW.progressBarWidget instanceof dijit.ProgressBar, "progressBarWidget is ProgressBar");
237                                                        }
238                                                },
239                                                {
240                                                        name: "data-dojo-attach-event",
241                                                        runTest: function(t){
242                                                                var testW = dijit.byId("test1Widget");
243                                                                testW.buttonWidget._counter=0;
244                                                                testW.buttonWidget.onClick(testW.buttonWidget);
245                                                                testW.checkboxWidget._counter=0;
246                                                                testW.checkboxWidget.onClick(testW.checkboxWidget);
247                                                                testW.progressBarWidget._counter=0;
248                                                                testW.progressBarWidget.onChange(testW.progressBarWidget);
249                                                                doh.is(1,testW.buttonWidget._counter, "buttonWidget._counter");
250                                                                doh.is(1,testW.checkboxWidget._counter, "checkboxWidget._counter");
251                                                                doh.is(1,testW.progressBarWidget._counter, "progressBarWidget._counter");
252                                                        }
253                                                },
254                                                {
255                                                        // Test that getDescendants ()
256                                                        // finds direct descendants but skips widgetsInTemplates
257                                                        // and also nested widgets (if direct==true)
258                                                        name: "destruction",
259                                                        runTest: function(t){
260                                                                var testW = dijit.byId("test3Widget");
261
262/*** performance tests
263                                                                var start = new Date();
264                                                                for(var i=0; i<1000; i++)
265                                                                        testW.getChildren();
266                                                                console.log("*** time for getChildren(): " + (new Date()-start));
267                                                                var start = new Date();
268                                                                for(var i=0; i<1000; i++)
269                                                                        testW.getDescendants();
270                                                                console.log("*** time for getDescendants(false): " + (new Date()-start));
271***/
272                                                                var chil = testW.getChildren();
273                                                                doh.is(5, chil.length, "number of direct descendants");
274                                                                doh.is(chil[0].id, "3.1");
275                                                                doh.is(chil[1].id, "3.2");
276                                                                doh.is(chil[2].id, "3.3");
277                                                                doh.is(chil[3].id, "3.4");
278                                                                doh.is(chil[4].id, "3.5");
279
280                                                                var desc = testW.getDescendants();
281                                                                doh.is(7, desc.length, "number of descendants (including nested ones)");
282                                                                doh.is(desc[0].id, "3.1");
283                                                                doh.is(desc[1].id, "3.2");
284                                                                doh.is(desc[2].id, "3.3");
285                                                                doh.is(desc[3].id, "3.nested");
286                                                                doh.is(desc[4].id, "3.nested2");
287                                                                doh.is(desc[5].id, "3.4");
288                                                                doh.is(desc[6].id, "3.5");
289                                                        }
290                                                },
291                                                {
292                                                        // Check that declarative widget with layout widgets in template is correctly created and rendered
293                                                        name: "declarative widget with layout widgets",
294                                                        runTest: function(t){
295                                                                validateTest4Widget(t, dijit.byId("test4Widget"));
296                                                        }
297                                                },
298                                                {
299                                                        // Check that programatic widget with layout widgets in template is correctly created and rendered
300                                                        name: "programmatic widget with layout widgets",
301                                                        runTest: function(t){
302                                                                test4WidgetProgrammatic = new Test4Widget({}).placeAt("test4Widget", "after");
303                                                                test4WidgetProgrammatic.startup();
304                                                                validateTest4Widget(t, test4WidgetProgrammatic);
305                                                        }
306                                                },
307                                                {
308                                                        // Compare programmatic and declaratively created widget with layout widgets in template
309                                                        name: "programmatic vs declarative with layout widgets",
310                                                        runTest: function(t){
311                                                                // Focus the body, so that we don't have different classes on our
312                                                                // two widgets
313                                                                dijit.focus(dojo.body());
314                                                                var declW = dijit.byId("test4Widget");
315                                                                var progW = test4WidgetProgrammatic;
316
317                                                                // Check that generated HTML in DOM is same
318                                                                var declNeutralHtml = declW.domNode.innerHTML.replace(/_\d+/g, "");
319                                                                var progNeutralHtml = progW.domNode.innerHTML.replace(/_\d+/g, "");
320                                                                if(declNeutralHtml != progNeutralHtml){
321                                                                        for(var i=0; i<declNeutralHtml.length; i++){
322                                                                                if(progNeutralHtml.charAt(i) != declNeutralHtml.charAt(i)){
323                                                                                        console.log("***Difference starting at " + i);
324                                                                                        console.log("declarative: " + declNeutralHtml.substr(Math.max(0, i-5), 50));
325                                                                                        console.log("programmatic: " + progNeutralHtml.substr(Math.max(0, i-5), 50));
326                                                                                        break;
327                                                                                }
328                                                                        }
329                                                                        doh.t(declNeutralHtml == progNeutralHtml, "declNeutralHtml == progNeutralHtml");
330                                                                }
331
332                                                                // Check that dimensions are same
333                                                                var declBox = dojo.contentBox(declW.domNode);
334                                                                var progBox = dojo.contentBox(progW.domNode);
335                                                                doh.is(declBox.h, progBox.h, "progBox.h");
336                                                                doh.is(declBox.w, progBox.w, "progBox.w");
337                                                        }
338                                                },
339                                                {
340                                                        // Check that declarative widget with other widgets in template is correctly started
341                                                        name: "declarative widget with many child widgets",
342                                                        runTest: function(t){
343                                                                validateTest5Widget(t, dijit.byId("test5Widget"));
344                                                        }
345                                                },
346                                                {
347                                                        // Check that programmatic widget with other widgets in template is correctly started
348                                                        name: "programmatic widget with many child widgets",
349                                                        runTest: function(t){
350                                                                test5WidgetProgrammatic = new Test5Widget().placeAt("test5Widget", "after");
351                                                                test5WidgetProgrammatic.startup();
352                                                                validateTest5Widget(t, test5WidgetProgrammatic);
353                                                        }
354                                                },
355                                                {
356                                                        // Check that destroying our declarative widget works correctly
357                                                        name: "declarative widget destruction",
358                                                        runTest: function(t){
359                                                                validateTest5WidgetDestroy(t, dijit.byId("test5Widget"));
360                                                        }
361                                                },
362                                                {
363                                                        // Check that destroying our programmatic widget works correctly
364                                                        name: "programmatic widget destruction",
365                                                        runTest: function(t){
366                                                                validateTest5WidgetDestroy(t, test5WidgetProgrammatic);
367                                                        }
368                                                },
369                                                {
370                                                        // Test that data-dojo-attach-point inside of a ContentPane (inside of a template) works
371                                                        name: "ContentPane",
372                                                        runTest: function(){
373                                                                var testW = dijit.byId("missing");
374                                                                doh.t(testW, "widget was created");
375                                                                doh.t(testW.missingButton, "data-dojo-attach-point created");
376                                                                doh.is("dijit.form.Button", testW.missingButton.declaredClass, "and it's to a widget");
377                                                                doh.t(dijit.byId("missingButtonId"), "nested widget also registered by id");
378                                                        }
379                                                }
380                                        ]
381                                );
382
383                                // Test that "this" referenced from data-dojo-props can refer to the hosting widget
384                                doh.register("data-dojo-props this", function(){
385                                        var host = dojo.declare([dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
386                                                obj: {hello: "world"},
387                                                templateString:
388                                                        "<div>" +
389                                                                "<div data-dojo-type='dijit._WidgetBase' data-dojo-props='hostObj: this.obj'" +
390                                                                " data-dojo-attach-point='subWidget'></div>" +
391                                                        "</div>"
392                                        });
393                                       
394                                        var hostWidget = new host(),
395                                                subWidget = hostWidget && hostWidget.subWidget;
396                                        doh.isNot(undefined, hostWidget, "created host widget");
397                                        doh.isNot(undefined, subWidget, "created sub widget");
398                                        doh.isNot(undefined, subWidget.hostObj, "sub widget got hostObj defined");
399                                        doh.is("world", subWidget.hostObj.hello, "object is correct")
400                                });
401
402                                doh.run();
403                        });
404                </script>
405        </head>
406        <body class="claro">
407                <h1>WidgetsInTemplateMixin</h1>
408                <textarea id="Test1Template" style="display:none;">
409                        <div>
410                                <div data-dojo-attach-point="normalNode">normal node</div>
411                                <button data-dojo-attach-point="buttonWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit.form.Button">button #1</button>
412                                <div data-dojo-attach-point="checkboxWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit.form.CheckBox"></div> checkbox #1
413                                <div data-dojo-attach-point="progressBarWidget" data-dojo-attach-event="onChange:onClick"
414                                        data-dojo-type="dijit.ProgressBar" data-dojo-props='value: 20, maximum: 200, style: "width:400px;"'></div>
415                        </div>
416                </textarea>
417
418                <div data-dojo-type="Test1Widget" data-dojo-props="id: 'test1Widget'"></div>
419       
420       
421                <textarea id="Test3Template" style="display:none;">
422                        <div>
423                                <div data-dojo-attach-point="checkboxWidget" data-dojo-type="dijit.form.CheckBox"></div> checkbox #3
424                                <div data-dojo-attach-point="containerNode"></div>
425                        </div>
426                </textarea>
427
428                <div data-dojo-type="Test3Widget" data-dojo-props="id: 'test3Widget'">
429                        <span>hello world</span>
430                        <b style="border: 1px solid blue;">this is my
431                                <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.1'">first button</button>
432                        </b>
433                        <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.2'">another button</button>
434                        <i>and some more</i>
435                        <div style="border: 1px solid red;">
436                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="style: {border: '1px solid gray'}, id: '3.3'">
437                                        <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.nested'">a nested button</button>
438                                        <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.nested2'">another nested button</button>
439                                </div>
440                                <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.4'">yet another button</button>
441                                <button data-dojo-type="dijit.form.Button" data-dojo-props="id: '3.5'">yet yet another button</button>
442                        </div>
443                </div>
444
445                <!-- Test templated widget containing layout widgets in template -->
446                <textarea id="Test4Template" style="display:none;">
447                        <div>
448                                <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="style: {height: '5em', width: '100em'}" data-dojo-attach-point="tabCont">
449                                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Tab 1'" data-dojo-attach-point="tab1">
450                                                pane 1
451                                        </div>
452                                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Tab 2'" data-dojo-attach-point="tab2">
453                                                pane 2
454                                        </div>
455                                </div>
456                        </div>
457                </textarea>
458
459                <div data-dojo-type="Test4Widget" data-dojo-props="id: 'test4Widget'"></div>
460       
461                <!-- Test templated widget containing container and nested widgets in template -->
462                <textarea id="Test5Template" style="display:none;">
463                        <div>
464                                <div data-dojo-type="TestLayoutWidget" data-dojo-attach-point="layout">
465                                        <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild1"></div>
466                                        <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild2"></div>
467                                </div>
468                                <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="container">
469                                        <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained1"></div>
470                                        <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained2"></div>
471                                </div>
472                                <div data-dojo-type="TestStubWidget" data-dojo-attach-point="stub1"></div>
473                                <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="nonContainer">
474                                        <div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained1"></div>
475                                        <div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained2"></div>
476                                </div>
477                                <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="threeLevel">
478                                        <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="secondLevel">
479                                                <div data-dojo-type="TestStubWidget" data-dojo-attach-point="bottomLevel"></div>
480                                        </div>
481                                </div>
482                                <div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="anotherThree">
483                                        <div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="anotherSecond">
484                                                <div data-dojo-type="TestCtndWidget" data-dojo-attach-point="anotherBottom"></div>
485                                        </div>
486                                </div>
487                        </div>
488                </textarea>
489
490                <div data-dojo-type="Test5Widget" data-dojo-props="id: 'test5Widget'"></div>
491
492                <div data-dojo-type="Missing" data-dojo-props="id: 'missing'"></div>
493        </body>
494</html>
Note: See TracBrowser for help on using the repository browser.