Implement Drag and Drop in Your Web Apps.docx
《Implement Drag and Drop in Your Web Apps.docx》由会员分享，可在线阅读，更多相关《Implement Drag and Drop in Your Web Apps.docx（16页珍藏版）》请在冰豆网上搜索。
ImplementDragandDropinYourWebApps
ImplementDragandDropinYourWebApps
ByDavidGearyandRobGordon
Theultimateinuserinteractivity,draganddropistakenforgrantedindesktopapplicationsbutisalitmustestofsortsforwebapplications:
Ifyoucaneasilyimplementdraganddropwithyourwebapplicationframework,thenyouknowyou'vegotsomethingspecial.
Untilnow,draganddropforwebapplicationshas,forthemostpart,beenlimitedtospecializedJavaScriptframeworkssuchasScript.aculo.usandRico.Nomore.WiththeadventofGWT,wehavedrag-and-dropcapabilitiesinaJava-basedwebapplicationframework.AlthoughGoogleWebToolkit（GWT）doesnotexplicitlysupportdraganddrop（draganddropisananticipatedfeatureinthefuture）,itprovidesuswithallthenecessaryingredientstomakeourowndrag-and-dropmodule.
Inthissolution,weexploredrag-and-dropimplementationwithGWT.Weimplementdraganddropinamoduleofitsownsothatyoucaneasilyincorporatedraganddropintoyourapplications.
StuffYou'reGoingtoLearn
ThissolutionexploresthefollowingaspectsofGWT:
∙ImplementingcompositewidgetswiththeCompositeclass
∙Removingwidgetsfrompanels
∙ChangingcursorsforwidgetswithCSSstyles
∙ImplementingaGWTmodule
∙Addingmultiplelistenerstoawidget
∙UsingtheAbsolutePanelclasstoplacewidgetsbypixellocation
∙Capturingandreleasingeventsforaspecificwidget
∙Usinganeventpreviewtoinhibitbrowserreactionstoevents
SeeSolution1andSolution2formorein-depthdiscussionsofimplementingGWTmodulesandimplementingcompositewidgets,respectively.
TheDrag-and-DropExampleApplication
Ourdiscussionofdraganddrop（dnd）startswithasampleapplicationthatusesourdrag-and-dropmodule.Thenwepeelbackthelayersofthedrag-and-droponiontorevealtheunderlyingimplementation.
Figure6.1showsthedrag-and-dropexampleapplicationinaction.TheapplicationcontainsiPodsandZunesthatcanbedraggedintotheirrespectiveshoppingcarts.Whenyoustartdraggingamusicplayer,thecursorchangestothepointercursortoindicatethatadragisunderway,justincasetheactualmovementofthemusicplayerisnotenoughevidenceofthatfact.
Ifauserdragsamusicplayer,whichindndparlanceisknownasadragsource,overitsshoppingcart（referredtoasadroptarget）,twothingshappen:
Weonceagainchangethecursor,thistimetoamovecursor,toindicatethatadropisacceptableforthisdroptarget（knownasadrag-overeffect）,andwechangetheborderofthedroptarget（knownasadrag-undereffect）.Iftheusersubsequentlyreleasesthemousewhilethedragsourceisoverthedroptarget,weremovethedragsourcefromthepageandupdatethedroptargettoreflectthefactthatitnowcontainsthemusicplayerthatwasdropped.
Iftheuserstartsdraggingamusicplayerandthendecidesagainstdroppingitonitsshoppingcartpanel,wescootthemusicplayerbacktoitsoriginalposition,asillustratedinFigure6.2.Thisisstandarddrag-and-dropbehavior.
Finally,noticethatwehavetwodroptargets:
oneforiPodsandanotherforZunes.UserscannotdraganiPodintotheZuneshoppingcart,orviceversa.Iftheytrytodoso,thecursorchangestotheno-dropcursorwhenthemusicplayerenterstheforbiddenshoppingcart,asshowninFigure6.3.Whenauserdropsamusicplayeroveraforbiddenshoppingcart,themusicplayermovesbacktoitsoriginalposition,justasitdoeswhendroppedoutsideanydroptarget.
Ourdrag-and-dropapplicationusesadrag-and-dropmodule.Wediscussthatmoduleindetailin"DragandDropImplementationinaGWTModule",butfornowlet'sseewhat'sinvolvedinusingthatmodule.
TheDrag-and-DropModule
Thedrag-and-dropapplicationanditsassociatedfilesanddirectoriesareshowninFigure6.4.
Theapplicationismadeupprimarilyoffivethings:
Javasourcefiles;images;aCSSfile;aconfigurationfile;andanHTMLpage.InSolution1,weshowedyouhowtousecustomwidgetsthatwerepackagedinamodule.Forthedrag-and-dropapplication,weemploythesametechnique—atwo-stepprocess—tousethedrag-and-dropmodule:
∙Inheritthemodulewithaninheritselementintheconfigurationfile.
∙Includethemodule'sJARfileinourapplication'sclasspath.
WeshowedyouhowtoincludeGWTSolutionsComponentsmoduleinyourapplication'sclasspathin"CustomWidgetUse"（page40）,sowedon'tcoverthatgroundagain,butwedoshowyouhowweinheritthedrag-and-dropmoduleintheapplication'sconfigurationfile.
InheritingtheDrag-and-DropModuleinanApplication'sConfigurationFile
TheXMLconfigurationfileforourapplicationisshowninListing6.1.
Listing6.1com/gwtsolutions/DragAndDrop.gwt.xml
1
2
3
— Inherit the core Web Toolkit stuff. —>
4
5
6
— Inherit the I18N stuff. —>
7
8
9
— Inherit the drag and drop stuff. —>
10
11
12
13
— Include CSS stylesheet. —>
14
15
16
— Specify the app entry point class. —>
17
18
19
Thedrag-and-dropapplicationusesGWTinternationalization,soweinheritGWT'sI18NmoduleinadditiontotheUsermodule.
Thedrag-and-dropmoduleresidesintheGWTSolutionsComponentsmodule,soweinheritbothofthosemodulesinourapplication'sconfigurationfile.
TheconfigurationfilealsoincludesitsCSSstylesheetintheconfigurationfile.Wecouldhaveincludedthestylesheetwithastandardlinkelementintheapplication'sHTMLpage,butincludingstylesheetsinGWTconfigurationfilesisamorereusablesolutionbecauseuserscanreuseyourstylesheetalongwithyourmodule.Noone'severgoingtoreuseourapplication'smodule,butjustthesame,wepreferincludingstylesheetsinconfigurationfilestoHTMLpagesingeneral.
Finally,wespecifytheentrypointclassforourapplication,com.gwtsolutions.client.DragAndDrop.
Nowthatwe'veseenhowthedrag-and-dropapplicationusesthedrag-and-dropmodule,let'slookatthecodefortheapplication.Werevisitthedrag-and-dropmodulein"DragandDropImplementationinaGWTModule"onpage182,wherewelookatthemodule'simplementation.
ImplementationoftheDrag-and-DropApplication
Listing6.2showsthedrag-and-dropapplication'sclass.
Listing6.2com.gwtsolutions.client.DragAndDrop
20
package com.gwtsolutions.client;
21
22
import com.google.gwt.core.client.EntryPoint;
23
import com.google.gwt.core.client.GWT;
24
import com.google.gwt.user.client.ui.AbsolutePanel;
25
import com.google.gwt.user.client.ui.RootPanel;
26
27
public class DragAndDrop implements EntryPoint {
28
public void onModuleLoad（） {
29
DragAndDropConstants constants =
30
（DragAndDropConstants） GWT
31
.create（DragAndDropConstants.class）;
32
33
final AbsolutePanel ap = new AbsolutePanel（）;
34
35
ap.add（new IpodDropTarget（new ShoppingCartPanel（constants
36
.iPodsOnly（）））, 125, 10）;
37
38
ap.add（new ZuneDropTarget（new ShoppingCartPanel（constants
39
.zunesOnly（）））, 125, 260）;
40
41
final MusicPlayer blackIpod =
42
new MusicPlayer（"images/ipod-nano-black.jpg",
43
constants.blackIPodInfo（））;
44
45
final MusicPlayer blackZune =
46
new MusicPlayer（"images/zune-black.jpg", constants
47
.blackZuneInfo（））;
48
49
final MusicPlayer silverIpod =
50
new MusicPlayer（"images/ipod-nano-silver.jpg",
51
constants.silverIPodInfo（））;
52
53
final MusicPlayer brownZune =
54
new MusicPlayer（"images/zune-brown.jpg", constants
55
.brownZuneInfo（））;
56
57
ap.add（new MusicPlayerDragSource（blackIpod）, 10, 20）;
58
ap.add（new MusicPlayerDragSource（brownZune）, 10, 120）;
59
ap.add（new MusicPlayerDragSource（silverIpod）, 10, 200）;
60
ap.add（new MusicPlayerDragSource（blackZune）, 10, 300）;
61
62
ap.addStyleName（"dragPanel"）;
63
RootPanel.get（）.add（ap）;
64
}
65
}
viewplain|print|copytoclipboard|?
Theprecedingcodeisstraightforward.Wecreateanabsolutepanel,towhichweaddtwoshoppingcartpanels,eachwrappedinadroptarget.Thenwecreatefourmusicplayersandaddeachofthem,wrappedinmusicplayerdragsources,totheabsolutepanel.Afterthatflurryofactivity,wehaveanabsolutepanelwithfourdragsourcesandtwodroptargets.Finally,weattachaCSSstyletotheabsolutepanelandaddittotherootpanelofthepage.
TheMusicPlayerandShoppingCartPanelclassesareGWTcompositewidgets.Let'slookattheirimplementationsbeforewediveintothedndmodule.
UsingtheMusicPlayerandShoppingCartPanelComponents
TheMusicPlayerclassislistedinListing6.3.
Listing6.3com.gwtsolutions.client.MusicPlayer
1
package com.gwtsolutions.client;
2
3
import com.google.gwt.user.client.ui.Composite;
4
import com.google.gwt.user.client.ui.Image;
5
6
public class MusicPlayer extends Composite {
7
private Image image;
8
private String info;
9
10
public MusicPlayer（String imageUrl, String info） {
11
image = new Image（imageUrl）;
12
this.info = info;
13
initWidget（image）;
14
}
15
16
public String getInfo（） {
17
return info;
18
}
19
}
viewplain|print|copytoclipboard|?
Thisisaboutassimpleasacompositewidgetgets.Themusicplayercompositecontainsanimageandsomeinformationaboutthepla
升级会员 