MieJowo.NET

Web Programming, SEO, and Anything On The Web.  

ASP.NET AJAX XML-Script / Client-side controls

Monday, November 13, 2006

This part 1 of mini how-to will use the Beta 2 version of the framework. It will also work with beta 1, but will NOT work with versions prior to beta.

Since the beta v1.0, Microsoft has been moved their ASP.NET Ajax client-controls to Sys.Preview.UI from Sys.UI namespace. This namespace is similar but not identical to ASP.NET server controls.

The following table is a list of ASP.NET AJAX client side controls from the 'value-add' release.

MS AJAX ControlsDescriptionHTMLJavascript
Sys.Preview.UI.LabelUse this with span, p, or label tags<span>,<p>,<label>label
Sys.Preview.UI.WindowTo display pop-up windownonewindow.alert(), window.confirm(), window.prompt()
Sys.Preview.UI.SelectorThis is the dropdown list<select>select
Sys.Preview.UI.HyperlinkCreate a hyperlink<a>link
Sys.Preview.UI.TextboxText field<input type="text,passsword">text,password,textarea
Sys.Preview.UI.ButtonButton element<input type="button,submit,reset">button,submit,reset
Sys.Preview.UI.ImageImage element<img>image

For each ajax element that I will create later, I will try to include the javascript equivalent using either the $create, or just plain javascript. First thing, the default syntax for using the xml-script:

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:"JavaScript: Sys.UI,Sys">
<components>
</components>
</page>
</script>


Since the beta version MS Ajax enable user to use their own namespace to be included in the xml-script, but this is not one subject that we are going to cover. So, we will eliminate the xmlns:JavaScript: Sys.UI,Sys declaration in our xml-script. Warning: if you use this declaration, you WILL get a "not well-formed" error.


Next thing, let's create a button control and a label control in html page:

<input type="button" id="button1" value="change text" /> <br />
<span id="span1">This is a span element</span>

Now, include both button and the label element in our xml-script:

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="span1">
</label>
<button id="button1">
</button>
</components>
</page>
</script>

And that's basically it. You include each element that needs to be participated in the wonderful world of MS Ajax inside the components tags. Now, let's create the click event for our button1.

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="span1">
</label>
<button id="button1">
<click>
<setPropertyAction target="span1" property="text" value="button 1 clicked" />
</click>

</button>
</components>
</page>
</script>


The 'setPropertyAction' contains:

  1. target
    This is the target element of our other MS Ajax element (in this case: 'span1') that we want to modify in case of click event.
  2. property
    This is the property of the 'span1' element (in this case: 'text').
  3. value
    This is the new value of the 'text' property of the 'span1' element.

So, when the 'button1' is clicked, the 'text' property of the 'span1' element will be changed to 'button 1 clicked'. It is very simple right? Compare them to the following javascript code that performs the same action:

var button1;
var label1;

function pageLoad()
{
button1 = new Sys.Preview.UI.Button($get('button1'));
button1.add_click(changeText);
button1.initialize();

label1 = new Sys.Preview.UI.Label($get('span1'));
label1.initialize();
}

function changeText()
{
labe1.set_text('button1 clicked');
}

Using the xml-script you actually eliminate the need to initialize each components (although you can achieve this using the $create function) and typing the long, error-prone type of each components. I, myself, sometimes prefer to use xml-script in a case like using validators rather than using javascript. But for simple lines of code, I usually just use javascript. So, depends on my need I can use both of them at the same time. To be continued...


Comments: Post a Comment

Subscribe to Post Comments [Atom]



Links to this post:

Create a Link



<< Home

Archives

October 2006   November 2006   December 2006   June 2007   February 2008  

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]