帮酷LOGO
0 0 评论
文章标签:asp-net  ATL  asp  拖动  Atlas  

介绍

本教程旨在帮助读者了解微软AJAX扩展技术的某些方面如何工作。 AJAX扩展旨在简化AJAX-style功能的开发。 然而,与所有技术一样,要使用一个工具,理解Atlas所概括的底层技术是很重要的。 利用AJAX更容易 ASP.NET AJAX抽象的关键之一是编制的new XML标记语法能使 coding. 使用XML标记,开发人员可以声明方式修改代码。 然而,有时开发人员可能希望能够以编程方式更改代码,为了实现这一点,她需要理解标记抽象的作用,而在标记抽象中,她实际处理的是由微软开发的good JavaScript和一些自定义JavaScript库。 为了演示Atlas声明模型和编程模型之间的关系,我将通过一系列示例,以声明和编程的方式完成相同的任务。 我将演示如何使用PreviewDragDrop库文件执行基本drag-drop操作以及设置放置区域。

背景

在我写这篇文章的时候,微软对 ASP.NET 2做了一些重要的修改,因为Beta版的side-effect破坏了大部分原始的Atlas实现,并且需要对原始示例进行一些返工。 这些经过修改的示例适用于 ASP.NET AJAX的Beta 2. 将来的AJAX扩展版本可能会影响本教程的准确性。 我将尝试在 new 扩展可用时更新代码的版本。 AJAX扩展适用于. NET 2.0,当它发布时将与Orcas一起工作。

I。声明式拖放拖放

第一个任务是使用XML标记将drag-drop行为添加到 div 标记。通过拖放,我只表示拖动对象的能力,然后将它的放置在任何位置。 在本教程的后面部分中,将在将对象拖放到指定的放置目标时实际执行的更复杂的行为将在。 要配置网页以使用 ASP.NET AJAX,需要将 Microsoft.Web. Extensions.dll 安装到全局程序集缓存中。 你还需要对库 Microsoft.Web.Preview.dll的引用。 finally,你需要使用以下条目配置你的Web.Config 文件:

<system.web><pages><controls><addtagPrefix="asp"namespace="Microsoft.Web.UI"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, 
 Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><addtagPrefix="asp"namespace="Microsoft.Web.UI.Controls"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, 
 Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><addtagPrefix="asp"namespace="Microsoft.Web.Preview.UI"assembly="Microsoft.Web.Preview"/></controls></pages></system.web>

你需要向. aspx 页面添加一个Atlas脚本管理器控件,并将它的配置为使用 PreviewDragDrop 库 file:

<asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"/><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"/></Scripts></asp:ScriptManager>

添加 div 要使它的可以拖动的对象,并确保它具有拖动手柄:

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

最后,添加将使你 div 可以拖动:

<scripttype="text/xml-script"><pagexmlns:script="http://schemas.microsoft.com/xml-script/2005"><components><controlid="draggableDiv"><behaviors><floatingBehaviorhandle="handleBar"/></behaviors></control></components></page></script>

然后,你应该有一个可以拖动 div 标记。该示例演示了使用声明性模型和AJAX扩展的简单性和易用性。 在使用 AJAX future引入的术语中,你只使用声明性标记将浮动行为添加到HTML元素。

II。强制拖放拖放

要使用编程模型来完成同样的事情,需要更多的代码,但不是更多。 重要的是要明白,当你向页面中添加一个AJAX扩展脚本管理器组件时,你实际上要向页面加载AJAX扩展JavaScript库。 以一种独立于浏览器的方式的AJAX扩展库,以及其他一些信息,提供client-side类 DOM,所以无法为你提供工具,以便你 code. 这些client-side类还允许你向HTML元素添加行为。

要将 switch 转换为命令式模型,需要用两个JavaScript函数替换XML标记。 第一个是向HTML元素添加浮动行为的通用脚本。 它利用了AJAX扩展client-side类来实现这里目的:

<script type="text/javascript">
 function addFloatingBehavior(ctrl, ctrlHandle){ 
 $create(Sys.Preview.UI.FloatingBehavior, 
 {'handle': ctrlHandle},null, null, ctrl);
 }
</script>

