Felix Woo » Atlas http://www.felixwoo.com 世界因我存在 Thu, 10 Nov 2011 11:54:00 +0000 en hourly 1 http://wordpress.org/?v= Atlas UpdatePanel介绍 http://www.felixwoo.com/archives/135 http://www.felixwoo.com/archives/135#comments Wed, 29 Mar 2006 17:41:57 +0000 Felix http://219.234.88.162:81/?p=135 这篇文章简要的介绍了通过使用Atlas UpdatePanel控件进行局部页面渲染的概念。如果你理解了什么是Atlas，你将从这篇文章中受益匪浅。

这篇文章包含了一个很简单的代码示例，教您如何使用UpdatePanel控件来局部渲染页面。使用UpdatePanel的主要优点有：
1、减少了数据页面更新导致的页面刷新次数
2、减少了页面更新传送的数据量(因为在数据回送postback的时候，并不是整个页面都需要完全重新渲染)
3、通过加快UI响应速度提高了用户使用体验。

下面这个例子展示了如何为应用程序增加UpdatePanel控件。
http://atlas.asp.net/docs/Walkthroughs/Samples/datepicker.aspx

从这个示例中我们可以看到，点击页面中心的大的日历整个页面都会刷新，而点击左上方的小日历选择某个日子，页面并不会刷新，而且反应非常迅速。这就是因为这个日历被UpdatePanel包裹了，所以具有了局部页面无刷新渲染的特性。

因此，为一个ASP.NET控件增加AJAX的无刷新效果非常的简单，只要把其放在UpdatePanel内就可以了。

示例源代码如下：

<%@ page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void ChosenDate_TextChanged(object sender, EventArgs e)
{
DateTime dt = new DateTime();
DateTime.TryParse(ChosenDate.Text, out dt);

CalendarPicker.SelectedDate = dt;
CalendarPicker.VisibleDate = dt;
}

protected void Close_Click(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}

protected void ShowDatePickerPopOut_Click(object sender, ImageClickEventArgs e)
{
DatePickerPopOut.Visible = !DatePickerPopOut.Visible;

// corrdinates are relative to the control, so we need to get the control's
// position too
int h = (int)ShowDatePickerPopOut.Height.Value;
SetDatePickerPopOutStyle(e.X + h, e.Y);
}

protected void CalendarPicker_SelectionChanged(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}

private void SetDateSelectionAndVisible()
{
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString();
DatePickerPopOut.Visible = false;
}

private void SetDatePickerPopOutStyle(int x, int y)
{
DatePickerPopOut.CssClass = "PopUpShow";
DatePickerPopOut.Attributes.Add("style", "top:" + x + "px;left:" + y + "px;");
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">

.PopUpShow
{
background-color:lightblue;
position:absolute;
visibility:show;
width:150px;
height:150px;
z-index:1;
border: solid 2px black;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<atlas:scriptmanager id="ScriptManager" runat="server"
enablepartialrendering="true" />
<h4>With an UpdatePanel</h4>
<!-- This section of the page is wrapped by an UpdatePanel. -->
<atlas:updatepanel id="up" runat="server" mode="Conditional"
rendermode="Inline">
<triggers>
<atlas:controleventtrigger controlid="CalendarPicker"
eventname="SelectionChanged" />
</triggers>
<contenttemplate>
<asp:textbox runat="server" id="ChosenDate"
ontextchanged="ChosenDate_TextChanged" autopostback="true" />
</contenttemplate>
</atlas:updatepanel>
<span style="position: relative;">
<asp:imagebutton runat="server" id="ShowDatePickerPopOut"
onclick="ShowDatePickerPopOut_Click" imageurl="~/images/calendar.gif"
height="20px" width="20px" />
<!-- This section is also wrapped by an UpdatePanel. -->
<atlas:updatepanel runat="server" id="up1" mode="Conditional"
rendermode="inline">
<triggers>
<atlas:controleventtrigger controlid="ShowDatePickerPopOut"
eventname="Click" />
</triggers>
<contenttemplate>
<asp:panel runat="server" id="DatePickerPopOut" visible="false">
<asp:calendar id="CalendarPicker" runat="server" backcolor="White"
bordercolor="White" borderwidth="1px" font-names="Verdana"
font-size="6pt" forecolor="Black" height="139px"
nextprevformat="FullMonth" width="100px"
onselectionchanged="CalendarPicker_SelectionChanged">
<selecteddaystyle backcolor="#333399" forecolor="White" />
<todaydaystyle backcolor="#CCCCCC" />
<othermonthdaystyle forecolor="#999999" />
<nextprevstyle font-bold="True" font-size="6pt"
forecolor="#333333" verticalalign="Bottom" />
<dayheaderstyle font-bold="True" font-size="6pt" />
<titlestyle backcolor="White" bordercolor="Black" borderwidth="4px"
font-bold="True" font-size="8pt" forecolor="#333399" />
</asp:calendar>
<br />
<asp:linkbutton id="CloseDatePickerPopOut" runat="server"
font-names="Tahoma" font-size="small" onclick="Close_Click"
tooltip="Close Pop out">
Close
</asp:linkbutton>
</asp:panel>
</contenttemplate>
</atlas:updatepanel>
</span>
<hr />
<br />
<!-- The remainder of the page does not have an UpdatePanel, so it cannot
participate in the benefits of partial page rendering on postbacks. -->
<div style="text-align: center;">
<h4>Without an UpdatePanel</h4>
<asp:calendar id="Calendar1" runat="server"></asp:calendar>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
</p>
</form>
</body>
</html>

]]> http://www.felixwoo.com/archives/135/feed 2 Atlas概述 http://www.felixwoo.com/archives/133 http://www.felixwoo.com/archives/133#comments Fri, 24 Mar 2006 15:20:32 +0000 Felix http://219.234.88.162:81/?p=133
最近研究了一下微软的Atlas(MS的AJAX解决方案)，打算翻译一些资料，即学技术又练英语 [smile] 。今天先翻译了一篇“Atlas概述”，如果有不对的地方欢迎指正。后续打算翻译几篇实例讲解的文章。

