157 lines
6.0 KiB
HTML
157 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
|
<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"
|
|
data-dojo-config="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("dojo.on");
|
|
dojo.require("doh.runner");
|
|
|
|
dojo.ready(function(){
|
|
doh.register("dijit.Declaration", [
|
|
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");
|
|
},
|
|
|
|
function events(){
|
|
doh.t(button1, "button created");
|
|
doh.t(button1.onButtonClick, "onButtonClick exists");
|
|
|
|
var clicked = false;
|
|
button1.on("ButtonClick", function(){
|
|
clicked = true;
|
|
});
|
|
dojo.on.emit(button1.domNode, "click", {});
|
|
doh.t(clicked, "clicked");
|
|
}
|
|
]);
|
|
|
|
doh.run();
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body class="claro">
|
|
<h3>Simple macro:</h3>
|
|
<p>(Check to make sure that links contain employee number)
|
|
<div data-dojo-type="dijit.Declaration" data-dojo-props='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 data-dojo-type="Employee" data-dojo-props='empid:100, name:"Alan Allen"'></div>
|
|
<div data-dojo-type="Employee" data-dojo-props='empid:101, name:"Bob Brown"'></div>
|
|
<div data-dojo-type="Employee" data-dojo-props='empid:102, name:"Cathy Cameron"'></div>
|
|
|
|
<h3>Using data-dojo-attach-event, data-dojo-attach-point</h3>
|
|
<div data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"HideButton"'>
|
|
XXX<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>XXX
|
|
<script type='dojo/method' data-dojo-event='myHandler'>
|
|
this.domNode.style.display="none";
|
|
</script>
|
|
</div>
|
|
<button data-dojo-id="hideButtonA" data-dojo-type="HideButton" >Click to hide</button>
|
|
<button data-dojo-id="hideButtonB" data-dojo-type="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 data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"HideButton2", mixins:["HideButton"]'>
|
|
YYY<button data-dojo-attach-event="onclick: myHandler" data-dojo-attach-point="containerNode"></button>YYY
|
|
</span>
|
|
<button data-dojo-id="hideButton2A" data-dojo-type="HideButton2" >Hide me extended</button>
|
|
<button data-dojo-id="hideButton2B" data-dojo-type="HideButton2" >Hide me extended #2</button>
|
|
|
|
<h3>Using dojo/method:</h3>
|
|
<div data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"m", defaults:{ foo: "thud", progress: 10 }'>
|
|
<script type='dojo/method' data-dojo-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 data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
|
|
progress:${progress}'></div>
|
|
<p data-dojo-attach-point='baz'>baz thud</p>
|
|
</div>
|
|
|
|
<div data-dojo-id="m1" data-dojo-type="m" data-dojo-props='foo:"blah", progress:50'></div>
|
|
<div data-dojo-id="m2" data-dojo-type="m" data-dojo-props='foo:"thinger", progress:73'></div>
|
|
|
|
<h3>Using dojo/connect:</h3>
|
|
<div data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"foo", defaults:{ foo: "thud", progress: 10 }'>
|
|
<script type='dojo/connect' data-dojo-event='startup'>
|
|
this.baz.innerHTML += " (modified by dojo/connect event=startup) ";
|
|
</script>
|
|
|
|
<p>thinger blah stuff ${foo}</p>
|
|
|
|
<div data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px", maximum:200,
|
|
progress:${progress}'></div>
|
|
<p data-dojo-attach-point='baz'>baz thud</p>
|
|
</div>
|
|
|
|
<div data-dojo-id="foo1" data-dojo-type="foo" data-dojo-props='foo:"blah", progress:50'></div>
|
|
<div data-dojo-id="foo2" data-dojo-type="foo" data-dojo-props='foo:"thinger", progress:73'></div>
|
|
|
|
<h3>data-dojo-attach-event on root node</h3>
|
|
<div data-dojo-type="dijit.Declaration"
|
|
data-dojo-props='widgetClass:"button"'
|
|
data-dojo-attach-event="onclick: onButtonClick">
|
|
<script type='dojo/method' data-dojo-event='onButtonClick'>
|
|
console.log("in onButtonClicked");
|
|
</script>
|
|
click me
|
|
</div>
|
|
|
|
<button data-dojo-id="button1" data-dojo-type="button">click me</button>
|
|
</body>
|
|
</html>
|