函数接受两个参数值: 要使它的可以拖动的HTML元素,以及作为拖动行为的拖动手柄的HTML元素。 new $create 函数封装了行为的实例化和初始化例程。 将在本教程的其余部分使用 addFloatingBehavior 实用函数。

现在,当页面加载时需要调用" addFloatingBehavior(...)"函数。 令人惊讶的是,这是编码这个例子的最困难的部分。 脚本管理器不只是创建对AJAX扩展JavaScript库的引用,我已经阅读推测,它实际上将库脚本加载到DOM库中。 在任何情况下,这意味着库仅在加载页面上的其他内容之后才加载。 我们的问题是,没有标准方法可以使添加浮动行为的代码在加载库之后运行;如果我们试图在库加载之前运行JavaScript错误,我们将无法找到所有的AJAX扩展方法。

实际上有一些解决方案,但是最简单的方法是使用名为" pageLoad()"的定制AJAX扩展事件,该事件仅在加载库之后被调用。 将浮动行为添加到 div 在第一次加载页面时标记( 但是在加载了库脚本之后),你只需编写以下内容:

<script type="text/javascript">
 function pageLoad(){
 addFloatingBehavior(document.getElementById('draggableDiv'),
 document.getElementById('handleBar'));
 }
</script>

因此,可以通过使用一个用" $get()"替换" document.getElementById()"的AJAX扩展脚本 shorthand 来编写这里方法:

<script type="text/javascript">
 function pageLoad(){
 addFloatingBehavior($get('draggableDiv'),$get('handleBar'));
 }
</script>

再一次,你有一个可以拖动 div 这与可以拖动的行为完全一样 div 你使用声明性模型编写。

III。动态拖动拖放

由于声明性模型比命令式模型更简洁,为什么你要编写自己的JavaScript来处理AJAX扩展行为。 如果你想动态添加行为,你可能需要滚动你自己的JavaScript。 声明性模型的一个限制是只能处理最初在页面上的对象。 如果你开始动态地向页面添加对象,则不能使用声明性模型向它们添加浮动行为。 使用命令性模型,另一方面,你可以。

在前面的示例中,你将用创建浮动函数的函数替换" pageLoad()"函数 div 下面的JavaScript函数将创建一个 div 标记与另一个 div 标签嵌入用作车把,然后插入 div 将浮动行为添加到当前页中,finally 将浮动行为添加到 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 = $get('containerDiv').appendChild(panel);
 addFloatingBehavior(panel, panelHandle);
}

然后只需要向页面添加一个按钮,该按钮调用" createDraggableDiv()"函数。 new HTML正文应该类似于下面这样:

<inputtype="button"value="Add Floating Div"onclick="createDraggableDiv();"/><divid="containerDiv"style="background-color:Purple;height:800px;width:600px;"/>

这将允许你在页面中添加任意数量的拖拉元素,从而在你以声明方式以声明方式理解AJAX扩展和使用它之间的关系时展示你的能力和灵活性。 作为参考,下面是动态拖放示例的完整代码:

<%@PageLanguage="C#"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Imperative Drag and Drop II</title><scripttype="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 = $get('containerDiv').appendChild(panel);
 addFloatingBehavior(panel, panelHandle);
 }
 function addFloatingBehavior(ctrl, ctrlHandle){
 $create(Sys.Preview.UI.FloatingBehavior,
 {'handle':
 ctrlHandle}, null, 
 null, ctrl);
 }</script></head><body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"/><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"/></Scripts></asp:ScriptManager><h2>Imperative Drag and Drop Code with javascript: 
 demonstrate dynamic loading of behaviors</h2><inputtype="button"value="Add Floating Div"onclick="createDraggableDiv();"/><divid="containerDiv"style="background-color:Purple;height:800px;width:600px;"/></form></body></html>

IV。声明性 Dropzones

能够将HTML元素拖到页面上并让它们保留在你留下的地方,这是。 但是,为了使这里行为真正有用,在发生drop时应该引发事件。 此外,引发的事件应取决于放置的位置。 换句话说,需要将行为添加到给定的HTML元素中,将它的转换为"dropzone"或者"放置目标",这样就可以将浮动行为添加到HTML中。 div 标记将它的转换为拖放元素。

