blob: 4e909b9e8f4400589ec623d7256b89594849dded (
plain)
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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit - Declaration test</title>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../themes/tundra/tundra.css";
@import "css/dijitTests.css";
</style>
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dijit.Declaration");
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body class="tundra">
<h3>Simple macro:</h3>
<p>(Check to make sure that links contain employee number)
<div dojoType="dijit.Declaration" 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 dojoType="Employee" empid="100" name="Alan Allen"></div>
<div dojoType="Employee" empid="101" name="Bob Brown"></div>
<div dojoType="Employee" empid="102" name="Cathy Cameron"></div>
<h3>Using dojoAttachEvent, dojoAttachPoint</h3>
<div dojoType="dijit.Declaration" widgetClass="HideButton">
XXX<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>XXX
<script type='dojo/method' event='onclick'>
this.domNode.style.display="none";
</script>
</div>
<button dojoType="HideButton">Click to hide</button>
<button dojoType="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 dojoType="dijit.Declaration" widgetClass="HideButton2" mixins="HideButton">
YYY<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>YYY
</span>
<button dojoType="HideButton2">Hide me extended</button>
<button dojoType="HideButton2">Hide me extended #2</button>
<h3>Something more complicated:</h3>
<div dojoType="dijit.Declaration" widgetClass="foo" defaults="{ foo: 'thud', progress: 10 }">
<script type='dojo/connect' event='startup'>
this.baz.innerHTML += " (modified by dojo/connect event=startup) ";
</script>
<p>thinger blah stuff ${foo}</p>
<div style="width:400px" annotate="true" maximum="200"
progress="${progress}" dojoType="dijit.ProgressBar"></div>
<p dojoAttachPoint='baz'>baz thud</p>
</div>
<div dojoType="foo" foo="blah" progress="50"></div>
<div dojoType="foo" foo="thinger" progress="73"></div>
</body>
</html>
|
