{"id":456,"date":"2010-01-29T17:13:00","date_gmt":"2010-01-29T17:13:00","guid":{"rendered":"http:\/\/www.tutego.de\/blog\/javainsel\/?p=456"},"modified":"2010-01-29T17:13:00","modified_gmt":"2010-01-29T17:13:00","slug":"gwt-drag-and-drop","status":"publish","type":"post","link":"https:\/\/www.tutego.de\/blog\/javainsel\/2010\/01\/gwt-drag-and-drop\/","title":{"rendered":"GWT Drag and Drop"},"content":{"rendered":"<p>Das Projekt unter <a href=\"http:\/\/code.google.com\/p\/gwt-dnd\/\">http:\/\/code.google.com\/p\/gwt-dnd\/<\/a> geh\u00f6rt mit den zu den bekanntesten Drag &amp; Drop Bibliotheken f\u00fcr GWT. Die von Fred Allen-Sauer geschriebene Bibliothek ist ordentlich mit Beispielen hinterlegt, sodass der Einstieg einfach ist. Ein kleines Beispiel soll die Bibliothek demonstrieren.<\/p>\n<p>a) Nach dem Einbinden der Jar-Datei ist in der XML-Datei f\u00fcr GWT folgendes einzutragen:<\/p>\n<pre>&lt;inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'\/&gt;<\/pre>\n<p><\/p>\n<p>b) Von <a title=\"http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/war\/DragDropDemo.css<br \/>&#8220; href=&#8220;http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/war\/DragDropDemo.css&#8220;>http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/war\/DragDropDemo.css<\/a> sind die Eintr\u00e4ge beginnend mit demo-FlexTableRowExample in die eigene CSS-Datei mit aufzunehmen (nicht alle Eintr\u00e4ge sind n\u00f6tig)<\/p>\n<p><\/p>\n<p>c) Aus <a href=\"http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/#DragDrop\/war\/images\">http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/#DragDrop\/war\/images<\/a> nimmt man die Grafik row-dragger-8.gif passend etwa in das WEB-INF\/images mit auf und schaut auf den URL-Eintrag in der CSS, dass der Pfad passt.<\/p>\n<p><\/p>\n<p>c) Von <a href=\"http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/#DragDrop\/demo\/com\/allen_sauer\/gwt\/dnd\/demo\/client\/example\/flextable\">http:\/\/code.google.com\/p\/gwt-dnd\/source\/browse\/trunk\/DragDrop\/#DragDrop\/demo\/com\/allen_sauer\/gwt\/dnd\/demo\/client\/example\/flextable<\/a> kopiert man die Dateien <\/p>\n<p><\/p>\n<ul><\/p>\n<li>FlexTableRowDragController<\/li>\n<p><\/p>\n<li>FlexTableRowDropController<\/li>\n<p><\/p>\n<li>FlexTableUtil<\/li>\n<\/ul>\n<p><\/p>\n<p>in das eigene GWT-Projekt.<\/p>\n<p><\/p>\n<p>In onModuleLoad() kann es dann so aussehen:<\/p>\n<p><\/p>\n<p>AbsolutePanel panel = new AbsolutePanel();<br \/>panel.setPixelSize(450, 300);<br \/>panel.addStyleName(&#8222;demo-FlexTableRowExample&#8220;); <\/p>\n<p>FlexTableRowDragController dragController = new FlexTableRowDragController( panel );<br \/>FlexTable table = new FlexTable(); <\/p>\n<p>table.addStyleName( &#8222;demo-flextable&#8220; ); <\/p>\n<p>HTML handle1 = new HTML( &#8222;&lt;b&gt;Heinzelmann&lt;\/b&gt; (100 \u20ac)&#8220; );<br \/>handle1.addStyleName( &#8222;demo-drag-handle&#8220; );<br \/>table.setWidget( 0, 0, handle1 );<br \/>dragController.makeDraggable( handle1 ); <\/p>\n<p>HTML handle2 = new HTML( &#8222;&lt;b&gt;Wumme&lt;\/b&gt; (200 \u20ac)&#8220; );<br \/>handle2.addStyleName( &#8222;demo-drag-handle&#8220; );<br \/>table.setWidget( 1, 0, handle2 );<br \/>dragController.makeDraggable( handle2 ); <\/p>\n<p>HTML handle3 = new HTML( &#8222;&lt;b&gt;Fred&lt;\/b&gt; (90 \u20ac)&#8220; );<br \/>handle3.addStyleName( &#8222;demo-drag-handle&#8220; );<br \/>table.setWidget( 2, 0, handle3 );<br \/>dragController.makeDraggable( handle3 ); <\/p>\n<p>panel.add(table, 10, 20);<br \/>FlexTableRowDropController dropController = new FlexTableRowDropController(table);<br \/>dragController.registerDropController(dropController);&nbsp; <\/p>\n<p>RootPanel.get().add( panel );<\/p>\n<p>Anschlie\u00dfend haben wir eine Webseite mit<\/p>\n<p><b>Heinzelmann<\/b> (100 \u20ac)<\/p>\n<p><b>Wumme<\/b> (200 \u20ac)<\/p>\n<p><b>Fred<\/b> (90 \u20ac)<\/p>\n<p>wobei wir die 3 Eintr\u00e4ge in der Reihenfolge verschieben k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Projekt unter http:\/\/code.google.com\/p\/gwt-dnd\/ geh\u00f6rt mit den zu den bekanntesten Drag &amp; Drop Bibliotheken f\u00fcr GWT. Die von Fred Allen-Sauer geschriebene Bibliothek ist ordentlich mit Beispielen hinterlegt, sodass der Einstieg einfach ist. Ein kleines Beispiel soll die Bibliothek demonstrieren. a) Nach dem Einbinden der Jar-Datei ist in der XML-Datei f\u00fcr GWT folgendes einzutragen: &lt;inherits name=&#8217;com.allen_sauer.gwt.dnd.gwt-dnd&#8217;\/&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[16,4],"tags":[],"class_list":["post-456","post","type-post","status-publish","format-standard","hentry","category-gwt","category-open-source"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":0,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}