Wissen aus erster Hand. Leseprobe Einfache und effiziente Interaktivität des Benutzers mit dem User Interface ist das höchste Ziel. Drag & Drop ist ein effektiver Ansatz, um diese Anforderungen zu erfüllen. In dieser Leseprobe erfahren Sie, wie Sie Drag & Drop in Web Dynpro ABAP einsetzen können. Kapitel 5: »Drag & Drop für UI-Elemente« Inhaltsverzeichnis Index Die Autoren Leseprobe weiterempfehlen Roland Schwaiger, Dominik Ofenloch Web Dynpro ABAP – Das umfassende Handbuch 1.145 Seiten, gebunden, 2. Auflage 2014 69,90 Euro, ISBN 978-3-8362-2751-3 www.sap-press.de/3532 Einfache und effiziente Interaktivität des Benutzers mit dem User Interface ist das höchste Ziel. Drag & Drop ist ein effek- tiver Ansatz, um diese Anforderungen zu erfüllen. In diesem Kapitel erfahren Sie, wie Sie Drag & Drop in Web Dynpro ABAP einsetzen können. 5 Drag & Drop für UI-Elemente Mithilfe der Drag-&-Drop-Funktion in Web Dynpro ABAP können Interaktionsform Sie den Benutzern intuitive und einfache Interaktionsformen anbie- ten. Unter Drag & Drop versteht man jene Benutzerinteraktion, die ein UI-Element oder die Einträge eines UI-Elements – die sogenannte Quelle (Source) – auf das gleiche oder ein anderes UI-Element zieht, das als Ziel (Target) bezeichnet wird. Zur Durchführung dieser Inter- aktion dient ein Eingabegerät – z.B. die Maus. Barrierefreie Nutzung Beachten Sie, dass die Barrierefreiheit einer Web-Dynpro-Anwendung erfordert, dass die Interaktionen, die mit Drag & Drop durchgeführt wer- den können, auch barrierefrei sein müssen. Im Fall der Drag-&-Drop-Operation mithilfe der Maus lässt sich das Benutzer Vorgehen aus Sicht des Benutzers folgendermaßen beschreiben: (cid:2) Der Benutzer klickt ein UI-Element (die Quelle bzw. Drag Source) an und hält die Maustaste gedrückt. (cid:2) Dem Benutzer wird durch ein Geisterbild (Ghost Image) angedeu- tet, dass er gerade eine Drag-&-Drop-Operation ausführt. Bewegt der Benutzer, immer noch mit gedrückter Maustaste, den Maus- zeiger, bewegt sich auch das Geisterbild mit. Dieser Vorgang wird als Ziehen (Drag) bezeichnet. (cid:2) Bewegt der Benutzer den Mauszeiger auf ein gültiges UI-Element, wird dies optisch z.B. durch eine Umrandung des Ziels (Drop Tar- get) angedeutet. Weist der Mauszeiger auf ein ungültiges Ziel hin, wird dies durch ein »Verboten«-Bild visualisiert. 527 5 Drag & Drop für UI-Elemente Drag & Drop für UI-Elemente 5 (cid:2) Falls sich der Benutzer über einem gültigen Ziel befindet und die UI-Elemente Rolle Beschreibung Maustaste loslässt, wird beim Ziel ein Ereignis ausgelöst und die Tree: Knoten Ziel Knoten können zwischen Kindknoten, an vom Entwickler beabsichtigte Funktion ausgeführt. erster und letzter Stelle in einem Eltern- knoten und als neue Unterknoten unter Entwickler Aus Sicht des Entwicklers sind für die Implementierung einer Drag- einem Elternknoten eingefügt werden. &-Drop-Operation einige Schritte zu erledigen. Diese gestalten sich GridLayout: Quelle Einzelne Zellen können bewegt werden. nach den eingesetzten UI-Elementen und den Operationsmodi (siehe Layoutzelle Voraussetzung dafür ist ein Griff (Handle), Abschnitt 5.9) und lassen sich wie folgt zusammenfassen: z.B. Image, SectionHeader, Caption. (cid:2) Für das UI-Element, das als Quelle dienen soll, muss eine Drag- Einschränkung: Es ist nur ein einspaltiges GridLayout möglich. SourceInfo im View Designer definiert werden. GridLayout: Ziel UI-Elemente können zwischen den Zellen (cid:2) Die DragSourceInfo bietet die Eigenschaft data an, mit deren Hilfe Layoutzelle abgelegt werden. Sie Daten übergeben und später bei der Behandlung im Ziel ver- Einschränkung: Es ist nur ein einspaltiges wenden können. GridLayout möglich. (cid:2) Für das UI-Element, das als Ziel dienen soll, muss eine DropTarget- MatrixLayout: Quelle Einzelne Zellen können bewegt werden. Info im View Designer definiert werden. Layoutzelle Voraussetzung dafür ist ein Griff (Handle), z.B. Image, SectionHeader, Caption. (cid:2) In der Eigenschaft tag der DragSourceInfo bzw. der DropTarget- Einschränkung: Es ist nur ein einzeiliges Info definieren gleiche Bezeichner (Flavor) die Verbindung von MatrixLayout möglich. Ziel und Quelle. MatrixLayout: Ziel UI-Elemente können zwischen den Zellen (cid:2) Wird ein Element auf einem Ziel fallengelassen, kann dies das Layoutzelle abgelegt werden. Ereignis onDrop auslösen. Der Entwickler ist für die Implementie- Einschränkung: Es ist nur ein einzeiliges MatrixLayout möglich. rung der Reaktion auf das Ereignis verantwortlich, also z.B. Sor- Image Quelle Das Bild kann bewegt werden. tieren, Löschen etc. Image Ziel Auf das Bild kann ein anderes UI-Element UI-Elemente für Die Elemente, die im Web-Dynpro-Kontext die Drag-&-Drop-Funk- bewegt werden. Drag & Drop tion unterstützen, sind in Tabelle 5.1 aufgelistet. In der Spalte UI- ItemListBox Quelle Einzelne oder mehrere Einträge können Elemente sehen Sie die Namen der UI-Elemente und Aggregate, in bewegt werden. der Spalte Rolle, ob das UI-Element in einer Drag-&-Drop-Operation ItemListBox Ziel Einträge können zwischen bestehenden die Quelle oder das Ziel darstellt, und in der Spalte Beschreibung Einträgen sowie an der ersten und letzten eine Erläuterung zu der Operation. Position in der Liste eingefügt werden. Table: Zeilen Quelle Einzelne Tabellenzeilen können bewegt UI-Elemente Rolle Beschreibung werden. Tree: Knoten/Blatt Quelle Einzelne Knoten und Blätter können Table: Zeile Ziel Einträge können zwischen bestehenden bewegt werden. Einträgen und an der ersten und letzten Tree: Knoten/Blatt Quelle Mehrere Knoten können selektiert Position eingefügt werden. Zudem können werden, falls sie zumindest einen gemein- Elemente auf eine Tabellenzeile gezogen samen Flavor besitzen. werden. CTable: Zeilen Quelle Einzelne Tabellenzeilen können bewegt Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen werden. Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen (Forts.) 528 529 5 Drag & Drop für UI-Elemente Allgemeines 5.1 tionsmodi«, gehen wir auf die unterschiedlichen Verwendungsvari- UI-Elemente Rolle Beschreibung anten von Drag & Drop ein. CTable: Spalten Quelle Einzelne Spalten können bewegt werden. CTable: Zeilen Ziel Einträge können zwischen bestehenden Einträgen und an der ersten und letzten 5.1 Allgemeines Position eingefügt werden. Zudem können Elemente auf eine Tabellenzeile gezogen werden. Die Implementierung von Drag-&-Drop-Operationen baut auf ele- Bausteine mentaren Bausteinen auf: CTable: Spalten Ziel Einträge können zwischen, vor und nach Spalten eingefügt werden. Zudem können (cid:2) Die DragSourceInfo dient als Information für die Quelle der Drag- Elemente auf eine Tabellenspalte gezogen &-Drop-Operation. werden. (cid:2) Die DropTargetInfo sammelt die Informationen über das Ziel der Accordion Quelle Einzelne Items können bewegt werden. Drag-&-Drop-Operation, wobei für die Sammlung der Zielinfor- Accordion Ziel Zwischen Items sowie am Anfang und mation auch das Drop Target verwendet werden kann. Ende der Items können Elemente einge- fügt werden. Zudem kann ein Element auf (cid:2) Mithilfe des Ereignisses onDrop kann ein Aktionsbehandler festge- ein Item gezogen werden. legt werden, der die Implementierung der Reaktion auf das Fallen- PanelStack Quelle Ein ganzer PanelStack kann als ein lassen eines Elements auf ein anderes Element beinhaltet. Objekt gezogen werden. Im Folgenden geben stellen wir Ihnen einige Beispiele, die als An- PanelStack Ziel Einzelne Panels können auf den Stack schauungsmaterial für die Verwendung der Bausteine dienen können. gedroppt werden. DropTarget Ziel Dabei handelt es sich um einen Wrapper für UI-Elemente, die keine generische 5.1.1 DragSourceInfo Drag-&-Drop-Unterstützung anbieten. 1 In den UI-Element-Eigenschaften der DragSourceInfo ( in Abbildung Quelle UI-Element- Quelle Die UI-Elemente Image, SectionHeader 5.1) werden alle Informationen gesammelt, die zu der Quelle einer Eigenschaft und Caption können als Griff für den Drag isDragHandle verwendet werden. Drag-&-Drop-Operation gehören, d.h. einer DragSource. Auf der lin- 2 ken Seite wird das UI-Element ItemListBox , für das die Drag- Ereignis onDrop Auslöser Das Ereignis onDrop löst den Aufruf der SourceInfo definiert wird, in der Designdarstellung gezeigt. Auf der Behandlermethode zu einem Drop aus. In der Behandlermethode werden die Reak- rechten Seite sind die dazugehörenden UI-Elemente in der UI-Elemente- tionen auf den Drop implementiert. Hierarchie mit den Eigenschaften zur DragSourceInfo abgebildet. Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen (Forts.) Im folgenden Abschnitt besprechen wir die Elemente DragSour- ceInfo, DropTargetInfo, DropTarget und das Ereignis onDrop, die die Grundbausteine der Drag-&-Drop-Mechanismen darstellen. In den weiteren Abschnitten 5.2, »Tree«, bis 5.8, »PanelStack«, diskutie- ren wir im Detail die UI-Elemente, die für Drag & Drop verwendet werden können. Dabei beschreiben wir jeweils die Rolle des UI-Ele- ments als Quelle, als Ziel und die Behandlung des »Fallenlassens« auf dieses Element anhand von Beispielen. In Abschnitt 5.9, »Opera- Abbildung 5.1 DragSourceInfo 530 531 5 Drag & Drop für UI-Elemente Allgemeines 5.1 Eigenschaften (cid:2) Id den, in der sie auch definiert wurde. Wurde der Wert global zuge- Der Wert der Eigenschaft Id legt die eindeutige Bezeichnung der wiesen, kann die DragSourceInfo über Component-Grenzen hin- DragSourceInfo fest (siehe Abschnitt 4.1, »Eigenschaften für alle weg verwendet werden. UI-Elemente«). Diese kann in weiterer Folge beim Ziel verwendet (cid:2) tags werden, um festzustellen, von welcher Quelle (Source) aus die Die Eigenschaft tags (manchmal auch als Flavor bezeichnet) der Drag-&-Drop-Operation gestartet wurde. DragSourceInfo ermöglicht es Ihnen, zu definieren, welche Ziele (cid:2) data für diese Quelle relevant sind. Pro Tag können ein oder mehrere Mithilfe der Eigenschaft data können Sie Daten hinterlegen, die Bezeichner definiert werden, je nachdem, wie das Zusammenspiel bei der Drag-&-Drop-Operation »transportiert« werden sollen. zwischen UI-Elementen gewünscht ist. Diese Daten können vom Ziel (Target) der Drag-&-Drop-Operatio- Falls ein Bezeichner aus der Source mit einem Bezeichner aus dem nen verwendet werden. Zum Beispiel könnte die ID eines Team- Target komplett oder in Teilen übereinstimmt, ist das Zusammen- mitglieds transportiert und im Ziel für die Ermittlung der Abrech- spiel möglich. Werden mehrere Bezeichner für ein Tag festgelegt, nungsergebnisse herangezogen werden. müssen diese durch Leerzeichen getrennt werden. Die Groß- und Achten Sie darauf, dass keine sicherheitsbedenklichen oder volu- Kleinschreibung ist relevant für die Bezeichner. Außerdem dürfen minösen Daten übergeben werden, da Drag-&-Drop-Operationen Sie die Zeichen Doppelpunkt (:), Komma (,), Strichpunkt (;), Back- auf dem Client ausgeführt werden. Aus sicherheitstechnischen slash (\), Slash (/) und Punkt (.) für die Bezeichner nicht verwen- Gründen bietet es sich an, die Daten nicht direkt (z.B. den Namen den. Ein Beispiel für den Wert eines Tags wäre »PO SM TM«, eines Teammitglieds), sondern indirekt (z.B. die Personalnum- wobei die Bezeichner der Reihe nach für »Process Owner«, »Scrum mer) als Referenzen zu übertragen. Wie Sie in Abbildung 5.1 Master« und »Team Member« stehen. erkennen können, haben Sie die Möglichkeit, die Eigenschaft data Wird eine DragSourceInfo auf ein UI-Element aggregiert, das mehr- an den Context zu binden. Damit können Sie z.B. zeilenbezogene fach instanziiert wird (wie z.B. Zelleditoren pro Zeile in einer Daten für Tabellenzeilen hinterlegen. Tabelle), und haben Sie eine Eigenschaft der DragSourceInfo an ein (cid:2) enabled Attribut der dataSource des Aggregats gebunden, wird der Wert des Die Eigenschaft enabled steuert, ob die Drag-&-Drop-Operation Attributs der Lead-Selection verwendet. aus Sicht der Quelle aktiviert ist oder nicht. Diese Eigenschaft kann auch per Data Binding an ein Context-Attribut angebunden wer- 5.1.2 DropTargetInfo den und ist somit während der Laufzeit aufgrund der Datenände- 1 Im UI-Element DropTargetInfo ( in Abbildung 5.2) werden alle Ziel rung im Context änderbar. Informationen in Form von Eigenschaften gesammelt, die für die (cid:2) mimeType Definition des Ziels einer Drag-&-Drop-Operation relevant sind. Auf Die Eigenschaft mimeType definiert die Art der Daten, die an das 2 der linken Seite wird das UI-Element Tree im View Designer dar- Ziel übertragen werden. Defaultmäßig wird der Wert text/plain gestellt, und auf der rechten Seite sehen Sie die dazugehörenden UI- vorgegeben. Sie wird im zugrunde liegenden Release nicht vom Elemente in der UI-Elemente-Hierarchie. Zum Tree haben wir zwei Web-Dynpro-Framework umgesetzt und ist für zukünftige Ver- 3 4 TreeNodeTypes und einen TreeItemType für unser Beispiel defi- wendungen vorgesehen. niert (siehe Abschnitt 4.5.8, »Tree«). (cid:2) scope Für den TreeNodeType erkennen Sie auf der rechten Seite eine Drop- Eigenschaften Die Eigenschaft scope legt die Reichweite der DragSourceInfo fest. TargetInfo mit den dazugehörenden Eigenschaften. Die Eigenschaften Wird dieser Eigenschaft der Wert componentInstance zugewiesen, Id, enabled, tags und scope werden analog wie für die DragSourceInfo kann die DragSourceInfo nur in der Component verwendet wer- (siehe Abschnitt 5.1.1) auch für die DropTargetInfo verwendet. 532 533 5 Drag & Drop für UI-Elemente Allgemeines 5.1 In Abbildung 5.3 sehen Sie ein Beispiel für die Verwendung des UI- DropTarget Elements DropTarget, das exemplarisch für den Einsatz in anderen erzeugen Verwendungskontexten ist. Im oberen Bereich wird der Drag-Vor- 1 gang eines Teammitglieds von einer ItemListBox auf einen Trans- parentContainer, in dem die Details zum Teammitglied dargestellt werden, veranschaulicht. Der TransparentContainer beinhaltet ein Bild (Foto des Teammitglieds) und einen FormattedTextView (Rolle und Kompetenzen des Teammitglieds) und ist selbst durch ein DropTarget gekapselt. Im rechten unteren Bereich wird das Ergebnis 2 nach dem Drop auf den TransparentContainer dargestellt, also nachdem die Behandlermethode für den Zeitpunkt onDrop aus der Abbildung 5.2 DropTargetInfo Drag Source abgearbeitet wurde. name Mithilfe der Eigenschaft name legen Sie einen Namen fest, der bei der Behandlung der Drag-&-Drop-Operation im Ereignis onDrop ausgewer- tet werden kann (siehe Abschnitt 5.1.4, »Ereignis ›onDrop‹«). Im Spe- ziellen wird diese Eigenschaft für die Behandlung der Drag-&-Drop- Operationen im Kontext von Table verwendet (siehe Abschnitt 5.5). Asterisk in tags Eine besondere Bedeutung hat der Stern (*) in den Bezeichnern, die mithilfe der Eigenschaft tags definiert werden, da dieser als Joker verwendet werden kann. Ein Beispiel für den Wert eines Tags wäre »PO SM TEAM*«, wobei die Bezeichner der Reihe nach für »Process Owner«, »Scrum Master« und »TEAM*« mit beliebigem Text stehen. In diesem Beispiel wird vom System ein Mustervergleich mit den Source-Bezeichnern vorgenommen, und würde die Source einen Bezeichner »TEAM_AT« beinhalten, würde dieser dem Muster »TEAM*« im Ziel entsprechen. Mit dem Joker haben Sie demnach die Möglichkeit, Gruppen von Bezeichnern identisch zu behandeln. 5.1.3 DropTarget Zielkapsel UI-Elemente, die keine DropTargetInfo als Unterelement anbieten, können mithilfe des UI-Elements DropTarget als Ziel eines Drag-&- Drop-Vorgangs definiert werden. Dabei funktioniert das DropTarget wie eine Kapsel um das UI-Element, das als Ziel dienen soll. Im View Abbildung 5.3 UI-Element DropTarget Designer können Sie nur ein Element unter dem DropTarget einfü- gen, jedoch stellt dies keine Einschränkung dar, da Sie einfach das Um ein DropTarget in Ihrem Layout zu verwenden, müssen Sie nur UI-Element TransparentContainer einfügen können, das wiederum wenige Schritte ausführen. mehrere UI-Elemente aufnehmen kann. 534 535 5 Drag & Drop für UI-Elemente Allgemeines 5.1 1.Fügen Sie im ersten Schritt das UI-Element DropTarget in die UI- ereignisrelevanten Daten abgelegt, die sich auch in der Schnitt- 3 Elemente-Hierarchie ein . stelle der Aktionsbehandler-Methode widerspiegeln. 2.Definieren Sie eine Aktion für das Ereignis onDrop 4, wie in (cid:2) Die weiteren Parameter werden in unserem Beispiel explizit über Abschnitt 5.1.4 beschrieben. die Schnittstelle der Behandlermethode übergeben. Explizit bedeu- 5 tet, dass Sie die Parameter entweder manuell in der Schnittstelle 3.Erzeugen Sie für das DropTarget eine DropTargetInfo (siehe der Behandlermethode anlegen oder diese mithilfe des Buttons Abschnitt 5.1.2). Parameter aus UI-Ereignis ( ) anlegen lassen. 4.Definieren Sie das Unterelement für das DropTarget. Die Menge und Art der Parameter richten sich nach dem Typ des Die Arbeit, die jetzt noch zu erledigen ist, betrifft die Implementierung Drop-Ziels, daher werden wir zu den folgenden Beschreibungen der der Behandlermethode für das Ereignis onDrop. Diese gestalten Sie je UI-Elemente immer auch die Parameter in einem Abschnitt »Ereignis nach der gewünschten Reaktion auf den Drop. In unserem Beispiel onDrop« erläutern. wird in der Implementierung das Context-Element für das ausgewählte Teammitglied gelesen, formatiert und dem Image und FormattedText- Die Parameter, die wir in Abbildung 5.4 als Teil der Parameterliste View in Form eines Context-Knoten-Elements zur Verfügung gestellt. zur Aktionsbehandler-Methode für das Ereignis onDrop gezeigt haben, finden sich auch im Objektattribut PARAMETERS des Referenz- Roundtrip vor der Drop-Behandlung parameters WDEVENT wieder. Das bedeutet für Sie, dass Sie auf zwei Arten auf die Daten zugreifen können. Beim Auslesen der Daten aus dem Context-Knoten für die DropDown- ListBox mittels der Lead-Selection muss vor der Drop-Behandlung noch ein Roundtrip durchgeführt werden. Dazu können Sie z.B. eine Aktion für das Ereignis onLeadSelection anlegen. 5.1.4 Ereignis »onDrop« In den UI-Elementen, die als Ziel verwendet werden können, wird das Ereignis onDrop angeboten. Damit wird der funktionale Aspekt der Behandlung eines Fallenlassens auf das Ziel implementiert. Dem Ereignis müssen Sie eine Aktion zuordnen, die eine zugeordnete Akti- onsbehandler-Methode besitzt. Darin können Sie die gewünschte Abbildung 5.4 onDrop-Parameter der ItemListBox Reaktion des Drops implementieren, wie z.B. das Einfügen einer neuen Tabellenzeile. Im Folgenden erläutern wir die für das Drag & Drop relevanten Para- Drop-Daten Die Daten, die vom Ziel übertragen werden, stehen als Parameter der meter im Attribut PARAMETERS des Ereignisobjekts WDEVENT, das Sie in Aktionsbehandler-Methode für das Ereignis onDrop zur Verfügung, Abbildung 5.5 sehen können. wie Sie im Beispiel in Abbildung 5.4 sehen können. Dort werden die Das Ereignisobjekt WDEVENT vom Typ CL_WD_CUSTOM_EVENT besitzt die WDEVENT Parameter dargestellt, die im Kontext eines ItemListBox-Drops über- Attribute PARAMETERS 1, NAME 2 und SOURCE_COMPONENT_ID 3. Das tragen, also an die Aktionsbehandler-Methode für onDrop als Para- Attribut NAME beinhaltet den Namen des Auslöseereignisses, in unse- meter übergeben werden: rem Fall ON_DROP. Das Attribut SOURCE_COMPONENT_ID hält den Namen (cid:2) Der Parameter WDEVENT 1 repräsentiert wie immer bei einer Akti- der Web-Dynpro-Component, von der aus der Drag gestartet wurde. Falls die Drag-&-Drop-Operation in derselben Web-Dynpro-Compo- onsbehandler-Methode das Ereignis. In diesem Objekt sind die nent ausgeführt wird, ist das Attribut initial. 536 537 5 Drag & Drop für UI-Elemente Tree 5.2 Beispiel hat OFFSET den Wert -1 in einer ItemListBox, da der Benutzer den Drop vor dem zweiten Eintrag ausgeführt hat. 5.2 Tree Das UI-Element Tree bietet vielfältige Möglichkeiten und Unterstüt- zungen für die Drag-&-Drop-Operationen. Wie Sie diese im Detail umsetzen können, erfahren Sie in diesem Abschnitt. DragSourceInfo Falls Sie einen Knoten oder ein Blatt eines Baums als Drag Source ver- Knoten oder Blatt wenden möchten, müssen Sie zu dem Knoten (TreeNodeType) oder Blatt (TreeItemType) ein Unterelement vom Typ DragSourceInfo im View Designer definieren. In Abbildung 5.6 sehen Sie eine eingefügte DragSourceInfo für ein 1 2 Blatt und einen Knoten . Im unteren Bereich der Abbildung Abbildung 5.5 WDEVENT-Objektattribute 3 erkennen Sie die optische Darstellung des Drag-Vorgangs . Das Attribut PARAMETERS repräsentiert eine interne Tabelle mit den folgenden Einträgen: (cid:2) ID Der Eintrag ID steht für die ID des UI-Elements, das das onDrop- Ereignis ausgelöst hat, d.h. für das Ziel der Drag-&-Drop-Operation. (cid:2) CONTEXT_ELEMENT Der Eintrag CONTEXT_ELEMENT repräsentiert das Context-Element aus der Quelle, die zu der Drag-&-Drop-Operation gehört. (cid:2) DATA, MIME_TYPE, TAGS Diese drei Einträge liefern die Daten, die in der DragSourceInfo der Quelle definiert wurden (siehe Abschnitt 5.1.1). (cid:2) INDEX Der Eintrag INDEX bietet die Information über die Drop-Position im betroffenen Ziel. Zum Beispiel hat der INDEX den Wert 2 in einer ItemListBox, weil der Benutzer den Drop vor dem zweiten Eintrag ausgeführt hat. (cid:2) OFFSET Der Eintrag OFFSET liefert die Positionsinformation der Drop-Posi- tion relativ zum Eintrag INDEX oder anderen Bezugsgrößen. Zum Abbildung 5.6 Tree DragSourceInfo 538 539 5 Drag & Drop für UI-Elemente Tree 5.2 DropTargetInfo müssen Sie noch eine DropTargetInfo für den Knoten TNT2_ROLE anlegen und ein Tag definieren, das mit dem Tag TEAMMEMBER vom Wird der Tree als Drop Target verwendet, stehen die folgenden Ein- TreeItemType TIT3_TEAMMEMBER zusammenpasst, z.B. TEAM*. fügepositionen zur Verfügung: (cid:2) zwischen existierenden Blättern Ereignis »onDrop« (cid:2) als erstes oder letztes Blatt Das Ereignisobjekt WDEVENT, das an die Behandlermethode über- Parameter (cid:2) auf ein existierendes Blatt bzw. auf einen existierenden Knoten geben wird, liefert für die Implementierung die folgenden Informa- Beispiel In Abbildung 5.7 sehen Sie ein Drop-Beispiel. Im unteren Bereich tionen: der Abbildung erkennen Sie auf der linken Seite die Visualisierung (cid:2) ID: Das Element ID beschreibt die ID des Drop Targets. 1 der Suche nach der Einfügeposition durch den Benutzer . Dieser hat sich für das Einfügen an der zweiten Position entschieden. (cid:2) CONTEXT_ELEMENT: Das Element liefert eine Referenz auf ein Con- text-Element. (cid:2) Falls auf ein Baumblatt oder einen Baumknoten gedroppt wird, ist dies das Context-Element, das die Datenbasis des Blattes/ Knotens bildet. (cid:2) Falls zwischen Blättern/Knoten gedroppt wird, ist dies das Con- text-Element, das für das Blatt/den Knoten nach der Drop-Posi- tion steht. (cid:2) Falls am Ende von Blättern/Knoten gedroppt wird, ist dies das Context-Element, das für das letzte Blatt/den letzten Knoten steht. (cid:2) DATA: Das Element DATA beinhaltet die Daten aus der Drag Source. (cid:2) MIME_TYPE: Das Element MIME_TYPE enthält den MIME-Typ aus der Drag Source. (cid:2) TAGS: Das Element TAGS beinhaltet die Tags aus der Drag Source. (cid:2) OFFSET: Über OFFSET wird die Elementposition im Knoten des Baums bestimmt. (cid:2) Der Parameter hat den Wert -1, falls in einer Liste von Blättern/ Abbildung 5.7 Tree DropTargetInfo Knoten gedroppt wird. (cid:2) Er hat den Wert 1, falls am Ende einer Liste von Blättern/Kno- In der Abbildung rechts unten sehen Sie zwei Varianten für das Fal- 2 ten gedroppt wird. lenlassen auf den TreeItemType: einerseits zwischen den Blättern mit Visualisierung der Einfügeposition und andererseits auf einem (cid:2) Er hat den Wert 0, falls direkt auf ein Blatt/einen Knoten anderen Blatt 3. Lässt der Benutzer das Element an der von ihm gedroppt wird. gewünschten Stelle fallen, wird das Ereignis onDrop des TreeNode- (cid:2) PATH: Das Element PATH enthält den Pfad zum CONTEXT_ELEMENT im 4 5 Type bzw. TreeItemType ausgelöst und kann durch die Imple- Context. mentierung behandelt werden. Für den Drop zwischen den Blättern 540 541 5 Drag & Drop für UI-Elemente GridLayout/MatrixLayout 5.3 Für die Implementierung der Reaktion auf das Fallenlassen von Ele- menten bieten sich unter anderem die Methoden move_* aus dem Interface IF_WD_CONTEXT_NODE dazu an, Elemente zu einem Context- Knoten zu verschieben. 5.3 GridLayout/MatrixLayout Layout Im GridLayout und MatrixLayout (siehe Abschnitt 3.3, »Layouts«) können einzelne Zellen dieses Layouts verschoben bzw. Objekte zwi- schen Zellen eingefügt werden. Beachten Sie dabei, dass Drag & Drop nur bei einspaltigem GridLayout bzw. einzeiligem MatrixLay- out möglich ist. DragSource Damit eine Drag-Operation durchgeführt werden kann, muss für eine Zelle ein Griff (Handle) definiert werden. Dieser ermöglicht das »Angreifen« der Zelle. Dabei können ein SectionHeader, eine Cap- tion oder ein Image mit der UI-Element-Eigenschaft isDragHandle = true eingesetzt werden. Beispiel In Abbildung 5.8 sehen Sie ein Beispielszenario, das es dem Benutzer ermöglicht, die Position einer ItemListBox zu verändern. Beim Ver- Abbildung 5.8 Drag & Drop einer ItemListBox schieben der Box wird im User Interface die neue potenzielle Einfü- geposition durch eine gestrichelte Linie visualisiert. TC 1 Layout = GridLayout In Abbildung 5.9 haben wir das Layout des Szenarios schematisch Layout.colCount = 1 TC 11 dargestellt. Der zentrale Container für die Gestaltung ist der Trans- SH 11 Layoutdaten.dragData = TEAMS parentContainer TC1, der als Layout den Wert GridLayout und die isDragHandle = true Spaltenanzahl Layout.colCount = 1 erhält. In TC1 haben wir die drei weiteren TransparentContainer TC11, TC12 und TC13 platziert, die TC 12 SH 12 Layoutdaten.dragData = ITM dann gezogen werden. Beim Drag-Vorgang können auch Daten mit- isDragHandle = true gegeben werden, diese werden in den Layoutdaten (LayoutDa- ten.dragData) abgelegt. In unserem Beispiel wird der Transparent- TC 13 Container gezogen, daher werden die Drag-Daten in den dortigen SH 13 Layoutdaten.dragData = ETM Layoutdaten abgelegt. Als Ausprägungen haben wir in unserem Bei- isDragHandle = true spiel »TEAMS«, »ITM« (für »Internal Team Members«) und »ETM« (für »External Team Members«) verwendet. Abbildung 5.9 Drag GridLayout/MatrixLayout 542 543