日期:2010-11-17  浏览次数:20487 次

  摘要 本文将详细探讨Atlas中的声明性编程与强制性编程之间的关系,及如何用之在一个web客户端实现拖放功能。下图为本文相应示例程序运行结果快照。

  一. 简介

  本文旨在帮助读者理解微软的Atlas技术的某些方面的工作原理。Atlas的实现宗旨是简化AJAX风格的Web程序开发。然而,就象所有其它技术一样,为了更好地使用这个工具,你需要深入理解Atlas抽象的内在技术。Atlas抽象的一个关键之处是新的XML标记语法,目的是实现利用Atlas进行编程更为容易。借助于XML标记,开发者能够以声明性方式修改他们的代码。然而,有时当一个开发者可能想以编程方式来改变其代码时,他需要理解,在标记抽象层下面,他实际在与一些JavaScript及一些微软开发的定制JavaScript库打交道。为了展示Atlas声明性模型与可编程模型之间的关系,我们将讨论几个例子,在这些示例中,我们将使用两种模型来实现相同的功能。我将向你展示如何使用AtlasUIDragDrop库文件来执行基本的拖放操作以及建立放置区。

  [背景

  当我写作本文时,Atlas仍处于其beta测试阶段,并且在继续修改中。本文中的这些示例适用于Atlas的四月CTP版本;因此,Atlas的更新的发行版本可能会影响本文的精确性。另外,还要注意,Atlas仅能与.NET 2.0一起工作。

  二. 声明性拖放

  为了把拖放行为添加到一个div标签,第一项任务是使用Atlas标记。通过拖放,我仅想实现能够拖放一个对象并且让它位于你想把它放置的地方。当把一个对象放置到一个指定的点时,在实际开发中所表现出的动作将在后面讨论。为了配置你的网页以便使用Atlas,你需要从微软站点把Microsoft.Web.Atlas.dll文件下载到你的bin文件夹下并且使用下列入口配置你的web.config文件:

<system.web>
<pages>
 <controls>
  <add namespace="Microsoft.Web.UI"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
  <add namespace="Microsoft.Web.UI.Controls"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
 </controls>
</pages>
</system.web>

  接下来,你需要把一个Atlas脚本管理器控件添加到你的.aspx页面并且使用AtlasUIDragDrop库来配置:

<atlas:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
 </Scripts>
</atlas:ScriptManager>

  然后,添加你想使之可拖放的div对象,并且确保它有一个拖放句柄:

<div style="background-color:Red;height:800px;width:600px;">
 <div id="draggableDiv"
style="height:100px;width:100px;background-color:Blue;">
  <div id="handleBar"
style="height:20px;width:auto;background-color:Green;">
  </div>
 </div>
</div>

  最后,添加能够使你的div成为可拖放的标记脚本:

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
 <components>
  <control id="draggableDiv">
   <behaviors>
    <floatingBehavior handle="handleBar"/>
   </behaviors>
  </control>
 </components>
</page>
</script>

  至此,你应该有了一个可拖放的div标签。该示例展示了结合Atlas使用声明性方式的简单性和容易性。在Atlas所引入的术语中,你仅使用了声明性标记来把漂浮行为添加到一个HTML元素。

  三. 强制性拖放

  为了使用编程方式来实现相同的功能,我们需要进行一些编程,但是不需要较多的编码。你必须明白,当你把一个Atlas脚本管理器组件添加到你的页面上时,你实际上是在下命令把Atlas JavaScript库加载到你的页面。这个Atlas库提供了扩展DOM的客户端类,并且提供允许你在一个浏览器中进行编码的工具(尽管现在在Safari兼容性方面还存在一些问题)。这些客户端类还允许你把你的HTML元素添加到行为。
为了切换到一个强制性模型,你需要用两个JavaScript函数来代替XML标记。第一个函数是一个普通脚本用于把漂浮行为添加到一个HTML元素上。它利用了Atlas客户端类来完成此功能:

<script type="text/javascript">
function addFloatingBehavior(ctrl, ctrlHandle){
 //创建新的漂浮行为对象
 var floatingBehavior = new Sys.UI.FloatingBehavior();
 //漂浮行为类具有一个Handle属性
 floatingBehavior.set_handle(ctrlHandle);
 //把对象参考值的为Atlas客户端控件
 var dragItem = new Sys.UI.Control(ctrl);
 //从Atlas控件中取得行为集合
 //添加我们自己的漂浮行为
 dragItem.get_behaviors().add(floatingBehavior);
 //运行该漂浮行为的内部javascript
 floatingBehavior.initialize();
}
</script>

  这个函数使用两个参数值:你想要拖放的HTML元素和实现该拖放行为的拖放句柄HTML元素。然后,你实例化一个新的Atlas客户端行为对象。该漂浮行为具有一个handle属性-你把HTML元素的句柄传递给它。然后,你需要基于你想使之成为可拖放的控件以创建一个新的客户端控件对象。把你的div标签转换成一个Atlas客户端控件能够使你把Atlas行为添加到它上面。你可以使用get_behaviors()方法来返回一个行为集合,并且使用add方法来把一个新行为添加到你的HTML对象。最后,你调用行为对象的initialize()方法以允许在内部配置行为自身。我们将在本文剩下的部分中一直使用这个工具函数。

  现在,当页面装载时,你需要调用addFloatingBehavior函数。说实话,这是编写这个示例中最有难度的编码部分。脚本管理器并不是简单地创建一个到Atlas JavaScript库的引用,我推想它实际把该库脚本装载到DOM。在任何情况下,这意味着,只有页面中的其它一切都装载后该库才得到加载。这样以来,我们所面临的问题在于,装载该库后,没有标准的方法来使我们的添加漂浮行为的代码运行;并且如果我们在加载该库前运行它,那么我们可以简单地生成JavaScript错误-因为我们调用的所有的Atlas方法都不能被发现。

  其实,存在好几种方法可以来解决这个问题,但是最容易的方法是使用一个定制的Atlas事件pageLoad()-这个事件实际只在装