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
153 lines (125 loc) • 5.69 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo Toolkit - Declaration test</title>
<script type="text/javascript" src="boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/on",
"dojo/parser",
"dijit/Declaration",
"dijit/ProgressBar",
"dojo/domReady!"
], function(doh, on, parser){
doh.register("dijit.Declaration", [
function parse(){
// run parser inside of DOH so we can tell if there are any exceptions
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/aspect">
doh.t(foo1, "foo1 exists");
doh.t(/modified by dojo\/aspect method=startup/.test(foo1.domNode.innerHTML), "dojo/aspect fired");
},
function functions(){
doh.is(3, m1.plus(1, 2), "testing function definition with data-dojo-args")
},
function events(){
doh.t(button1, "button created");
doh.t(button1.onButtonClick, "onButtonClick exists");
var clicked = false;
button1.on("ButtonClick", function(){
clicked = true;
});
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>
<script type='dojo/method' data-dojo-event='plus' data-dojo-args="a, b">
return a + b;
</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/aspect:</h3>
<div data-dojo-type="dijit/Declaration" data-dojo-props='widgetClass:"foo", defaults:{ foo: "thud", progress: 10 }'>
<script type='dojo/aspect' data-dojo-method='startup'>
this.baz.innerHTML += " (modified by dojo/aspect method=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>