Show TOC

Drag&DropLocate this document in the navigation structure

Verwendung

Mit Drag&Drop kann ein Benutzer Einträge eines UI-Elements markieren oder View-Elemente selber anfassen (Quelle), weg ziehen und auf ein anderes View Element (Ziel) fallen lassen. Quelle und Ziel können dabei das gleiche View-Element oder zwei unterschiedliche View-Elemente sein.

In Web Dynpro können nur bestimmte UI-Elemente als Quelle bzw. Ziel einer Drag&Drop-Operation verwendet werden.

Hinweis

Um die Barrierefreiheit Ihrer Anwendung zu gewährleisten, implementieren Sie zusätzlich die Möglichkeit, eine Aufgabe auch ohne Drag&Drop durchzuführen.

Vorgehen aus Sicht des Benutzers

Die Drag&Drop Funktionalität stellt sich für den Benutzer folgendermaßen dar:

  1. Der Benutzer zieht ein UI-Element, z.B. ein Image, Zeilen einer Table, Knoten eines Tree oder Einträge einer ItemListBox, mit gedrückter Maustaste.

  2. Während der Benutzer die Maustaste gedrückt hält, wird auf dem Bildschirm ein "Geisterbild", also eine Kopie der gezogenene Objekte angezeigt, das den Bewegungen des Maus-Cursor folgt. Wenn der Benutzer den Mauszeiger über ein UI-Element bewegt, auf das man das gezogene Objekt fallen lassen kann, wird dies entweder durch eine gepunktete Box (z.B. MatrixLayout), eine Einfügelinie zwischen Zeilen (z.B. Table) oder durch Aufleuchten (z.B. Tabellenzeilen) dargestellt. Ansonsten zeigt der Mauszeiger ein Verbotsschild an. Ein View-Element oder deren Einträge kann auf ein Zielobjekt fallen gelassen werden, wenn für letzteres eine DropTargetInfo definiert ist (siehe unten) und mindestens ein tags von Ziel und Quelle übereinstimmen. Wenn der Benutzer das Objekt fallen lässt, wird der onDrop-Event des Ziels ausgelöst.

  3. Der Anwendungsentwickler muss dafür sorgen, dass daraufhin die entsprechenden Daten verschoben oder kopiert werden bzw. dass die entsprechenden Aktionen ausgeführt werden.

Vorgehen des Entwicklers

Hinweis

Das Web-Dynpro-ABAP-Framework stellt für Drag&Drop die Visualisierung zur Verfügung. Funktionalität wie das Vertauschen, Umsortieren, Einfügen oder Löschen von Einträgen muss von der Anwendung programmiert werden.

Gehen Sie für die Implementierung von Drag&Drop folgendermaßen vor:

  1. Um eine Drag-Quelle zu definieren, fügen Sie eine DragSourceInfo an das jeweilige View-Element an.

  2. Um ein Drop-Ziel zu definieren, fügen Sie eine DropTargetInfo an das jeweilige View-Element an.

  3. Um festzulegen, welche Drag-Quelle auf welche Drag-Ziele gezogen werden kann, geben Sie den gleichen String (Namensgleichheit!) bei der Eigenschaft tags der jeweiligen DragSourceInfo und DropTargetInfo an.

    Sie können auch mehrere tags verwenden, wobei Sie die tags durch Leerzeichen voneinander trennen.

    Bei den Angaben für tags wird zwischen Groß- und Kleinschreibung unterschieden. Es ist möglich, einen Stern ( *) als Wildcard am Ende des tags in der DropTargetInfo zu verwenden, z.B. grid*.

    Die folgenden Zeichen dürfen Sie nicht verwenden:

    • Doppelpunkt ( :)

    • Komma ( ,)

    • Semikolon ( ;)

    • Backslash ( \)

    • Slash ( /)

    • Punkt ( .)

    Mit dieser Eigenschaft können Sie eigene Entwicklungsstandards festlegen. Achten Sie als Software-Architekt darauf, welche tags Sie verwenden und wie Sie sie designen.

  4. Sie setzen einen Action-Handler für das onDrop-Event des Ziels.

Datentransport

Der Datentransport wird über die Eigenschaft DragSourceInfo.data realisiert: Beim Drop wird ein Event getriggert und DragSourceInfo.data als Event-Parameter dataübergeben. Gegebenenfalls werden zusätzliche Informationen als Event-Parameter übergeben, z.B. die Einfügeposition.

