Implement Drag and Drop in Your Web Apps.docx

1、Implement Drag and Drop in Your Web AppsImplement Drag and Drop in Your Web AppsBy David Geary and Rob GordonThe ultimate in user interactivity, drag and drop is taken for granted in desktop applications but is a litmus test of sorts for web applications: If you can easily implement drag and drop wi

2、th your web application framework, then you know youve got something special.Until now, drag and drop for web applications has, for the most part, been limited to specialized JavaScript frameworks such as Script.aculo.us and Rico. No more. With the advent of GWT, we have drag-and-drop capabilities i

3、n a Java-based web application framework. Although Google Web Toolkit (GWT) does not explicitly support drag and drop (drag and drop is an anticipated feature in the future), it provides us with all the necessary ingredients to make our own drag-and-drop module.In this solution, we explore drag-and-

4、drop implementation with GWT. We implement drag and drop in a module of its own so that you can easily incorporate drag and drop into your applications.Stuff Youre Going to LearnThis solution explores the following aspects of GWT: Implementing composite widgets with the Composite class Removing widg

5、ets from panels Changing cursors for widgets with CSS styles Implementing a GWT module Adding multiple listeners to a widget Using the AbsolutePanel class to place widgets by pixel location Capturing and releasing events for a specific widget Using an event preview to inhibit browser reactions to ev

6、ents See Solution 1 and Solution 2 for more in-depth discussions of implementing GWT modules and implementing composite widgets, respectively.The Drag-and-Drop Example ApplicationOur discussion of drag and drop (dnd) starts with a sample application that uses our drag-and-drop module. Then we peel b

7、ack 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 ch

8、anges 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.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

9、 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 sourc

10、e 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 play

11、er back to its original position, as illustrated in Figure 6.2. This is standard drag-and-drop behavior.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 t

12、o 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.Our drag-and-drop applica

13、tion uses a drag-and-drop module. We discuss that module in detail in Drag and Drop Implementation in a GWT Module, but for now lets see whats involved in using that module.The Drag-and-Drop ModuleThe drag-and-drop application and its associated files and directories are shown in Figure 6.4.The appl

14、ication 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 techniquea two-step processto use t

15、he drag-and-drop module: Inherit the module with an inherits element in the configuration file. Include the modules JAR file in our applications classpath. We showed you how to include GWT Solutions Components module in your applications classpath in Custom Widget Use (page 40), so we dont cover tha

16、t ground again, but we do show you how we inherit the drag-and-drop module in the applications configuration file.Inheriting the Drag-and-Drop Module in an Applications Configuration FileThe XML configuration file for our application is shown in Listing 6.1.Listing 6.1 com/gwtsolutions/DragAndDrop.g

17、wt.xml1234 567 8910 11 121314 151617 1819The drag-and-drop application uses GWT internationalization, so we inherit GWTs 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 applications configu

18、ration 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 applications HTML page, but including stylesheets in GWT configuration files is a more reusable solution because users can reuse yo

19、ur stylesheet along with your module. No ones ever going to reuse our applications 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 w

20、eve seen how the drag-and-drop application uses the drag-and-drop module, lets look at the code for the application. We revisit the drag-and-drop module in Drag and Drop Implementation in a GWT Module on page 182, where we look at the modules implementation.Implementation of the Drag-and-Drop Applic

21、ationListing 6.2 shows the drag-and-drop applications class.Listing 6.2 com.gwtsolutions.client.DragAndDrop20packagecom.gwtsolutions.client; 2122importcom.google.gwt.core.client.EntryPoint; 23importcom.google.gwt.core.client.GWT; 24importcom.google.gwt.user.client.ui.AbsolutePanel; 25importcom.googl

22、e.gwt.user.client.ui.RootPanel; 2627publicclassDragAndDropimplementsEntryPoint 28publicvoidonModuleLoad() 29DragAndDropConstantsconstants= 30(DragAndDropConstants)GWT 31.create(DragAndDropConstants.class); 3233finalAbsolutePanelap=newAbsolutePanel(); 3435ap.add(newIpodDropTarget(newShoppingCartPanel

23、(constants 36.iPodsOnly(),125,10); 3738ap.add(newZuneDropTarget(newShoppingCartPanel(constants 39.zunesOnly(),125,260); 4041finalMusicPlayerblackIpod= 42newMusicPlayer(images/ipod-nano-black.jpg, 43constants.blackIPodInfo(); 4445finalMusicPlayerblackZune= 46newMusicPlayer(images/zune-black.jpg,const

24、ants 47.blackZuneInfo(); 4849finalMusicPlayersilverIpod= 50newMusicPlayer(images/ipod-nano-silver.jpg, 51constants.silverIPodInfo(); 5253finalMusicPlayerbrownZune= 54newMusicPlayer(images/zune-brown.jpg,constants 55.brownZuneInfo(); 5657ap.add(newMusicPlayerDragSource(blackIpod),10,20); 58ap.add(new

25、MusicPlayerDragSource(brownZune),10,120); 59ap.add(newMusicPlayerDragSource(silverIpod),10,200); 60ap.add(newMusicPlayerDragSource(blackZune),10,300); 6162ap.addStyleName(dragPanel); 63RootPanel.get().add(ap); 64 65 view plain | print | copy to clipboard | ?The preceding code is straightforward. We

26、create an absolute panel, to which we add two shopping cart panels, each wrapped in a drop target. Then we create four music players and add each of them, wrapped in music player drag sources, to the absolute panel. After that flurry of activity, we have an absolute panel with four drag sources and

27、two drop targets. Finally, we attach a CSS style to the absolute panel and add it to the root panel of the page.The MusicPlayer and ShoppingCartPanel classes are GWT composite widgets. Lets look at their implementations before we dive into the dnd module.Using the Music Player and Shopping Cart Pane

28、l ComponentsThe MusicPlayer class is listed in Listing 6.3.Listing 6.3 com.gwtsolutions.client.MusicPlayer1packagecom.gwtsolutions.client; 23importcom.google.gwt.user.client.ui.Composite; 4importcom.google.gwt.user.client.ui.Image; 56publicclassMusicPlayerextendsComposite 7privateImageimage; 8privat

29、eStringinfo; 910publicMusicPlayer(StringimageUrl,Stringinfo) 11image=newImage(imageUrl); 12this.info=info; 13initWidget(image); 14 1516publicStringgetInfo() 17returninfo; 18 19 view plain | print | copy to clipboard | ?This is about as simple as a composite widget gets. The music player composite contains an image and some information about the pla