Xml-script tutorial Part 4

Total votes: 0
Views: 8,140
Comments: 0
Category: AJAX
Print: Print Article

Please login to rate or to leave a comment.

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...

This author has published 23 articles on DotNetSlackers. View other articles or the complete profile here.

You might also be interested in the following related blog posts

Issue 48 - DotNetNuke 5 Introduction and Open Web Studio Tutorials read more
Issue 49 - DotNetNuke 5 Skin Packaging, Spam and SQL, OWS read more
GiveCamps Get a new Sponsor read more
Issue 47 - DotNetNuke Nav Menu and Open Web Studio Tutorials read more
More On The CodePlex Foundation read more
Custom Panels in Silverlight/WPF Part 1: MeasureOverride read more
Introducing SharePoint 2010 Training at U2U read more
Private Extension Methods read more
Assembly-Free jQuery in SharePoint Sites Using the SmartTools jQueryLoader read more
Scenarios for WS-Passive and OpenID read more

Top

Please login to rate or to leave a comment.

Product Spotlight

Login

Lost Password?