tutego

Das Projekt unter http://code.google.com/p/gwt-dnd/ gehört mit den zu den bekanntesten Drag & Drop Bibliotheken für 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ür GWT folgendes einzutragen:

<inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>

b) Von http://code.google.com/p/gwt-dnd/source/browse/trunk/DragDrop/war/DragDropDemo.css sind die Einträge beginnend mit demo-FlexTableRowExample in die eigene CSS-Datei mit aufzunehmen (nicht alle Einträge sind nötig)

c) Aus http://code.google.com/p/gwt-dnd/source/browse/trunk/DragDrop/#DragDrop/war/images 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.

c) Von http://code.google.com/p/gwt-dnd/source/browse/trunk/DragDrop/#DragDrop/demo/com/allen_sauer/gwt/dnd/demo/client/example/flextable kopiert man die Dateien

• FlexTableRowDragController


• FlexTableRowDropController


• FlexTableUtil

in das eigene GWT-Projekt.

In onModuleLoad() kann es dann so aussehen:

AbsolutePanel panel = new AbsolutePanel();
panel.setPixelSize(450, 300);
panel.addStyleName("demo-FlexTableRowExample");

FlexTableRowDragController dragController = new FlexTableRowDragController( panel );
FlexTable table = new FlexTable();

table.addStyleName( "demo-flextable" );

HTML handle1 = new HTML( "<b>Heinzelmann</b> (100 €)" );
handle1.addStyleName( "demo-drag-handle" );
table.setWidget( 0, 0, handle1 );
dragController.makeDraggable( handle1 );

HTML handle2 = new HTML( "<b>Wumme</b> (200 €)" );
handle2.addStyleName( "demo-drag-handle" );
table.setWidget( 1, 0, handle2 );
dragController.makeDraggable( handle2 );

HTML handle3 = new HTML( "<b>Fred</b> (90 €)" );
handle3.addStyleName( "demo-drag-handle" );
table.setWidget( 2, 0, handle3 );
dragController.makeDraggable( handle3 );

panel.add(table, 10, 20);
FlexTableRowDropController dropController = new FlexTableRowDropController(table);
dragController.registerDropController(dropController); 

RootPanel.get().add( panel );

Anschließend haben wir eine Webseite mit

Heinzelmann (100 €)

Wumme (200 €)

Fred (90 €)

wobei wir die 3 Einträge in der Reihenfolge verschieben können.

Labels: GWT, Open Source