{"id":885,"date":"2010-01-03T22:15:08","date_gmt":"2010-01-04T03:15:08","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/885"},"modified":"2010-01-03T22:50:04","modified_gmt":"2010-01-04T03:50:04","slug":"microsoft-ajax-library-declarative-command-alternatives","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/885","title":{"rendered":"Microsoft Ajax Library Declarative Command Alternatives"},"content":{"rendered":"

There may be another way to accomplish this, but I wanted to have a simple commanding system in the Microsoft Ajax Library<\/a> which worked outside of the templates. <\/p>\n

After a number of false starts and frustration brought about by very limited documentation, I discovered a reasonable implementation.<\/p>\n

I created a script file, \u201cCommanding.js\u201d (in a Scripts folder):<\/p>\n

\/\/\/ <reference name="MicrosoftAjax.js"\/>\n\n<\/span>Type.registerNamespace("WiredPrairie"<\/span>);\n\nWiredPrairie.Commanding = function<\/span>(element) {\n    WiredPrairie.Commanding.initializeBase(this<\/span>, [element]);\n}\n\nWiredPrairie.Commanding.prototype = {\n    initialize: function<\/span>() {\n        WiredPrairie.Commanding.callBaseMethod(this<\/span>, 'initialize'<\/span>);\n\n        \/\/ Add custom initialization here\n    <\/span>},\n    dispose: function<\/span>() {\n        \/\/Add custom dispose actions here\n        <\/span>WiredPrairie.Commanding.callBaseMethod(this<\/span>, 'dispose'<\/span>);\n    }\n}\n\nWiredPrairie.Commanding.registerClass('WiredPrairie.Commanding'<\/span>, Sys.UI.Control);\n\nif <\/span>(typeof <\/span>(Sys) !== 'undefined'<\/span>) Sys.Application.notifyScriptLoaded();<\/pre>\n
<\/a><\/p>\n
This is just a basic JavaScript class, with the default implementation provided by the Ajax Client Control template in Visual Studio 2008. The reason this is needed is that Controls all support a special event onBubbleEvent that is needed by commands when they\u2019re raised.<\/p>\n
In the body of the HTML, I attached an instance of the \u201cWiredPrairie.Commanding\u201d class to the body. Next, I attached a JavaScript function to the onbubbleevent (wpc:onbubbleevent, remember that all attributes need to be all lowercase). Here, I\u2019ve used the special {{ }} syntax to indicate I want JavaScript code to execute when the event is raised. <\/p>\n
<<\/span>body xmlns<\/span>:<\/span>sys<\/span>="javascript:Sys" \n    <\/span>xmlns<\/span>:<\/span>wpc<\/span>="javascript:WiredPrairie.Commanding" \n    <\/span>sys<\/span>:<\/span>attach<\/span>="wpc" \n    <\/span>wpc<\/span>:<\/span>onbubbleevent<\/span>="{{onCommand}}" >\n    <<\/span>div <\/span>>\n        <<\/span>button sys<\/span>:<\/span>command<\/span>="startRunningCommand" <\/span>sys<\/span>:<\/span>commandargument<\/span>="iargueaboutit"><\/span>Run<\/<\/span>button<\/span>>\n    <\/<\/span>div<\/span>>\n<\/<\/span>body<\/span>>\n<\/span><\/pre>\n
<\/a><\/p>\n
I needed my JavaScript WiredPrairie.Commanding class to load and run at the right time on the page, so I\u2019ve used the new loader classes in the Ajax library.<\/p>\n
Sys.loader.defineScripts(null<\/span>, [\n{\n    name: "Commanding"\n    <\/span>,releaseUrl: "Scripts\/Commanding.js"\n    <\/span>,debugUrl: "Scripts\/Commanding.js"\n    <\/span>,dependencies: ["ComponentModel"<\/span>]\n }\n ]);<\/pre>\n
<\/a><\/p>\n
First, I needed to declare this new script file and any dependencies. Since I don\u2019t yet have a minified version, I\u2019ve just specified the same file for the releaseUrl and the debugUrl. For the dependencies property, I looked through a few source files to discover that the \u201cComponentModel\u201d key included Sys.UI.Control, which my class depends on to be created, so I added that here (hopefully this will be documented at some point).<\/p>\n
Next, I added code to indicate to the loader which scripts were necessary and let it determine the best way to load them:<\/p>\n
Sys.require<\/span>([Sys.components.dataView, Sys.scripts.jQuery,
 Sys.scripts.Commanding]);<\/pre>\n
<\/a><\/p>\n
Here, you see the \u201cCommanding\u201d key is added to a special namespace, \u201cSys.scripts.\u201d<\/p>\n
In the new onReady event which is raised when the DOM and scripts have been loaded, I\u2019ve added code to activate the control class I wrote:<\/p>\n
Sys.onReady(function<\/span>() {\n    Sys.activateElements(document.documentElement);    \n});<\/pre>\n
<\/a><\/p>\n
Finally, I wired up that event declared above in the onbubbleevent attribute on the body element.<\/p>\n
function <\/span>onCommand(sender, args) {\n    if <\/span>(typeof <\/span>(args) !== "undefined"<\/span>) {\n        var <\/span>commandName = args.get_commandName();\n        var <\/span>commandArgument = args.get_commandArgument();\n        alert(commandName + " " <\/span>+ commandArgument);\n    }\n}<\/pre>\n
<\/a><\/p>\n
OK, that\u2019s cool, but you might want to raise a command without it being triggered by a control event (such as a click). So, I added a simple function to my Commanding class:<\/p>\n
WiredPrairie.Commanding.raiseCommand = function<\/span>(sender, commandName, commandArgument, commandSource) {\n    var <\/span>source = sender || document.body;\n    Sys.UI.DomElement.raiseBubbleEvent(source, new <\/span>Sys.CommandEventArgs(commandName, commandArgument, commandSource));\n}\n\nvar <\/span>$sendCommand = WiredPrairie.Commanding.raiseCommand;<\/pre>\n
<\/a><\/p>\n
Because of the way the raiseBubbleEvent works, it does depend on the source being set to a valid control\/element (as raiseBubbleEvent walks through the parent chain until there aren\u2019t any more parents) \u2013 in this case, I\u2019ve defaulted to the body element.<\/p>\n
Finally, an enhancement to the test case above to demonstrate both receiving and sending a command:<\/p>\n
function <\/span>onCommand(sender, args) {\n    if <\/span>(typeof <\/span>(args) !== "undefined"<\/span>) {\n        var <\/span>commandName = args.get_commandName();\n        var <\/span>commandArgument = args.get_commandArgument();\n        switch <\/span>(commandName) {\n            case <\/span>"startRunningCommand"<\/span>:\n                $sendCommand(null<\/span>, "alertCommand"<\/span>, new <\/span>Date().toLocaleTimeString(), null<\/span>);\n                break<\/span>;\n            case <\/span>"alertCommand"<\/span>:\n                alert(commandArgument);\n                break<\/span>;\n            default<\/span>:\n                break<\/span>;\n        }\n    }\n}<\/pre>\n
<\/a><\/p>\n
One command just sends another command which displays an alert. It\u2019s simple, but functional.<\/p>\n
Enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"
There may be another way to accomplish this, but I wanted to have a simple commanding system in the Microsoft Ajax Library which worked outside of the templates. After a number of false starts and frustration brought about by very limited documentation, I discovered a reasonable implementation. I created a script file, \u201cCommanding.js\u201d (in a […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[21],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-eh","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":890,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/890","url_meta":{"origin":885,"position":0},"title":"Disabling automatic Sys.UI.Control attachment","date":"January 17, 2010","format":false,"excerpt":"If you\u2019re using the Microsoft Ajax Library (learn), you may not always want to start the automatic \u201cattach\u201d process that takes place when the page loads. It\u2019s easy to disable, but not yet documented any place I could find easily.