dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
132 lines (107 loc) • 4.81 kB
HTML
<html>
<head>
<title>Dojo Toolkit - Declaration test</title>
<style type="text/css">
@import "../themes/claro/document.css";
@import "css/dijitTests.css";
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="isDebug: true"></script>
<!-- not needed, for testing alternate themes -->
<script type="text/javascript" src="_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.Declaration");
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
dojo.ready(function(){
doh.register("dijit.Declaration_1.x", [
function parse(){
// run parser inside of DOH so we can tell if there are any exceptions
dojo.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/connect">
doh.t(foo1, "foo1 exists");
doh.t(/modified by dojo\/connect event=startup/.test(foo1.domNode.innerHTML), "dojo/connect fired");
}
]);
doh.run();
});
</script>
</head>
<body class="claro">
<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: myHandler" dojoAttachPoint="containerNode"></button>XXX
<script type='dojo/method' event='myHandler'>
this.domNode.style.display="none";
</script>
</div>
<button dojoType="HideButton" jsId="hideButtonA">Click to hide</button>
<button dojoType="HideButton" jsId="hideButtonB">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: myHandler" dojoAttachPoint="containerNode"></button>YYY
</span>
<button dojoType="HideButton2" jsId="hideButton2A">Hide me extended</button>
<button dojoType="HideButton2" jsId="hideButton2B">Hide me extended #2</button>
<h3>Using dojo/method:</h3>
<div dojoType="dijit.Declaration" widgetClass="m" defaults="{ foo: 'thud', progress: 10 }">
<script type='dojo/method' event='postCreate'>
console.log("in postCreate ", this, arguments);
mPrototypeExecuted = true;
this.inherited(arguments);
this.baz.innerHTML += " (created via custom postCreate) ";
</script>
<p>thinger blah stuff ${foo}</p>
<div style="width:400px" maximum="200"
progress="${progress}" dojoType="dijit.ProgressBar"></div>
<p dojoAttachPoint='baz'>baz thud</p>
</div>
<div dojoType="m" jsId="m1" foo="blah" progress="50"></div>
<div dojoType="m" jsId="m2" foo="thinger" progress="73"></div>
<h3>Using dojo/connect:</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" maximum="200"
progress="${progress}" dojoType="dijit.ProgressBar"></div>
<p dojoAttachPoint='baz'>baz thud</p>
</div>
<div dojoType="foo" jsId="foo1" foo="blah" progress="50"></div>
<div dojoType="foo" jsId="foo2" foo="thinger" progress="73"></div>
</body>
</html>