Programmer Dflying

Move to http://me.dflying.net/

Fri, 28 Apr 2006 23:06:05 -0700

I decided to move out using WordPress with a new domain name

http://me.dflying.net/

for some reason. Kindly remind please update your bookmark if you are interested in here. The old blog will still exist for you reference.
I will still post computer tech related posts here. At the meantime, welcome to check my daily life at: http://spaces.msn.com/dflying/ and the localized (Chinese) tech blog at: http://dflying.cnblogs.com/.

God bless me!

Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

Thu, 20 Apr 2006 05:42:12 -0700

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the fifth, also the last post: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

XSLT is a stylesheet language for XML. It can style your XML raw data as you wish. For more info about the XSLT, please refer to W3C document: http://www.w3.org/TR/xslt.

Atlas provides the XMLDataSource and XSLTView controls to make it possible to retrieve the XML data and XSLT data from server, apply the XSLT to the XML and display to user on the flight. You may use this feature in many ways, such as an online RSS feed reader application.

XSLTView control has following properties:

document: The XML document stores the XML data. You may get the document from an Atlas client side XMLDataSource control and you should always set this property.
transform: The XSLT document stores the XSLT data used for styling your XML. You may also get this by using an XMLDataSource control. You should always set this property.
parameters: The XSLT parameters in XSLT file definitions. Read only.

And following method:

update: Render the XML document using the XSLT. This method is automatically called when the XSLTView got initialized or one of the properties above is changed.

OK, let go though a demo for XSLTView control and XMLDataSource control.

The first step is getting our testing data, both an XML file and an XSLT file. I�ve got these simply by googling and found the files at http://www.w3schools.com/xsl/xsl_client.asp. For this demo, I just choose the raw XML and XSLT files but in the real world, we may easily get the dynamically generated ones from a Web Service or some other CGIs.

Here is the XML. Save it as MyData.xml.

<?xml version="1.0" encoding="iso-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
</catalog>

Here is the XSLT. Save it as MyStyle.xsl.

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <h2>My CD Collection</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th>
        <th align="left">Artist</th>
      </tr>
      <xsl:for-each select="catalog/cd">
        <tr>
          <td>
            <xsl:value-of select="title" />
          </td>
          <td>
            <xsl:value-of select="artist" />
          </td>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:template>
</xsl:stylesheet>

Let�s define our ASPX page, we have following two parts to add:

Atlas server side control ScriptManager, which is required in every Atlas page to load essential framework files.
<div> with id dataContent, which is used by Atlas to place the rendered content.

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- XSLTView here (container) -->
<div id="dataContent">
</div>

The last thing is add Atlas script to the page. There are three sections in the Atlas script block:

Section 1. An XMLDataSource control, used to retrieve the XML data from server.

<xmlDataSource id="dataSource" autoLoad="true" serviceURL="MyData.xml" />

Section 2. Another XMLDataSource control, used to retrieve the XSLT data from server.

<xmlDataSource id="xsltSource" autoLoad="true" serviceURL="MyStyle.xsl" />

Section 3. An XSLTView control used to render the XML using the XSLT definitions. Notice here we are using bindings to set the document and transform properties of the XSLT control.

<xsltView id="dataContent">
    <bindings>
        <binding property="document" dataContext="dataSource" dataPath="document" />
        <binding property="transform" dataContext="xsltSource" dataPath="document" />
    </bindings>
</xsltView>

Run in browser:

Source code for this demo can be downloaded here: http://dflying.dflying.net/1/resources/AtlasXSLTViewDemo.zip.html

Sorting Your List Using ASP.NET Atlas SortBehavior

Wed, 19 Apr 2006 00:18:20 -0700

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the fourth post: Sorting Your List Using ASP.NET Atlas SortBehavior

Add sorting feature to you list is pretty cool, and some of the ASP.NET server controls have already had this feature built in, such as the DataGrid and GridView. Atlas also let you do so on client side by providing the Sys.UI.Data.SortBehavior behavior.

SortBehavior behavior works with a DataView control (see: Introduction to Atlas Controls in Namespace Sys.Data � DataView and DataFilter) and implements the sorting by changing the sortDirection property of DataView.

SortBehavior object has following properties:

dataView: A reference of DataView object that this SortBehavior will apply the sorting to. You should always set this property.
sortColumn: The name of the DataView column which this SortBehavior will sort by. You should always set this property.
sortAscendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Ascending.
sortDescendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Descending.

