Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

GWT solution #6: Drag and drop

Use the Google Web Toolkit to roll your own drag-and-drop module

By David Geary and Rob Gordon , JavaWorld.com, 11/06/07

  • Print
  • Feedback
.

Page 2 of 9

The drag-and-drop example application

Our discussion of drag and drop (DND) starts with a sample application that uses our drag-and-drop module. Then we peel back the layers of the drag-and-drop onion to reveal the underlying implementation.

Figure 6.1 shows the drag-and-drop example application in action. The application contains iPods and Zunes that can be dragged into their respective shopping carts. When you start dragging a music player, the cursor changes to the pointer cursor to indicate that a drag is underway, just in case the actual movement of the music player is not enough evidence of that fact.

The drag-and-drop example application

Figure 6.1. The drag-and-drop example application

If a user drags a music player, which in DND parlance is known as a drag source, over its shopping cart (referred to as a drop target), two things happen: We once again change the cursor, this time to a move cursor, to indicate that a drop is acceptable for this drop target (known as a drag-over effect), and we change the border of the drop target (known as a drag-under effect). If the user subsequently releases the mouse while the drag source is over the drop target, we remove the drag source from the page and update the drop target to reflect the fact that it now contains the music player that was dropped.

If the user starts dragging a music player and then decides against dropping it on its shopping cart panel, we scoot the music player back to its original position, as illustrated in Figure 6.2. This is standard drag-and-drop behavior.

The drag-and-drop example application

Figure 6.2. Drag sources snap back when dropped outside a drop target

Finally, notice that we have two drop targets: one for iPods and another for Zunes. Users cannot drag an iPod into the Zune shopping cart, or vice versa. If they try to do so, the cursor changes to the no-drop cursor when the music player enters the forbidden shopping cart, as shown in Figure 6.3. When a user drops a music player over a forbidden shopping cart, the music player moves back to its original position, just as it does when dropped outside any drop target.

The drag-and-drop example application

Figure 6.3. Disallowing drops in drop targets

Our drag-and-drop application uses a drag-and-drop module. We discuss that module in detail in the chapter "Drag and Drop Implementation in a GWT Module," but for now let's see what's involved in using that module.

The drag-and-drop module

The drag-and-drop application and its associated files and directories are shown in Figure 6.4.

The drag-and-drop example application

Figure 6.4. The drag-and-drop application's files and directories

The application is made up primarily of five things: Java source files; images; a CSS file; a configuration file; and an HTML page. In Solution 1, we showed you how to use custom widgets that were packaged in a module. For the drag-and-drop application, we employ the same technique—a two-step process—to use the drag-and-drop module:

  • Inherit the module with an inherits element in the configuration file.
  • Include the module's JAR file in our application's classpath.

We showed you how to include the GWT Solutions Components module in your application's classpath in the chapter "Custom Widget Use," so we don't cover that ground again, but we do show you how we inherit the drag-and-drop module in the application's configuration file.

Inheriting the drag-and-drop module in an application's configuration file

The XML configuration file for our application is shown in Listing 6.1.

Listing 6.1 com/gwtsolutions/DragAndDrop.gwt.xml

1.<module>
2.
3.   <!— Inherit the core Web Toolkit stuff. —>
4.   <inherits name='com.google.gwt.user.User'/>   

5.   
6.   <!— Inherit the I18N stuff. —>   
7.  <inherits name="com.google.gwt.i18n.I18N"/>
8.
9.   <!— Inherit the drag and drop stuff. —>
10.   <inherits name='com.gwtsolutions.components.Components'/>

11.   <inherits name='com.gwtsolutions.components.client.ui.Dnd'/>
12.
13.   <!— Include CSS stylesheet. —>
14.   <stylesheet src="styles.css"/>
15.   
16.   <!— Specify the app entry point class. —>

17.   <entry-point class='com.gwtsolutions.client.DragAndDrop'/>
18.  
19.</module>

The drag-and-drop application uses GWT internationalization, so we inherit GWT's I18N module in addition to the User module.

The drag-and-drop module resides in the GWT Solutions Components module, so we inherit both of those modules in our application's configuration file.

The configuration file also includes its CSS stylesheet in the configuration file. We could have included the stylesheet with a standard link element in the application's HTML page, but including stylesheets in GWT configuration files is a more reusable solution because users can reuse your stylesheet along with your module. No one's ever going to reuse our application's module, but just the same, we prefer including stylesheets in configuration files to HTML pages in general.

Finally, we specify the entry point class for our application, com.gwtsolutions.client. DragAndDrop.

Now that we've seen how the drag-and-drop application uses the drag-and-drop module, let's look at the code for the application. We revisit the drag-and-drop module in the chapter "Drag and Drop Implementation in a GWT Module," where we look at the module's implementation.

  • Print
  • Feedback

Resources