1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Dojo Toolkit - Declaration test</title>
6 <style type="text/css">
7 @import "../../dojo/resources/dojo.css";
8 @import "../themes/tundra/tundra.css";
9 @import "css/dijitTests.css";
11 <script type="text/javascript" src="../../dojo/dojo.js"
12 djConfig="parseOnLoad: true, isDebug: true"></script>
13 <script type="text/javascript">
14 dojo.require("dijit.Declaration");
15 dojo.require("dijit.ProgressBar");
16 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
20 <h3>Simple macro:</h3>
21 <p>(Check to make sure that links contain employee number)
22 <div dojoType="dijit.Declaration" widgetClass="Employee" defaults="{ empid: 123, name: '' }">
24 <a href="update.php?id=${empid}">update</a>
25 <a href="delete.php?id=${empid}">delete</a>
27 <div dojoType="Employee" empid="100" name="Alan Allen"></div>
28 <div dojoType="Employee" empid="101" name="Bob Brown"></div>
29 <div dojoType="Employee" empid="102" name="Cathy Cameron"></div>
31 <h3>Using dojoAttachEvent, dojoAttachPoint</h3>
32 <div dojoType="dijit.Declaration" widgetClass="HideButton">
33 XXX<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>XXX
34 <script type='dojo/method' event='onclick'>
35 this.domNode.style.display="none";
38 <button dojoType="HideButton">Click to hide</button>
39 <button dojoType="HideButton">Click to hide #2</button>
41 <h3>Extending another widget</h3>
42 <p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p>
43 <span dojoType="dijit.Declaration" widgetClass="HideButton2" mixins="HideButton">
44 YYY<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>YYY
46 <button dojoType="HideButton2">Hide me extended</button>
47 <button dojoType="HideButton2">Hide me extended #2</button>
49 <h3>Something more complicated:</h3>
50 <div dojoType="dijit.Declaration" widgetClass="foo" defaults="{ foo: 'thud', progress: 10 }">
51 <script type='dojo/connect' event='startup'>
52 this.baz.innerHTML += " (modified by dojo/connect event=startup) ";
55 <p>thinger blah stuff ${foo}</p>
57 <div style="width:400px" annotate="true" maximum="200"
58 progress="${progress}" dojoType="dijit.ProgressBar"></div>
59 <p dojoAttachPoint='baz'>baz thud</p>
62 <div dojoType="foo" foo="blah" progress="50"></div>
63 <div dojoType="foo" foo="thinger" progress="73"></div>