1

上個星期我們討論了微軟以Atlas形式來應對Ajax的潮流。Atlas基本上就是一個用來創建跨浏覽器、跨平台的AJax應用程序的ASP.Net 2.0框架。
2

3

微軟最近發布了四月社區技術預覽(April Community Technology PrevIEw)並聲明認為已經准備好發布live許可證了。了解到這之後,我們將討論Atlas的核心:ScriptManager類。
4

5

關注的焦點
6

7

ScriptManager類管理著Web頁面上的所有Atlas組件。此外,它還會處理部分頁面的更新並生成客戶腳本,讓你可以通過使用代理對象訪問來自JavaScript的Web服務方法。
8

9

每個使用Atlas組件的頁面都只能帶有一個ScriptManager控件,它在Web頁面的開始部分公開。它會注冊Atlas腳本,把它們放在頁面上供使用。如果你正在使用ASP.Net 2.0,那麼你可以在主頁面上放一個ScriptManager控件,這樣它就可以被使用主頁面的所有頁面用到了。ScriptManager控件的句法見列表A:
10

11

<atlas:ScriptManager
12

EnablePartialRendering="true|false"
13

EnableScriptComponents="true|false"
14

ID="string"
15

runat="server" >
16

<Scripts>
17

<atlas:ScriptReference
18

Browser="browser reference"
19

Path="script file path"
20

ScriptName="script file name" />
21

</Scripts>
22

<Services>
23

<atlas:ServiceReference
24

GenerateProxy="true|false"
25

Path="server path name"
26

Type="type name" />
27

</Services>
28

</atlas:ScriptManager>
29

現在讓我們更加仔細地看看ScriptManager控件聲明的各個部分。
30

31

EnablePartialRendering:這個屬性用來表示是否激活部分生成。部分生成用來只重新加載部分頁面。如果為“真”的話,那麼異步控件的常規回發就只顯示發送給客戶端的增量變化。
32

EnableScriptComponents:這個屬性用來控制Atlas的哪一部分在默認情況下可以用在客戶端上。它會確定用於用戶界面組件、行為、行為綁定和XML腳本編寫的Atlas腳本在默認情況下是否可以被下載到客戶端上。如果為“偽”的話,你可以在ScriptReference元素裡下載具體的組件。
33

ScriptReference:這個元素(它必須被包括在Scripts元素裡)讓你可以能夠添加沒有自動包括進來的腳本。腳本要用Path屬性來指定,你還可以用Browser屬性來為腳本指定一個浏覽器。Atlas的確包括一些在默認情況下不會被發送給客戶端的腳本;這些腳本可以用ScriptName腳本來添加。這樣的腳本包括AtlasUIDragDrop、AtlasUIGlitz和AtlasUIMap。
34

ServiceReference:這個元素可以讓你指定要被用在頁面腳本裡的Web服務。Type屬性可以是任何合法的MIME類型。GenerateProxy屬性讓你能夠臨時中止為Scripts集合裡列出的服務生成代理對象。
35

列表B裡的Web頁面使用了一個本地Web服務(盡管這個服務可以是任何服務):
36

37

<%@ Page Language="C#" %>
38

<!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN"
39

"http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
40

<Html XMLns="http://www.w3.org/1999/xHtml" >
41

<head id="hd">
42

<title>TR Sample</title>
43

<atlas:ScriptManager ID="scriptManager" runat="server"
44

EnablePartialRendering="false"
45

EnableScriptComponents="false" >
46

<Services>
47

<atlas:ServiceReference Path="testService.asmx" GenerateProxy="true"聽 />
48

</Services>
49

<Scripts>
50

<atlas:ScriptReference Path="AtlasRuntime.JS" />
51

</Scripts>
52

</atlas:ScriptManager>
53

<script type="text/Javascript">
54

function callWebService() {
55

testService.displayTime("request data", handleResponse);
56

}
57

function handleResponse(response) {
58

alert("Server response: " + response);
59

}
60

</script></head>
61

<body>
62

<form id="frmTR" runat="server">
63

<div>
64

<p><input type="button" onclick="callWebService()" value="Call Web Service" /></p>
65

</div></form></body></Html>
66

