asp.net 2.0+atlas write mouse drag and drop program

Asp.net| Program | mouse

　　 This article explores in detail the relationship between declarative programming and mandatory programming in Atlas and how to use it to implement drag-and-drop functionality on a Web client. The following figure shows the results snapshot for the corresponding sample program in this article.

　　I. INTRODUCTION

This article is intended to help readers understand how Microsoft's Atlas technology works in some aspects. The goal of Atlas is to simplify the development of AJAX-style Web applications. However, like all other technologies, in order to better use this tool, you need to have an in-depth understanding of the intrinsic technology of Atlas abstraction. A key to the Atlas abstraction is the new XML markup syntax, which is designed to make it easier to program with Atlas. With XML tags, developers can modify their code in a declarative manner. However, sometimes when a developer might want to change his code programmatically, he needs to understand that underneath the tag abstraction layer, he is actually dealing with JavaScript and some custom JavaScript libraries developed by Microsoft. To demonstrate the relationship between the Atlas declarative model and the programmable model, we'll discuss a few examples where we'll use two models to achieve the same functionality. I'll show you how to use the Atlasuidragdrop library file to perform basic drag-and-drop operations and set up a drop area.

[ background ]

When I was writing this article, Atlas was still in its beta test phase and was continuing to modify it. These examples in this article apply to the April CTP version of Atlas, so an updated release of Atlas may affect the accuracy of this article. Also, be aware that Atlas works only with. NET 2.0.

　　Two. Declarative drag-and-drop

To add drag-and-drop behavior to a DIV tag, the first task is to use the Atlas tag. By dragging and dropping, I just want to implement the ability to drag and drop an object and make it where you want it to be placed. When an object is placed at a specified point, the action shown in the actual development is discussed later. To configure your Web page to use Atlas, you will need to download the Microsoft.Web.Atlas.dll files from the Microsoft site to your Bin folder and configure your Web.config files using the following portal:

<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>
Next, you need to add an Atlas Script manager control to your. aspx page and use the Atlasuidragdrop Library to configure:

<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
<Scripts>
<atlas:scriptreference scriptname= "Atlasuidragdrop"/>
</Scripts>
</atlas:ScriptManager>
Then, add the div object you want to drag and make sure it has a drag-and-drop handle:

<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>
Finally, add the tag script that will make your div a drag-and-drop:

<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>
At this point you should have a div tag that you can drag and drop. This example shows the simplicity and ease of using declarative methods with Atlas. In the terminology introduced in Atlas, you only use declarative markup to add floating behavior to an HTML element.

　　 three. Mandatory drag-and-drop

In order to achieve the same function programmatically, we need to do some programming, but do not need more coding. You have to understand that when you add an Atlas Script manager component to your page, you are actually ordering to load the Atlas JavaScript library onto your page. This Atlas library provides client classes that extend the DOM and provides tools that allow you to encode in a browser (although there are still some problems with Safari compatibility). These client classes also allow you to add your HTML elements to the behavior.
To switch to a mandatory model, you need to use two JavaScript functions instead of XML tags. The first function is a generic script that adds the float behavior to an HTML element. It leverages the Atlas client class to perform this function:

<script type= "Text/javascript"
function Addfloatingbehavior (CTRL, Ctrlhandle) {
Create a new floating behavior object
var floatingbehavior = new Sys.UI.FloatingBehavior ();
The float behavior class has a handle property
Floatingbehavior.set_handle (Ctrlhandle);
The Atlas client control for the object reference value
var dragitem = new Sys.UI.Control (ctrl);
To get a collection of behaviors from the Atlas control
Add our own floating behavior
Dragitem.get_behaviors (). Add (Floatingbehavior);
Internal JavaScript to run the float behavior
Floatingbehavior.initialize ();
}
</script>
This function uses two parameter values: The HTML element you want to drag and drop, and the drag-and-drop handle HTML element that implements the drag-and-drop behavior. You then instantiate a new Atlas client behavior object. The float behavior has a handle attribute-you pass the handle of the HTML element to it. Then, you need to create a new client control object based on what you want to make it a drag-and-drop control. Converting your div tag into an Atlas client control enables you to add the atlas behavior to it. You can use the Get_behaviors () method to return a collection of behaviors and use the Add method to add a new behavior to your HTML object. Finally, you invoke the Initialize () method of the behavior object to allow the behavior itself to be configured internally. We'll use this tool function all the time in the rest of this article.

Now, when the page is loaded, you need to call the Addfloatingbehavior function. To tell you the truth, this is the most difficult coding part of writing this example. The script manager does not simply create a reference to the Atlas JavaScript library, and I suppose it actually loads the library script into the DOM. In any case, this means that the library is loaded only after everything else in the page is loaded. So, the problem we face is that after loading the library, there is no standard way to run the code that adds the float behavior, and if we run it before loading the library, we can simply generate JavaScript errors-because all of the Atlas methods we call are not found.

