JavaScript DHTML/SmartClient/Page
Add click event handler to page level
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Page.setEvent("click","return confirm("Page received click event. Continue?");");
</SCRIPT> </BODY> </HTML>
</source>
Bind arrow key event to a page
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"widget", left:200, top:200, width:100, height:100, backgroundColor:"red"
});
Page.registerKey("I", "target.moveBy(0,-20)", widget); Page.registerKey("J", "target.moveBy(-20,0)", widget); Page.registerKey("K", "target.moveBy(0,20)", widget); Page.registerKey("L", "target.moveBy(20,0)", widget); Page.registerKey("Arrow_Up", "target.moveBy(0, -20)", widget); Page.registerKey("Arrow_Left", "target.moveBy(-20,0)", widget); Page.registerKey("Arrow_Down", "target.moveBy(0,20)", widget); Page.registerKey("Arrow_Right", "target.moveBy(20,0)", widget); </SCRIPT> Press arrow keys and I, J, K and L </BODY> </HTML>
</source>
Register key event to Page level
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"widget", left:200, top:200, width:100, height:100, backgroundColor:"red"
});
Page.registerKey("I", "target.moveBy(0,-20)", widget); Page.registerKey("J", "target.moveBy(-20,0)", widget); Page.registerKey("K", "target.moveBy(0,20)", widget); Page.registerKey("L", "target.moveBy(20,0)", widget); Page.registerKey("Arrow_Up", "target.moveBy(0, -20)", widget); Page.registerKey("Arrow_Left", "target.moveBy(-20,0)", widget); Page.registerKey("Arrow_Down", "target.moveBy(0,20)", widget); Page.registerKey("Arrow_Right", "target.moveBy(20,0)", widget); </SCRIPT> Press arrow keys and I, J, K and L </BODY> </HTML>
</source>