Updated
This commit is contained in:
131
master/examples/test_Declaration_1.x.html
Normal file
131
master/examples/test_Declaration_1.x.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user