Drag&Drop 
Mit Drag&Drop kann ein Benutzer UI-Elemente aus einem Bereich eines UI-Elements (Quelle) markieren, von der Quelle weg ziehen und auf einen anderen Bereich eines UI-Elements (Ziel) fallen lassen. Quelle und Ziel können dabei das gleiche UI-Element oder zwei unterschiedliche UI-Elemente sein.
In Web Dynpro können 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 eine Möglichkeit, eine Aufgabe auch ohne Drag&Drop durchzuführen.
Vorgehen 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, oder Daten einer Table, eines Trees oder einer ItemListBox mit gedrückter Maustaste.
Während der Benutzer die Maustaste gedrückt hält, wird auf dem Bildschirm ein Geisterbild angezeigt, das die entsprechende Aktion andeutet.
Wenn der Benutzer den Mauszeiger über ein UI-Element bewegt, das als DropTarget definiert ist, wird dies entweder durch eine gepunktete Linie um den Container angezeigt oder durch Anzeige einer fett dargestellten Linie zwischen den entsprechenden Zeilen. Solange der Benutzer das Geisterbild über Bereiche bewegt, die nicht als DropTargets definiert sind oder deren tags nicht übereinstimmen, wird zusätzlich ein Verbotszeichen dargestellt.
Wenn der Benutzer das Geisterbild fallen läßt, wird der onDrop-Event des dazugehörigen UI-Elements 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 UI-Element ein.
Um ein Drop-Ziel zu definieren, fügen Sie ein DropTargetInfo an das jeweilige UI-Element ein
Um festzulegen, welche Drag-Quelle auf welche Drag-Ziele gezogen werden kann, geben Sie den gleich lautenden String (Namensgleichheit!) bei der Eigenschaft tag 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 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.
Datentransport
Der Datentransport wird über die Eigenschaft DragSourceInfo.data realisiert: Beim Drop wird ein Event getriggert und DragSourceInfo.data als Event-Parameter ü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 Knoten eingefügt 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 |
Im GridLayout können einzelne Zellen dieses Layouts verschoben werden, bzw. UI-Elemente (z.B. ein Image) zwischen Zellen eingefügt werden..
Drag&Drop ist nur bei einem einspaltigen GridLayout möglich. Ende des Hinweises Damit eine Zelle mit der Maus gezogen werden kann, braucht sie
eine Art Griff, an der man sie anfassen kann. Dieser Griff 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
Ausnahme: Die Captions von Tabs können nicht als Drag-Handle benutzt werden. Ende der Warnung. |
Image |
Das Bild kann verschoben werden. |
ItemListBox |
Einzelne Einträge können verschoben werden. In einer ItemListBox können auch an bestimmten Stellen Einträge 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 Zeilen eingefügt werden:
In einer leeren Table gibt es nur eine mögliche Einfügeposition (erste = letzte Position). |
DropTarget |
Siehe DropTarget |
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 steht in dieser Test-Component für verschiedene Einsatzarten zur Verfügung:
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 anderes UI-Element fallen. Hierfür können Image und GridLayout 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
Beispiel für Browse&Collect
Beispiel für generisches Drag&Drop mit Image