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.
152 lines
5.6 KiB
152 lines
5.6 KiB
<!DOCTYPE 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>
|
|
|