In fact, there are several ways to solve this problem, but the easiest way is to use a custom Atlas event pageload ()-this event actually calls it only after loading the libraries. To add floating behavior to your div tag, when the page is first loaded (but after the library script is loaded), you only need to write the following code:

<script type= "Text/javascript"
function Pageload () {
Addfloatingbehavior (document.getElementById (' Draggablediv '), document.getElementById (' HandleBar '));
}
</script>
This can be written using an Atlas script shorthand-with "$ ()" instead of "document.getElementById ()":

<script type= "Text/javascript"
function Pageload () {
Addfloatingbehavior ($ (' Draggablediv '), $ (' handlebar '));
}
</script>
Here, you can see that you have a drag div that behaves exactly the same as the drag div you wrote with the declarative model.

　　 four. Dynamic drag and Drop

Since declarative models are clearer than mandatory models, why do you have to write your own javascript to handle the atlas behavior? In fact, one of the limitations of this declarative model is that you can only use objects that are located on the page from the outset. If you start adding objects to the page dynamically, you can't use declarative models to add floating behavior to them. However, with the help of a mandatory model, you can achieve it.

Based on the previous example, you will replace the pageload () function with a function that is required to create a floating div. The following JavaScript function creates a div tag that is embedded with another div tag (used as a handlebar), inserts the DIV tag into the current page, and finally adds the float behavior to the div tag:

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);
}
Then, you just need to add a button to the page that calls the Createdraggablediv () function. The new HTML body now looks like the following form:

<input type= "button" value= "Add floating Div"/>
<div id= "Containerdiv" style= "background-color:purple;height:800px;width:600px;" />
This will allow you to add a lot of drag-and-drop elements to your page, which shows that once you understand the relationship between using Atlas in a declarative way and using it programmatically, Atlas will show great power and flexibility. As a reference, here is the complete implementation code for the dynamic drag-and-drop example:

<%@ Page language= "C #"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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>
<body>
<form id= "Form1" runat= "Server"
<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
<Scripts>
<atlas:scriptreference scriptname= "Atlasuidragdrop"/>
</Scripts>
</atlas:ScriptManager>
Demonstrate dynamic loading of behaviors <input type= "button" value= "Add floating Div"/>
<div id= "Containerdiv" style= "background-color:purple;height:800px;width:600px;" />
</form>
</body>

　　 Five. Declarative Dropzone

We can drag HTML elements on one page and leave them in their place of placement. However, in order for the behavior to be truly useful, an event should be thrown when the launch occurs. Also, the event that is thrown should depend on where the drop occurs. In other words, you need to add behavior to a given HTML element-by which it converts the behavior into a "dropzone" or "drop target"-you can use the same method to add the float behavior to an HTML div tag to convert it into a drag-and-drop element.

In the following example, I will show you how Atlas supports the Dropzone concept. In its current state, Atlas does not support the same way that it supports floating elements to provide an out-of-the-box behavior to support the creation of dropzone elements. However, it does implement the behavior of a dragdroplist element and a Draggablelistitem element (these two elements are associated, allowing you to create a list that can be reordered by dragging and dropping). If you want to explore this feature further, you can find several good examples of using dragdroplist behavior on the web, such as Introduction to Drag and Drop with Atlas.

The main disadvantage of dragdropzone behavior is that it works only with items that have dragdroplist behavior. To determine the type of dropzone functionality that I described above for the open endpoint (which will work with predefined floating behaviors), you need to write your own dropzone behavior class in JavaScript. Luckily, it's not difficult.

Atlas adds several OOP extensions to JavaScript to enhance their scalability, such as namespaces, abstract classes, and interfaces. You will also use these tools when writing your own dropzone behavior. If you analyze the source code of the Atlasuidragdrop.js file (you can use the Visual Studio debugger), you will find that there are several interfaces defined there, This includes one corresponding to the Sys.UI.DragSource and the other corresponding to the Sys.UI.DropTarget. In fact, both the Floatingbehavior class and the Draggablelistitem class implement the Sys.UI.DragSource interface, and Sys.UI.DropTarget are implemented by the Dragdroplist class. The code for the two interfaces looks like this:

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 ');
Why do you need to implement these interfaces instead of simply writing some new classes to support drag-and-drop and dropzone? The secret is that, in the background, there is also a class dragdropmanager that actually coordinates the interaction between the drag-and-drop element and the dropzone element, and it only knows how to work with classes that implement IDragSource or IDropTarget interfaces. This Dragdropmanager class registers which dropzone are legitimate targets for each drag-and-drop element, and handles the MouseOver event to determine when a dropzone has a drag-and-drop element on it, along with a number of other things you don't need to do yourself. In fact, it's handled so perfectly that you need very little code for the dropzone behavior you want to write later. First, create a new JavaScript file dropzonebehavior.js. I put my JavaScript file in a subdirectory scriptlibrary, but this is not necessary to implement dropzone behavior. Then, copy the following code into your file:

