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