Beachten Sie, dass die Daten nicht nachgeladen werden, sondern vor der Drag-Aktion vorhanden sein müssen.

Achtung

Da die Daten über den Client transportiert werden, dürfen keine sicherheitskritischen Daten und auch keine großen Daten in der data-Eigenschaft sein. Die Werte für data sollten eher eine Art Referenz auf die eigentlichen Daten sein.

Für die Drop-Aktionen gilt analog: Es sollte immer geprüft werden, ob die Drop-Aktion erlaubt ist, ähnlich wie die Eingabeprüfung zu einem InputField.

Gültigkeitsbereich

Der Gültigkeitsbereich der DragSourceInfo wird über die Eigenschaft DragSourceInfo.scope bestimmt. Sie haben die Möglichkeiten, dass die DragSourceInfo entweder nur innerhalb der Component oder über Component-Grenzen hinaus verwendet wird.

Weitere Informationen finden Sie unter DragSourceInfo-Eigenschaften.

Funktionsumfang

Drag&Drop steht für folgende UI-Elemente zur Verfügung:

UI-Element

Aktion

Accordion

Im Accordion sind zwei Arten von Drag&Drop möglich:

  • Drag&Drop von UI-Elementen, wie beispielsweise einem Image, auf ein AccordionItem

    Beispiel

    In einer Anwendung werden auf der linken Seite vier Images angezeigt. Diese Images können als Drag-Quelle verwendet werden. Wenn ein Image auf ein AccordionItem fallen gelassen wird, wird das Image im Content des AccordionItems dargestellt.

  • Drag&Drop eines AccordionItems vor bzw. hinter ein anderes AccordionItem

    Beispiel

    Die AccordionItems einer Anwendung können in ihrer Reihenfolge per Drag&Drop verschoben werden.

Um dieses Verhalten zu testen, steht im System die Component WDR_TEST_ACCORDION zur Verfügung.

CTable

Informationen finden Sie unter Drag&Drop in der CTable.

GridLayout

MatrixLayout

Im GridLayout und MatrixLayout können einzelne Zellen dieses Layouts verschoben werden, bzw. Objekte zwischen Zellen eingefügt werden.

Drag&Drop ist nur bei einem einspaltigen GridLayout möglich. Im MatrixLayout ist Drag&Drop nur zeilenweise möglich.

Beispiel

  • In der Testanwendung WDR_TEST_DRAG_AND_DROP gibt es unter GridLayout einen TransparentContainer mit einem GridLayout. Dieser TransparentContainer hat mehrere Kind-UI-Elemente, z.B. einen TransparentContainer mit der Überschrift "Hier kann man nicht ziehen". Der dahinter liegende SectionHeader hat isDragHandle = false. Dagegen ist im TransparentContainer ein Image platziert, mit dem man den Container hin und her bewegen kann ( isDragHandle = true).

  • In der Testanwendung WDR_TEST_DRAG_AND_DROP werden unter MatrixLayout drei Gruppen angezeigt: Die erste Gruppe enthält 5 Zeilen, die innerhalb dieser Gruppe per Drag&Drop verschoben werden können. Zusätzlich können sie per Drag&Drop zwischen den verschiedenen Gruppen verschoben werden.

Für Drag&Drop in Layouts benötigen Sie Ereignisse und Aggregationen. Gehen Sie folgendermaßen vor:

  1. Beim Initialisieren Ihres UIs in WDDOMODIFYVIEW (möglichst nur beim ersten Aufruf dieser Methode) benötigen Sie das MatrixLayout oder GridLayout des TransparentContainer oder der Group, in die Elemente eingefügt werden sollen, oder deren Kind-Elemente Sie per Drag&Drop verschieben möchten.

  2. Instanziieren Sie eine DragSourceInfo und DropTargetInfo und fügen Sie sie dem LayoutData hinzu.

  3. Setzen Sie eine Aktion für den onDrop-Event der LayoutData.

  4. Wenn Sie die Kindelemente "draggen" möchten (d.h. die Zellen des Layouts, also MatrixHeadData, und die folgenden MatrixDatas oder GridDatas), dann setzen Sie die Eigenschaft dragData von den LayoutDatas, so dass Sie später die Zellen identifizieren können, wenn Sie sie fallen lassen. Der Wert von dragData einer fallen gelassenen Layout-Zelle taucht wieder auf als der data Event-Parameter im onDrop-Event.

  5. Da Layout-Zellen einen Griff benötigen, an dem sie mit der Maus gezogen werden können, verwenden Sie Captions, Images oder SectionHeaders, indem Sie ihre Eigenschaft isDragHandle auf true setzen.

    Achtung

    Ausnahme: Die Captions von Tabs können nicht als Drag-Handle benutzt werden.

