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