頁面會聲明Web服務參考,後者後來用在JavaScript裡來使用其唯一的方法。部分頁面生成被禁用,調用所有的腳本庫也被禁用。ScriptReference部分參考了AtlasRuntime腳本庫(隨Atlas一起安裝),所以基本的功能是可用的。這個服務的源代碼見列表C:
67

68

<%@ WebService Language="C#" Class="testService" %>
69

using System;
70

using System.Web;
71

using System.Web.Services;
72

using System.Web.Services.Protocols;
73

[WebService(Namespace = "http://tempuri.org/")]
74

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
75

public class testService : System.Web.Services.WebService {
76

[WebMethod]
77

public string displayTime() {
78

return DateTime.Now.ToString();
79

} }
80

雖然你被嚴格限制在一個Web頁面上只能使用一個ScriptManager控件的實例,但是你可能想要往頁面上添加額外的腳本或者服務參考。在這種情況下,ScriptManagerProxy控件就有了用武之地。
81

82

<atlas:ScriptManagerProxyrunat="server" id="smProxy">
83


84

</atlas:ScriptManagerProxy>
85

當ScriptManager對象已經被聲明的時候,如果你需要使用額外的腳本(ScriptReference元素),這個控件就非常有用。一個典型的例子用到了ASP.Net 2.0,並把一個ScriptManager對象放在主頁面裡。使用主頁面的頁面可能需要使用額外的腳本,所以代理對象可以用了。它的句法與普通的ScriptManager控件是一樣的。
86

87

其他控件
88

89

盡管ScriptManager控件是基於Atlas的Web頁面的焦點,但是這個框架還提供了一些直接可用的控件,這樣通過少量的編程就可以增強Web頁面的效果。下面就是最新版的Atlas裡包括的一些控件:
90

91

AutoCompleteExtender:讓你擴展文本框控件來提供自動完成功能。這個Web服務被用來提供建議數據。
92

DragOverlayExtender:你可以把服務器控件變成一個可以隨著鼠標和鍵盤活動的浮動控件。
93

ProfileScriptService:用來創建一個用來訪問ASP.Net用戶配置文件的客戶端配置組件。
94

TimerControl:用來創建一個客戶端計數器,按照固定的時間間隔進行回發。
95

Atlas的Web網站上有很多例子,但是DragOverlayExtender控件是最酷和最容易實現的一個。基本上,你可以創建一個控件並把它指派給DragOverlayExtender控件的TargetControlID屬性的實例,以便讓其工作。列表D裡的例子說明了它把圖像移動到頁面周圍的用法:
96

97

<%@ Page Language="C#" %>
98

<!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN"
99

"http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
100

<Html XMLns="http://www.w3.org/1999/xHtml" >
101

<head id="hd">
102

<title>Drag-n-Drop</title>
103

<atlas:ScriptManager ID="scriptManager" runat="server"
104

EnablePartialRendering="false"
105

EnableScriptComponents="true" >
106

</atlas:ScriptManager>
107

</head>
108

<body>
109

<form id="frmTest" runat="server">
110

<ASP:Imagerunat="server" ImageUrl="~/testimage.JPG" id="imgTest" />
111

<atlas:DragOverlayExtender ID="doe" runat="Server">
112

<atlas:DragOverlayPropertIEs Enabled="True" TargetControlID="imgTest" />
113

</atlas:DragOverlayExtender>
114

</form></body></Html>
115

其他信息
116

117

系統管理員沒有必要使用Atlas——你只用把Microsoft.Web.Atlas.dll文件復制到項目的\bin目錄下,並把Atlas的\ScriptLibrary目錄裡的.JS復制到你的項目裡就行了。
118

119

此外,雖然Atlas打著微軟的標簽,但是它適用於所有的浏覽器。基於Atlas控件的所有樣式都是用層疊樣式表(CSS)完成的。此外,Atlas允許你根據需要開發針對不同浏覽器的內容。
120

121

最後,有些觀點認為Atlas只是把開發人員從Firefox和Opera上轉移開的一種策略,這兩個浏覽器仍舊不斷在浏覽器市場上獲得更多的份額。雖然我們確信微軟了解其競爭對手的行動,但是我並不十分擔心這個軟件巨頭的動機;我只希望得到能夠讓我為客戶創建強大解決方案的技術。Atlas可能(或許無法)在它最終發布的時候滿足這一要求,但是到目前為止我還是對已經看到的東西十分滿意。