You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.7 KiB
131 lines
4.7 KiB
<!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 "../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>
|
|
|