|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
以前很热炒跨平台,主要是由于硅谷挑战微软霸主地位的热情,但是冷静下来后,跨平台往往不是那么一回事。假设你有个软件,所谓的跨平台,你只需要为第二个平台上重新编译一次就行了,这样很难么?asp.net|程序|鼠标 择要本文将具体切磋Atlas中的声明性编程与强迫性编程之间的干系,及怎样用之在一个web客户端完成拖放功效。下图为本文响应示例程序运转了局快照。
一.简介
本文旨在匡助读者了解微软的Atlas手艺的某些方面的事情道理。Atlas的完成主旨是简化AJAX作风的Web程序开辟。但是,就象一切别的手艺一样,为了更好地利用这个工具,你必要深切了解Atlas笼统的内涵手艺。Atlas笼统的一个关头的地方是新的XML标志语法,目标是完成使用Atlas举行编程更加简单。借助于XML标志,开辟者可以以声明性体例修正他们的代码。但是,偶然当一个开辟者大概想以编程体例来改动其代码时,他必要了解,在标志笼统层上面,他实践在与一些JavaScript及一些微软开辟的定制JavaScript库打交道。为了展现Atlas声明性模子与可编程模子之间的干系,我们将会商几个例子,在这些示例中,我们将利用两种模子来完成不异的功效。我将向你展现怎样利用AtlasUIDragDrop库文件来实行基础的拖放操纵和创建安排区。
[背景]
当我写作本文时,Atlas仍处于其beta测试阶段,而且在持续修正中。本文中的这些示例合用于Atlas的四月CTP版本;因而,Atlas的更新的刊行版本大概会影响本文的准确性。别的,还要注重,Atlas仅能与.NET2.0一同事情。
二.声明性拖放
为了把拖放举动增加到一个div标签,第一项义务是利用Atlas标志。经由过程拖放,我仅想完成可以拖放一个工具而且让它位于你想把它安排的中央。当把一个工具安排到一个指定的点时,在实践开辟中所体现出的举措将在前面会商。为了设置你的网页以便利用Atlas,你必要从微软站点把Microsoft.Web.Atlas.dll文件下载到你的bin文件夹下而且利用以下出口设置你的web.config文件:
<system.web>
<pages>
<controls>
<addnamespace="Microsoft.Web.UI"
assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>
<addnamespace="Microsoft.Web.UI.Controls"
assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>
</controls>
</pages>
</system.web>
接上去,你必要把一个Atlas剧本办理器控件增加到你的.aspx页面而且利用AtlasUIDragDrop库来设置:
<atlas:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>
</Scripts>
</atlas: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标签。该示例展现了却合Atlas利用声明性体例的复杂性和简单性。在Atlas所引进的术语中,你仅利用了声明性标志来把漂泊举动增加到一个HTML元素。
<P> 三.强迫性拖放
为了利用编程体例来完成不异的功效,我们必要举行一些编程,可是不必要较多的编码。你必需分明,当你把一个Atlas剧本办理器组件增加到你的页面上时,你实践上是鄙人命令把AtlasJavaScript库加载到你的页面。这个Atlas库供应了扩大DOM的客户端类,而且供应同意你在一个扫瞄器中举行编码的工具(只管如今在Safari兼容性方面还存在一些成绩)。这些客户端类还同意你把你的HTML元素增加到举动。
为了切换到一个强迫性模子,你必要用两个JavaScript函数来取代XML标志。第一个函数是一个一般剧本用于把漂泊举动增加到一个HTML元素上。它使用了Atlas客户端类来完成此功效:
<scripttype="text/javascript">
functionaddFloatingBehavior(ctrl,ctrlHandle){
//创立新的漂泊举动工具
varfloatingBehavior=newSys.UI.FloatingBehavior();
//漂泊举动类具有一个Handle属性
floatingBehavior.set_handle(ctrlHandle);
//把工具参考值的为Atlas客户端控件
vardragItem=newSys.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函数。说假话,这是编写这个示例中最有难度的编码部分。剧本办理器并非复杂地创立一个到AtlasJavaScript库的援用,我推想它实践把该库剧本装载到DOM。在任何情形下,这意味着,只要页面中的别的统统都装载后该库才失掉加载。如许以来,我们所面对的成绩在于,装载该库后,没有尺度的办法来使我们的增加漂泊举动的代码运转;而且假如我们在加载该库前运转它,那末我们能够复杂地天生JavaScript毛病-由于我们挪用的一切的Atlas办法都不克不及被发明。
实在,存在好几种办法能够来办理这个成绩,可是最简单的办法是利用一个定制的Atlas事务pageLoad()-这个事务实践只在装载这些库后才挪用它。为了把漂泊举动增加到你的div标签中,当第一次加载页面时(可是在库剧本装载后),你仅必要编写以下代码:
<scripttype="text/javascript">
functionpageLoad(){
addFloatingBehavior(document.getElementById(draggableDiv),document.getElementById(handleBar));
}
</script>
这可使用一种Atlas剧本速记体例来誊写-用"$()"取代"document.getElementById()":
<scripttype="text/javascript">
functionpageLoad(){
addFloatingBehavior($(draggableDiv),$(handleBar));
}
</script>
在此,能够看到,你有一个可拖动的div,其举动与你利用声明性模子编写的可拖动的div完整分歧。
四.静态拖放
既然声明性模子比强迫性模子更加明晰,那末为何你还要编写本人的JavaScript来处置Atlas举动呢?实在,这类声明性模子的一个限定是,你只能利用一入手下手就位于该页面上的工具。假如你入手下手静态地把工具增加到该页面,那末你没法利用声明性模子来把漂泊举动增加到其上。不外,借助于强迫性模子,你可以完成。
基于后面的例子,你要用一个据请求创立漂泊div的函数来取代pageLoad()函数。以下JavaScript函数会创立一个嵌有另外一个div标签(用作一个handlebar)的div标签,然后把该div标签拔出到以后的页面,而且最初把漂泊举动增加到div标签:
functioncreateDraggableDiv(){
varpanel=document.createElement("div");
panel.style.height="100px";
panel.style.width="100px";
panel.style.backgroundColor="Blue";
varpanelHandle=document.createElement("div");
panelHandle.style.height="20px";
panelHandle.style.width="auto";
panelHandle.style.backgroundColor="Green";
panel.appendChild(panelHandle);
vartarget=$(containerDiv).appendChild(panel);
addFloatingBehavior(panel,panelHandle);
}
然后,你只必要把一个按钮增加到该挪用createDraggableDiv()函数的页面。如今,新的HTML体看上往具有以下情势:
<inputtype="button"value="AddFloatingDiv"/>
<divid="containerDiv"style="background-color:Purple;height:800px;width:600px;"/>
这将同意你把良多的可拖放元素增加到你的页面上,这申明了,一旦你了解了在以声明体例利用Atlas和以编程体例利用它之间的干系,那末Atlas将体现出壮大的能力和天真性。作为参考,上面是静态拖放示例的完全完成代码:
<%@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>ImperativeDragandDropII</title>
<scripttype="text/javascript">
functioncreateDraggableDiv(){
varpanel=document.createElement("div");
panel.style.height="100px";
panel.style.width="100px";
panel.style.backgroundColor="Blue";
varpanelHandle=document.createElement("div");
panelHandle.style.height="20px";
panelHandle.style.width="auto";
panelHandle.style.backgroundColor="Green";
panel.appendChild(panelHandle);
vartarget=$(containerDiv).appendChild(panel);
addFloatingBehavior(panel,panelHandle);
}
functionaddFloatingBehavior(ctrl,ctrlHandle){
varfloatingBehavior=newSys.UI.FloatingBehavior();
floatingBehavior.set_handle(ctrlHandle);
vardragItem=newSys.UI.Control(ctrl);
dragItem.get_behaviors().add(floatingBehavior);
floatingBehavior.initialize();
}
</script>
</head>
<body>
<formid="form1"runat="server">
<atlas:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>
</Scripts>
</atlas:ScriptManager>
<h2>ImperativeDragandDropCodewithjavascript:
demonstratedynamicloadingofbehaviors</h2>
<inputtype="button"value="AddFloatingDiv"/>
<divid="containerDiv"style="background-color:Purple;height:800px;width:600px;"/>
</form>
</body>
</html>
<P> 五.声明性Dropzone
我们能够在一个页面上拖动HTML元素,然后让它们位于其投放地位。但是,为了使该举动真正有效,当投放产生时,应当抛出一个事务。并且,所抛出的事务应当依附于在那边产生投放。换句话说,必要把举动增加到一个给定HTML元素-由它来把这一举动转换成一个"dropzone"或"投放方针",可使用不异的办法把漂泊举动增加到一个HTMLdiv标签以便把它转换成一个可拖放的元素。
鄙人列例子中,我将向你展现Atlas是怎样撑持dropzone观点的。在它确当前形态中,Atlas其实不撑持与其撑持漂泊元素一样的体例来供应一种现成的举动以撑持创立dropzone元素。但是,它的确完成了一个DragDropList元素和一个DraggableListItem元素的举动(这两个元素联用,同意你创立可以经由过程拖放从头排序的列表)。假如你想进一步切磋这一功效,你能够在网上找到多少利用DragDropList举动的好例子,比方,《IntroductiontoDragAndDropwithAtlas》。
dragdropzone举动的次要倒霉前提是,它仅与具有DragDropList举动的项一同事情。为了断定我下面形貌的开放端点的dropzone功效的范例(它将与预界说的漂泊举动一同利用),你必要用JavaScript编写你本人的dropzone举动类。幸亏,这其实不坚苦。
Atlas把多少OOP扩大增加到JavaScript中以使增强其扩大才能,比方定名空间,笼统类和接口。在编写你本人的dropzone举动时你还要使用这些工具。假如你剖析一下AtlasUIDragDrop.js文件的源码(可使用VisualStudio调试器),那末你会发明在那边界说了多少接口,这包含一个响应于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(){
vartd=Custom.UI.DropZoneBehavior.callBaseMethod(this,getDescriptor);
returntd;
}
//IDropTarget成员.
this.get_dropTargetElement=function(){
returnthis.control.element;
}
this.drop=function(dragMode,type,data){
alert(dropped);
}
this.canDrop=function(dragMode,dataType){
returntrue;
}
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:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>
<atlas:ScriptReferencePath="scriptLibrary/DropZoneBehavior.js"/>
</Scripts>
</atlas:ScriptManager>
然后,你要把一个新的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;">
DropZone
</div>
最初,你必要增加一个声明性标志元素以增加你的定制DropZone举动到你企图用作一个dropzone元素的div。该XML标志应当有以下所示情势:
<scripttype="text/xml-script">
<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<controlid="dropZone">
<behaviors>
<DropZoneBehavior/>
</behaviors>
</control>
<controlid="draggableDiv">
<behaviors>
<floatingBehaviorhandle="handleBar"/>
</behaviors>
</control>
</components>
</page>
</script>
方才的代码把一个dropzone增加到最后声明的拖放示例中。当你在dropzone上拖动元素时,将呈现一个告诫动静框。你能够扩大这些代码以便使你的定制dropzone举动的drop办法完成一些更加风趣的事变,比方激活以后的页面中的别的JavaScript事务,乃至利用Atlas挪用一个web服务-由它来为你处置服务器端代码。
<P> 六.强迫性Dropzone
为了利用JavaScript取代声明性剧本创立dropzone,仅必要利用定制的dropzone举动增加以下的JavaScript函数来初始化你的dropzone元素:
functionaddDropZoneBehavior(ctrl){
vardropZone=newSys.UI.Control(ctrl);
vardropZoneBehavior=newCustom.UI.DropZoneBehavior();
dropZone.get_behaviors().add(dropZoneBehavior);
dropZoneBehavior.initialize();
}
为了"钩住"统统,你能够挪用这个来自AtlaspageLoad()办法的addDropZoneBehavior函数(就象你在后面的示例中操纵addFloatingBehavior函数一样)。如许能够把准确的举动依靠到它们各自的HTML元素而且复制下面你利用声明性标志所创立的拖放和dropzone功效。假如你想使此可以静态事情,那末你只需增加你为上一个示例编写的createDraggableDiv()函数便可。作为一种参考,上面是创立可编程dropzone的完全代码:
<%@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>ImperativeDropTargets</title>
<scripttype="text/javascript">
functionaddFloatingBehavior(ctrl,ctrlHandle){
varfloatingBehavior=newSys.UI.FloatingBehavior();
floatingBehavior.set_handle(ctrlHandle);
vardragItem=newSys.UI.Control(ctrl);
dragItem.get_behaviors().add(floatingBehavior);
floatingBehavior.initialize();
}
functionaddDropZoneBehavior(ctrl){
vardropZone=newSys.UI.Control(ctrl);
vardropZoneBehavior=newCustom.UI.DropZoneBehavior();
dropZone.get_behaviors().add(dropZoneBehavior);
dropZoneBehavior.initialize();
}
functionpageLoad(){
addDropZoneBehavior($(dropZone));
addFloatingBehavior($(draggableDiv),$(handleBar));
}
</script>
</head>
<body>
<formid="form1"runat="server">
<atlas:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>
<atlas:ScriptReferencePath="scriptLibrary/DropZoneBehavior.js"/>
</Scripts>
</atlas:ScriptManager>
<h2>ImperativeDropTargetswithjavacript</h2>
<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;">DropZone</div>
</form>
</body>
</html>
除dropzone举动之外,你大概还想写你本人的漂泊举动。比方,默许地,带有漂泊举动的元素只是复杂地停止在你放下它们的地位。但是,你大概想扩大这一特性以便你的漂泊div会"退回"到它本来的地位-当你把它放到一个投放区外的时分。别的,当你拖动它时,你大概想改动被拖放的元素看上往的模样,或使它通明,或改动它的色彩,或全体交换本来的拖动图象。一切这些都能够经由过程创立完成IDragSource接口的一种举动来完成,这与你创立一个完成IDropTarget接口的定制类是思绪一样。
七.总结
本文应当为你扩大Atlas供应的基础拖放功效来创立你本人的举动和功效供应了一个出发点。并且,你能够基于此创立控件;还能够在此基本上持续创立利用声明性标志完成你的举动的Atlas扩大控件,或创立利用Atlas举动主动创立HTML元素的服务器端控件。如许以来,你就能够进一步创立初级服务器端控件-大概是静态的声明性的,大概是强迫性的,却更庞大些但也更天真。固然,这是一个超越本文标题的成绩。不外,我但愿,今后有人会实验服务器端Atlas编程,正象本文所作的客户端Atlas剧本编程实验一样。一般的指的.net就是跟java相对的那种,主要是做企业级应用的。你如果想学这个,主要就是学C#和数据库。(ASP.NET好像很重要的,应该也要学的,ASP.NET上好像可以结合VB和C#等多种语言,但是微软主推C#) |
|