Programmer Dflying

Programmer Dflying http://dflying.dflying.net/1 You may find things like PHP, .NET, Javascript, Atlas and C#. Also, welcome to check out my other stuffs on MSN Space: http://spaces.msn.com/dflying/ Dflying 126860-04-11T00:00:00Z Move to http://me.dflying.net/ http://dflying.dflying.net/1/archive/139_move_to_httpmedflyingnet.html I decided to move out using WordPress with a new domain name <h1><a href="http://me.dflying.net/">http://me.dflying.net/</a></h1> 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: <a target="_blank" href="http://spaces.msn.com/dflying/">http://spaces.msn.com/dflying/</a> and the localized (Chinese) tech blog at: <a target="_blank" href="http://dflying.cnblogs.com/">http://dflying.cnblogs.com/</a>. God bless me! General 2006-04-28T23:06:05Z Dflying Apply XSLT to XML Using ASP.NET Atlas XSLTView Control http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:<ol style="MARGIN-TOP: 0in" type="1"><li>Sys.UI.Data.ListView: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> </li><li>Sys.UI.Data.ItemView: <a href="http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html">Display One Item in a Collection using ASP.NET Atlas ItemView Control</a> </li><li>Sys.UI.Data.DataNavigator: <a href="http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html">Paging Your List Using ASP.NET Atlas PageNavigator Control</a> </li><li>Sys.UI.Data.SortBehavior: <a href="http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html">Sorting Your List Using ASP.NET Atlas SortBehavior</a> </li><li>Sys.UI.Data.XSLTView: <a href="http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html">Apply XSLT to XML Using ASP.NET Atlas XSLTView Control</a></li></ol>This is the fifth, also the last post: <a href="http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html">Apply XSLT to XML Using ASP.NET Atlas XSLTView Control</a> <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />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: <a href="http://www.w3.org/TR/xslt">http://www.w3.org/TR/xslt</a>. 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: <ol><li>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.</li> <li>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.</li> <li>parameters: The XSLT parameters in XSLT file definitions. Read only.</li> </ol>And following method: <ol><li>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.</li> </ol>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 <a href="http://www.w3schools.com/xsl/xsl_client.asp">http://www.w3schools.com/xsl/xsl_client.asp</a>. 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. <pre class="code"><?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></pre> Here is the XSLT. Save it as MyStyle.xsl. <pre class="code"><?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></pre> Let’s define our ASPX page, we have following two parts to add: <ol><li>Atlas server side control ScriptManager, which is required in every Atlas page to load essential framework files.</li> <li><div> with id dataContent, which is used by Atlas to place the rendered content. </li> </ol> <pre class="code"> <atlas:ScriptManager runat="server" ID="scriptManager" />    <div id="dataContent"> </div></pre> 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. <pre class="code"><xmlDataSource id="dataSource" autoLoad="true" serviceURL="MyData.xml" /></pre> Section 2. Another XMLDataSource control, used to retrieve the XSLT data from server. <pre class="code"><xmlDataSource id="xsltSource" autoLoad="true" serviceURL="MyStyle.xsl" /></pre> 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. <pre class="code"><xsltView id="dataContent"> <bindings> <binding property="document" dataContext="dataSource" dataPath="document" /> <binding property="transform" dataContext="xsltSource" dataPath="document" /> </bindings> </xsltView></pre> Run in browser: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=xsltview.JPG" /> Source code for this demo can be downloaded here: <a href="http://dflying.dflying.net/1/resources/AtlasXSLTViewDemo.zip.html">http://dflying.dflying.net/1/resources/AtlasXSLTViewDemo.zip.html</a> Atlas 2006-04-20T05:42:12Z Dflying Sorting Your List Using ASP.NET Atlas SortBehavior http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:<ol style="MARGIN-TOP: 0in" type="1"><li>Sys.UI.Data.ListView: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> </li><li>Sys.UI.Data.ItemView: <a href="http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html">Display One Item in a Collection using ASP.NET Atlas ItemView Control</a> </li><li>Sys.UI.Data.DataNavigator: <a href="http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html">Paging Your List Using ASP.NET Atlas PageNavigator Control</a> </li><li>Sys.UI.Data.SortBehavior: <a href="http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html">Sorting Your List Using ASP.NET Atlas SortBehavior</a> </li><li>Sys.UI.Data.XSLTView: <a href="http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html">Apply XSLT to XML Using ASP.NET Atlas XSLTView Control</a></li></ol>This is the fourth post: <a href="http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html">Sorting Your List Using ASP.NET Atlas SortBehavior</a> <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />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: <a href="http://dflying.dflying.net/1/archive/125_introduction_to_atlas_controls_in_namespace_sysdata__dataview_and_datafilter.html">Introduction to Atlas Controls in Namespace Sys.Data – DataView and DataFilter</a>) and implements the sorting by changing the sortDirection property of DataView. SortBehavior object has following properties: <ol style="MARGIN-TOP: 0in" type="1"><li>dataView: A reference of DataView object that this SortBehavior will apply the sorting to. You should always set this property.</li> <li>sortColumn: The name of the DataView column which this SortBehavior will sort by. You should always set this property.</li> <li>sortAscendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Ascending.</li> <li>sortDescendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Descending.</li> </ol>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). <pre class="code">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 = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> object();   private static List<Entry> Data { get { if (_data == null) { lock (_dataLock) { if (_data == null) { _data = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> List<Entry>(); _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Entry(0, "Dflying Chen", "A small piece of cake")); _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Entry(1, "Bill Gates", "Chairman & Chief Software Architect")); _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Entry(2, "Scott Guthrie", "General Manager")); _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> Entry(3, "Ray Ozzie", "CTO")); _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> 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 = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> 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; } }</pre> Then the ASPX page, there are three sections in the ASPX page you need to consider: <ol style="MARGIN-TOP: 0in" type="1"><li>A ScriptManager control, which is required in every Atlas page.</li> <li>The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.</li> <li>A hidden <div>, which is used to define the templates.</li> </ol>Here’s the code, for more details about the ListView template, please refer to: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> <pre class="code"> <atlas:ScriptManager runat="server" ID="scriptManager" />    <div id="dataContents"> </div>    <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></pre> 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. <pre class="code"><dataSource id="dataSource" autoLoad="true" serviceURL="SampleDataService.asmx" /></pre> Section 2. A DataView, used to paging the collection we get in Section 1. <pre class="code"><dataView id="view"> <bindings> <binding dataContext="dataSource" dataPath="data" property="data"/> </bindings> </dataView></pre> Section 3. A ListView control, used to display our list. <pre class="code"><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></pre> Section 4. Three Atlas controls with SortBehavior behavior, used to trigger the sorting. <pre class="code"><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></pre> Test in browser: Initial order: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=sort1.JPG" /> Sort by Name – Ascending: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=sort2.JPG" /> Sort by Name – Descending: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=sort3.JPG" /> Source code for this demo can be downloaded here: <a id="res_148" href="http://www.dflying.net/resserver.php?blogId=1&resource=SortBehaviorDemo.zip" type="application/zip">SortBehaviorDemo.zip</a> Atlas 2006-04-19T00:18:20Z Dflying Paging Your List Using ASP.NET Atlas PageNavigator Control http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:<ol style="MARGIN-TOP: 0in" type="1"><li>Sys.UI.Data.ListView: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> </li><li>Sys.UI.Data.ItemView: <a href="http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html">Display One Item in a Collection using ASP.NET Atlas ItemView Control</a> </li><li>Sys.UI.Data.DataNavigator: <a href="http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html">Paging Your List Using ASP.NET Atlas PageNavigator Control</a> </li><li>Sys.UI.Data.SortBehavior: <a href="http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html">Sorting Your List Using ASP.NET Atlas SortBehavior</a> </li><li>Sys.UI.Data.XSLTView: <a href="http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html">Apply XSLT to XML Using ASP.NET Atlas XSLTView Control</a></li></ol>This is the third post: <a href="http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html">Paging Your List Using ASP.NET Atlas PageNavigator Control</a> <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />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: <a href="http://dflying.dflying.net/1/archive/125_introduction_to_atlas_controls_in_namespace_sysdata__dataview_and_datafilter.html">Introduction to Atlas Controls in Namespace Sys.Data – DataView and DataFilter</a>). 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: <ol style="MARGIN-TOP: 0in" type="1"><li>dataView: A reference of DataView object that this DataNavigator operates on. You should always set this peoperty.</li> </ol>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. <ol style="MARGIN-TOP: 0in" type="1"><li>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.</li> <li>nextpage: Switch to the next page.</li> <li>previouspage: Switch to the previous page.</li> <li>firstpage: Switch to the first page.</li> <li>lastpage: Switch to the last page.</li> </ol> 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. <pre class="code">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 = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> object();   private static List<Entry> Data { get { if (_data == null) { lock (_dataLock) { if (_data == null) { _data = <a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> List<Entry>(); for (int i = 0; i < 100; i++) { _data.Add(<a href="http://www.google.com/search?q=new+msdn.microsoft.com">new</a> 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; } }</pre> Then the ASPX page, there are four sections in the ASPX page you need to consider: <ol style="MARGIN-TOP: 0in" type="1"><li>A ScriptManager control, which is required in every Atlas page.</li> <li>The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.</li> <li>A group of buttons (the command buttons) in a container div (the DataNavigator), which are used for implementing the page navigation.</li> <li>A hidden <div>, which is used to define the templates.</li> </ol>Here’s the code, for more details about the ListView template, please refer to: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> <pre class="code"> <atlas:ScriptManager runat="server" ID="scriptManager" />    <div id="dataContents"> </div>    <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>    <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>  <tbody id="myList_itemTemplateParent">  <tr id="myList_itemTemplate"> <td><span id="lblIndex" /></td> <td><span id="lblName" /></td> <td><span id="lblEmail" /></td> </tr> </tbody> </table>  <div id="myList_emptyTemplate"> No Data </div> </div></pre> 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. <pre class="code"><dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" /></pre> Section 2. A DataView, used to paging the collection we get in Section 1. <pre class="code"><dataView id="view" pageSize="12"> <bindings> <binding dataContext="dataSource" dataPath="data" property="data" /> </bindings> </dataView></pre> 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. <pre class="code"><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" /></pre> Section 4. Two labels show the page count and current page index. <pre class="code"><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></pre> Ok, test in browser: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=datanavigator.JPG" /> Source code for this demo can be downloaded here: <a id="res_143" href="http://www.dflying.net/resserver.php?blogId=1&resource=DataNavigatorDemo.zip" type="application/zip">DataNavigatorDemo.zip</a> Atlas 2006-04-17T23:33:00Z Dflying Introduction to Atlas Controls in Namespace Sys.Data – DataView and DataFilter http://dflying.dflying.net/1/archive/125_introduction_to_atlas_controls_in_namespace_sysdata__dataview_and_datafilter.html 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:<ol><li>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.</li><li>filteredData: The filtered data. Such as the paged data or the sorted data.</li><li>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.</li><li>hasNextPage: Whether there’s a next page.</li><li>hasPreviousPage: Whether there’s a previous page.</li><li>length: How many rows in current page.</li><li>pageCount: How many pages in current DataView.</li><li>pageIndex: Current page index.</li><li>pageSize: How many rows per page. You should set this property if you need to page your data.</li><li>sortColumn: The column you want to sort the rows by. You should set this property if you need the sort feature.</li><li>sortDirection: The directions you want to sort. Either Ascending (default value) or Descending. </li></ol>And DataView object has one method:<ol><li>sort: Apply the sort operation according to sortColumn property and sortDirection property.</li></ol>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:<ol><li>property: The property you want to apply the filter to.</li><li>value: The value whose specified property equals to will pass this filter.</li></ol>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.<ol><li>DataSource and XMLDataSource are used for getting data from server and store is on the client side.</li><li> 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.</li><li>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.</li></ol> Atlas 2006-04-15T20:54:36Z Dflying Introduction to Atlas Controls in Namespace Sys.Data – DataColumn, DataRow and DataTable http://dflying.dflying.net/1/archive/124_introduction_to_atlas_controls_in_namespace_sysdata__datacolumn_datarow_and_datatable.html In this post we are going to touch the key client side data components of Atlas – the DataTable, which is used to represent a tabular data structure. The DataTable object connects the actual data – the DataSource and the UI control – the ListView. It is the data field of a DataSource object, and can also be decorated by a DataView object by filtering and sorting the rows or doing the page navigations. Here Atlas also shares the ASP.NET/ADO.NET concepts: the Atlas DataSource is similar with ADO.NET SqlDataSource, the Atlas DataTable is similar with ADO.NET DataTable and the Atlas ListView is similar with ASP.NET ListView. Pretty easy to understand, isn't it? A DataTable contains a collection of DataColumn objects and a collection of DataRow objects, so let's begin with the DataColumn and DataRow. Sys.Data.DataColumnThe DataColumn object is really simple, only following properties:<ol style="MARGIN-TOP: 0in" type="1"><li>columnName: Column name string.</li><li>dataType: The type of data in this column.</li><li>defaultValue: The default value in this column.</li><li>isKey: Whether data in this column is the key of DataTable.</li><li>readOnly: Whether data in this column is read only.</li></ol>Sys.Data.DataRowSys.Data.DataRow object is a little bit of complex, there’s following properties:<ol style="MARGIN-TOP: 0in" type="1"><li>$isDirty: Whether this row is modified and not submitted to server yet.</li><li>$index: The index of current row in DataTable.</li><li>$selected: Whether this row is selected.</li></ol>And following event:<ol style="MARGIN-TOP: 0in" type="1"><li>propertyChanged: gets fired when one of the above properties is changed.</li></ol>Sys.Data.DataTableNow let start the DataTable, the DataTable object implements the Sys.Data.IData interface. Following properties:<ol style="MARGIN-TOP: 0in" type="1"><li>columns: Current collection of DataColumn objects. You may add/update/delete a column when get the collection.</li><li>keyNames: The collection of key columns’ columnName property.</li><li>length: Length of row collection.</li><li>isDirty: Whether the DataRow collection is changed and not submitted to server yet.</li></ol>And following methods:<ol style="MARGIN-TOP: 0in" type="1"><li>add: Add a new row to current DataTable.</li><li>clear: Delete all rows in current DataTable.</li><li>remove: Remove an existing row in current DataTable.</li><li>createRow: Create a new row based on current DataTable’s schema.</li><li>getChanges: Get the changes of current DataTable. There are three parts in the result.</li><ol style="MARGIN-TOP: 0in" type="a"><li>updated: The updated row collection.</li><li>inserted: The added row collection.</li><li>deleted: The delete row collection.</li></ol><li>getColumn: Get a DataColumn object by column name.</li><li>getRow: Get a DataRow object by row index.</li><li>getItem: The same to getRow method.</li></ol>Also events:<ol style="MARGIN-TOP: 0in" type="1"><li>collectionChanged: Gets fired when the DataRow collection is modified.</li><li>propertyChanged: Gets fired when one of the properties above is changes.</li></ol>Demos about using DataTable object please refer to: <a href="http://dflying.dflying.net/1/archive/81_introduction_to_atlas_datatable.html">http://dflying.dflying.net/1/archive/81_introduction_to_atlas_datatable.html</a> Atlas 2006-04-14T20:39:11Z Dflying Introduction to Atlas Controls in Namespace Sys.Data – DataSource and XMLDataSource http://dflying.dflying.net/1/archive/123_introduction_to_atlas_controls_in_namespace_sysdata__datasource_and_xmldatasource.html Since there are no introductions or official documents about the Atlas controls in namespace Sys.Data, and data accessing is so important a part is current web applications, I decided to share some of my ideas and experiences on this part of Atlas by a series of posts. Hope may help. Please keep in mind that this series is just the introductions. That is, I will only tell how to use these controls but not how they are implemented or worked. If you are interested in the more advanced topics, please be a little patient for I prefer finishing this kind of introduction series firstly. By the way, I am still in the progress of learning, so anything incorrect please point me out directly. And, any ideas please shout out by commenting down.You have to manage data in most of your web applications. I mean retrieving and displaying to user and saving back to database after modifying. This is a common task that we have to perform in almost every project, so ASP.NET abstract it as a build-in object, DataSource. Atlas client side script library, as well as ASP.NET, has the same concept of DataSource. There are two kinds of DataSource in Atlas:<ol><li>Sys.Data.DataSource: represents a tabular data structure such as the result of a query to the database. Similar to the SQLDataSource object in ASP.NET. This control can be used as the client side data source of ListView (see: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a>) and ItemView (see: <a href="http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html">Display One Item in a Collection using ASP.NET Atlas ItemView Control</a>) controls. You can load data from server and save the changes back to server after user modified.</li><li>Sys.Data.XMLDataSource: represents a hierarchy data structure such as an XML file. Similar to the XMLDataSource object in ASP.NET. This control can be used as the client side data source of XSLTView (introduction coming soon) control. This is the read only data source that you can only read data and show it to user but not save the modifications back to server.</li></ol>Now let’s go over the two data source controls above.<ol><li>Sys.Data.DataSource:The DataSource object has following properties:</li><li>data: The data retrieves from database and stores in the client side.</li><li>autoLoad: Boolean value indicates whether this data source control will load data automatically from server after initializing. You should use initialData instead of using this property if you want to load the data with the page loads, for it needs an extra round to server right after the page loads. </li><li>initialData: Initial data come with the page. There’s a scenario that there should be some initial data on your page when user hitting the page at the first time, for example, the first page of records of your list. Then we can use an Atlas server side control InitialData to send the data with the page source, to avoid querying server again right after page loads.</li><li>isDirtyAndReady: Indicates whether this DataSource finished loading data and the data is not empty and the data is not changed.</li><li>isReady: Indicates whether this DataSource finished loading data from server. You may bind this property to a data bind control’s enabled property to disable the binding control when the data is in loading.</li><li>rowCount: Rows count of the data.</li><li>serviceURL: URL of the Web Service where the DataSource can retrieve data from. You should always set this property.</li><li>parameters: Parameters append to the service URL. Only used when serviceType is set to Handler.</li><li>serviceType: Type of this service. Can be set to DataService or Handler. Default and recommended value is DataService, which means your service is derived from Microsoft.Web.Services.DataService and has the build-in supports for CRUD operations.</li></ol>Following methods:<ol><li>load: Retrieves data from server.</li><li>save: Saves client side changes back to server. Only works if serviceType is set to DataService.</li></ol>And following event:<ol><li>dataAvailable: Gets fired when loading data completed. </li></ol>For demos about this control please refer to: <a href="http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html">Display Listible Data Using ASP.NET Atlas ListView Control</a> and <a href="http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html">Display One Item in a Collection using ASP.NET Atlas ItemView Control</a>Sys.Data.XMLDataSourceThe XMLDataSource object has following properties:<ol><li>autoLoad: Boolean value indicates whether this data source control will load data automatically from server after initializing. You should use initialDocument instead of using this property if you want to load the data with the page loads, for it needs an extra round to server right after the page loads.</li><li>data: The parsed xml data from property document.</li><li>document: The string contains an xml document.</li><li>initialDocument: Similar with initialData property of DataSource. And you should always try to use this property when your data comes with the page.</li><li>isReady: Similar with the one in DataSource. Indicates whether this data source finished loading data and parsing the xml.</li><li>parameters: Parameters append to the service URL. </li><li>serviceURL: URL of the Web Service where the XMLDataSource can retrieve data from. You should always set this property.</li><li>xpath: The xpath string used for query the document property and set the data property.</li></ol>Following methods:<ol><li>load: Retrieves data from server and parse to data property.</li></ol>And following event:<ol><li>dataAvailable: Gets fired when loading data completed. </li></ol>Demos for this control is coming soon. Atlas 2006-04-14T06:14:34Z Dflying Build Your Own Actions in ASP.NET Atlas http://dflying.dflying.net/1/archive/122_build_your_own_actions_in_aspnet_atlas.html Components derived from the Action class in Atlas are used to specify the code to execute in response to events, which is similar to the event handlers. Action components enable you to declaratively bind actions to client events for common tasks such as calling methods, setting properties, and triggering PostBacks.The best reference of Atlas is the source code you know, and we can find there are three kinds of Atlas build-in Actions, which inherit from Sys.Action base class:<ol style="MARGIN-TOP: 0in" type="1"><li>Sys.InvokeMethodAction: Defines an action that calls a method. </li><li>Set.SetPropertyAction: Defines an action that sets an object property to a specified value. </li><li>Sys.WebForms.PostBackAction: Defines an action that performs a PostBack.</li></ol> <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />Sometimes you may need to make your own Actions to perform a specified task. Now let's go through an example, AlertAction, which is used to alert a message when an event got fired, to see how to build your own Atlas Actions. Generally, there are four steps to build a custom Action: <ol style="MARGIN-TOP: 0in" type="1"><li>Inherit from Sys.Action base class.</li> <li>Define the properties of you custom Action. In this AlertAction demo, we defined a message property to specify the alert content.</li> <li>Implement method performAction() to perform your Action. Here it is very simple for we just need to call the JavaScript build-in function alert().</li> <li>Add descriptions in the getDescriptor() method.</li> </ol>Here's the code for AlertAction. The four steps above are marked inline. Save it as AlertAction.js. <pre class="code">Sys.AlertAction = function() { Sys.AlertAction.initializeBase(this); // step 2 var _message; this.get_message = function() { return _message; } this.set_message = function(value) { _message = value; }   // step 4 this.getDescriptor = function() { var td = Sys.AlertAction.callBaseMethod(this, 'getDescriptor'); td.addProperty('message', String); return td; } // step 3 this.performAction = function() { alert(_message); return null; } } // step 1 Sys.AlertAction.registerSealedClass('Sys.AlertAction', Sys.Action); Sys.TypeDescriptor.addType('script', 'alertAction', Sys.AlertAction);</pre> Ok, let's test the AlertAction in a page. What we need on the page is just a button for invoking the Action. Here is the HTML definition in ASPX. Do not forget to add a reference to our AlertAction.js in ScriptManager. <pre class="code"><atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"> <Scripts> <atlas:ScriptReference Path="AlertAction.js" /> </Scripts> </atlas:ScriptManager> <div> <input id="myButton" type="button" value="Click Me!" /> </div></pre> And here is the Atlas script. Really simple one. <pre class="code"><script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <button id="myButton"> <click> <alertAction message="Button Clicked!" /> </click> </button> </components> </page> </script></pre> Runs in browser: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasaction.JPG" /> Demo source code available here: <a id="res_142" href="http://www.dflying.net/resserver.php?blogId=1&resource=AtlasActionDemo.zip" type="application/zip">AtlasActionDemo.zip</a> Atlas 2006-04-13T03:09:17Z Dflying Build Your Own Behaviors in ASP.NET Atlas http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html Behaviors in Atlas are used to define what a control will behave when an event got fired. Behaviors encapsulate actions that can be associated with DHTML events, such as the click or hover events. They can also be a kind of components that can be attached to the client control to provide more sophisticated UI and behavioral characteristics, including complex operations such as drag-and-drop behavior, auto-completion, and floating actions. They are defined in a collection named behaviors on the client control. <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />From Atlas document and source code, we can find there are a number of Atlas build-in behaviors: <ol style="MARGIN-TOP: 0in" type="1"><li>Click behavior, which provides simple click behavior handling. </li> <li>Floating behavior, which provides drag-and-drop behavior. </li> <li>Hover behavior, which provides handling for DHTML events such as onmouseover, onmouseout, onfocus, and onblur. </li> <li>Pop-up component, which provides pop-up functionality, such as advanced tooltips. </li> <li>Auto-complete behavior, which is a specialized behavior that provides the means to complete entries added to text boxes. The behavior requires handlers in order to provide the data for auto-completion.</li> </ol>The Click behavior is used to handle the onclick event of DHTML, which is useful but really simple. In more complicated scenarios, we may want to separate left click and right click. Though we can put this if-else in the event handler, but it is not the Atlas way, so today I will build a more powerful click behavior (ExtendedClickBehavior) instead, to separate them in the click behavior itself, and let you know how to build your own behaviors in Atlas. Generally, there are two steps to build a custom behavior: <ol style="MARGIN-TOP: 0in" type="1"><li>Inherits from Sys.UI.Behavior base class.</li> <li>Define your events which encapsulate the DHTML events. And these events will be exposed to other Atlas controls instead of the raw DHTML events.</li> <li>Assign handlers to the events you defined in step 2 in constructor and detach in destructor.</li> <li>Invoke your events in the event handlers.</li> <li>Add descriptions in the getDescriptor() method.</li> </ol>Here's the code for ExtendedClickBehavior. The five steps above are marked inline. Save it as ExtendedClickBehavior.js. <pre class="code">Sys.UI.ExtendedClickBehavior = function() { Sys.UI.ExtendedClickBehavior.initializeBase(this); var _clickHandler; // step 2 this.click = this.createEvent(); this.leftClick = this.createEvent(); this.rightClick = this.createEvent(); this.dispose = function() { // step 3 this.control.element.detachEvent('onmousedown', _clickHandler); Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose'); }   this.initialize = function() { Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');   // step 3 _clickHandler = Function.createDelegate(this, clickHandler); this.control.element.attachEvent('onmousedown', _clickHandler); } this.getDescriptor = function() { var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor'); // step 5 td.addEvent('click', true); td.addEvent('leftClick', true); td.addEvent('rightClick', true); return td; } // step 4 function clickHandler() { this.click.invoke(this, Sys.EventArgs.Empty); if (window.event.button == 1) { this.leftClick.invoke(this, Sys.EventArgs.Empty); } else if (window.event.button == 2) { this.rightClick.invoke(this, Sys.EventArgs.Empty); } } } // step 1 Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior); Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);</pre> Let's test our ExtendedClickBehavior in a page. We add a <div> for clicking and a label for showing click info. Here is the HTML definition in ASPX. Do not forget to add a reference to our ExtendedClickBehavior.js in ScriptManager. <pre class="code"><atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"> <Scripts> <atlas:ScriptReference Path="ExtendedClickBehavior.js" /> </Scripts> </atlas:ScriptManager> <div> <div id="myButton" style="border: 1px solid black; width: 20em;">Click On Me (Left and Right)!</div> <br /> <span id="myLabel">not clicked</span> </div></pre> And here is the Atlas script. Note we are using the Atlas setProperty Action to set the text of the label after each click. <pre class="code"><page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <label id="myButton"> <behaviors> <extendedClickBehavior> <click> <setProperty target="myLabel" property="text" value="clicked" /> </click> <leftClick> <setProperty target="myLabel" property="text" value="left clicked" /> </leftClick> <rightClick> <setProperty target="myLabel" property="text" value="right clicked" /> </rightClick> </extendedClickBehavior> </behaviors> </label> <label id="myLabel" /> </components> </page></pre> Runs in browser: No click: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasbehavior1.JPG" /> Left click: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasbehavior2.JPG" /> Right Click: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasbehavior3.JPG" /> Demo source code available here: <a href="http://dflying.dflying.net/1/resources/ExtendedClickBehaviorDemo.zip.html">http://dflying.dflying.net/1/resources/ExtendedClickBehaviorDemo.zip.html</a> Atlas 2006-04-12T00:30:57Z Dflying Atlas Client Side JavaScript Debugging http://dflying.dflying.net/1/archive/115_atlas_client_side_javascript_debugging.html IntroductionIt is much more challenging to write Atlas code than C# code, for there’s no compile time check or IntelliSence in coding, and you have to trace the traffic between the client and server in runtime. Still there’s no powerful IDE/debugger for JavaScript.I’ve been working on Atlas for about half a year, and in this post I want to share some of my knowledge and experiences about Atlas debugging issues to make life easier. <link rel="stylesheet" type="text/css" href="http://dflying.dflying.net/plugins/plogeshi/styles/plogeshi.css" />Capturing HTTP Traffic In AJAX applications, it is very useful to monitor the HTTP traffic going back and forth between the server and the client. Thus you can find what exactly I sent to server and what the server returned to me. Basically this is often used in verify the data send by XMLHttpRequest. The tool I recommend is Fiddler (downloaded at <a href="http://www.fiddlertool.com/fiddler/">http://www.fiddlertool.com/fiddler/</a> ), which is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic (including headers, cookies, and the message contents), set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler is designed to be much simpler than using NetMon or Achilles, and includes a simple but powerful JScript.NET event-based scripting subsystem. It supports Internet Explorer and other browsers. Fiddler screen shot: <a class="nodecoration" id="res_132" href="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging1.JPG" type="image/jpeg"><img class="res_image_medium" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging1.JPG&mode=medium" border="0" /></a> Using Atlas Debug Helper Class Atlas framework will define a Debug Helper Class for you if you are running your Atlas application in debug mode. The Debug Helper Class is accessible as a global object: debug. Using methods of the debug class, you can dump a runtime JavaScript object (display objects in readable form at the end of the page), show trace messages, use assertions, and break into the debugger. If the Visual Studio Script Debugger (see below) is attached to Internet Explorer, you will also see the trace messages in the Output window. The debug class provides following methods: <ol style="MARGIN-TOP: 0in" type="1"><li>debug.assert(condition, message, displayCaller) Asserts that the condition parameter is true. If condition is false, the method displays a message box with the text from message. If displayCaller is true, the method also displays information about the caller. </li> <li>debug.clearTrace() Erases the trace output. </li> <li>debug.dump(object, name, recursive, indentationPadding) Displays object in readable form at the end of the page. The name value is used as a label for the object dump. If recursive is true, objects inside of object are shown recursively. The indentationPadding value is a string that is inserted at the beginning of each line of output. </li> <li>debug.fail(message) Breaks into the debugger (Internet Explorer only). </li> <li>debug.trace(text) Writes the text argument to the trace output.</li> </ol>Here’s a piece of demo code copied from Atlas online document shows debug.dump(): <pre class="code">var o = { colors: { red: [255, 0, 0], green: [0, 255, 0], blue: [0, 0, 255] }, width: 600, title: 'debugging with "Atlas"' };   debug.trace("output trace messages"); debug.dump(o, 'object name', true, '... ');</pre> Output: <pre class="code"> output trace messages ... object name {Object} ... +colors {Object} ... ++red {Array} ... +++[0]: 255 ... +++[1]: 0 ... +++[2]: 0 ... +++0: 255 ... +++1: 0 ... +++2: 0 ... ++green {Array} ... +++[0]: 0 ... +++[1]: 255 ... +++[2]: 0 ... +++0: 0 ... +++1: 255 ... +++2: 0 ... ++blue {Array} ... +++[0]: 0 ... +++[1]: 0 ... +++[2]: 255 ... +++0: 0 ... +++1: 0 ... +++2: 255 ... +width: 600 ... +title: debugging with "Atlas" </pre> Attaching the Visual Studio Script Debugger to Internet Explorer You can use the Visual Studio Script Debugger to debug your JavaScript code, thought it is far from perfect and full of bugs, it is still the best JavaScript debugger at this moment I think. To use Visual Studio Script Debugger, you have to install Visual Studio 2005 and Internet Explorer 6.0 or above. Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. In the Advanced tab, clear the Disable Script Debugging (Internet Explorer) and Disable Script Debugging (Other) check boxes, and select the Display a notification about every script error. To support debugging, the option settings should look as follows: <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging2.JPG" /> To debug client code, you must attach a debugger to Internet Explorer. When you start your application for debugging from Visual Studio using F5 or the Start Debugging command on the Debug menu, the debugger is attached automatically. Alternatively, you can attach the Visual Studio debugger to Internet Explorer after the application is already running. To do so, from View menu of Internet Explorer, expend Script Debugger menu item, select Open. <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging3.JPG" /> Visual Studio Script Debugger Bugs and Tricks When debugging "Atlas" applications, be aware of the following issues and workarounds: <ol style="MARGIN-TOP: 0in" type="1"><li>After the Visual Studio debugger is attached to Internet Explorer, you can see the "Atlas" client library will appear as a resource beginning with WebResource.axd?..., which the server generates dynamically from the Microsoft.Web.Atlas.dll assembly. A known bug in Visual Studio might initially prevent you from opening the file. If Visual Studio displays an error message to that effect, or if it ignores a double click on the file name, select and open a different JavaScript file first, and then try again (Note it is a big file and may need a while to open it).</li> <li>Visual Studio does not allow you to set breakpoints in JavaScript code inside <script> elements in an ASP.NET Web page until the debugger has stepped into JavaScript code on that page. To work around this issue, set the breakpoint on the function the call comes from, and step into the code on the aspx page. After the debugger has stopped on a line of JavaScript code in an aspx file, you can set breakpoints normally. Another way to get the debugger to recognize scripts in an aspx file, is to create a method in the aspx file that calls debug.fail(). When you call this method, the debugger will stop on the call to debug.fail() and let you set breakpoints elsewhere. A third alternative is to place all your custom code in external JavaScript files. </li> <li>Visual Studio allows you to set breakpoints on the first line of a regular JavaScript function, but not on the first line of anonymous methods, which "Atlas" uses. If an anonymous method contains only one line of code, or if you must set a breakpoint on the first line of an anonymous method, insert a dummy line of code and then set the breakpoint on the second line of the method.</li> <li>When you check the variables in debugging, you may find it may show you the wrong value, check following screen shot. <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging4.JPG" /> You can get rid of it by highlighting the whole object and property syntax, then move your cursor on the highlighted content. Everything’s ok in the following screen shot. <img class="res_image" style="MARGIN: 5px" src="http://www.dflying.net/resserver.php?blogId=1&resource=atlasdebugging5.JPG" /></li> <li>Sometimes you can not find the Script Debugger menu item in Internet Explorer, just close current window and reopen a new one, you may find the Script Debugger menu again.</li> </ol>References <ol style="MARGIN-TOP: 0in" type="1"><li><a href="http://atlas.asp.net/docs/Overview/debug.aspx">http://atlas.asp.net/docs/Overview/debug.aspx</a> </li> </ol> Atlas 2006-04-09T20:36:40Z Dflying