Add Drag And Drop Support To Your Echo2 Applications

Introduction

Echo2 is a web application framework that aids in the creation of "fat client" like web applications. Echo2 features an AJAX (Asynchronous JavaScript And XML) rendering engine, resulting in highly responsive web applications. Echo2's API resembles the Swing API, therefore the learning curve for Echo2 is very low for Java developers with Swing experience. This article explains how to add Drag and Drop support to Echo2 applications. Some familiarity with Echo or Echo2 development is assumed (see Resources if you need more information about Echo2). See resources for a live demo of the example application developed in this article.

Getting Started

The easiest way to add drag and drop support to an Echo2 application is to get the Echo2 Contributed Components library, by Jason Dalton and other Echo2 developers (Click on Echo2_Contrib.zip under Resources to download it). This library contains components to display arbitrary HTML, a sortable and/or pageable table, components to add support for drag and drop (of course), and many other components. The zip file includes a jar file called Echo2_Contrib.jar, this jar file must be in your classpath to be able to use the supplied components.

The two components of interest for this article are the nextapp.echo2.contrib.app.dnd.DropTarget class and the nextapp.echo2.contrib.app.dnd.DropTargetListener interface. These components are based on the excellent script.aculo.us Javascript library.

Writing The Code

The DropTarget class contains a single constructor taking two parameters, the first parameter is a nextapp.echo2.app.Component, the second one is an instance of a class implementing the DropTargetListener interface. Passing a Component as the first parameter of the DropTarget class makes that component "droppable", that is, it allows other components to be dropped into it. For illustration purposes, we will develop fictitious online registration system for an equally fictitious technology training company. The user interface will have a list of available courses, to register for a course, the user will drag the course name to another section of the page. In the screenshot, we can see the "Introduction to Java" class being dragged to the "Registered Courses" area (the mouse pointer didn't show up in the screenshot, use your imagination).

To achieve this layout, three instances of nextapp.echo2.app.Column were added to an instance of nextapp.echo2.app.Row, the column containing the "Registered Courses" label was passed as a parameter to an instance of DropTarget, this way, that column became "droppable". The relevant sections of the code follow:


public class DndContentPane extends ContentPane
{
  private Column destinationColumn = new Column();
  private DropTarget dropTarget = new DropTarget(destinationColumn,
      dropTargetListenerImpl);
  //other fields omitted for clarity
  
  public DndContentPane()
  {
    .
    .
    .
    add(dropTarget);
    add(destinationColumn);
    .
    .
    .
  }
}

Notice that the instance of DropTarget has to be added to the container containing all the components in order for drag and drop to work.

To make components "draggable", they must be added as a drag source by calling the DropTarget.addDragSource(Component) method. For the example application, we took all the labels form the "Available Courses" column and added them to the instance of DropTarget by calling its addDragSource() for each one of them. To make this task simpler, we took advantage of the getComponents() method on the Column class (inherited from nextapp.echo2.app.Component). This method returns an array of Component instances, these being the child components of the Column, we then iterated through the array, and passed each one as a parameter to DropTarget.addDragSource(). Relevant code fragments follow:


public class DndContentPane extends ContentPane
{
  private Column sourceColumn = new Column();
  private DropTarget dropTarget = new DropTarget(destinationColumn,
      dropTargetListenerImpl);
      
  public DndContentPane()
  {
    Component[] draggableComponents = sourceColumn.getComponents();

    for (int i = 1; i < draggableComponents.length; i++)
    {
      dropTarget.addDragSource(draggableComponents[i]);
    }  
  }
}

Next, we need to implement the nextapp.echo2.contrib.app.dnd.DropTargetListener interface, this interface has only one method, with the following signature:

public void drop(ActionEvent event)

In our example application, we add the dragged component to the destination column, and remove it from the source column.


private class DropTargetListenerImpl implements DropTargetListener
{
  public void drop(ActionEvent actionEvent)
  {
    Component draggedComponent = (Component) actionEvent.getSource();
    sourceColumn.remove(draggedComponent);
    destinationColumn.add(draggedComponent);
  }
}

That is all there is to it, with the help of the DropTarget component and DropTargetListener interface, adding drag and drop support to an Echo2 application is practically trivial.

Add Drag And Drop Support To Your Echo2 Applications var addthis_pub = "heffel";

Introduction

Getting Started

Writing The Code

Resources

Add Drag And Drop Support To Your Echo2 Applications