Taking advantage of commands – take II

Now that you already know what a command is and how to use them in a declarative scenario, it’s time to keep going and see how we can use them from an imperative only approach. You already know how to “define” templates from JavaScript, so I guess we can concentrate on seeing which JavaScript code we need to generate commands.

If you’ve used a debugger with the previous sample, then you’ve probably noticed that sys:command attributes (and friends) get transformed into  a Sys.UI.DomElement.setCommand method call:

//some code
$element.__mstcindex = $context._tcindex;
null, $context, ''sys:commandtarget'')); //more code

The Sys.UI.DomElement.setCommand is a helper method which expects the following parameters:

  • a reference to the DOM element which is responsible for generating the command (in this case, $element references the LI that has been created through the template instantiation);
  • a string which identifies the name of the command (sayHi, in the previous snippet);
  • an object which is used as the command’s argument (in a declarative approach, you define it by using the sys:commandargument parameter);
  • a reference to a *DOM* element which is associated with the MS AJX control. Notice that you must really pass a reference to a DOM element and not to a MS AJAX control.

Wit this information,you’ve got all you need to transform the previous example into an imperative approach. However,we can still reduce the code. Remember plug-ins? When we’ve met them, I said that the current release (preview 6) introduced two. We’ve already met the Sys.bind plugin; we’re only missing the Sys.setCommand plugin! Lets start by looking at its definition:

{ name: "ComponentModel",
   isLoaded: !!Sys.Component,
   plugins: [
name: "setCommand",
description: "...", plugin: "Sys.UI.DomElement.setCommand", parameters: [
name: "commandSource",
description: "The DOM element …"}, {name: "commandName",
description: "The name of the command to raise."}, {name: "commandArgument",
description: "Optional command argument."}, {name: "commandTarget",
description: "DOM element from…"}]}] },

As you can see, these are precisely the same parameters as the ones expected by the Sys.UI.DomElement.setCommand method. And now we’re ready for writing some JavaScript code! Here it is:

    <script type="text/javascript" 
script> <script type="text/javascript"> var data = [ { name: "luis", address: "fx" }, { name: "john", address: "lx" }, { name: "rita", address: "ams" } ]; Sys.require([Sys.components.dataView]); Sys.onReady(function () { function createHtml(html) { var aux = document.createElement("DIV"); aux.innerHTML = html; return aux.childNodes[0]; } var template = new Sys.UI.Template(
createHtml("<ul><li></li></ul>")); Sys.create.dataView(Sys.get("#myDv"), { itemRendered: function (sender, e) { var current = e.dataItem; var node = e.nodes[0]; node.innerHTML =
current.name + "-" + current.address; Sys.setCommand(
node, "sayHi", null, sender.element); }, itemTemplate: template, data: data, command: function (sender, e) { alert(e.get_commandName()); } }); }); </script> <body> <ul id="myDv"> </ul> </body>

There’s not much to say about the previous snippet because we’ve already look at similar code in previous posts. As you can see, the main difference is that now we’re using the Sys.setCommand plugin for configuring the “sayHi” command.

And that’s it. Stay tuned for more on MS AJAX.


~ by Luis Abreu on October 22, 2009.

2 Responses to “Taking advantage of commands – take II”

  1. I think it”s important to point out that the command argument and command target are not mandatory: the nicest thing about commands is that they bubble up the DOM tree by default and get picked up by the first component that can handle them. It”s much easier to write Sys.setCommand(node, “sayHi”). Your sample should work the same then.

  2. Yes, you”re right…I”ve looked at the code again and it seems I don”t need all that stuff. thanks again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: