ASP.NET 2.0+Atlas编写鼠标拖放程序(2)

运行结果

一. 简介

本文旨在帮助读者理解微软的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()-这个事件实际只在装载这些库后才调用它。为了把漂浮行为添加到你的div标签中，当第一次加载页面时（但是在库脚本装载后），你仅需要编写如下代码：

＜script type="text/javascript"＞ function pageLoad(){ addFloatingBehavior(document.getElementById('draggableDiv')，document.getElementById('handleBar')); } ＜/script＞

这可以使用一种Atlas脚本速记方式来书写-用"$()"代替"document.getElementById()"：

＜script type="text/javascript"＞ function pageLoad(){ addFloatingBehavior($('draggableDiv')，$('handleBar')); } ＜/script＞

在此，可以看到，你有一个可拖动的div，其行为与你使用声明性模型编写的可拖动的div完全一致。

四. 动态拖放

既然声明性模型比强制性模型更为清晰，那么为什么你还要编写自己的JavaScript来处理Atlas行为呢？其实，这种声明性模型的一个限制是，你只能使用一开始就位于该页面上的对象。如果你开始动态地把对象添加到该页面，那么你无法使用声明性模型来把漂浮行为添加到其上。不过，借助于强制性模型，你能够实现。

基于前面的例子，你要用一个据要求创建漂浮div的函数来代替pageLoad()函数。下列JavaScript函数会创建一个嵌有另一个div标签（用作一个handlebar）的div标签，然后把该div标签插入到当前的页面，并且最后把漂浮行为添加到div标签：

function createDraggableDiv() { var panel= document.createElement("div"); panel.style.height="100px"; panel.style.width="100px"; panel.style.backgroundColor="Blue"; var panelHandle = document.createElement("div"); panelHandle.style.height="20px"; panelHandle.style.width="auto"; panelHandle.style.backgroundColor="Green"; panel.appendChild(panelHandle); var target = $('containerDiv').appendChild(panel); addFloatingBehavior(panel， panelHandle); }

然后，你只需要把一个按钮添加到该调用createDraggableDiv()函数的页面。现在，新的HTML体看上去具有如下形式：

＜input type="button" value="Add Floating Div" /＞ ＜div id="containerDiv" style="background-color:Purple;height:800px;width:600px;"/＞

这将允许你把很多的可拖放元素添加到你的页面上，这说明了，一旦你理解了在以声明方式使用Atlas和以编程方式使用它之间的关系，那么Atlas将表现出强大的威力和灵活性。作为参考，下面是动态拖放示例的完整实现代码：

＜%@ Page Language="C#" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml" ＞ ＜head runat="server"＞ ＜title＞Imperative Drag and Drop II＜/title＞ ＜script type="text/javascript"＞ function createDraggableDiv() { var panel= document.createElement("div"); panel.style.height="100px"; panel.style.width="100px"; panel.style.backgroundColor="Blue"; var panelHandle = document.createElement("div"); panelHandle.style.height="20px"; panelHandle.style.width="auto"; panelHandle.style.backgroundColor="Green"; panel.appendChild(panelHandle); var target = $('containerDiv').appendChild(panel); addFloatingBehavior(panel， panelHandle); } function addFloatingBehavior(ctrl， ctrlHandle){ var floatingBehavior = new Sys.UI.FloatingBehavior(); floatingBehavior.set_handle(ctrlHandle); var dragItem = new Sys.UI.Control(ctrl); dragItem.get_behaviors().add(floatingBehavior); floatingBehavior.initialize(); } ＜/script＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞ ＜Scripts＞ ＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞ ＜/Scripts＞ ＜/atlas:ScriptManager＞ ＜h2＞Imperative Drag and Drop Code with javascript:  demonstrate dynamic loading of behaviors＜/h2＞ ＜input type="button" value="Add Floating Div" /＞ ＜div id="containerDiv" style="background-color:Purple;height:800px;width:600px;"/＞ ＜/form＞ ＜/body＞ ＜/html＞

