jackyrong

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

   新近编译了一篇老外的作品,觉得对ATLAS的入门还不错,故翻译之,发表在
http://dev.yesky.com/msdn/488/2586488.shtml上,现全文转到这里

   随着ajax技术的出现,web 2.0时代已经来临,目前已经涌现了大量的web 2.0的网站,比如live.com,fclickr相册网站,google Map等等。那什么是ajax呢?AJAX技术其实是旧瓶装新酒了,它使用了异步JavaScript+XML。这种技术首先由微软在1999年引入,并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面/服务作异步的HTTP调用,并且用收到的结果更新一个当前web页面而不必刷新整个页面。根据这种技术创建者的意见,这种技术应能够改进客户端的体验,使得HTTP页面外观与使用感觉很类似于Windows桌面应用程序。

  目前,已经涌现出了不少关于ajax的技术框架。而在.net 方面,也有不少开源的框架,如ajax.net,magic ajax等。而微软也推出了自己的ajax框架----Atlas,目前的版本是6月份的CTP版本。在Atlas中,已经封装好了大量的ajax控件和功能,十分方便。本文中将以两个实例来说明如何使用Atlas来实现两个简单的ajax应用。

  首先,我们要下载atlas,可以到 http://atlas.asp.net上去下载atlas的相关安装文件。我们先来看一个简单的例子,在这个例子中,
我们通过asp.net 2.0中的日历控件来说明如何使用atlas.先打开vs.net 2005,选择"新建web站点",如下图,这时会发现有"Atlas web site"的模版,这时我们可以输入要创建应用的名称,这里我们就用默认的名称AtlasWebSite1。
     

在方案解决器中,你会发现vs.net 2005已经预先放置了一些文件,其中,在bin文件夹下包含了Microsoft.Web.Atlas.dll文件,这是支持ajax功能的文件。为了能在设计中使用到ajax控件,必须在TOOLS工具箱中添加一个新的选项卡,命名为Atals,然后右键点击该选项卡,在弹出的菜单中选择"choose item",然后用浏览的功能,选择atals.dll文件,这样,就添加了一系列的Atals控件,如下图:
 

    我们将其中的ScriptManager控件拖拉到页面中去。ScriptManager控件可以看作是管理Atlas控件的集合,它用来处理页面上的所有Atlas组件以及局部页面的更新,生成相关的客户端脚本,所有需要支持Atlas的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过JS来调用的Web Service,还可以指定页面错误处理等。

  接着,我们拖拉一个日历控件到页面中去,放在刚才scriptmanager控件的下面,并且选择一个喜欢的样式,如下图所示:
 
  

    接下来,我们看下如何在这个日历控件中使用ajax技术。在.net 的日历控件中,人们经常抱怨的是,每次选定日历上的一个日期,都会引发一次postback页面回传,需要用户等待,十分不方便。下面,我们通过Atals控件,来对日历控件进行改造。

  在default.aspx页中,切换到代码视图,在之前的<atlas:ScriptManager>控件中,加入EnablePartialRendering属性,以使得atlas可以对页面进行局部更新,如下所示

      <atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />
    增加一个<UpdatePanel>控件,UpdatePanel是Atlas中一个很重要的控件,功能强大容易使用,可以只做很小的改动就可以向已有的ASP.NET站点添加Ajax功能,我们再将日历控件拖拉放到updatepanel控件中去,其中要注意到,日历控件是放到<ContentTemplate>的标签内的,该标签内放的就是受UpdatePanel控制的控件,如下代码所示:

<atlas:UpdatePanel ID="id1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... />
</asp:Calendar>
</ContentTemplate>
</atlas:UpdatePanel>

  为了更好地看到效果,我们增加两个下拉选择框,可以让用户选择年份和月份,代码如下所示

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />

<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True">
 <asp:ListItem Value="1">Jan</asp:ListItem>
 <asp:ListItem Value="2">Feb</asp:ListItem>
 <asp:ListItem Value="3">Mar</asp:ListItem>
 <asp:ListItem Value="4">Apr</asp:ListItem>
 <asp:ListItem Value="5">May</asp:ListItem>
 <asp:ListItem Value="6">Jun</asp:ListItem>
 <asp:ListItem Value="7">Jul</asp:ListItem>
 <asp:ListItem Value="8">Aug</asp:ListItem>
 <asp:ListItem Value="9">Sep</asp:ListItem>
 <asp:ListItem Value="10">Oct</asp:ListItem>
 <asp:ListItem Value="11">Nov</asp:ListItem>
 <asp:ListItem Value="12">Dec</asp:ListItem>
</asp:DropDownList>

Year

<asp:DropDownList ID="DropDownList2" runat="server"
AutoPostBack="True">
<asp:ListItem>2005</asp:ListItem>
<asp:ListItem>2006</asp:ListItem>
<asp:ListItem>2007</asp:ListItem>
</asp:DropDownList><br />

  然后在code-behind的代码中,写入如下代码:

Protected Sub DropDownList1_SelectedIndexChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DropDownList1.SelectedIndexChanged
With Calendar1
.VisibleDate = New Date( _
DropDownList2.SelectedValue, _
DropDownList1.SelectedValue, 1)
End With
End Sub

Protected Sub DropDownList2_SelectedIndexChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DropDownList2.SelectedIndexChanged
With Calendar1
.VisibleDate = New Date( _
DropDownList2.SelectedValue, _
DropDownList1.SelectedValue, 1)
End With
End Sub

  在上面的代码中,分别为月份和年份的下拉选择框的selectedindexchanged事件写入了代码,主要是控制当用户选择了月份和年份时,日历控件中显示相应的日期。但当我们F5运行时,会发觉页面依然会引起postback刷新的。因此,我们要定义触发器triggers。

  所谓的触发器,指定了发生动作的事件源,UpdatePanel提供两种引发异步PostBack的Trigger ,分别是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指当某个控件的某个指定的属性变化时更新,而ControlEventTrigger是指当指定的事件发生时进行更新。则我们修改代码如下:

<atlas:UpdatePanel ID="id1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... />
</asp:Calendar>
</ContentTemplate>

<Triggers>
<atlas:ControlValueTrigger ControlID="DropDownList1"
PropertyName="SelectedValue" />
<atlas:ControlEventTrigger ControlID="DropDownList2"
EventName="SelectedIndexChanged" />
</Triggers>
</atlas:UpdatePanel>

  这里,分别指定了月份下拉框的属性触发器和年份下拉框的事件触发器,使得无论当用户选择哪一个下拉框时,都会引发局部的刷新,而这些刷新全部都通过updatepanel控件来封装进行处理了。所以当运行程序时,页面不会象以前那样要进行一次postback和整体页面的刷新。

  最后,我们再在日历控件下面,增加一个进度状态条控件UpdateProgress,用来向用户反映当前的进度,代码如下所示

<atlas:UpdateProgress ID="pro" runat="server">
<ProgressTemplate>
<asp:Label ID="Label1" runat="server" Text="Label">
Updating Calendar...
</asp:Label>
</ProgressTemplate>
</atlas:UpdateProgress>

  要注意的是,上面我们在进度状态控件的<ProgressTemplate>中,我们只是简单加入了一个标签控件,如果有实际需要的话,我们是可以加入图片的。

  到此,我们的程序大功告成了,运行这个日历程序,选择月份和年份下拉框,会看到日历控件没有象以前那样引起整个页面的刷新,而是很快在日历控件中显示出相应的日期。

    为了加深对Atlas的认识,我们再举一个例子来说明问题。我们的这个应用,将是在一个页面中,提供给用户能通过点选分类主题按钮的方式,获得站点上最新的新闻,这是通过读取站点上的RSS的形式来进行的。

  我们首先新建另外的一个页面,其中也放入scriptmanager控件,接着我们要设计一个简单的页面了。比如添加一个好看的BANNER在页面头部,并且为了显示加载的进度,这次我们添加一个有Loading…动画的GIF,再建立一个一行两列的大表格,在表格的左边,放入若干个按钮。比如这里我们根据每个技术专题,放入了十个按钮。

  然后再拖放一个xmldatasource控件到窗体中,因为我们要读取网站上的RSS XML文件进行解析。在表格的右边,放入一个DataList控件,并且将这个DataList控件绑定到xmldatasource控件中去。最后,大致的界面图如下所示:


   接下来对XMLDATASOURCE控件进行设置。我们点选控件右上方的智能感知功能,在弹出的窗口中的XPATH里,选择Xpath Expression,在这里,我们填入"rss/channel/item"。要注意的是,由于我们想浏览的网站提供的RSS 的XML文件里,我们只对每个频道的最新信息感兴趣,因此我磨恩这样填写,而完整的该网站的RSS信息在http://services.devx.com/outgoing/devxfeed.xml可以看到。最后,我们的页面前端代码如下所示:

<atlas:UpdatePanel ID="id1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"
Font-Bold="True"></asp:Label>
<atlas:UpdateProgress ID="pro" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server"
ImageUrl="~/loading.gif" />
</ProgressTemplate>
</atlas:UpdateProgress>

<asp:DataList ID="DataList1" runat="server"
BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black"
Width="755px">
<FooterStyle BackColor="Tan" />
<SelectedItemStyle BackColor="DarkSlateBlue"
ForeColor="GhostWhite" />
<AlternatingItemStyle BackColor="PaleGoldenrod" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<ItemTemplate>
<b>
<%#XPath("title")%>
</b>
<br />
<i>
<%#XPath("description") %>
</i> <%#XPath("pubDate")%>
<br />
<a href='<%#XPath("link") %>'>Link</a>
<br />
<br />
</ItemTemplate>
</asp:DataList>

<asp:XmlDataSource ID="XmlDataSource1" runat="server"
XPath="rss/channel/item"></asp:XmlDataSource>
</ContentTemplate>