Let's try to sort a list now. First step is to expose a Web Service to Atlas page. The Web Service simply returns introductions to some famous people (except me).

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Services;
 
//
// For simplicity this example demonstraes storing and  manipulating 
// the data objects in memory. A database can also be used.
//
    
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SampleDataService : DataService
{
    static List<Entry> _data;
    static int _nextId;
    static object _dataLock = new object();
 
    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        _data = new List<Entry>();
                        _data.Add(new Entry(0, "Dflying Chen", "A small piece of cake"));
                        _data.Add(new Entry(1, "Bill Gates", "Chairman & Chief Software Architect"));
                        _data.Add(new Entry(2, "Scott Guthrie", "General Manager"));
                        _data.Add(new Entry(3, "Ray Ozzie", "CTO"));
                        _data.Add(new Entry(4, "Steve Ballmer", "CEO"));
                        _nextId = 3;
                    }
                }
            }
            return _data;
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Delete)]
    public void DeleteRow(int id)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == id)
            {
                lock (_dataLock)
                {
                    _data.Remove(row);
                }
                break;
            }
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return SampleDataService.Data.ToArray();
    }
 
    [DataObjectMethod(DataObjectMethodType.Insert)]
    public Entry InsertRow(string name, string description)
    {
        Entry newRow;
        lock (_dataLock)
        {
            newRow = new Entry(_nextId++, name, description);
            _data.Add(newRow);
        }
        return newRow;
    }
 
    [DataObjectMethod(DataObjectMethodType.Update)]
    public void UpdateRow(Entry updateRow)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == updateRow.Id)
            {
                row.Name = updateRow.Name;
                row.Title = updateRow.Title;
                break;
            }
        }
    }
}
 
public class Entry
{
    private string _name;
    private string _title;
    private int _id;
 
    [DataObjectField(true, true)]
    public int Id
    {
        get { return _id; }
        set { _id = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("New row")]
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("")]
    public string Title
    {
        get { return _title; }
        set { _title = value; }
    }
 
    public Entry()
    {
        _id = -1;
    }
 
    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _title = description;
    }
}

Then the ASPX page, there are three sections in the ASPX page you need to consider:

A ScriptManager control, which is required in every Atlas page.
The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.
A hidden <div>, which is used to define the templates.

Here�s the code, for more details about the ListView template, please refer to: Display Listible Data Using ASP.NET Atlas ListView Control

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- Element for ListView (container) -->
<div id="dataContents">
</div>
 
<!-- Templates -->
<div style="visibility: hidden; display: none">
    <div id="masterTemplate">
        <table border="1" cellpadding="3" style="width:30em;">
            <thead>
                <tr>
                    <td><a href="#" id="sortId">ID</a></td>
                    <td><a href="#" id="sortName">Name</a></td>
                    <td><a href="#" id="sortTitle">Title</a></td>
                </tr>
            </thead>
            <tbody id="masterItemTemplateParent">
                <tr id="masterItemTemplate">
                    <td><span id="masterId"></span></td>
                    <td><span id="masterName"></span></td>
                    <td><span id="masterTitle"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Time for the Atlas XML scripts. There are four sections of the script.

Section 1. Atlas client side control DataSource, used to retrieve data from server.

<dataSource id="dataSource" autoLoad="true" serviceURL="SampleDataService.asmx" />

Section 2. A DataView, used to paging the collection we get in Section 1.

<dataView id="view">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data"/>
    </bindings>
</dataView>

Section 3. A ListView control, used to display our list.

<listView id="dataContents" itemTemplateParentElementId="masterItemTemplateParent" >
    <bindings>
        <binding dataContext="view" dataPath="filteredData" property="data"/>
    </bindings>
    <layoutTemplate>
        <template layoutElement="masterTemplate"/>
    </layoutTemplate>
    <itemTemplate>
        <template layoutElement="masterItemTemplate">
            <label id="masterId">
                <bindings>
                    <binding dataPath="Id" property="text"/>
                </bindings>
            </label>
            <label id="masterName">
                <bindings>
                    <binding dataPath="Name" property="text"/>
                </bindings>
            </label>
            <label id="masterTitle">
                <bindings>
                    <binding dataPath="Title" property="text"/>
                </bindings>
            </label>
        </template>
    </itemTemplate>