五. 声明性Dropzone

　　我们可以在一个页面上拖动HTML元素，然后让它们位于其投放位置。然而，为了使该行为真正有用，当投放发生时，应该抛出一个事件。而且，所抛出的事件应该依赖于在何处发生投放。换句话说，需要把行为添加到一个给定HTML元素-由它来把这一行为转换成一个"dropzone"或"投放目标"，可以使用相同的方法把漂浮行为添加到一个HTML div标签以便把它转换成一个可拖放的元素。

在下列例子中，我将向你展示Atlas是如何支持dropzone概念的。在它的当前状态中，Atlas并不支持与其支持漂浮元素一样的方式来提供一种现成的行为以支持创建dropzone元素。然而，它确实实现了一个DragDropList元素和一个DraggableListItem元素的行为（这两个元素联用，允许你创建能够通过拖放重新排序的列表）。如果你想进一步探讨这一功能，你可以在网上找到若干使用DragDropList行为的好例子，例如，《Introduction to Drag And Drop with Atlas》。

dragdropzone行为的主要不利条件是，它仅与具有DragDropList行为的项一起工作。为了确定我上面描述的开放端点的dropzone功能的类型（它将与预定义的漂浮行为一同使用），你需要用JavaScript编写你自己的dropzone行为类。幸好，这并不困难。

Atlas把若干OOP扩展添加到JavaScript中以使加强其扩展能力，例如命名空间，抽象类和接口。在编写你自己的dropzone行为时你还要利用这些工具。如果你分析一下AtlasUIDragDrop.js文件的源码（可以使用Visual Studio调试器），那么你会发现在那里定义了若干接口，这包括一个相应于Sys.UI.DragSource而另一个相应于Sys.UI.DropTarget。事实上，FloatingBehavior类和DraggableListItem类都实现了Sys.UI.DragSource接口，而Sys.UI.DropTarget被DragDropList类所实现。这两个接口的代码如下所示：

Sys.UI.IDragSource = function() { this.get_dataType = Function.abstractMethod; this.get_data = Function.abstractMethod; this.get_dragMode = Function.abstractMethod; this.onDragStart = Function.abstractMethod; this.onDrag = Function.abstractMethod; this.onDragEnd = Function.abstractMethod; } Sys.UI.IDragSource.registerInterface('Sys.UI.IDragSource'); Sys.UI.IDropTarget = function() { this.get_dropTargetElement = Function.abstractMethod; this.canDrop = Function.abstractMethod; this.drop = Function.abstractMethod; this.onDragEnterTarget = Function.abstractMethod; this.onDragLeaveTarget = Function.abstractMethod; this.onDragInTarget = Function.abstractMethod; } Sys.UI.IDropTarget.registerInterface('Sys.UI.IDropTarget');

为什么你需要实现这些接口而不是简单地编写一些新类来支持拖放和dropzone呢？秘密是，在后台，还有一个类DragDropManager，负责实际协调可拖放元素与dropzone元素之间的交互，并且它仅仅知道如何与实现IDragSource或IDropTarget接口的类一起工作。这个DragDropManager类注册对于每一个可拖放的元素来说哪些dropzone是合法的目标，并处理MouseOver事件以决定何时一个dropzone上面具有一个可拖放的元素，以及其它你不需要自己做的大量事情。事实上，它处理得如此完美，以至后面你要编写的dropzone行为需要极少的代码。首先，创建一新的JavaScript文件DropZoneBehavior.js。我把我的JavaScript文件放到了一个子目录scriptLibrary下，但是，这对于实现dropzone行为是不必要的。然后，把下列代码复制到你的文件中：