在下面的例子中,我将展示Atlas如何支持dropzones的概念。 在当前状态下,Atlas不支持创建dropzone元素的out-of-the-box行为,它的方式与浮动元素的方式相同。 但是,它实现了 dragdroplist 元素和 draggablelistitem 元素的行为,当这些元素一起使用时,允许你创建可以通过拖放来重新排序的列表。 阿特拉斯,如果你想探索这功能再多,有几个好的在网络上使用的dragdroplist 行为的实例,例如拖drop.简介

dragdropzone行为的主要缺点是它只适用于使用 dragdroplist 行为修饰的项。 这个功能在你的处置中是相当特殊的。 为了获得上面描述的open-ended dropzone功能,也可以使用预定义的浮动行为,你需要在JavaScript中编写自己的dropzone行为类。 幸运的是,这并不是全部。

Atlas为JavaScript添加了几个OOP扩展,以使它更强大。扩展。抽象类和接口。 你将利用这些优势来编写你自己的dropzone行为。 如果你对着窗帘,查看 PreviewDragDrop.js 文件中的源代码,( 包含在目录 C:Program FilesMicrosoft ASP.NETASP.NET 2.0 AJAX扩展 v1.0.610 25 ScriptLibraryDebug中) 会找到几个接口,其中包括 Sys.UI.DragSource 和一个用于 Sys.UI.DropTarget的接口。 实际上,FloatingBehavior 类和 draggablelistitem 类都实现 Sys.UI.DragSource 接口,而 Sys.UI.DropTargetdragdroplist 类实现。 这两个接口的代码如下所示:

Sys.Preview.UI.IDragSource = function Sys$Preview$UI$IDragSource() {
}
Sys.Preview.UI.IDragSource.prototype = {
 get_dragDataType: Sys$Preview$UI$IDragSource$get_dragDataType,
 getDragData: Sys$Preview$UI$IDragSource$getDragData,
 get_dragMode: Sys$Preview$UI$IDragSource$get_dragMode,
 onDragStart: Sys$Preview$UI$IDragSource$onDragStart,
 onDrag: Sys$Preview$UI$IDragSource$onDrag,
 onDragEnd: Sys$Preview$UI$IDragSource$onDragEnd
}
Sys.Preview.UI.IDragSource.registerInterface('Sys.Preview.UI.IDragSource');
Sys.Preview.UI.IDropTarget = function Sys$Preview$UI$IDropTarget() {}
 Sys.Preview.UI.IDropTarget.prototype = {
 get_dropTargetElement: Sys$Preview$UI$IDropTarget$get_dropTargetElement,
 canDrop: Sys$Preview$UI$IDropTarget$canDrop,
 drop: Sys$Preview$UI$IDropTarget$drop,
 onDragEnterTarget: Sys$Preview$UI$IDropTarget$onDragEnterTarget,
 onDragLeaveTarget: Sys$Preview$UI$IDropTarget$onDragLeaveTarget,
 onDragInTarget: Sys$Preview$UI$IDropTarget$onDragInTarget
 }
 Sys.Preview.UI.IDropTarget.registerInterface('Sys.Preview.UI.IDropTarget');

为什么你需要实现这些接口而不是简单地写出品牌 new 类来支持拖放。拖放和 dropzones。 秘密是,在幕后,第三类,叫做 DragDropManager, 实际上是协调dropzone可拖动的元素和元素之间的交互作用,它只知道如何使用类,实现 IDragSource 或者 IDropTargetDragDropManager 类注册哪些dropzones合法的目标对于每个可拖动的元素,处理 MouseOver 事件以确定当dropzone可拖动的元素,和一百其他的事情你不想做自己。 事实上,它很好地表现了你要编写的dropzone行为非常简单。 第一,createa new JavaScript file i DropZoneBehavior.js. 年一到myJavaScriptfile之下,但subdirectory塔scriptlibrary this isnot称为in order to make dropzonebehavior工作。 接下来,将下面的代码复制到你的file: 中

