source: Dev/trunk/src/client/dijit/tests/test_Declaration.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: 5.6 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4
5        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6
7        <title>Dojo Toolkit - Declaration test</title>
8
9        <script type="text/javascript" src="boilerplate.js"></script>
10
11        <script type="text/javascript">
12                require([
13                        "doh/runner",
14                        "dojo/on",
15                        "dojo/parser",
16                        "dijit/Declaration",
17                        "dijit/ProgressBar",
18                                "dojo/domReady!"
19                ], function(doh, on, parser){
20
21                        doh.register("dijit.Declaration", [
22                                function parse(){
23                                        // run parser inside of DOH so we can tell if there are any exceptions
24                                        parser.parse();
25
26                                        // test instantiation of dojo.Declaration widgets
27                                        doh.t(hideButtonA, "hideButtonA instantiated");
28                                        doh.t(hideButtonB, "hideButtonB instantiated");
29                                        doh.t(hideButton2A, "hideButton2A instantiated");
30                                        doh.t(hideButton2B, "hideButton2B instantiated");
31                                },
32
33                                function basicTests(){ 
34                                        // test <script type="dojo/method">     
35                                        doh.t(HideButton.prototype.myHandler, "myHandler method added to HideButton prototype");
36                                        doh.t(HideButton2.prototype.myHandler, "myHandler method added to HideButton2 prototype");
37       
38                                        // test prototype extension     
39                                        doh.t(mPrototypeExecuted, "m prototype executed");
40       
41                                        // test parameters
42                                        doh.is("blah", m1.foo, "m1.foo");
43                                        doh.is(73, m2.progress, "m2.progress");
44       
45                                        // test <script type="dojo/aspect">
46                                        doh.t(foo1, "foo1 exists");
47                                        doh.t(/modified by dojo\/aspect method=startup/.test(foo1.domNode.innerHTML), "dojo/aspect fired");
48                                },
49
50                                function functions(){
51                                        doh.is(3, m1.plus(1, 2), "testing function definition with data-dojo-args")
52                                },
53
54                                function events(){
55                                        doh.t(button1, "button created");
56                                        doh.t(button1.onButtonClick, "onButtonClick exists");
57
58                                        var clicked = false;
59                                        button1.on("ButtonClick", function(){
60                                                clicked = true;
61                                        });
62                                        on.emit(button1.domNode, "click", {});
63                                        doh.t(clicked, "clicked");
64                                }
65                        ]);
66
67                        doh.run();
68                });
69        </script>
70
71</head>
72<body class="claro">
73        <h3>Simple macro:</h3>
74        <p>(Check to make sure that links contain employee number)
75        <div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"Employee", defaults:{ empid: 123, name: "" }'>
76                <span>${name}</span>
77                <a href="update.php?id=${empid}">update</a>
78                <a href="delete.php?id=${empid}">delete</a>
79        </div>
80        <div data-dojo-type="Employee" data-dojo-props='empid:100, name:"Alan Allen"'></div>
81        <div data-dojo-type="Employee" data-dojo-props='empid:101, name:"Bob Brown"'></div>
82        <div data-dojo-type="Employee" data-dojo-props='empid:102, name:"Cathy Cameron"'></div>
83
84        <h3>Using data-dojo-attach-event, data-dojo-attach-point</h3>
85        <div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"HideButton"'>
86                XXX<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>XXX
87                <script type='dojo/method' data-dojo-event='myHandler'>
88                        this.domNode.style.display="none";
89                </script>
90        </div>
91        <button data-dojo-id="hideButtonA" data-dojo-type="HideButton" >Click to hide</button>
92        <button data-dojo-id="hideButtonB" data-dojo-type="HideButton" >Click to hide #2</button>
93
94        <h3>Extending another widget</h3>
95        <p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p>
96        <span data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"HideButton2", mixins:["HideButton"]'>
97                YYY<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>YYY
98        </span>
99        <button data-dojo-id="hideButton2A" data-dojo-type="HideButton2" >Hide me extended</button>
100        <button data-dojo-id="hideButton2B" data-dojo-type="HideButton2" >Hide me extended #2</button>
101
102        <h3>Using dojo/method:</h3>
103        <div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"m", defaults:{ foo: "thud", progress: 10 }'>
104                <script type='dojo/method' data-dojo-event='postCreate'>
105                        console.log("in postCreate ", this, arguments);
106                        mPrototypeExecuted = true;
107                        this.inherited(arguments);
108                        this.baz.innerHTML += " (created via custom postCreate) ";
109                </script>
110                <script type='dojo/method' data-dojo-event='plus' data-dojo-args="a, b">
111                        return a + b;
112                </script>
113
114                <p>thinger blah stuff ${foo}</p>
115
116                <div data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
117                        progress:${progress}'></div>
118                <p data-dojo-attach-point='baz'>baz thud</p>
119        </div>
120
121        <div data-dojo-id="m1" data-dojo-type="m" data-dojo-props='foo:"blah", progress:50'></div>
122        <div data-dojo-id="m2" data-dojo-type="m" data-dojo-props='foo:"thinger", progress:73'></div>
123
124        <h3>Using dojo/aspect:</h3>
125        <div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"foo", defaults:{ foo: "thud", progress: 10 }'>
126                <script type='dojo/aspect' data-dojo-method='startup'>
127                        this.baz.innerHTML += " (modified by dojo/aspect method=startup) ";
128                </script>
129
130                <p>thinger blah stuff ${foo}</p>
131
132                <div data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
133                        progress:${progress}'></div>
134                <p data-dojo-attach-point='baz'>baz thud</p>
135        </div>
136
137        <div data-dojo-id="foo1" data-dojo-type="foo" data-dojo-props='foo:"blah", progress:50'></div>
138        <div data-dojo-id="foo2" data-dojo-type="foo" data-dojo-props='foo:"thinger", progress:73'></div>
139
140        <h3>data-dojo-attach-event on root node</h3>
141        <div data-dojo-type="dijit/Declaration"
142                        data-dojo-props='widgetClass:"button"'
143                        data-dojo-attach-event="onclick: onButtonClick">
144                <script type='dojo/method' data-dojo-event='onButtonClick'>
145                        console.log("in onButtonClicked");
146                </script>
147                click me
148        </div>
149
150        <button data-dojo-id="button1" data-dojo-type="button">click me</button>
151</body>
152</html>
Note: See TracBrowser for help on using the repository browser.