Section 11.1. Adding Drag and Drop to a Control


11.1. Adding Drag and Drop to a Control

In the early days of ASP.NET 2.0, drag-and-drop demos were common and popular. However, they were originally targeted at Web Parts development, which is also available with Atlas (see Chapter 3). One of the problems with the drag-and-drop effect in Web Parts controls was the fact that this worked only in Internet Explorer, unless you used the Atlas Web Parts.

Enter Atlas. One of the components included with the library is the DragOverlayExtender component. This name consists of three parts, and each of them adds a feature to the whole story:


Drag

This is a drag-and-drop effect.


Overlay

During the drag operation with this effect, its background is transparent, so you see the elements lying underneath.


Extender

The effect can be used to extend a "common" web control.

With the DragOverlayExtender feature, every panel (that is, every <asp:Panel> control) can be enriched to support cross-browser drag and drop. This turns out to be quite convenient, since implementing drag and drop is painful enough, and making it work in all common browsers is a real drag.

11.1.1. Simple Drag and Drop

Implementing drag and drop using Atlas is simple. First of all, you need an ASP.NET Panel control you want to drag. In this example, it is a small status bar showing the number of messages in the user's inbox:

 <asp:Panel Css  runat="server">   <p>     You currently have <asp:Label  runat="server"></asp:Label>     e-mail messages in your <a href="http://www.hotmail.com/">inbox</a>.   </p> </asp:Panel> 

We'll simulate an inbox for purposes of the example. In this case, the "inbox" will contain a random number of new email messages (as seems to be the number of mails showing on the Windows XP login screen). The code to create our random number of messages is as follows:

 <script runat="server">   protected void Page_Load(object sender, EventArgs e)   {     inbox.Text = new Random().Next(0, 100).ToString();   } </script> 

The CSS-style class mailbox, referenced by the Panel control, does not contain anything extraordinary, but it should sport a border and a width setting:

 <style type="text/css"> .mailbox { border: solid 2px black; width: 150px; } </style> 

Now all that's left is to add the DragOverlayExtender component. Inside the component definition, the DragOverlayProperties element provides the following properties you will need:


Enabled

Activates the effect


TargetControlID

References the panel you want to make draggable

In case you are wondering why this component contains an Enabled property, this gives you the ability to switch the effect on and off programmatically in script code.


So this control makes the inbox panel draggable anywhere (more or less) on the page:

 <atlas:DragOverlayExtender runat="server">   <atlas:DragOverlayProperties Enabled="true" TargetControl /> </atlas:DragOverlayExtender> 

Example 11-1 shows the complete example, including another panel with dummy text (so that we can drag the inbox somewhere).

Example 11-1. Making a panel draggable

 DragDrop.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">   protected void Page_Load(object sender, EventArgs e)   {     inbox.Text = new Random().Next(0, 100).ToString();   } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head  runat="server">   <title>Atlas</title>   <style type="text/css">   .box { border: solid 2px black; }   .mailbox { border: solid 2px black; width: 150px; }   </style> </head> <body>   <form  runat="server">     <atlas:ScriptManager  runat="server">     </atlas:ScriptManager>     <asp:Panel  Css runat="server">       <h1>My Portal</h1>       <p>         Welcome to your personal portal, powered by Microsoft Atlas.         The mail status window is freely draggable. Welcome to your personal portal, powered by Microsoft Atlas.         The mail status window is freely draggable. Welcome to your personal portal, powered by Microsoft Atlas.         The mail status window is freely draggable.       </p>       [...]     </asp:Panel>     <asp:Panel Css  runat="server">       <p>         You currently have <asp:Label  runat="server"></asp:Label>         mails in your <a href="http://www.hotmail.com/">inbox</a>.       </p>     </asp:Panel>     <atlas:DragOverlayExtender runat="server">       <atlas:DragOverlayProperties Enabled="true" TargetControl />     </atlas:DragOverlayExtender>   </form> </body> </html> 