Type.registerNamespace('Custom.UI'); Custom.UI.DropZoneBehavior = function() { Custom.UI.DropZoneBehavior.initializeBase(this); this.initialize = function() { Custom.UI.DropZoneBehavior.callBaseMethod(this， 'initialize'); //把我们自己注册为一个拖放目标. Sys.UI.DragDropManager.registerDropTarget(this);  } this.dispose = function() { Custom.UI.DropZoneBehavior.callBaseMethod(this， 'dispose'); } this.getDescriptor = function() { var td = Custom.UI.DropZoneBehavior.callBaseMethod(this， 'getDescriptor'); return td; }  //IDropTarget成员. this.get_dropTargetElement = function() { return this.control.element; } this.drop = function(dragMode， type， data) {  alert('dropped'); } this.canDrop = function(dragMode， dataType) { return true; } this.onDragEnterTarget = function(dragMode， type， data) {} this.onDragLeaveTarget = function(dragMode， type， data) {} this.onDragInTarget = function(dragMode， type， data) {} } Custom.UI.DropZoneBehavior.registerClass('Custom.UI.DropZoneBehavior'，  Sys.UI.Behavior， Sys.UI.IDragSource，  Sys.UI.IDropTarget， Sys.IDisposable); Sys.TypeDescriptor.addType('script'， 'DropZoneBehavior'，  Custom.UI.DropZoneBehavior);

我需要解释一下这个类。首先要注意从第二（以"Custom.UI.DropZoneBehavior.registerClass"开始）到最后一行代码。这是上面定义的dropZoneBehaviorClass注册到Atlas的位置。registerClass方法的第一个参数相应于类的名字，第二个参数则相应于基类的名字。第三个参数相应于实现新类的接口。接下来的一行代码使你的类可用于声明性标记脚本。现在，我们回到开始，"Type.registerNamespace"方法允许你注册你的定制命名空间。下一行使用一个匿名方法语法声明我们的新类。这里使用了JavaScript面向对象的设计思想，这对于设计Atlas行为来说是必要的。在该匿名方法中，类方法Initialize，Dispose和getDescriptor都是一些简单的标准方法，用于所有的行为类，而且在这个简单实现中，你仅需要调用基方法（也就是，从这个例子的第二到最后一行代码中所指定的基类的方法）即可。你要做的唯一特别的一点是，使用在Initialize方法中的Sys.UI.DragDropManager来注册拖放目标。这里是大部分的拖放"魔术"所在。

然后，你实现IDropTarget方法。在这个例子中，你仅实现了两个方法：this.canDrop与this.drop。对于canDrop，你只是简单地返回true。其实，更有趣的逻辑可以放到其中，譬如实现有哪些div标签被实际拖放到一个给定的目标上，或者决定相应于不同类型的漂浮div，在拖放它们时各自的不同行为；但是，在此情况下，你仅想简单地实现IDropTarget-它允许任何漂浮div拖动到其上。你的"drop"方法的实现只是个框架而已。当一个漂浮元素被拖放到你的拖放目标之一时，将显示一条警告消息指示已经发生了一些事情。现在，你已经有了一个拖放行为，它能够与我们在上一个例子中所用的漂浮行为一同工作。

现在你应该创建一个页面来展示你的新定制的dropzone行为。为此，你可以在前面示例的基础上来实现。在Atlas脚本管理器中，除注册AtlasUIDragDrop脚本以外，你还要注册你的新的DropZoneBehavior脚本：

＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞ ＜Scripts＞ ＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞ ＜atlas:ScriptReference Path="scriptLibrary/DropZoneBehavior.js" /＞ ＜/Scripts＞ ＜/atlas:ScriptManager＞

然后，你要把一个新的div标签添加到HTML体，这可以被用作一个拖放的目标：

＜div style="background-color:Red;height:200px;width:200px;"＞ ＜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 id="dropZone" style="background-color:cornflowerblue;height:200px;width:200px;"＞ Drop Zone ＜/div＞

最后，你需要添加一个声明性标记元素以添加你的定制DropZone行为到你计划用作一个dropzone元素的div。该XML标记应该有如下所示形式：

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

刚才的代码把一个dropzone添加到最初声明的拖放示例中。当你在dropzone上拖动元素时，将出现一个警告消息框。你可以扩展这些代码以便使你的定制dropzone行为的drop方法实现一些更为有趣的事情，例如激活当前的页面中的其它JavaScript事件，甚至使用Atlas调用一个web服务-由它来为你处理服务器端代码。

六. 强制性Dropzone

　　为了使用JavaScript代替声明性脚本创建dropzone，仅需要使用定制的dropzone行为添加如下的JavaScript函数来初始化你的dropzone元素：

function addDropZoneBehavior(ctrl){ var dropZone = new Sys.UI.Control(ctrl); var dropZoneBehavior = new Custom.UI.DropZoneBehavior(); dropZone.get_behaviors().add(dropZoneBehavior); dropZoneBehavior.initialize(); }

为了"钩住"一切，你可以调用这个来自Atlas pageLoad()方法的addDropZoneBehavior函数（就象你在前面的示例中操作addFloatingBehavior函数一样）。这样可以把正确的行为依附到它们各自的HTML元素并且复制上面你使用声明性标记所创建的拖放和dropzone功能。如果你想使此能够动态工作，那么你只要添加你为上一个示例编写的createDraggableDiv()函数即可。作为一种参考，下面是创建可编程dropzone的完整代码：

＜%@ Page Language="C#" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml" ＞ ＜head id="Head1" runat="server"＞ ＜title＞Imperative Drop Targets＜/title＞ ＜script type="text/javascript"＞ function addFloatingBehavior(ctrl， ctrlHandle){ var floatingBehavior = new Sys.UI.FloatingBehavior(); floatingBehavior.set_handle(ctrlHandle); var dragItem = new Sys.UI.Control(ctrl); dragItem.get_behaviors().add(floatingBehavior); floatingBehavior.initialize(); } function addDropZoneBehavior(ctrl){ var dropZone = new Sys.UI.Control(ctrl); var dropZoneBehavior = new Custom.UI.DropZoneBehavior(); dropZone.get_behaviors().add(dropZoneBehavior); dropZoneBehavior.initialize(); } function pageLoad(){ addDropZoneBehavior($('dropZone')); addFloatingBehavior($('draggableDiv')，$('handleBar'));  } ＜/script＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞ ＜Scripts＞ ＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞ ＜atlas:ScriptReference Path="scriptLibrary/DropZoneBehavior.js" /＞ ＜/Scripts＞ ＜/atlas:ScriptManager＞ ＜h2＞Imperative Drop Targets with javacript＜/h2＞  ＜div style="background-color:Red;height:200px;width:200px;"＞ ＜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 id="dropZone" style="background-color:cornflowerblue; height:200px;width:200px;"＞Drop Zone＜/div＞ ＜/form＞ ＜/body＞ ＜/html＞

除了dropzone行为以外，你可能还想写你自己的漂浮行为。例如，默认地，带有漂浮行为的元素只是简单地停留在你放下它们的位置。然而，你可能想扩展这一特征以便你的漂浮div会"退回"到它原来的位置-当你把它放到一个投放区外的时候。另外，当你拖动它时，你可能想改变被拖放的元素看上去的样子，或使它透明，或改变它的颜色，或全部替换原来的拖动图像。所有这些都可以通过创建实现IDragSource接口的一种行为来实现，这与你创建一个实现IDropTarget接口的定制类是思路一样。

七. 总结

本文应该为你扩展Atlas提供的基本拖放功能来创建你自己的行为和功能提供了一个起点。而且，你可以基于此创建控件；还可以在此基础上继续创建使用声明性标记实现你的行为的Atlas扩展控件，或创建使用Atlas行为自动创建HTML元素的服务器端控件。这样以来，你就可以进一步创建高级服务器端控件-或者是静态的声明性的，或者是强制性的，却更复杂些但也更灵活。当然，这是一个超出本文题目的问题。不过，我希望，此后有人会尝试服务器端Atlas编程，正象本文所作的客户端Atlas脚本编程尝试一样。