Type.registerNamespace('Custom.UI');
Custom.UI.DropZoneBehavior = function(value) {
 Custom.UI.DropZoneBehavior.initializeBase(this, [value]);
 initialize: function() {
 Custom.UI.DropZoneBehavior.callBaseMethod(this, 'initialize');
 // Register ourselves as a drop target. Sys.Preview.UI.DragDropManager.registerDropTarget(this);
 },
 dispose: function() {
 Custom.UI.DropZoneBehavior.callBaseMethod(this, 'dispose');
 },
 getDescriptor: function() {
 var td = Custom.UI.DropZoneBehavior.callBaseMethod(this,
 'getDescriptor');
 return td;
 },
 // IDropTarget members. get_dropTargetElement: function() {
 returnthis.get_element();
 },
 drop: function(dragMode, type, data) {
 alert('dropped');
 },
 canDrop: function(dragMode, dataType) {
 returntrue;
 },
 onDragEnterTarget: function(dragMode, type, data) {
 },
 onDragLeaveTarget: function(dragMode, type, data) {
 },
 onDragInTarget: function(dragMode, type, data) {
 }
}
Custom.UI.DropZoneBehavior.registerClass('Custom.UI.DropZoneBehavior',
 Sys.UI.Behavior, Sys.Preview.UI.IDragSource,
 Sys.Preview.UI.IDropTarget, Sys.IDisposable);if(typeof(Sys)!= "undefined") {Sys.Application.notifyScriptLoaded();}

我需要稍微解释一下这个类。 首先值得注意的是第二行到最后一行" Custom.UI.DropZoneBehavior.registerClass "。上定义的DropZoneBehavior 类在AJAX扩展中注册。 registerClass 方法的第一个参数采用类的名称。 第二个参数获取基类。 其余参数获取由 new 类实现的接口。 下面的代码行引发一个自定义事件,指示脚本已经完成加载( 为了支持 Safari,这是需要的,这不是本机实现的)。 现在回到顶部,"类型。 registerNamespace"方法允许你注册自定义命名空间。 下一行使用匿名方法语法声明 new 类。 这是一种编写我不熟悉的JavaScript的方法,但是对于创建面向对象的JavaScript对象非常重要,并且对于设计Atlas行为非常重要。 在匿名方法中,类方法 initializedisposegetDescriptor 只是用于所有行为类的标准方法,在这个实现中,所有需要做的都是调用基方法( 即,在这里代码示例的第二行中指定的基类的方法)。 惟一要特别做的事情是在 initialize 方法中使用 Sys.Preview.UI.DragDropManager 注册拖放目标。 这是使drag-drop魔术发生的行为。

接下来,你将实现 IDropTarget 方法。 在本例中,你只实现了两种方法," this.canDrop and"" this.drop "for对于" canDrop",你只需要返回 yf_terminology_true@#@#@#true_yf_terminology 可以在这里放置更有趣的逻辑来确定浮动 div 标签实际上可以放在一个给定的目标上,甚至可以确定什么类型的浮动 div 在删除时,s 会做什么,但是在这种情况下,你只需要 IDropTarget的bare-bones实现,允许任何浮动。 div 放到上面。 你的"放置"方法的实现类似于裸骨骼。 将浮动元素拖放到某个放置目标上时,将抛出一个警告消息,指示发生了什么事情。 就是这样了。你现在拥有了一个拖放行为,它与前面示例中使用的浮动行为一起使用。

你现在应该编写一个页面来显示你的new 定制dropzone行为。 你可以基于前面的示例来完成这里操作。 在脚本管理器中,除了注册PreviewDragDrop脚本之外,还需要注册 new DropZoneBehavior脚本:

<asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript"/><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop"/><asp:ScriptReferencePath="scriptLibrary/DropZoneBehavior.js"/></Scripts></asp:ScriptManager>

接下来,你需要添加一个 new div 标记到可以用作放置目标的HTML正文:

<divstyle="background-color:Red;height:200px;width:200px;"><divid="draggableDiv"style="height:100px;width:100px;background-color:Blue;"><divid="handleBar"style="height:20px;width:auto;background-color:Green;"></div></div></div><divid="dropZone"style="background-color:cornflowerblue;
 height:200px;width:200px;"> Drop Zone</div>

最后,你需要添加一个声明性标记元素,以将你的自定义DropZone行为添加到 div 你计划用作dropzone元素。 XML标记应如下所示:

<scripttype="text/xml-script"><pagexmlns:script="http://schemas.microsoft.com/xml-script/2005"xmlns:JavaScript="Custom.UI"><components><controlid="dropZone"><behaviors><JavaScript:DropZoneBehavior/></behaviors></control><controlid="draggableDiv"><behaviors><floatingBehaviorhandle="handleBar"/></behaviors></control></components></page></script>

你刚编写的代码基本上应该向原始的声明性拖放示例添加一个放置区域。 在拖放区域中拖放拖动元素时,应立即显示警告消息。 你可以扩展一下这里代码,以使你的自定义dropzone降法的行为做更有趣的事,如射击引起其他的JavaScript事件都会在当前页面中,甚至调用了网页服务,为你使用 server-side ASP.NET AJAX,这将反过来过程代码。

V。命令式 Dropzones

要使用JavaScript而不是声明性脚本创建 dropzones,只需添加以下JavaScript函数即可使用自定义dropzone行为初始化dropzone元素:

function addDropZoneBehavior(ctrl){
 $create(Custom.UI.DropZoneBehavior, {}, null, null, ctrl);
}

要完成所有操作,请从 ASP.NET AJAX pageLoad() 方法调用这里 addDropZoneBehavior 函数,如前面的addFloatingBehavior 函数示例中所做的那样。 这将把正确的行为附加到各自的HTML元素,并使用声明性标记复制上面创建的拖放功能。 如果你希望动态地进行这项工作,只需添加前面的动态示例所编写的createDraggableDiv() 函数。 作为参考,下面是创建编程dropzones的完整代码:

<%@PageLanguage="C#"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>Imperative Drop Targets</title><scripttype="text/javascript">function addFloatingBehavior(ctrl, ctrlHandle){
 $create(Sys.Preview.UI.FloatingBehavior,
 {'handle': ctrlHandle}, null, null,
 ctrl);
 }
 function addDropZoneBehavior(ctrl){
 $create(Custom.UI.DropZoneBehavior,
 {}, null, null, ctrl);
 }
 function pageLoad(){
 addDropZoneBehavior($get('dropZone'));
 addFloatingBehavior($get('draggableDiv'),$get('handleBar'));
 }</script></head><body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewScript"/><asp:ScriptReferenceName="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop"/><asp:ScriptReferencePath="scriptLibrary/DropZoneBehavior.js"/></Scripts></asp:ScriptManager><h2>Imperative Drop Targets with javacript</h2><divstyle="background-color:Red;height:200px;width:200px;"><divid="draggableDiv"style="height:100px;width:100px;background-color:Blue;"><divid="handleBar"sstyle="height:20px;width:auto;background-color:Green;"></div></div></div><divid="dropZone"style="background-color:cornflowerblue;
 height:200px;width:200px;">Drop Zone</div></form></body></html>

除了dropzone行为之外,你还需要编写自己的浮动行为。 例如默认情况下,使用浮动行为装饰的元素只是停留在你删除它们的地方。 你可能希望扩展这里选项,以便你的浮动 div 将它的放置到放置区域之外时,将返回到它的原始位置。 另外,你可能希望更改拖动的元素在拖动时的外观,方法是使拖动的元素透明。改变颜色或者完全替换拖动图像。 所有这些都可以通过创建实现 IDragSource 接口的行为来完成,该行为与创建实现 IDropTarget 接口的自定义类相同。

本教程的大部分内容是对我在四月份CTP文章中编写的原始Atlas教程的直接翻译。 尽管Atlas的许多概念仍然保留在AJAX扩展中,有些已经通过螺杆的转动改变了,因此在原始教程中,曾经拟合和准确的东西不再是那么好了。 例如在最初的Atlas教程中,我可以讨论XML脚本和其他 ASP.NET AJAX功能的其他技术,它们现在是两种不同级别的支持和对微软的兴趣的技术。 还有更细微的差别,我想使本教程的当前版本有些过时,就好像我说的一切都有轻微的口音;换句话说,我认为它已经失去了翻译的一些原始优雅。 我相信本教程对于那些试图开始使用微软实现的人来说还是很有用的,但在这方面,主要的实用工具可能是使用Atlas来查看技术的语义,并需要一个参考来了解技术的变化。 我希望这些样本能帮助你克服一些你不断增加的痛苦,因为写作已经帮助了我。



文章标签:asp  asp-net  拖动  ATL  Atlas  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语