Run the example and view it in a current browser: you can drag and drop the inbox wherever you like within the confines of the defined page (for example, you can't drag the panel to the bottom of the screen, because that's outside the page as defined in HTML). As you can see in Figure 11-1, the underlying panel with the dummy text shows through during dragging.

Figure 11-1. You can drag the inbox around, in all recent browsers


Drag and Drop via XML Markup

By looking at the generated markup code when running the example, you can see how the DragDropExtender control is converted into xml-script something Atlas can understand:

 <script type="text/xml-script"><page xmlns:script="http://schemas.microsoft.com /xml-script/2005">   <references> <add src="/books/3/491/1/html/2//Atlas/WebResource.axd?d=C7UOhGsewrGIha2wCve95aAmkWoxoK5decp1tPOlkRBGtoEo -EVk4OCZBuflIv2c0DNC4IQCwoy9if-KVO9Pc0_QICsw7MErceKxF-Vbner1Udz3lU8MXx2U_xs1aK7p0 &amp;t=632799255520000000" />   </references>   <components>     <control >       <behaviors>         <floatingBehavior handle="DragPanel" />       </behaviors>     </control>   </components> </page></script> 

So internally, this all gets transformed into XML script, and the whole magic is just an Atlas behavior: floatingBehavior (see Chapter 7). The code for it is placed in the AtlasUIDragDrop.js library (see Appendix C for a list of libraries that ship with with Atlas).


11.1.2. Personalized Drag and Drop

A limitation in the application shown in Example 11-1 is that although you can freely move the inbox panel on the page, whenever you leave the page and return to it later, the most recent position is not persisted. But this limitation can be overcome. You can save the current position in a persistent cookie and whenever the page is loaded, Atlas can dynamically assign a CSS class to the element using the position data from the cookie.

Once again, code reuse is the key. ASP.NET 2.0 already comes with a means for personalization in the form of profile properties (see "For Further Reading" for information regarding ASP.NET 2.0 profiles), and Atlas supports these in several of its controls, including DragDropExtender. To use personalization 222nd thereby be able to preserve the location of the dragged box, set the ProfileProperty property of the DragOverlayProperties component.

As a value, you provide a profile property that you define in the Web.config file with this markup:

 <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">   <system.web>     <anonymousIdentification enabled="true" />     <profile>       <properties>         <add name="DragPanelPosition" allowAnonymous="true" />       </properties>     </profile>     [...]   </system.web>   <microsoft.web>     <profileService enabled="true"       setProperties="DragPanelPosition"       getProperties="DragPanelPosition" />     [...]   </microsoft.web> </configuration> 

If you do not include the element <anonymousIdentification enabled="true" />, only authenticated users (users who are logged in or otherwise authenticated) get a profile and can have their panel position saved.


Apply these changes to the existing Web.config in your application. Here is the DragDropExtender declaration within the page, updated with a reference to the profile property that will be used to store the location of the box:

 <atlas:DragOverlayExtender runat="server">   <atlas:DragOverlayProperties Enabled="true" TargetControl     ProfileProperty="DragPanelPosition" /> </atlas:DragOverlayExtender> 

Finally, you have to enable the profile script service on your page by adding the <atlas:ProfileScriptService> element. Make sure to set AutoSave to "true" so that the updated panel position is saved upon every drag-and-drop operation.

 <atlas:ProfileScriptService runat="server" AutoSave="true" /> 

When you reload the page, the element is returned to its saved position. If you look closely, you will see that the page is rendered first with the panel in its default position, and then the panel is moved to its destination. In the code download for this book (http://www.oreilly.com/catalog/atlas), you will find a working version of this example under the filename DragDropProfile.aspx.

In the App_Data directory of your web site, the profile database has been created. It is available in the form of the ASPNETDB.MDF file. If you open it, you will see that in the aspnet_Profile database there is an entry for the panel position (see Figure 11-2).

Figure 11-2. The position of the panel is saved in a profile property





Programming Atlas
Programming Atlas
ISBN: 0596526725
EAN: 2147483647
Year: 2006
Pages: 146

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net