Atlas: Floating Server Elements in ASP.Net 2.0

In the first two parts in the Atlas article series, we took a look at the rich functionality offered by the Atlas UpdatePanel and the UpdateProgress Controls.

In this article, we will see how easily Atlas allows setting up a server element as a floating element, which the end users of the web page can drag to any location in the web page. This functionality is provided by the DragOverlayExtender control in Atlas.

Typically, a Panel control is set to be a floating element; however, you can specify any server control.

Pre-requisites

The sample code is built using Atlas July 2006 CTP Preview and ASP.Net 2.0.

Atlas website: http://atlas.asp.net

Implementation Steps

Step 1: Create a new Web Site using the "Atlas" Web Site template.

Note that if you do not use this template, you will need to setup the requisite Atlas elements manually.

Step 2: Design the web pages in the web site. Add server controls to the web pages and add code as required.

For the purpose of sample, we will setup a web page with a header bar, a side bar and a section for the contents. The main control to demonstrate the Atlas feature is the GridView control. Since the sample is focused on the Atlas feature, and not the actual Gridview control, the background code and markup is not included.

For experimenting with this functionality, you can setup any web page, add any server control(s) and specify any server control(s) as floating element(s).

Step 3: Add an Atlas DragOverlayExtender control. Within the DragOverlayProperties, set the Enabled attribute and specify the TargetControlID to the server element that you want to allow the user to drag across the web page.

. . .

<atlas:DragOverlayExtender ID="Drag_grdContacts" runat="server">

<atlas:DragOverlayProperties TargetControlID="grdContacts" Enabled="true" />

</atlas:DragOverlayExtender>

. . .

Voila! That's the only action required for making a server control "drag"-able.

The following images show the initial form and the form after the user has dragged the GridView to a different location within the web form.

Drag Area

The user can drag the floating element anywhere in the body of the document. When the control is dragged outside the document body, it will snap back to the previous position before it was dragged out.

If you notice this behavior, you can just increase the height/width properties of the web page body to overcome the limited moving space.

Maintaining the last dragged position for a user:

You can setup the web page to persist the last position of the dragged server control as follows:

Add the Atlas ProfileScriptService control to the web page and set it's AutoSave property to "true".
Add a ProfileProperty attribute to the DragOverlayProperties. This Profile property will be used to save the location of the floating element.
In the web.config file, add the Profile in the system.web element. http://msdn2.microsoft.com/en-us/library/2y3fs9xs.aspx
In the web.config file, add the profile properties to setProperties and getProperties elements of the <profileservice> element within the <microsoft.web> element. You can add all properties by specifying an asterisk.
If anonymous profiles are enabled, you will need to setup anonymous identification too.

The above settings will persist the location of the floating server control to the ASP.Net Profile and the control will be loaded in the same position as the user left it, when the user navigates to the web page the next time.

Usage Scenarios

The Atlas DragOverlayExtender can be used to setup floating elements in an ASP.Net web page. Typical uses of this feature could be to display the current company stock rate or a small chat interface for customer support. The user can drag the floating element around on the web page to a convenient location.

Comparison to Web Parts

The similarity between the floating element functionality and web parts is that, in both cases you empower the end user to drag content within the web page to locations convenient to the end user.

However, the functionality of both features is very different. Web Parts provide a layout to the whole page and allow structure, drag movement, zones, closing/modifying the listed web parts and web-part connections. The Atlas feature allows the server control to be "floated" anywhere on the page.

Atlas Series Articles

Conclusion

This article was aimed at providing an introductory look at the DragOverlayExtender control in Atlas.

Disclaimer

This article is for purely educational purposes and is a compilation of notes, material and my understanding on this subject. Any resemblance to other material is an un-intentional coincidence and should not be misconstrued as malicious, slanderous, or any anything else hereof