DragDropList changes in the ATLAS March CTP release

As many of you know the ATLAS March CTP release is out as of last week. I recently downloaded it and found out that some of my samples broke. Specifically the customization of the DragDropList I had made to add support for a dragged and dropped events.

I have posted an updated version of my CustomDragDropList class that works with the March CTP release. I primarily took the source code from this release and added my customizations. The only additional change I had to make was to rename any references to the Web.UI namespace to Sys.UI instead.

Additionally I had to remove the "templateLayout" XML-Script element from the "dropCueTemplate" element, apparently that is no longer necessary and leaving it breaks the code. A sample usage of my CustomDragDropList should looks like this:

<control id="queueList">
 <behaviors>
  <customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemAdded" added="itemRemoved" >
   <dropCueTemplate />
  </customDragDropList>
 </behaviors>
</control>

Creating a custom server control for ATLAS

When working with drag and drop lists in Atlas one task that you'll find yourself doing over and over again is adding the draggableListItem behavior to the controls that you wish to make "draggable" in your page's XML-Script. In many cases you may want to dynamically generate these controls with server side code based on results from a database query, for instance. For this reason, I thought it would make sense to build a custom web control to achieve this goal.

Rather than starting from scratch, I chose to start my control inheriting from the Panel control. This allows you to add any arbitrary content to the "draggable" item control, as it is translated to a span tag in HTML. In order to make the control "ATLAS-enabled" you need to implement the IScriptControl interface. The control's class declaration should be something similar to this:

public class DraggablePanel : System.Web.UI.WebControls.Panel, IScriptControl

Next you need to make sure to get a reference of the page's ScriptManager and register the control, and optionally you may want to add a reference to the AtlasUIDragDrop library to save you from doing that in the main page:

protected override void OnInit(EventArgs e)
{
  base.OnInit(e);
  if (!DesignMode)
  {
    ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
    if (scriptManager != null)
    {
      scriptManager.RegisterControl(this);
      scriptManager.RegisterScriptReference(
                FrameworkScript.AtlasUIDragDrop);
     }
  }
}

Next, the only method from the IScriptControl interface that must be implemented is the RenderScript method. The goal of the custom control is to output the following XML-Script:

<control id="webPart1">
  <behaviors>
    <draggablelistitem handle="webPart1Title">
  </behaviors>
</control>

The RenderScript implementation will output the XML-Script above, using the control's id and the panel control's id as the handle:

public void RenderScript(ScriptTextWriter writer)
{
    //Outputs control tag
    GenericScriptComponent gsc = new GenericScriptComponent(
      new ScriptTypeDescriptor("control", 
      ScriptNamespace.Default));
    //Outputs behaviors tag
    gsc.ID = this.ClientID;
    GenericScriptComponent draggableBehavior = 
      new GenericScriptComponent(
        new ScriptTypeDescriptor("draggableListItem", 
                                 ScriptNamespace.Default));
    draggableBehavior.AddValueProperty("handle", this.ClientID);
    gsc.AddCollectionItem("behaviors", draggableBehavior);
    ((IScriptObject)gsc).RenderScript(writer);
}

Upcoming talk on AJAX/ATLAS

I will be showcasing some ATLAS demos at the next Pittsburgh's .NET User Group meeting on Wednesday, Feb 22nd:
http://www.pghdotnet.org/Events/258.aspx

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?

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"> ....

BizTalk 2004 certification released?

The list of exams in Microsoft certification website includes the following test for BizTalk 2004:
Exam 74-135: Developing E-Business Solutions Using Microsoft BizTalk Server 2004

However as of 4/19 there is no link to the exam overview page, but if you replace the exam number in the url for any other test page, i.e. http://www.microsoft.com/learning/exams/74-135.asp it shows that this test has been available since Jan 17, 2005. It may be just a mistake on the site, anyway I've been looking forward for this exam to be released and I'm planning on taking it sometime soon.

Visual Studio .NET 2005 (Whidbey) Beta 2 released!

At last! Beta 2 of Whidbey has been released to MSDN subscribers.
http://lab.msdn.microsoft.com/vs2005/get/

I wonder if the final release date is still within the first half of 2005...

Article about BPEL

Here's a link to an article I recently published...

Using The Business Process Execution Language (BPEL) to Integrate Business Processes
http://news.pghtech.org/teq/teqstory.cfm?ID=1329

My first post

This is my first blog and my first post. I'm a technologist, so I'll try to keep the main posts to my blog technology-related. My expertise is primarily in .NET and J2EE, but I consider my self to be technology agnostic, so I'm particularly interested in technologies that make heterogeneous technologies work together, such as Web Services.