</listView>

Section 4. Three Atlas controls with SortBehavior behavior, used to trigger the sorting.

<control id="sortId">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Id"/>
    </behaviors>
</control>
<control id="sortName">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Name"/>
    </behaviors>
</control>
<control id="sortTitle">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Title"/>
    </behaviors>
</control>

Test in browser:

Initial order:

Sort by Name � Ascending:

Sort by Name � Descending:

Source code for this demo can be downloaded here: SortBehaviorDemo.zip

Paging Your List Using ASP.NET Atlas PageNavigator Control

Mon, 17 Apr 2006 23:33:00 -0700

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the third post: Paging Your List Using ASP.NET Atlas PageNavigator Control

Put all your records on one page will always be a bad idea especially you have hundreds of rows or more. Your user needs to scroll up and down the page, even uses Control + F to open a search box to find their interesting content. Some of the ASP.NET server controls have this functionality such as the DataGrid and GridView. And Atlas client side control Sys.UI.Data.DataNavigator also provides this feature on the client side, which is very useful and makes the life easier.

DataNavigator control works with DataView control (see: Introduction to Atlas Controls in Namespace Sys.Data � DataView and DataFilter). We know that the DataView does not provide the page navigation methods, so we have to set the pageIndex property of DataView manually to make the navigation work, which is rude and developers are easy to make mistakes such as forgetting to check the boundary of pageIndex. That�s the reason why Atlas offers you the DataNavigator control, which acts as the proxy of DataView by providing navigation operations on the DataView.

DataNavigator object only has one property:

dataView: A reference of DataView object that this DataNavigator operates on. You should always set this peoperty.

Still, to use the DataNavigator, you have to provide some Atlas Buttons with some specified commandName property values to trigger the paging operations. Also, the property parent of these should be set to the DataNavigator to make sure that the DataNavigator can capture these commands.

There are following five command name values you may choose. All the command name values are case insensitive.

page: Switch current page index to the value specified in the command argument. This is almost as raw as the way by changing page index value directly.
nextpage: Switch to the next page.
previouspage: Switch to the previous page.
firstpage: Switch to the first page.
lastpage: Switch to the last page.

Ok for the introductions, let�s go through a demo to get familiar with the DataNavigator control.

The first thing is to expose a Web Service for Atlas pages. Following is the source code for MyDataService.asmx and it is very easy to understand so I just skip the detailed introductions. It just simply returns a collection of 100 entries.

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Services;
 
//
// For simplicity this example demonstraes storing and  manipulating 
// the data objects in memory. A database can also be used.
//
    
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyDataService : DataService
{
    static List<Entry> _data;
    static object _dataLock = new object();
 
    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        _data = new List<Entry>();
                        for (int i = 0; i < 100; i++)
                        {
                            _data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format("Dflying{0}@dflying.net", i.ToString())));
                        }
                    }
                }
            }
            return _data;
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return MyDataService.Data.ToArray();
    }
}
 
public class Entry
{
    private string _name;
    private string _email;
    private int _id;
 
    [DataObjectField(true, true)]
    public int Id
    {
        get { return _id; }
        set { _id = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("New row")]
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("")]
    public string Email
    {
        get { return _email; }
        set { _email = value; }
    }
 
    public Entry()
    {
        _id = -1;
    }
 
    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _email = description;
    }
}

Then the ASPX page, there are four sections in the ASPX page you need to consider:

A ScriptManager control, which is required in every Atlas page.
The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.
A group of buttons (the command buttons) in a container div (the DataNavigator), which are used for implementing the page navigation.
A hidden <div>, which is used to define the templates.

Here�s the code, for more details about the ListView template, please refer to: Display Listible Data Using ASP.NET Atlas ListView Control

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- Element for paged ListView (container) -->
<div id="dataContents">
</div>
 
<!-- PageNavigator -->
<div id="pageNavigator">
    <input type="button" id="btnFirstPage" value="<<" />
    <input type="button" id="btnPrevPage" value="<" />
    <span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
    <input type="button" id="btnNextPage" value=">" />
    <input type="button" id="btnLastPage" value=">>" />
</div>
 
