Drag and Drop

Drag and drop is a powerful and intuitive feature for some applications, allowing the user to visually move components and data about within the applications. For applications such as shoping cart and retail applications drag and drop can add that extra polish. Enabling drag and drop

For the most part all you need do to drag and drop enable a component is to set the dragEnabled attribute of the component.

Drag and drop setup

<Panel layout="border">
  <Image name="dragSource" dragEnabled="true" constraint="west"/>
  <Image name="dropTarget" dragEnabled="true" constraint="east"/>
</Panel>

The application itself needs to be drag enabled also, and this is just a matter of registering the require drag and drop factory to the application, just instantiate and instance of TransferHandlerFactory in somewhere in your application (typically the constructor of the first page):

Make the application drag and drop enabled

public Welcome()
{
  new TransferHandlerFactory( project );
}

Drag and drop functionality can be implemented within a page by having that page implement the DragManager interface. The interface provides a getDragInfo method for supplying info to the drop target from the dragged component.

To illustrate a more advanced use of drag and drop we will take a look at the shopping cart from the SVG Components demo shown below:

A code example of the implementation of the interface and the getDragInfo method is shown below.

Setting up drag and drop data

public class Catalog extends Page implements DragManager
{
  protected HashMap infoMap;			
 
  	public Catalog()
  {
       infoMap = new HashMap();
       String [] keys = { DragInfo.TITLE, DragInfo.KEY, "price", "image", 
			DragInfo.DESCRIPTION };
 
       Object [][] v = { 
        {"Canon Digital Camera", "camera", "$249.99", "Camera.jpg",
             "The Canon 									PowerShot SD550 is a sleek 7 megapixel ultracompact." }, 
    { "Netgear Network Storage Device", "netstore", "$99.99", "networkstorage.jpg", 
             "NETGEAR's Storage Central is an innovation for storing and protecting files." }, 
      { "Netgear Wireless Card", "wireless", "$39.99", "wirelesscard.jpg", 
             "With the 			RangeMax NEXT Notebook adapter inserted, your PC will maintain a steady, 				constant network connection." }};
 
   for (int i = 0; i < v.length; i++) {
        			DragInfo dragInfo = new DragInfo();
        			dragInfo.addValues( keys, v[ i ] );
        			infoMap.put( (String)v[i][1], dragInfo );
    		} 		
   	}
 
  	public DragInfo getDragInfo( String key )
  {
    		return (DragInfo)infoMap.get( key );
  	}	
}

Each instance of the DragInfo class stores information for a draggable component. When the component is dropped on the target, the ModelTransferHandler class uses the components dragInfo property to query the hash map and extract the DragInfo object assigned to the component. An example of setting the dragInfo property on a component is shown below.

Enabling the components

<CaptionedImage dragInfo="camera" imagename="Camera.jpg" 
    caption="Digital Camera" x="15" y="50" w="120" h="120" 
    dragEnabled="true" />

The DataModelTransferHandler 's createTransferable method is responsible for extracting the relevant DragInfo instance from the class implementing the DragManager interface and then creating a new transferable. The transferable is then passed to the drop target using the importData method of the DataModelTransferHandler class. The drag info is then extracted from the transferable and passed to the drop component.

Drag and drop functionality allows you to setup components bindings when builing pages in the Editor. In order to do that you need to select a model node from the data model hierarchy dispplayed in the data visualizer and simply drag and drop it to a component on a page. For more information on drag and drop data bindings please see Binding to database tables..

The following components are drag and drop supported under Aria: List, Image and Tree

More information on drag and drop components can be found on the Java Swing website under "Introduction to Drag and Drop and Data Transfer". Information can also be found on the Aria wiki.

Drag and drop functionality can be extended to include custom components.

Registering new flavours for drag and drop is handled registering a suitable transfer handler in the transferhandlers.xml file. It is a similar process to setting up a new data binding type. For more info see Adding a new binding type.

To drag enable a new component the 'dragEnabled' tag must be set on the component as shown in the 'Customizing drag and drop section above'.Then a suitable TransferHandler needs to be set up for the component.

‹ Using SVG graphics up Printing and Export ›