Atlas初步了解 - 大海

Atlas的入门基础篇

一、什么是Atlas？

   微软声称Atlas的目标在于服务器上将客户程序脚本集成到ASP.NET，以提供一个全面的开发平台。Atlas平台包含两部分：客户端部分和服务器部分。对客户端，它具有的特点是：

·       面向对象相容的Java语言API。具有.NET开发经验的开发人员非常熟悉其面向对象设计。

·       自动浏览器兼容。理论上可运行多个浏览器时不需要专门的代码。

·       客户端程序API和组件提供丰富的用户界面特点，例如拖拽动作。用户可以将这些特征添加到HTML控制器而只需要很少甚至不需要任何代码。

·       客户端程序开发的函数声明模块与ASP.NET服务控制器的函数声明语法相似。

二、Atlas入门基础

   首先，我们要了解Atlas中最主要的一个控件：ScriptManager，它用来处理页面上的所有Atlas组件以及局部页面的更新，生成相关的客户端脚本。(具体的语法参看：ScriptManager Class)

 1<atlas:ScriptManager
 2    EnablePartialRendering="true|false"
 3    EnableScriptComponents="true|false"
 4    ID="string"
 5    OnPageError="页面错误事件"
 6    runat="server"
 7> 
 8    <ErrorTemplate>
 9        <!--  文本或HTML控件 -->
10        <span id="errorMessageLabel" runat="server"></span>
11        <input id="okButton" type="button" value="OK" runat="server" />
12    </ErrorTemplate>
13    <Scripts>
14        <atlas:ScriptReference
15            Browser="指定浏览器，Atlas框架将根据不同的客户端浏览器加载相应脚本文件"
16            Path="脚本文件路径"
17            ScriptName="Atlas内部脚本文件名或自定义（Cuttom）"
18        />
19    </Scripts>
20    <Services>
21        <atlas:ServiceReference
22            GenerateProxy="true|false"
23            Path="服务路径"
24            Type="类型名称"
25        />
26    </Services>
27</atlas:ScriptManager>
28

通过ScriptManger可以定义页面错误事件、错误显示模板，定义脚本集合和服务集合。通过属性EnablePartialRendering 属性决定是否启用局部重绘的模式，EnableScriptComponents 属性决定是否启用 XML 脚本模式。

其次，Atlas框架包含了丰富的组件来简单化客户端脚本。

    在Atlas中自己定义了中间的Xml脚本，然后通过这些脚本转换成相应的Javascript脚本以及在后端进行相应的事件处理等。通过Xml脚本的<components>节设置控件数据源以及把Html控件或Asp.NET服务器控件提升为Atlas组件。
   

 1<input type="text" id="searchText" />
 2<input type="button" id="searchButton" />
 3 
 4<script type="text/xml-script">
 5  <page xmlns="http://schemas.microsoft.com/xml-script/2005">
 6    <references>
 7      <add src="ScriptLibrary/Atlas/AtlasUI.js" />
 8      <add src="ScriptLibrary/Atlas/AtlasControls.js" />
 9    </references>
10    <components>
11        <textbox id="searchText" />
12        <button id="searchButton">
13          <bindings>
14          <!-- dataContext指定绑定的数据源， dataPath指定数据源属性路径
15               这里，获取searchText的文本长度，转换成Boolean类型绑定到
16               searchButton的Enable属性
17           -->
18            <binding property="enabled"
19              dataContext="searchText" dataPath="text.length"
20              transform="NumberToBoolean" />
21          </bindings>
22          <click>
23            <!-- 当按钮控件触发点击事件时，调用服务方法searchMethod -->
24            <invokeMethod target="searchMethod" method="invoke" />
25          </click>
26        </button>
27        <serviceMethod id="searchMethod">
28          <bindings>
29            <!--  绑定服务方法的参数属性到searchText文本框的，进行异步调用。-->
30            <binding property="parameters" propertyKey="query"
31              dataContext="searchText" dataPath="text" />
32          </bindings>
33        </serviceMethod>
34    </components>
35  </page>
36</script>
37

    第三，javascript客户端脚本的集成

   如果您对于javascript脚本熟悉的话，你也可以不用Xml脚本来处理，而直接使用javascript脚本来进行回调处理。