Image

Ein Bild kann verschoben werden, indem man es selektiert und zieht.

ItemListBox

Einträge können verschoben werden, indem man sie selektiert (Mehrfachselektion mit SHIFT+Mausklick) und zieht.

In einer ItemListBox können auch an bestimmten Stellen Objekte eingefügt werden:

  • zwischen existierenden Einträgen

  • an erster und letzter Position innerhalb der Liste

In einer leeren ItemListBox gibt es nur eine mögliche Einfügeposition (erste = letzte Position).

PanelStack

Beim PanelStack sind zwei Arten von Drag&Drop möglich:

  • Einzelne Panels können auf einen PanelStack gezogen werden.

  • PanelStack s können als Ganzes gezogen werden.

Table

Einzelne Tabellenzeilen können verschoben werden.

In einer Table können auch an bestimmten Stellen Objekte eingefügt werden:

  • zwischen existierenden Zeilen

  • an erster und letzter Position innerhalb der aufgelisteten Zeilen

In einer leeren Table gibt es nur eine mögliche Einfügeposition (erste = letzte Position).

Das Droppen auf Zeilen ist ebenfalls möglich.

Weitere Informationen finden Sie unter Drag&Drop bei der Table.

Tree

Einzelne Knoten und Blätter können verschoben werden.

In einen Tree können auch an bestimmten Stellen Objekte fallen gelassen werden:

  • zwischen existierenden Kind-Knoten

  • an erster und letzter Position innerhalb eines Eltern-Knotens

  • auf einen existierenden Knoten, unabhängig davon, ob es dort bereits Kind-Knoten gibt oder nicht

Die Auswahl mehrerer Knoten für Drag&Drop ist nur dann möglich, wenn die Knoten mindestens ein tags gemeinsam haben.

In einem leeren Tree gibt es nur eine mögliche Einfügeposition (erste = letzte Position).

Folgende UI-Elemente sind essentiell für die Drag&Drop-Operation:

UI-Element

Beschreibung

DropTarget

DropTarget ist das Ziel einer Drag&Drop-Operation. Es legt fest, wo ein per Drag&Drop bewegtes UI-Element fallen gelassen werden kann.

Weitere Informationen finden Sie unter DropTarget

Beispiel

WDR_TEST_DRAG_AND_DROP

Im System steht die Test-Component WDR_TEST_DRAG_AND_DROP zur Verfügung. Folgende Einsatz-Szenarien für Drag&Drop werden demonstriert:

  • Browse&Collect

    Hier wählt ein Benutzer einen oder mehrere Einträge aus und zieht sie an eine bestimmte Position auf einem anderen UI-Element. Dadurch werden Daten entweder verschoben oder kopiert. Für alle Zeilen wird die gleiche DragSourceInfo verwendet. Überall, wo ein DropTargetInfo definiert ist, können Einträge hinein kommen.

    Browse&Collect steht für die folgenden UI-Elemente zur Verfügung:

    Die folgende Grafik stellt Browse&Collect am Beispiel der ItemListBox dar:

    Abbildung 1: Beispiel für Browse&Collect

  • Generisches Drag&Drop

    Der Benutzer zieht ein UI-Element fort und lässt es auf ein DropTarget fallen. Hierfür können Image, GridLayout und MatrixLayout verwendet werden. In diesem Fall wird ein DropTarget als verschalendes UI-Element verwendet.

    Die folgende Grafik stellt das generische Drag&Drop am Beispiel

    Abbildung 2: Beispiel für generisches Drag&Drop mit Image

  • Laufzeit-Authoring

    Sie können die folgenden UI-Elemente als Drag-Handle (Eigenschaft isDragHandle) definieren, um verschiedene Bildschirmbereiche neu zu sortieren. Die folgenden UI-Elemente können auf diese Art verschoben werden:

Hinweis

Beachten Sie, dass Sie die Ausprogrammierung der Funktionalität selbst vornehmen müssen.