- 19. August 2013

Drag & Drop in Web Dynpro Java

Drag & Drop als Funktion kommt bei Benutzern immer gut an – es ist einfach, intuitiv und schnell in der Anwendung. In webbasierten SAP Applikationen ist diese Technik immer noch nicht sehr verbreitet. Eigentlich zu Unrecht, denn auch die Implementierung, zum Beispiel mit Web Dynpro Java, ist nicht schwer. Dieser Artikel zeigt wie es geht.

Schritt für Schritt Anleitung: Drag and Drop in Web Dynpro Java

Wir haben bereits ein Projekt im SAP NetWeaver Developer Studio (NWDS), eine entsprechende Applikation sowie dazugehörige Komponenten und Kontexte.
Im ersten Schritt erstellen wir uns zwei Tabellen. Die erste wird die Quelltabelle, aus der wir die Daten in die zweite, die Zieltabelle, übergeben wollen. Dazu wählen wir aus dem Kontextmenü, des entsprechenden Gruppenelements Apply Template und fügen nach und nach die Tabellen ein und binden sie an die Kontexte.

Web Dynpro Java Tabellen in Apply Template einbauen

Tabellen in Apply Template einbauen

Schritt 2: Jetzt fügen wir in unsere Quelltabelle eine DragSourceInfo ein. D.h. wir wählen aus dem Kontextmenü der Quelltabelle Insert -> DragSourceInfo aus

Web Dynpro Java DragSourceInfo in Quelltabelle einfügen

DragSourceInfo in Quelltabelle einfügen

In der Zieltabelle wählen wir aus dem Kontextmenü Insert -> DropTargetInfo aus.

Web Dynpro Java Zieltabelle: Insert -> DropTargetInfo

Zieltabelle: Insert -> DropTargetInfo

In den Eigenschaften der jeweiligen DragSourceInfo bzw. DropTargetInfo müssen wir den Tag gleich setzen. In diesem Fall heißt der Tag bei beiden „Favorites“. Dies garantiert eine eindeutige Zuordnung.

Web Dynpro Java DragSourceInfo bzw. DropTargetInfo

Tag setzen in DragSourceInfo bzw. DropTargetInfo

Jetzt müssen wir nur noch sagen, was eigentlich gedropped werden soll, wenn man einen Eintrag in die Zieltabelle zieht. Dazu gehen wir auf die Eigenschaften unserer Zieltabelle in der View. Unter Events wählen wir die Aktion onDrop aus. Mit create können wir eine neue Funktion erstellen.

Web Dynpro Java Neue Funktion mit onDrop und create erstellen

Neue Funktion mit onDrop und create erstellen

Zeit für eine kleine Zwischenspeicherung 😉

Mit Hilfe von Go können wir nun gleich in den Code an die richtige Stelle springen. Hier fügen wir nun all das ein, was wir aus unserer Quelltabelle in der Zieltabelle haben wollen. In diesem Fall wollen wir nur die Nummer und die Beschreibung als zusammenhängenden String haben. Dazu lesen wir zunächst den entsprechenden Eintrag aus und setzen dann den neuen für die Zieltabelle.

Web Dynpro Java Eintrag auslesen und neuen String setzen

Eintrag auslesen und neuen setzen

Nach builden und deployen sieht die Anwendung in etwa so aus:

Web Dynpro Java Ansicht nach build und deploy (1)

Ansicht nach build und deploy (1)

Web Dynpro Java Ansicht nach build und deploy (2)

Ansicht nach build und deploy (2)

Viel Spaß beim Selberbauen! Für Anregungen und Kritik bin ich dankbar. Falls Sie Fragen haben, dann scheuen Sie sich nicht, mir ebenfalls einen Kommentar zu hinterlassen.


SHARE


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.