三、Atlas入门演练

       下面是一个简单的例子，主要是说明ASP.NET如何通过Atlas框架来实现Ajax。例子通过一个简单的按钮事件把文本框的内容保存到<span>中直接显示出来。

       首先，建立一个WebService服务，WebService.asmx。
   

 1using System;
 2using System.Web;
 3using System.Collections;
 4using System.Web.Services;
 5using System.Web.Services.Protocols;
 6 
 7namespace AtlasDemo
 8{
 9    /**//// <summary>
10    /// WebService 的摘要说明
11    /// </summary>
12    [WebService(Namespace = "http://tempuri.org/")]
13    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14    public class WebService : System.Web.Services.WebService
15    {
16 
17        public WebService()
18        {
19 
20            //如果使用设计的组件，请取消注释以下行 
21            //InitializeComponent(); 
22        }
23 
24        [WebMethod]
25        public string HelloWorld(String query)
26        {
27            string inputString = Server.HtmlEncode(query);
28            if (!String.IsNullOrEmpty(inputString))
29            {
30                return String.Format("Hello,{1}", inputString);
31            }
32            else
33            {
34                return "The query string was null or empty";
35            }
36        }
37 
38    }
39}
40

    其次，建立一个WebForm页面，Default.aspx

 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head runat="server">
 5    <title>AtlasDemo</title>
 6</head>
 7<body>
 8    <form id="form1" runat="server">
 9       <atlas:ScriptManager ID="ScriptManager1" runat="server" >
10                <Services>
11               <!--配置WebService引用-->
12                  <atlas:ServiceReference Path="~/WebService.asmx" />
13                   </Services>
14        </atlas:ScriptManager>
15        <div>
16            Search for
17            <input id="SearchKey" type="text" />
18            <input id="SearchButton" type="button" value="Search" />
19        </div>
20        <hr />
21        <div>
22             <span id="Results"></span>
23        </div>
24</form>
25<!--配置Xml脚本-->
26<script type="text/xml-script">
27        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
28            <references>
29             </references>
30            <components>
31                <textBox id="SearchKey" />
32             <!-- 配置WebService服务的方法，及其参数query绑定到指定数据源id=SearchKey的文本框的Text属性值-->
33                 <serviceMethod id="helloService"
34                      url="WebService.asmx" methodName="HelloWorld">
35                   <bindings>
36                     <binding dataContext="SearchKey"
37                          dataPath="text"
38                          property="parameters"
39                          propertyKey="query" />
40                   </bindings>
41                   <completed>
42                     <invokeMethod target="resultsBinding"
43                               method="evaluateIn" />
44                   </completed>
45                 </serviceMethod>
46               <!-- 设置按钮Click事件调用helloService节配置的WebService的WebMethod -->
47                 <button id="SearchButton">
48                   <click>
49                     <invokeMethod target="helloService"  method="invoke" />
50                   </click>
51                 </button>
52              <!--将调用HelloWord结果绑定到id=results控件的Text属性中-->
53                 <label id="results">
54                   <bindings>
55                     <binding id="resultsBinding"
56                          dataContext="helloService"
57                          dataPath="result"
58                          property="text"
59                          automatic="false" />
60                   </bindings>
61                 </label>
62            </components>
63        </page>
64    </script>
65</body>
66</html>
67

   第三，javascript脚本实现方式。

 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head runat="server">
 5    <title>AtlasDemo</title>
 6</head>
 7<body>
 8<form id="form1" runat="server">
 9        <atlas:ScriptManager ID="ScriptManager1" runat="server" >
10        <Services>
11               <atlas:ServiceReference Path="~/WebService.asmx" />
12           </Services>
13        </atlas:ScriptManager>
14        <div>
15               Search for
16               <input id="SearchKey" type="text" />
17               <input id="SearchButton" type="button" value="Search"
18                       onclick="DoSearch()" />
19        </div>
20        <hr />
21        <div>
22                <span id="Results"></span>
23        </div>
24</form>
25<script type="text/javascript">
26function DoSearch()
27{
28        var SrchElem = document.getElementById("SearchKey");
29        <!--调用服务端的WebService方法HelloWorld-->
30        AtlasDemo.WebService.HelloWorld(SrchElem.value, OnRequestComplete);
31}
32<!--客户端脚本回调事件-->
33function OnRequestComplete(result)
34{
35        var RsltElem = document.getElementById("Results"); 
36        RsltElem.innerHTML = result;
37} 
38</script>
39</body>
40</html>
41

四、总结

       本文目的主要是想让初学者对Atlas有个初步的了解，至于深入的一些研究，网络上也有很多的例子了，在

http://Atlas.asp.net 上的例子里面也讲得比较详细了。另外，使用过程中要特别注意：

l         务必设定ScriptManager 的EnablePartialRendering 属性为true，否则将和以前一样引发整页的PostBack而达不到Ajax的局部更新的效果。

l         使用Atlas的UpdatePanel容器时，在其内部的控件，可以达到局部更新效果，但是它往返服务器和客户端所产生的数据流量还是和普通的整页引发PostBack一样，只是采用UpdatePanel作为容器可以达到局部刷新，而不会一起页面的闪烁而已。

五、Atlas相关资料

       下载地址：

http://atlas.asp.net/default.aspx?tabid=47&subtabid=471

相关资料及Blog：

http://forums.asp.net/default.aspx?GroupID=34

ASP.NET Atlas学习

Dflying Chen

Atlas快速上手体验