Drag&Drop 
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:
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.
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.
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:
Um eine Drag-Quelle zu definieren, fügen Sie ein DragSourceInfo an das jeweilige View-Element ein.
Um ein Drop-Ziel zu definieren, fügen Sie ein DropTargetInfo an das jeweilige View-Element ein
Um festzulegen, welche Drag-Quelle auf welche Drag-Ziele gezogen werden kann, geben Sie den gleich lautenden 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.
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.
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.
Funktionsumfang
Drag&Drop steht zur Verfügung für:
UI-Element |
Aktion |
|---|---|
Tree |
Einzelne Knoten und Blätter können verschoben werden. In einen Tree können auch an bestimmten Stellen Objekte fallen gelassen werden:
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). |
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. Ende des Hinweises. Damit eine Zelle mit der Maus gezogen werden kann, muss man sie mit der Maus "anfassen" können. So einGriff ist entweder ein Image oder ein SectionHeader oder eine Caption in dieser Zelle mit 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 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.
Ausnahme: Die Captions von Tabs können nicht als Drag-Handle benutzt werden. Ende der Warnung. |
Image |
Das Bild kann verschoben werden. |
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:
In einer leeren ItemListBox gibt es nur eine mögliche Einfügeposition (erste = letzte Position). |
Table |
Einzelne Tabellenzeilen können verschoben werden. In einer Table können auch an bestimmten Stellen Objekte eingefügt werden:
In einer leeren Table gibt es nur eine mögliche Einfügeposition (erste = letzte Position). Das Droppen auf Zeilen ist ebenfalls möglich. |
DropTarget |
Siehe DropTarget |
Accordion |
Im Accordion sind zwei Arten von Drag&Drop möglich:
Um dieses Verhalten zu testen, steht im System hierfür die Component WDR_TEST_ACCORDION zur Verfügung. |
BeispielDrag&Drop bei Tables
Siehe Drag&Drop bei der Table.
Drag&Drop in Layouts
Im GridLayout und MatrixLayout können einzelne Zellen dieses Layouts verschoben werden, bzw. UI-Elemente (z.B. ein Image) zwischen Zellen eingefügt werden.
Hinweis
Drag&Drop ist nur bei einem einspaltigen GridLayout möglich. Im MatrixLayout ist Drag&Drop nur zeilenweise möglich.
Für Drag&Drop in Layouts benötigen Sie Events und Aggregationen. Gehen Sie folgendermaßen vor:
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.
Instanziieren Sie eine DragSourceInfo und DropTargetInfo und fügen Sie sie dem LayoutData hinzu.
Setzen Sie eine Aktion für den onDrop-Event der LayoutData.
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.
Da Layout-Zellen einen Griff benötigen, an dem sie gezogen werden können, verwenden Sie Captions, Images oder SectionHeaders, indem Sie ihre Eigenschaft isDragHandle auf true setzen.
Beispiel
WDR_TEST_DRAG_AND_DROP
Im System steht die Test-Component WDR_TEST_DRAG_AND_DROP zur Verfügung. Dort finden Sie mögliche Einsatz-Szenarien.
Hinweis
Beachten Sie, dass Sie die Ausprogrammierung der Funktionalität selbst vornehmen müssen.
Drag&Drop werden in dieser Test-Component für verschiedene Einsatzarten 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:
Generisches Drag&Drop
Der Benutzer zieht ein UI-Element fort und läßt es auf ein DropTarget fallen. Hierfür können Image und GridLayout und MatrixLayout verwendet werden. In diesem Fall wird ein DropTarget als verschalendes UI-Element verwendet.
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:
Image
Für die folgenden UI-Elemente steht der Event onDrop zur Verfügung:
Tree (über AbstractTreeNodeType)
-
Hinweis
Beachten Sie, dass Drag&Drop nur bei einem einspaltigen GridLayout und nur im Rahmen der dynamischen Programmierung möglich ist.
Ende des Hinweises. -
Hinweis
Beachten Sie, dass Drag&Drop nur zeilenweise und nur im Rahmen der dynamischen Programmierung möglich ist.
Ende des Hinweises.
Beispiel für Browse&Collect
Beispiel für generisches Drag&Drop mit Image