Type.registerNamespace (' Custom.ui ');
Custom.UI.DropZoneBehavior = function () {
Custom.UI.DropZoneBehavior.initializeBase (this);
This.initialize = function () {
Custom.UI.DropZoneBehavior.callBaseMethod (this, ' Initialize ');
Register ourselves as a drag-and-drop target.
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 members.
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);
I need to explain this class. The first thing to note is to start with the second (starting with "Custom.UI.DropZoneBehavior.registerClass") to the last line of code. This is the location defined above for Dropzonebehaviorclass registration to Atlas. The first parameter of the RegisterClass method corresponds to the name of the class, and the second parameter corresponds to the name of the base class. The third parameter corresponds to the interface that implements the new class. The next line of code makes your class available for declarative markup scripts. Now that we're back to the beginning, the "Type.registerNamespace" method allows you to register your custom namespace. The next line uses an anonymous method syntax to declare our new class. The JavaScript object-oriented design idea is used here, which is necessary for the design of the atlas behavior. In this anonymous method, class methods Initialize,dispose and GetDescriptor are simple standard methods for all behavior classes, and in this simple implementation you only need to call the base method (i.e., From the second to last line of this example, the method of the base class specified in the code. The only special thing you need to do is to register the drop target with the Sys.UI.DragDropManager in the Initialize method. This is where most of the drag and drop "magic" lies.

Then you implement the IDropTarget method. In this example, you have implemented only two methods: This.candrop and This.drop. For Candrop, you simply return True. In fact, more interesting logic can be put into it, such as the implementation of which div tags are actually dragged onto a given target, or decide corresponding to the different types of floating div, in the drag and drop their different behavior; You simply want to implement idroptarget-it allows any floating div to drag onto it. The implementation of your "drop" method is only a framework. When a floating element is dragged onto one of your drag-and-drop targets, a warning message is displayed indicating that something has happened. Now you have a drag-and-drop behavior that works with the floating behavior we used in the previous example.

Now you should create a page to showcase your new custom dropzone behavior. To do this, you can do this on the basis of the previous example. In the Atlas script manager, you will also register your new Dropzonebehavior script in addition to registering the Atlasuidragdrop script:

<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
<Scripts>
<atlas:scriptreference scriptname= "Atlasuidragdrop"/>
<atlas:scriptreference path= "Scriptlibrary/dropzonebehavior.js"/>
</Scripts>
</atlas:ScriptManager>
Then you'll add a new div tag to the HTML body, which can be used as a drag-and-drop target:

<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>
Finally, you need to add a declarative markup element to add your custom dropzone behavior to the div you plan to use as a dropzone element. The XML tag should have the following form:

<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>
The code just added a dropzone to the drag-and-drop example that was originally declared. When you drag an element on a dropzone, a warning message box appears. You can extend the code to make your custom dropzone behavior's drop method implement something more interesting, such as activating other JavaScript events on the current page, or even using Atlas to invoke a Web service--it handles server-side code for you.

　　 Six. Mandatory Dropzone

To create dropzone using JavaScript instead of declarative scripting, you only need to use the custom dropzone behavior to add the following JavaScript functions to initialize your dropzone element:

function Adddropzonebehavior (ctrl) {
var dropZone = new Sys.UI.Control (ctrl);
var dropzonebehavior = new Custom.UI.DropZoneBehavior ();
Dropzone.get_behaviors (). Add (Dropzonebehavior);
Dropzonebehavior.initialize ();
}
To "hook" everything, you can call this Adddropzonebehavior function from the Atlas Pageload () method (as you did in the previous example Addfloatingbehavior function). This allows you to attach the right behavior to their respective HTML elements and copy the drag-and-drop and Dropzone functions you create using declarative markup. If you want to make this work dynamically, you just add the Createdraggablediv () function you wrote for the previous example. As a reference, here is the complete code to create a programmable dropzone:

<%@ Page language= "C #"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<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>
<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>
<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>
In addition to dropzone behavior, you may also want to write about your own floating behavior. For example, by default, elements with floating behavior simply stay where you drop them. However, you may want to extend this feature so that your floating div "returns" to its original position-when you put it outside of a drop zone. In addition, when you drag it, you might want to change what the dragged element looks like, or make it transparent, or change its color, or replace all the original drag image. All of this can be done by creating a behavior that implements the IDragSource interface, which is the way you would create a custom class that implements the IDropTarget interface.

　　 Seven. Summary

This article should provide you with a starting point for extending the basic drag-and-drop functionality provided by Atlas to create your own behavior and functionality. Also, you can create controls based on this, and you can continue to create a Atlas extension control that uses declarative markup to implement your behavior, or create a server-side control that uses the atlas behavior to automatically create HTML elements. In this way, you can further create Advanced Server-side controls-either statically declarative, or mandatory, but more complex but also more flexible. Of course, this is a problem beyond the title of this article. However, I hope that someone will then try server-side Atlas programming, just like the client Atlas scripting attempt in this article.