标题：ASP.NET “Atlas” 概述
翻译：吴飞(Felix)
原文：http://atlas.asp.net/docs/Overview/Overview.aspx

介绍

很多网页开发人员一直以来都在努力提高HTML的UI使用体验，包括JavaScript的复杂性以及跨浏览器的兼容性。在很多情况下，开发人员不得不为了兼容不同浏览器通过创建基于服务器端的动态网页而牺牲丰富的用户体验。

在过去的几年里，浏览器的很多新特性促使网页开发人员重新探索是否有可能创建基于客户端应用程序。目前，所有主流浏览器都支持“可编程文档对象模型”(DOM)，最新的几个版本中还增加了服务器端和客户端直接通信的能力，而不用再使用“回送”(Postback)。因此，新一代的网页程序应运而生，比如Microsoft Virtual Earth和Microsoft Windows Live，这些网站都提供了像拖拽(drag-and-drop)和实时处理数据的UI特性。

然而，开发这样的网页程序并不简单。你不得不了解浏览器的DOM并用JavaScript编写代码，而且也因不同的浏览器而不同。此外，JavaScript并没有面向对象(object-oriented)和类型安全(type-safe)等.NET所具有的特性。简而言之，创建面向客户端的网页程序需要精通一门新的编程语言和一个新的开发平台。

在这样的情况下，ASP.NET ‘Atlas’横空出世。Atlas是一种整合了客户端脚本库和ASP.NET 2.0服务器端开发平台的新的ASP.NET网页开发技术。这种网页由Atlas提供客户端支持，由ASP.NET提供服务器端支持。由于Atlas是ASP.NET的扩展，因此他完全整合了服务器端的服务。使用了Atlas，你就可以只把网页中的重要部分提供给客户端，而不用处理整个页面，并且可以在后台与服务器进行通讯。由此可见，你可以创建响应快、表现力丰富的UI和服务器通讯。

Atlas与AJAX

在网页开发业界，众所周知AJAX(Asynchronous JavaScript and XML)技术能够创建客户端服务器通讯和丰富的UI。AJAX是一种创建响应快、互动的网页的手段。Atlas可以让你创建AJAX样式的应用程序，而且超越了AJAX，能够为创建应用程序提供一个完整的开发平台。Atlas创建的应用程序可以针对应用需求而平衡客户端和服务器端的开发，并且为客户端和服务器端提供相同级别的编程能力。

Atlas提供了什么?
Atlas的主要目标就是整合客户端脚本和服务器端ASP.NET以提供一个完整的开发平台。

客户端特性
为了客户端开发，Atlas降低了基于JavaScript开发的复杂性，并提供了以下特性：
1、一致的、面向对象的JavaScript API组。可以使用.NET中很熟悉的OOP特性编码客户端程序。
2、浏览器自适用。可以不用再为不同的浏览器编写不同的代码。
3、客户端脚本API和组件支持丰富的UI特性，比如拖拽(drag-and-drop)。几乎使用很少的代码就可以为你的HTML控件加入这些特性。
4、类似ASP.NET服务器控件的客户端声明模型。

服务器端特性
Atlas也整合了客户端脚本与ASP.NET服务端，因此可以控制应用程序任务，无论在哪里都是有意义的。ASP.NET为Atlas应用程序提供以下特性：
1、Web Service可以与Atlas应用程序整合
2、ASP.NET网页服务器控件会自动加入Atlas应用程序所需要的客户端脚本，因此不用再为这些控件编写JavaScript代码。
3、为客户端开发整合了Visual Studio 开发工具，提供了debug、statement completion和其他高效开发的特性。

]]> http://www.felixwoo.com/archives/133/feed 1 Atlas—微软的Ajax工具包 http://www.felixwoo.com/archives/118 http://www.felixwoo.com/archives/118#comments Mon, 28 Nov 2005 10:44:20 +0000 Felix http://219.234.88.162:81/?p=118 　　Ajax的风行说明用户对于丰富的Web体验的需求日益增长。然而，开发和调试Ajax风格的Web应用程序是一项非常艰难的工作。要编写一个丰富的Web UI，开发者需要详细地掌握DHTML和JavaScript，并且还要掌握各种浏览器之间在设计细节上的不同。然而没有哪些工具能够简化这些应用程序的设计和开发。最后，调试和测试这些应用程序会变得异常困难。
　　微软致力于简化Ajax风格Web应用的开发，并提供丰富的、可交互的和个性化的用户体验。开发者可以对客户端脚本不甚了解;但他们可以无缝地将浏览器UI与他们编写的其他应用无缝地集成在一起，并且他们可以很容易地开发和调试这些应用程序。
　　出于这一目的，微软启动了一个新的项目，研发代号为“Atlas”。同时，微软还启动了一个站点来持续更新其核心进展和示例，并围绕它建立一个活跃的社区。在9月份的PDC大会上，开发者可以看到Atlas的技术预览版。
　　以下是Atlas所拥有的特性。

　　Atlas客户端脚本框架
　　Atlas客户端脚本框架是可扩展的、100%面向对象的JavaScript客户端脚本框架，允许开发者很容易地构建拥有丰富的UI功能并且可以连接Web Services的Ajax风格浏览器应用程序。使用Atlas，开发者可以使用DHTML、JavaScript和XMLHTTP来编写Web应用程序，而无须掌握这些技术的细节。
　　Atlas客户端脚本框架可以在所有的现代浏览器上运行，不论使用的是什么Web服务器。它还完全不需要安装，只要在页面中引用正确的脚本文件即可。
　　Atlas客户端脚本框架包含下列组件:
　　l 一个可扩展的核心框架，其中为JavaScript添加了很多新特性，如生存期管理、继承、多播事件处理器和接口
　　l 一个基础类库，提供了通用特性，如丰富的字符串操作功能、计时器和运行任务等
　　l 一个UI框架，可以跨浏览器实现HTML的动态行为
　　l 一个网络栈，用于简化对服务器的连接和对Web Services的访问
　　l 一组具有丰富UI功能的控件，如自动完成文本框、弹出面板、动画控件和拖放
　　l 一个浏览器兼容的层(Layer)，用于在不同浏览器中定位不同的脚本行为

　　Atlas的ASP.NET服务器控件
　　对于ASP.NET应用程序，微软专门设计了一组Ajax风格的服务器控件，并且加强了现有的ASP.NET页面框架和控件，以便支持Atlas客户端脚本框架。
　　ASP.NET 2.0中有一项称作异步客户端回调(Asynchronous Client Callbacks)的新特性，使得构建从服务器上更新内容时不会引发页面中断的ASP.NET页面变得很容易。异步客户端回调包装了XMLHTTP，能够在很多浏览器上工作。ASP.NET本身就包括了很多使用回调的控件，包括具有客户端分页和排序功能的GridView和DetalsView控件，以及TreeView控件的虚拟列表支持。
　　Atlas客户端脚本框架将完全支持ASP.NET 2.0回调，但微软希望在今后进一步增强浏览器和服务器之间的集成性。例如，你可以将Atlas客户端控件的数据绑定并指定为服务器上的ASP.NET数据源控件，并且可以从客户端异步地控制Web页面的个性化特征。