<!-- Templates -->
<div style="visibility: hidden; display: none">
    <table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
        <thead>
            <tr>
                <td><span>No.</span></td>
                <td><span>Name</span></td>
                <td><span>Email</span></td>
            </tr>
        </thead>
        <!-- Repeat Template -->
        <tbody id="myList_itemTemplateParent">
            <!-- Repeat Item Template -->
            <tr id="myList_itemTemplate">
                <td><span id="lblIndex" /></td>
                <td><span id="lblName" /></td>
                <td><span id="lblEmail" /></td>
            </tr>
        </tbody>
    </table>
    <!-- Empty Template -->
    <div id="myList_emptyTemplate">
        No Data
    </div>
</div>

Let�s look at the Atlas XML scripts. There are four sections of the script.

Section 1. Atlas client side control DataSource, used to retrieve data from server.

<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />

Section 2. A DataView, used to paging the collection we get in Section 1.

<dataView id="view" pageSize="12">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data" />
    </bindings>
</dataView>

Section 3. DataNavigator control and buttons. Note here we have four navigation buttons with four kinds of commandName properties and the parent properties are all set to the DataNavigator object.

<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
    <bindings>
        <binding property="enabled" dataPath="hasPreviousPage"/>
    </bindings>
</button>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
    <bindings>
        <binding property="enabled" dataPath="hasNextPage"/>
    </bindings>
</button>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />

Section 4. Two labels show the page count and current page index.

<label id="lblPageNumber">
    <bindings>
        <binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
    </bindings>
</label>
<label id="lblPageCount">
    <bindings>
        <binding dataContext="view" property="text" dataPath="pageCount"/>
    </bindings>
</label>

Ok, test in browser:

Source code for this demo can be downloaded here: DataNavigatorDemo.zip

Introduction to Atlas Controls in Namespace Sys.Data � DataView and DataFilter

Sat, 15 Apr 2006 20:54:36 -0700

This is the third, also the last part of introductions to Sys.Data controls. In my previous posts, we know how to get data from server side and store in client side by using DataSource controls and how to modify the data we get on client side by using DataTable object. We can display the data in the DataTable right now to user but in most cases we need to do some decorations before showing, for example, we may need to page our data if it contains thousands of rows, or our user may be only interested in some of the data such as Dflying�s data. That�s the reason why we have to introduce the DataView and DataFilter objects. Now let�s see how to decorate our data for UI controls by using DataView object and DataFilter object.

Here are the properties of DataView object:

data: The actual data for decorating. You should always set a DataTable get from DataSource control to this property to let the DataView know the source data.
filteredData: The filtered data. Such as the paged data or the sorted data.
filters: A collection of DataFilter objects to filter the data. You can specify the DataView a collection of filters and they will be applied to your data one by one. For more information about DataFilter object, please see below.
hasNextPage: Whether there�s a next page.
hasPreviousPage: Whether there�s a previous page.
length: How many rows in current page.
pageCount: How many pages in current DataView.
pageIndex: Current page index.
pageSize: How many rows per page. You should set this property if you need to page your data.
sortColumn: The column you want to sort the rows by. You should set this property if you need the sort feature.
sortDirection: The directions you want to sort. Either Ascending (default value) or Descending.

And DataView object has one method:

sort: Apply the sort operation according to sortColumn property and sortDirection property.

Remember you may need two additional controls in Sys.Data.UI namespace: DataNavigator and SortBehavior to help you with the paging and sorting issues. And for introductions and demos for DataView and these two controls, please be a little patient on my future posts.

Ok for the DataView object, let�s see the DataFilter object:

The Sys.Data.DataFilter class in Atlas is designed as the abstract base class of all the filters. It provides an abstract method filter for the derived class to implement its specified filter rules.

Atlas provides one build-in filter � the PropertyFilter, which is used for filtering the items by one specified property and its value.

PropertyFilter object has two peoperties:

property: The property you want to apply the filter to.
value: The value whose specified property equals to will pass this filter.

Demos for DataFilter object is coming soon.

At the end of this series let�s have a summary about the three parts of Atlas controls in namespace Sys.Data. Keep these in your mind will help a lot in future developing.

DataSource and XMLDataSource are used for getting data from server and store is on the client side.
DataTable, including DataRow and DataColumn, is the actual storage of client side data and you may modify the data as you with on the client side.
DataView and DataFilter are used for decorating your data before displaying to user. These operations do not change the actually data but behave just like the SQL syntax where and order by.