Monday, January 30, 2006

How to create drag and drop lists using ATLAS

One of the biggest reasons why ATLAS is so great is because of the set of rich client-side controls it includes, such as draggable lists. Before ATLAS, I had to rely on libraries such as script.aculo.us and tool-man.org, both of these great libraries, but they require additional effort to integrate them into you ASP .NET web application. With ATLAS that is no longer the case.

To give you an idea of the great drag and drop capabilities built-in to ATLAS, I recommend taking a look at samples from Wilco Bauwer. The generic steps required to build your own draggable list are as follows:

Choose a HTML control that will contain your "draggable" items and add and as many "dragabble" items to it. In this example I'm using a div element with id "draggablePanel":


<div id="draggableContainer">
<div id="draggableItem1">My draggable item 1</div>
<div id="draggableItem2">My draggable item 2</div>
</div>

Next you need to add the dragDropList behavior to each draggable item and to the "draggable container" inside the XML script element of the page, without forgetting to add a reference to the AtlasUIDragDrop library:


<page 
xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<add
src="ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js" />
</references>
<components>
<control id="draggableContainer">
<behaviors>
<dragDropList dataType="HTML"
acceptedDataTypes="'HTML'" dragMode="Move">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
</dragDropList>
</behaviors>
</control>
<control id="draggableItem1">
<behaviors>
<draggableListItem handle="draggableItem1" />
</behaviors>
</control>
<control id="draggableItem2">
<behaviors>
<draggableListItem handle="draggableItem2" />
</behaviors>
</control>



That's it! Can't get any easier than this, right?

Monday, January 23, 2006

Customizing ATLAS DragDropList class

For those new to ATLAS, ATLAS (http://atlas.asp.net) is a new library in development by Microsoft of client and server side components for ASP .NET 2.0, it helps incorporate the use AJAX into web applications, but it is a lot more than an AJAX library, as it also provides a set of controls that leverage DHTML and JavaScript to provide a rich user experience in web apps similar to that found in Google maps and flickr.

I'm currently working on extending the DragDropList included in this library to allow detecting when an item is added or removed and issue a call to the server using AJAX. Thanks to the help of Garbin (http://forums.asp.net/AddPost.aspx?PostID=1176694). I was able to customize this class and I'd like to share my learning with those pursuing a similar goal.
  1. Because the Web.UI.DragDropList is a sealed class, I could not inherit from it, and instead of modifying the source code (AtlasUIDragDrop.js) I chose to create a custom class starting with the code from Web.UI.DragDropList and adding my changes to a class I named Web.UI.CustomDragDropList
  2. Next inside the getDescriptor function I added the following events:

    //Step 1: Add events
    td.addEvent('removed', true);
    td.addEvent('added', true);

  3. Next I added the properties (these can be added at the top level of the class, outside any function):

    //Step 2: Create Events
    this.added = this.createEvent();
    this.removed = this.createEvent();

  4. Finally inside the onDragEnd function I added the removed event invocation and inside the drop function I added the added event invocation as follows:

    //Step 3: Invoke remove method
    this.removed.invoke(this, Web.EventArgs.Empty);
    //Step 4: Invoke added method
    this.added.invoke(this, Web.EventArgs.Empty);

The usage of this list from the ASP page is as follows:

<control id="draggableList">
<behaviors>
<customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemRemoved" added="itemAdded"> ....