　　ASP.NET Web Services集成
　　和任何客户端应用程序一样，一个Ajax风格的Web应用程序通常也需要访问Web服务器的一些功能。Atlas应用程序连接服务器的模型和其他平台类似，都是使用Web Services来实现。
　　通过ASP.NET Web Services集成，Atlas应用程序将可以在任何支持XMLHTTP的浏览器上通过Atlas客户端用本框架来直接访问任何宿主了ASP.NET的asmx或Indigo服务。该框架将会自动处理、代理和脚本到对象、对象到脚本的序列化问题。通过使用Web Services集成，开发者可以使用单一的编程模型来编写Web Services，并且在任何应用程序中使用它们，不论是基于浏览器的站点上还是智能客户端应用程序中。

　　Atlas的ASP.NET构建块
　　在ASP.NET 2.0中，微软构建了一组丰富的构建块服务(Building Block Services)，这使得构建强大、个性化的Web应用程序变得不可思议的简单。这些构建块极大地降低了在开发通用的Web应用程序过程中需要编写的代码数量，比如管理用户、通过角色验证用户和存储用户的个性化设置信息等。
　　使用Atlas，我们可以在任何浏览器上的任何客户端应用程序中向访问Web Services那样访问这些功能。例如，如果你正在开发一个站点来显示用户的TO-DO项目，你可以使用ASP.NET的Profile服务来将他们存放在服务器上的用户自定义配置文件中。这样，即使用户从一台机器转移到另一台机器上，也同样可以访问这些项目。
　　微软将提供的服务包括(全部是基于ASP.NET 2.0的):
　　l Profile:在服务器上存放每个用户特有的数据
　　l UI个性化:在服务器上存放个性化的UI设置信息
　　l 验证:验证用户
　　l 角色:基于用户的角色验证用户任务和提供不同的UI
　　由于这些构建块是基于服务器的，开发者需要对他们应用和其他站点一样的安全模型。这些服务不需要客户端下载任何东西——只要在浏览器中引用脚本代理即可。
　　所有的ASP.NET 2.0构建块服务都是可插拔的，这使用一种通用的提供者(Provider)模型可扩展模式在后台实现。微软提供的内建提供程序允许开发使用SQL Server数据库或Active Directory作为存储容器，开发者也可以很容易地插接自己的提供程序。例如，你可能希望使用集群而不是数据库服务器来存放用户的配置文件，这时，你只需将你的提供程序插接进来即可——这一切都由开发者来决定。

　　客户端构建块服务
　　除了DHTML、JScript和XMLHTTP，微软还提供了一组附加的服务来加强客户端的功能，并提供增强的体验。
　　对于这样的服务，本地浏览器缓存就是一个很好的例子。当启用了本地浏览器缓存时，Web站点就可以将内容存储到缓存中，并在需要的时候很快地取出。但浏览器并未提供向缓存中存放数据的API，而且象Google Map或OWA这样的应用程序不得不通过很多工作产生一个唯一的URL，才能使浏览器缓存它。在Atlas中，微软提供了可编程的本地存储/缓存，因此应用程序可以很方便、有效并且安全地在本地缓存数据。
　　同其它应用程序的集成是检验Web体验是否丰富的另一个新的标准。例如，当一个用户浏览一个拍卖网站并对一件商品出价时，他可能想随时知道这个拍卖什么时候结束，但他如何才能将这个事件添加到个人的日历程序中?Atlas带来了一系列客户端构建块服务，当用户选择“添加到日历”时，浏览器将调用接驳点来获取日历数据，并将其传递到本地的日历程序中。此时页面上无须下载或运行任何特殊的代码或执行任何初始化动作，因此，这比ActiveX要安全得多。

　　下一步
　　随着我们的技术进展，还会发生很多事情。我们现在已经开始研发、开发和调试工具的下一个版本了，因此，我们将很快为这些类型的丰富Web应用程序提供更加伟大的开发体验。
　　您可能会问的一个问题是:Atlas如何在Avalon和智能客户端上使用?
　　我们可以看到，Atlas是编写丰富的、可交互的和个性
化的Web浏览器应用程序的最好方式，而Avalon是微软的下一代表现层模型，可以在Windows平台上提供最丰富的用户体验。Avalon将使用最新的媒体集成功能和硬件加速设备，提供卓越的视觉体验。Avalon将带来超越浏览器的体验。
　　当然，当你构建Avalon应用程序的时候，你依然可以重用ASP.NET和Atlas中的编程模型。例如，Avalon客户端上依然可以使用ASP.NET构建块服务和客户端构建块服务。这种模型可以使你平滑地过渡到下一代应用程序。

]]> http://www.felixwoo.com/archives/118/feed 1