<Triggers>
<atlas:ControlEventTrigger ControlID="Button1"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button2"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button3"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button4"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button5"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button6"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button7"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button8"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button9"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button10"
EventName="Click" />
<atlas:ControlEventTrigger ControlID="Button11"
EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
...

  在上面的代码中,我们除了为每一个button按钮都设置了事件触发器外,还在DataList控件中,通过<%#XPath("description") %>的方式,将读取并分析好的XML文件绑定显示出来。下面,我们就开始撰写后端的处理读取到的RSS XML文件的代码。
    首先,由于要处理XML,读取网站上的资源,所以要引入如下几个命名空间

Imports System.Net
Imports System.IO
Imports System.Xml

  当用户点选某个分类主题的按钮时,将会自动下载该网站中符合主题的RSS XML文件,下载完后再进行解析,再显示到页面中去。代码如下:

Public Function SendRequest( _
ByVal URI As String, _
ByVal requestType As String) As HttpWebRequest
Dim req As HttpWebRequest = Nothing
Try
//发起HTTP请求
req = HttpWebRequest.Create(URI)
req.Method = requestType
Catch ex As Exception
Throw New Exception("Error")
End Try
Return req
End Function

Public Function GetResponse( _
ByVal req As HttpWebRequest) As String
Dim body As String = String.Empty
Try
//从服务器中获得响应输出流
Dim resp As HttpWebResponse = req.GetResponse()
Dim stream As Stream = resp.GetResponseStream()

//使用streamreader去处理得到的服务器响应
Dim reader As StreamReader = _
New StreamReader(stream, Encoding.UTF8)
body = reader.ReadToEnd()
stream.Close()
Catch ex As Exception
Throw New Exception("Error")
End Try
Return body
End Function

  上面的两个方法,分别向网站服务器发出获取指定URL的信息的请求,并用IO流中的streamreader的方式获得服务器返回的输出信息。而下面的LoadRSS()方法,传入的参数是指定的URL地址,然后分别调用上面的两个方法,在最后获得服务器返回的输出流后,再通过解析XML的方式,选择合适的结点内容进行返回。代码如下:

Public Function LoadRSS( _
ByVal URI As String) As String
Dim req As HttpWebRequest
Dim xmlDoc As XmlDocument = Nothing
Try
XmlDataSource1.DataFile = URI

//下载RSS XML文件
req = SendRequest(URI, "GET")
Dim xmlData As String = GetResponse(req)
xmlDoc = New XmlDocument()
xmlDoc.LoadXml(xmlData)

//选择合适的结点
Dim titleNode As XmlNode = _
xmlDoc.DocumentElement.SelectSingleNode("channel/title")

Return titleNode.InnerText
Catch ex As Exception
 Return String.Empty
End Try
End Function

  接着,我们还有为10多个按钮编写响应的事件,当点选了某个分类主题的按钮后,则向服务器请求指定的分类主题的RSS XML,代码如下:

Public Sub Button_Click( _
ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Button1.Click, Button2.Click, Button3.Click, _
Button4.Click, Button5.Click, Button6.Click, _
Button7.Click, Button8.Click, Button9.Click, _
Button10.Click, Button11.Click

Dim URL As String = String.Empty
Select Case CType(sender, Button).Text
Case "Database" : URL = _
"http://services.devx.com/outgoing/databasefeed.xml"
Case ".NET" : URL = _
"http://services.devx.com/outgoing/dotnet.xml"
Case "C++" : URL = _
"http://services.devx.com/outgoing/cplusfeed.xml"
Case "Recent Tips" : URL = _
"http://services.devx.com/outgoing/recentTipsFeed.xml"
Case "Web Dev" : URL = _
"http://services.devx.com/outgoing/webdevfeed.xml"
Case "Latest" : URL = _
"http://services.devx.com/outgoing/devxfeed.xml"
Case "Enterprise" : URL = _
"http://services.devx.com/outgoing/enterprisefeed.xml"
Case "Wireless / Mobile" : URL = _
"http://services.devx.com/outgoing/wirelessfeed.xml"
Case "XML" : URL = _
"http://services.devx.com/outgoing/xmlfeed.xml"
Case "Java" : URL = _
"http://services.devx.com/outgoing/javafeed.xml"
Case "Open Source" : URL = _
"http://services.devx.com/outgoing/openSourceFeed.xml"
End Select
Label1.Text = LoadRSS(URL)
End Sub

  最后,在LOAD事件中,默认读取最新信息的RSS XML

Protected Sub Page_Load( _
ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = _
LoadRSS("http://services.devx.com/outgoing/devxfeed.xml")
End Sub

  运行后效果如下图所示,点选左边每个分类主题的按钮,都会自动去该网站下载最新的RSS XML 并且进行解析,最后展示到页面中去,而这一切都由于用了Atlas而是无刷新的。

posted on 2006-09-21 13:20  jackyrong的世界  阅读(4718)  评论(7编辑  收藏  举报