Xml-script tutorial Part 4

Total votes: 0
Views: 6,756
Comments: 0
Category: AJAX

Please login to rate or to leave a comment.

Xml-script tutorial Part 4

Published: 10 Jan 2007
By: Alessandro Gallo

As we've seen in the part 2 and part 3 of the tutorial, if a client side type exposes an event in its type descriptor, we can handle it declaratively using xml-script. A powerful way to handle events with xml-script is by using actions; in this article we'll see how to build custom actions to handle events declaratively.

Introduction

As we've seen in the part 2 and part 3 of the tutorial, if a client side type exposes an event in its type descriptor, we can handle it declaratively using xml-script. A powerful way to handle events with xml-script is by using actions; in this article we'll see how to build custom actions to handle events declaratively.

Actions

An action encapsulates a block of JavaScript code that is executed when a particular event is fired. An example is the SetProperty action, which allows setting the value of a property exposed by a client side component, or the InvokeMethod action, which enables invoking a method and pass parameters to it.

The Microsoft Ajax Library defines a third built-in action called PostBackAction. The purpose of this action is to postback the page (using the ASP.NET postback mechanism, i.e. a call to the __doPostBack function) in response to a particular event.

The following example illustrates the PostBack action; it is a simple HTML button that, when clicked, causes a postback of the page.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" 

runat="server">
    <title>Simple Button PostBack</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
     <scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" 
             Name="PreviewScript.js" />
     </scripts>
    </asp:ScriptManager>
    
    <input type="button" id="btnPostBack" value="PostBack" />

    <script type="text/xml-script">
     <page xmlns="http://schemas.microsoft.com/xml-script/2005">
        <components>
         <button id="btnPostBack">
             <click>
                 <postBackAction target="btnPostBack" 
                  eventArgument="some_argument" />
             </click>
         </button>
        </components>
     </page>
    </script>
    </form>
</body>
</html>

In this case, clicking the button causes the following JavaScript code to be executed:

__doPostBack('btnPostBack', 'some_argument');

Custom actions

If we want to create a custom action, the easy way is to create a class that inherits from Sys.Preview.Action and override the performAction method.

The following example shows a simple AlertAction that can be used to display an alert on screen using xml-script. Create a fresh JavaScript file and name it AlertAction.js. Then, save it inside a ScriptLibrary folder in your Ajax CTP-enabled website and add the following code:

Type.registerNamespace('Samples');

Samples.AlertAction = function() {
    this._message;
}
Samples.AlertAction.prototype = {
    get_message : function() {
        return this._message;
    },
    
    set_message : function(value) {
        this._message = value;
    },
    
    performAction : function() {
        return alert(this._message);
    }
}
Samples.AlertAction.descriptor = {
    properties: [ {name: 'message', type: String} ]
}
Samples.AlertAction.registerClass('Samples.AlertAction', Sys.Preview.Action);

The AlertAction class exposes a property called message that can be used to set the message to display in the alert box. The performAction is overridden to call the JavaScript alert method that displays the message on screen. Note that the AlertAction class inherits from Sys.Preview.Action and exposes a type descriptor (returned by the static descriptor expando) and this allows using the class in declarative code.

Finally, here is the code showing the new AlertAction in action.

<%@ Page %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" 

runat="server">
    <title>Alert Action</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="TheScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" 
             Name="PreviewScript.js" />
            <asp:ScriptReference Path="ScriptLibrary/AlertAction.js" />
        </Scripts>
    </asp:ScriptManager>
    
    <div>
        <input type="button" id="myButton" value="Click Me" />
    </div>

    <script type="text/xml-script">
        <page xmlns="http://schemas.microsoft.com/xml-script/2005" 
              xmlns:cc="Samples">
         <components>
            <button id="myButton">
                <click>
                    <cc:alertAction message="Hello Xml-script!" />
                </click>
            </button>
         </components>
        </page>
    </script>
    </form>
</body>
</html>

Namespaces

The code is pretty simple to understand, since the custom action is used in the same way as the built-in actions provided by the Microsoft Ajax Library. However, since the AlertAction class is contained in the Samples namespace, we have to bind this namespace to a custom XML namespace.

To do this, we have to add a namespace prefix as an attribute to the page element:

xmlns:cc="Samples"

And then use the defined prefix in the alertAction tag:

<cc:alertAction message="Hello Xml-script!" />

The reason why we don't use a prefix for elements like button, label, textBox or postBackAction is that the xml-script parser searches for the corresponding classes inside a set of default namespaces:

Sys
Sys.UI
Sys.Net
Sys.Preview
Sys.Preview.UI
Sys.Preview.Net
Sys.Preview.Data
Sys.Preview.UI.Data
Sys.Preview.Services.Components

All the classes declared in different namespaces need to have their namespace mapped to a XML namespace to be correctly used in declarative code.

Anyways, for XML compliancy, it is always recommended to declare at least the global namespace in the root element of a portion of XML code, like we're doing in the root page element:

<page xmlns="http://schemas.microsoft.com/xml-script/2005">...

Summary

In this fourth part of the tutorial we've seen how to use the PostBack action to postback a page declaratively and how to build custom actions by inheriting from the base Sys.Action class and overriding the performAction method. Actions are a great way to encapsulate a portion of JavaScript code and execute it through declarative code.

The next part of the tutorial is dedicated to bindings.

References

Xml-script tutorial Part 1
Xml-script tutorial Part 2
Xml-script tutorial Part 3
Xml-script tutorial Part 4

About Alessandro Gallo

Alessandro "Garbin" Gallo is a Microsoft MVP in the Visual ASP/ASP.NET category and a .NET developer/consultant. He is a contributor for the Ajax Control Toolkit project, owned by Microsoft. Alessandro won the Grand Prize at the "Mash-it-up with ASP.NET AJAX" contest held by Micr...

View complete profile

Login

Lost Password?