Implement Drag and Drop in Your Web Apps / Page 3

home / programming / web_apps / drag_and_drop

[previous] [next]

Programmer / Writer
Aquent
US-WA-Redmond

Post A Job | Post A Resume

Developer News

Cisco Lawsuit: A Test for the GPL?

Shifts for Enterprise Linux, Green Networks in '09

Gifts for All in Linux 2.6.28

Implement Drag and Drop in Your Web Apps [con't]

Using the Music Player and Shopping Cart Panel Components

The MusicPlayer class is listed in Listing 6.3.

Listing 6.3 com.gwtsolutions.client.MusicPlayer

This is about as simple as a composite widget gets. The music player composite contains an image and some information about the player. Notice the call to the Composite class's initWidget method. As with all composite widgets that extend Composite, you must call that method in the constructor.

The shopping cart panel composite is listed in Listing 6.4.

Listing 6.4 com.gwtsolutions.client.ShoppingCartPanel

This composite contains a horizontal panel that in turn contains the shopping cart image and a vertical panel. The vertical panel initially contains only a title. When a music player is dropped on a drop target, the drop target invokes ShoppingCartPanel.add() to add the music player to the cart. That add method simply adds the music player's information, in the form of a GWT label, to the vertical panel.

`com.google.gwt.user.client.ui.HorizontalPanel`

• void add(Widget w)
Adds a widget to a horizontal panel. This method creates a table data (<td>) element, places the widget's DOM element in the table data, and adds the table data to the lone table row created by the horizontal panel. That table row resides in a table that's created by the vertical panel's subclass, CellPanel. The method then sets the horizontal and vertical alignments for the widget to left and top, respectively.

`com.google.gwt.user.client.ui.VerticalPanel`

• void add(Widget w)
Adds a widget to a vertical panel. This method creates a table row (<tr>) and a table data (<td>) element, adds the widget's DOM element to the table data, and adds the table row to the table that's created by the vertical panel's subclass, CellPanel. The method then sets the horizontal and vertical alignments for the widget to left and top, respectively.