Sappress Web Dynpro Abap Handbuch

download Sappress Web Dynpro Abap Handbuch

of 90

Transcript of Sappress Web Dynpro Abap Handbuch

Roland Schwaiger, Dominik Ofenloch

Web Dynpro ABAP TM

Das umfassende Handbuch

Bonn

Boston

Auf einen BlickTEIL I Grundlagen 1 2 Schnelleinstieg in Web Dynpro ABAP ....................... Web-Dynpro-Architektur ......................................... 27 43

TEIL II Referenz 3 4 5 6 7 8 Container und Layouts ............................................. 189 UI-Elemente und ihre Eigenschaften ......................... 273 Drag & Drop fr UI-Elemente ................................... 509 Visuelle Anpassung von Web-Dynpro-Anwendungen .................................... 545 Dynamische Programmierung ................................... 695 Eingabe- und semantische Hilfen .............................. 763

TEIL III Fortgeschrittene Techniken 9 Erweiterung, Konfiguration, Customizing und Personalisierung ....................................................... 841

10 Integration komplexer UI-Elemente und Components ............................................................ 883 11 Weiterfhrende Konzepte ........................................ 987 Anhang A B C Anwendungsparameter und URL-Parameter ............. 1083 Web-Dynpro-Programmierschnittstellen .................. 1095 Die Autoren ............................................................. 1135

InhaltVorwort ................................................................................... 19

TEIL I: Grundlagen 1 Schnelleinstieg in Web Dynpro ABAP ...................1.1 1.2 Was ist Web Dynpro? ............................................ Model-View-Controller .......................................... 1.2.1 Model-View-Controller in der Theorie ....... 1.2.2 Varianten .................................................. 1.2.3 Model-View-Controller und Web Dynpro ............................................. Funktionalitt und Beispielanwendung .................. 1.3.1 Web-Dynpro-Technologie ......................... 1.3.2 UI-Elemente .............................................. 1.3.3 Fortgeschrittene Funktionen ...................... 1.3.4 Wiederverwendung von Web-Dynpro-Elementen ...........................

2727 29 30 31 32 33 33 34 38 40

1.3

2

Web-Dynpro-Architektur .......................................2.1 Entwicklungsumgebung ......................................... 2.1.1 Web Dynpro Explorer ................................ 2.1.2 Web-Dynpro-Code-Wizard ........................ 2.1.3 Template Gallery ....................................... Components und Anwendungen ............................ 2.2.1 Components .............................................. 2.2.2 Anwendungen ........................................... 2.2.3 Zusammenhang zwischen Components und Anwendungen .................................... 2.2.4 Anwendung Dynamische nderung des Browser-Titels ..................................... 2.2.5 Schritt fr Schritt: Anlegen von Components und Anwendungen ............... View ...................................................................... 2.3.1 Views ........................................................

4344 44 51 54 55 55 57 57 58 58 64 64

2.2

2.3

7

Inhalt

2.4

2.5

2.6

2.7

Windows und Plugs ................................... Nachrichten Message Manager und Message Area ...................................... Controller ............................................................... 2.4.1 Controller-Typen ........................................ 2.4.2 Attribute .................................................... 2.4.3 Methoden .................................................. 2.4.4 Phasenmodell ............................................ 2.4.5 Verwendung und Sichtbarkeit .................... 2.4.6 Aktionen und Ereignisse ............................. 2.4.7 Controller-Interface-Typen ......................... 2.4.8 Assistance-Klasse ....................................... Context .................................................................. 2.5.1 Aufbau des Contexts .................................. 2.5.2 Context-Editor ........................................... 2.5.3 Eigenschaften ............................................. 2.5.4 Lead-Selection ........................................... 2.5.5 Rekursive Context-Knoten .......................... 2.5.6 Datenbindung ............................................ 2.5.7 Mapping .................................................... 2.5.8 Supply-Funktionen ..................................... 2.5.9 Context-Attribut-Eigenschaften .................. 2.5.10 Context-Change-Log .................................. Context-Programmierung ....................................... 2.6.1 Navigation durch den Context .................... 2.6.2 Setzen der Lead-Selection .......................... 2.6.3 Erzeugen und Lschen von Context-Elementen .................................... 2.6.4 Auslesen und nderung von existierenden Context-Knoten/ -Elementen ................................................ Multi-Component-Architekturen ............................ 2.7.1 Component-Verwendungen ....................... 2.7.2 Verwendung von Interface-Views ............... 2.7.3 Verwendung des InterfaceControllers ................................................. 2.7.4 Componentbergreifendes Mapping .................................................... 2.7.5 Component-Interfaces ................................

2.3.2 2.3.3

79 95 107 107 109 110 113 116 119 124 125 126 127 129 134 137 139 140 144 147 148 152 156 157 159 160

163 165 166 173 174 176 183

8

Inhalt

TEIL II: Referenz 3 Container und Layouts ........................................... 1893.1 Container ............................................................... 3.1.1 Eigenschaften fr alle Container ................. 3.1.2 TransparentContainer ................................ 3.1.3 ScrollContainer .......................................... 3.1.4 Group ........................................................ 3.1.5 Tray ........................................................... 3.1.6 Panel ......................................................... Quasi-Container .................................................... 3.2.1 Accordion .................................................. 3.2.2 RowRepeater ............................................. 3.2.3 ContextualPanel ........................................ 3.2.4 HorizontalContextualPanel ........................ 3.2.5 NavigationList ........................................... 3.2.6 PageHeader ............................................... 3.2.7 ButtonRow ................................................ 3.2.8 MultiPane ................................................. 3.2.9 TabStrip ..................................................... 3.2.10 ViewContainerUIElement .......................... Layouts .................................................................. 3.3.1 Grundlagen ............................................... 3.3.2 FlowLayout ............................................... 3.3.3 RowLayout ................................................ 3.3.4 MatrixLayout ............................................. 3.3.5 GridLayout ................................................ 189 191 196 201 201 205 209 215 216 222 225 228 232 241 245 246 252 258 258 259 261 265 267 270

3.2

3.3

4

UI-Elemente und ihre Eigenschaften ..................... 2734.1 Kategorie text ..................................................... 4.1.1 Allgemeines ............................................... 4.1.2 InputField .................................................. 4.1.3 Label ......................................................... 4.1.4 Caption ..................................................... 4.1.5 Explanation ............................................... 4.1.6 TextView ................................................... 4.1.7 TextEdit ..................................................... 277 277 278 289 294 296 301 304

9

Inhalt

4.2

4.3

4.4

4.5

4.6

4.1.8 FormattedTextView .................................... 4.1.9 FormattedTextEdit ..................................... 4.1.10 SectionHeader ............................................ Kategorie action .................................................. 4.2.1 Allgemein .................................................. 4.2.2 Button ....................................................... 4.2.3 ButtonChoice ............................................. 4.2.4 IconButton ................................................. 4.2.5 LinkChoice ................................................. 4.2.6 LinkToAction .............................................. 4.2.7 LinkToURL ................................................. 4.2.8 TimedTrigger .............................................. Kategorie selection .............................................. 4.3.1 Allgemein .................................................. 4.3.2 ToggleButton ............................................. 4.3.3 ToggleLink ................................................. Kategorie complex .............................................. 4.4.1 Allgemein .................................................. 4.4.2 BreadCrumb ............................................... 4.4.3 DateNavigator ............................................ 4.4.4 Legend ....................................................... 4.4.5 PhaseIndicator ........................................... 4.4.6 RoadMap ................................................... 4.4.7 Shuttle ....................................................... 4.4.8 Tree ........................................................... Kategorie layout .................................................. 4.5.1 Allgemein .................................................. 4.5.2 HorizontalGutter ........................................ 4.5.3 InvisibleElement ......................................... 4.5.4 MessageArea .............................................. Kategorie graphic ................................................ 4.6.1 Allgemein .................................................. 4.6.2 BusinessGraphics ........................................ 4.6.3 Gantt ......................................................... 4.6.4 GeoMap ..................................................... 4.6.5 ValueComparison ....................................... 4.6.6 Image ......................................................... 4.6.7 Network ..................................................... 4.6.8 ProgressIndicator ....................................... 4.6.9 ThresholdSlider ..........................................

308 314 316 319 319 320 323 326 329 331 335 338 339 340 341 344 345 345 346 350 356 360 364 372 375 385 385 386 388 388 392 392 393 418 426 436 440 443 444 447

10

Inhalt

4.7

4.8

Kategorie integration .......................................... 4.7.1 Allgemein .................................................. 4.7.2 AcfExecute ................................................ 4.7.3 AcfUpDownload ........................................ 4.7.4 FileDownload ............................................ 4.7.5 FileUpload ................................................. 4.7.6 IFrame ....................................................... 4.7.7 InteractiveForm ......................................... 4.7.8 OfficeControl ............................................. Aggregierte Elemente ............................................ 4.8.1 Allgemein .................................................. 4.8.2 Menu ........................................................ 4.8.3 MenuBar ................................................... 4.8.4 ToolBar .....................................................

452 453 454 458 461 470 472 475 483 492 492 493 498 500

5

Drag & Drop fr UI-Elemente ................................ 5095.1 Allgemeines ........................................................... 5.1.1 DragSourceInfo ......................................... 5.1.2 DropTargetInfo .......................................... 5.1.3 DropTarget ................................................ 5.1.4 Ereignis onDrop ..................................... Tree ....................................................................... 5.2.1 DragSourceInfo ......................................... 5.2.2 DropTargetInfo .......................................... 5.2.3 Ereignis onDrop ..................................... GridLayout/MatrixLayout ....................................... 5.3.1 DragSource ................................................ 5.3.2 DropTarget ................................................ 5.3.3 Ereignis onDrop ..................................... 5.3.4 Dynamische Programmierung .................... ItemListBox ........................................................... 5.4.1 DragSourceInfo ......................................... 5.4.2 DropTargetinfo .......................................... 5.4.3 Ereignis onDrop ..................................... Table ..................................................................... 5.5.1 Nicht hierarchische Tabellen ...................... 5.5.2 Hierarchische Tabellen ............................... Accordion .............................................................. 5.6.1 DragSource ................................................ 512 513 515 517 518 521 521 522 524 525 525 526 526 528 531 531 532 532 534 534 538 540 540

5.2

5.3

5.4

5.5

5.6

11

Inhalt

5.7

5.6.2 DropTargetinfo .......................................... 5.6.3 Ereignis onDrop ...................................... Operationsmodi ..................................................... 5.7.1 Browse & Collect ........................................ 5.7.2 Generisches Drag & Drop ........................... 5.7.3 Laufzeit-Authoring .....................................

541 542 543 543 543 543

6

Visuelle Anpassung von Web-Dynpro-Anwendungen .................................. 5456.1 6.2 MIME Repository und Theme Editor ...................... Notwendige Vorbereitungen .................................. 6.2.1 Installation des SAP NetWeaver Developer Studios ...................................... 6.2.2 Installation von Eclipse ............................... 6.2.3 Installation des Theme Editors .................... Themes aus dem SAP-System exportieren ............... Themes im Theme Editor ........................................ 6.4.1 Theme-Editor-Perspektive .......................... 6.4.2 Theme importieren .................................... 6.4.3 Theme kopieren ......................................... 6.4.4 Theme bearbeiten ...................................... 6.4.5 Theme exportieren ..................................... Hochladen von Themes in das SAP-System ............. Verwendung von Themes in einer Web-Dynpro-Anwendung ...................................... 6.6.1 URL-Parameter .......................................... 6.6.2 Anwendungsparameter .............................. 6.6.3 Globale Einstellungen ................................. 6.6.4 Probleme ................................................... Kategorien, Parameter und Werte .......................... 6.7.1 Pflegekategorie .......................................... 6.7.2 Kategorie Global Styles Content Area ...... 6.7.3 Kategorie Patterns .................................. 6.7.4 Kategorie Complex Elements ................... 6.7.5 Kategorie Simple Elements ...................... 6.7.6 Kategorie Screen Areas .......................... Beispiel Mountain View ...................................... 6.8.1 Web-Dynpro-Anwendung Mountain View ....................................... 6.8.2 Custom Theme mountain_view anlegen .. 546 548 548 549 550 552 553 553 554 557 558 566 567 569 569 570 570 571 572 572 588 592 602 661 678 679 680 691

6.3 6.4

6.5 6.6

6.7

6.8

12

Inhalt

7

Dynamische Programmierung ................................ 6957.1 7.2 Arten dynamischer Programmierung ...................... Context .................................................................. 7.2.1 Context-Knoten-Metainformation ............. 7.2.2 Context-Knoten anlegen ............................ 7.2.3 Context-Attribute anlegen ......................... 7.2.4 Context-Mapping ...................................... 7.2.5 Weitere Methoden .................................... View ...................................................................... 7.3.1 ABAP-Klassenhierarchie fr UI-Elemente .............................................. 7.3.2 Referenz eines UI-Elementes ermitteln ...... 7.3.3 Eigenschaft und Layout eines UI-Elementes ndern ................................. 7.3.4 UI-Elemente anlegen ................................. Aktion ................................................................... 7.4.1 Implementierung der Methode wddomodifyview( ) ................................ 7.4.2 Implementierung AktionsbehandlerMethode ................................................... Component-Verwendung ...................................... 7.5.1 Prinzipielles zur Verwendung von Components .............................................. 7.5.2 Cloning von Verwendungserklrungen ....... 7.5.3 Dynamische View-Einbettung .................... 7.5.4 Dynamische Ereignisregistrierung .............. 696 697 698 700 706 714 717 720 721 723 725 727 736 738 740 742 742 746 754 758

7.3

7.4

7.5

8

Eingabe- und semantische Hilfen .......................... 7638.1 Implementierung von Auswahlmglichkeiten ......... 8.1.1 Dropdown-Mens ..................................... 8.1.2 Radiobutton .............................................. 8.1.3 Checkbox .................................................. 8.1.4 ItemListBox ............................................... 8.1.5 TriStateCheckBox ...................................... Wertehilfen ........................................................... 8.2.1 Wertehilfe-Modus Deaktiviert ................ 8.2.2 Wertehilfe-Modus Automatisch ............. 8.2.3 Wertehilfe-Modus Dictionary-Suchhilfe .. 764 764 771 775 779 781 782 784 784 792

8.2

13

Inhalt

8.3

8.4

Wertehilfe-Modus Object-Value Selector .................................................... 8.2.5 Wertehilfe-Modus Frei Programmiert ...... Select-Options ....................................................... 8.3.1 Select-Options in ABAP-Programmen ........ 8.3.2 Web-Dynpro-Component WDR_SELECT_OPTIONS ............................ 8.3.3 Select-Options-Component verwenden ...... 8.3.4 Interface IF_WD_SELECT_OPTIONS ........... Semantische Hilfen ................................................. 8.4.1 Hilfetexte mit Quick-Infos .......................... 8.4.2 Erluterungstexte ....................................... 8.4.3 ABAP-Dictionary-Hilfe ............................... 8.4.4 Erluterungen ............................................

8.2.4

792 804 815 815 816 820 823 830 831 832 833 834

TEIL III: Fortgeschrittene Techniken 9 Erweiterung, Konfiguration, Customizing und Personalisierung ..................................................... 8419.1 Erweiterungen mit dem SAP Enhancement Framework ................................ 9.1.1 Anlegen einer Erweiterung ......................... 9.1.2 Erweiterung von Web-Dynpro-Objekten .... Konfiguration im berblick ..................................... Berechtigungen ...................................................... Component-Konfiguration ...................................... 9.4.1 Bestandteile ............................................... 9.4.2 Anlegen einer Component-Konfiguration ... 9.4.3 Web-Dynpro-Built-In-Konfiguration ........... 9.4.4 Component-defined-Konfiguration ............. 9.4.5 Erstellung eigener ComponentKonfigurationseditoren ............................... 9.4.6 Component-Konfigurationseigenschaften ... Anwendungskonfiguration ...................................... 9.5.1 Anlegen und Bearbeiten von Anwendungskonfigurationen ...................... 9.5.2 Anwendungsparameter .............................. 9.5.3 Auswahl der zu verwendenden Component-Konfiguration .........................

9.2 9.3 9.4

845 846 847 851 853 853 853 854 856 857 863 867 868 869 871 872

9.5

14

Inhalt

9.6

9.7

Customizing ........................................................... 9.6.1 Anlegen des Customizings ......................... 9.6.2 Transport des Customizings ....................... 9.6.3 Dekorative UI-Elemente ............................ Personalisierung ..................................................... 9.7.1 Verwendung der Web-Dynpro-Built-InPersonalisierung ........................................ 9.7.2 Explizites Speichern eines Configuration-Controllers .......................... 9.7.3 Abschalten der Personalisierung ................

873 875 876 877 878 878 879 881

10 Integration komplexer UI-Elemente und Components ........................................................... 88310.1 FlashIsland/SilverlightIsland (*Island) ..................... 10.1.1 Adobe Flash .............................................. 10.1.2 Microsoft Silverlight .................................. 10.1.3 Vorgehen .................................................. 10.1.4 Eigenschaften von *Island .......................... 10.1.5 Aggregierte Elemente ................................ 10.1.6 Barrierefreiheit .......................................... 10.1.7 Achtung .................................................... 10.2 Table ..................................................................... 10.2.1 Einfache Tabelle anlegen ........................... 10.2.2 Eigenschaften ............................................ 10.2.3 Ereignisse .................................................. 10.2.4 Achtung .................................................... 10.2.5 Aggregierte Elemente ................................ 10.2.6 Weitere Mglichkeiten .............................. 10.3 TableColumn ......................................................... 10.3.1 Eigenschaften ............................................ 10.3.2 Barrierefreiheit .......................................... 10.3.3 Aggregierte Elemente ................................ 10.3.4 Ereignis ..................................................... 10.4 TablePopin ............................................................ 10.4.1 Eigenschaften ........................................... 10.4.2 Ereignis ..................................................... 10.4.3 Aggregierte Elemente ................................ 10.4.4 Verwendung .............................................. 10.5 TableColumnGroup ................................................ 884 885 885 886 893 893 899 899 901 903 907 919 927 927 931 934 934 941 941 948 948 949 950 950 951 954

15

Inhalt

10.6 TableRowGrouping, TreeByKeyTableColumn und TreeByNestingTableColumn .................................... 10.6.1 TableRowGrouping .................................... 10.6.2 TreeByKeyTableColumn und TreeByNestingTableColumn ....................... 10.7 SAP List Viewer ...................................................... 10.7.1 Integration des SAP List Viewers in drei Schritten ............................................. 10.7.2 Methoden und Ereignisse der ALV-Component ........................................ 10.7.3 ALV-Configuration-Model .......................... 10.7.4 nderungen an den Tabelleneinstellungen ............................................. 10.7.5 nderungen am Spaltenvorrat .................... 10.7.6 nderungen an der Toolbar ........................

956 956 958 962 964 966 973 980 981 984

11 Weiterfhrende Konzepte ..................................... 98711.1 Popup-Fenster ........................................................ 987 11.1.1 Fensterebenen ........................................... 988 11.1.2 Popup-Fenster erzeugen ............................ 989 11.1.3 Standard-Button-Aktionen ......................... 992 11.1.4 Anlegen eines Pop-ups ............................... 993 11.2 Kontextmens ........................................................ 995 11.2.1 Standard-Kontextmen .............................. 997 11.2.2 Kontextmen anlegen ................................ 999 11.2.3 Zuweisung eines Kontextmens .................1004 11.3 Fokus-Handling ......................................................1005 11.3.1 Cursor-Beeinflussung ber Meldungen .......1006 11.3.2 Gezieltes Setzen des Cursors auf ein UI-Element ................................................1007 11.3.3 Gezieltes Setzen des Cursors auf ein Context-Element-Attribut ..........................1008 11.3.4 Gezieltes Scrollen zu einem UI-Element .....1008 11.4 Nachrichten und Internationalisierung ....................1009 11.4.1 Texte aus dem ABAP Dictionary .................1010 11.4.2 Texte aus dem Online Text Repository ......1011 11.4.3 Texte aus der Assistenzklasse .....................1014 11.4.4 Nachrichten ...............................................1019

16

Inhalt

11.5 Portalintegration .................................................... 1038 11.5.1 Voraussetzungen ....................................... 1039 11.5.2 Portal-Eventing .......................................... 1040 11.5.3 Navigation ................................................. 1044 11.5.4 WorkProtect-Modus .................................. 1048 11.5.5 Interface IF_WD_PORTAL_ INTEGRATION .......................................... 1049 11.6 Performance- und Speicheroptimierung ................. 1050 11.6.1 Optimale Systemkonfiguration ................... 1052 11.6.2 Checklisten fr die performante Web-Dynpro-Entwicklung ......................... 1055 11.6.3 Performance-Tools .................................... 1058 11.6.4 On-Demand-Component- und View-Instanzierung .................................... 1063 11.6.5 Delta-Rendering ........................................ 1066 11.7 Debuggen von Web-Dynpro-Anwendungen .......... 1072 11.7.1 Debugger einrichten ................................. 1072 11.7.2 Verwendung des Web-DynproWerkzeugs ................................................ 1073 11.8 Barrierefreiheit ....................................................... 1076 11.8.1 Barrierefreie Entwicklung ........................... 1077 11.8.2 Barrierefreiheit aktivieren und testen ......... 1079

Anhang .......................................................................... 1081A Anwendungsparameter und URL-Parameter ..................... 1083 A.1 Anwendungsparameter setzen ............................... 1083 A.2 Auswertungsreihenfolge ........................................ 1084 A.3 Anwendungsparameter .......................................... 1084 A.4 Globale Einstellungen ............................................ 1092 A.5 URL-Parameter fr Web Dynpro ............................ 1093 A.6 SAP-URL-Parameter ............................................... 1093 Web-Dynpro-Programmierschnittstellen .......................... 1095 B.1 Component ........................................................... 1095 B.2 Controller-Schnittstellen ........................................ 1099 B.3 Anwendungs-Interface IF_WD_APPLICATION ....... 1101 B.4 View-Schnittstellen ................................................ 1102 B.5 Window-Schnittstellen .......................................... 1104 B.6 Nachrichtenausgabe .............................................. 1107

B

17

Inhalt

B.7

C

Personalisierung IF_WD_PERSONALIZATION ...................................1109 B.8 Portalintegration IF_WD_PORTAL_INTEGRATION ............................1113 B.9 Context-Schnittstellen ............................................1114 Die Autoren ......................................................................1135

Index ........................................................................................1137

18

Einfache und effiziente Interaktivitt des Benutzers mit dem User Interface ist das hchste Ziel. Drag & Drop ist ein effektiver Ansatz, um diese Forderungen zu erreichen. In diesem Kapitel erfahren Sie alles darber, wie Drag & Drop in Web Dynpro ABAP eingesetzt werden kann.

5

Drag & Drop fr UI-ElementeInteraktionsform

Die Drag-&-Drop-Funktionalitt in Web Dynpro ABAP ermglicht es Ihnen, den Benutzern intuitive und einfache Interaktionsformen anzubieten. Unter Drag & Drop versteht man jene Benutzerinteraktion, die ein UI-Element oder die Eintrge eines UI-Elementes die sogenannte Quelle (Source) auf das gleiche oder ein anderes UI-Element zieht, das als Ziel (Target) bezeichnet wird. Zur Durchfhrung dieser Interaktion dient ein Eingabegert, wie zum Beispiel die Maus.Hinweis: Beachten Sie, dass die Barrierefreiheit einer Web-DynproAnwendung erfordert, dass die Interaktionen, die mit Drag & Drop durchgefhrt werden knnen, auch barrierefrei sein mssen. Dies kann fr Sie bedeuten, dass Sie die durch Drag & Drop angebotenen Funktionen fr die barrierefreie Nutzung implementieren mssen.

Im Fall der Drag-&-Drop-Operation mithilfe der Maus lsst sich das Vorgehen aus Sicht des Benutzers folgendermaen beschreiben: Der Benutzer klickt ein UI-Element an und hlt die Maustaste gedrckt. Dieses UI-Element wird als Quelle (Drag Source) bezeichnet. Dem Benutzer wird durch ein Geisterbild (Ghost Image) angedeutet, dass er sich in einer Drag-&-Drop-Operation befindet. Falls der Benutzer, immer noch mit gedrckter Maustaste, den Mauszeiger bewegt, bewegt sich auch das Geisterbild mit. Dieser Vorgang wird als Ziehen (Drag) bezeichnet. Falls der Benutzer den Mauszeiger auf ein gltiges UI-Element bewegt, wird dies optisch zum Beispiel durch eine Umrandung

Benutzer

509

5

Drag & Drop fr UI-Elemente

des Ziels angedeutet. Weist der Mauszeiger auf ein ungltiges Ziel hin, wird dies durch ein Verboten-Bild visualisiert. Das UIElement, auf das gezogen wird, wird als Ziel (Drop Target) bezeichnet. Falls sich der Benutzer ber einem gltigen Ziel befindet und die Maustaste loslsst, wird beim Ziel ein Ereignis ausgelst und die vom Entwickler gedachte Funktionalitt ausgefhrt.Entwickler

Aus Sicht des Entwicklers sind fr die Implementierung einer Drag&-Drop-Operation einige Schritte zu erledigen. Diese gestalten sich natrlich nach den eingesetzten UI-Elementen und den Operationsmodi (siehe Abschnitt 5.7), lassen sich aber zu den folgenden Punkten zusammenfassen: Fr das UI-Element, das als Quelle dienen soll, muss eine DragSourceInfo im View Designer definiert werden.

Die DragSourceInfo bietet die Eigenschaft data an, mit deren Hilfe Sie Daten bergeben und spter bei der Behandlung im Ziel verwenden knnen. Fr das UI-Element, das als Ziel dienen soll, muss eine DropTargetInfo im View Designer definiert werden. In der Eigenschaft tag der DragSourceInfo bzw. der DropTargetInfo definieren gleiche Bezeichner (Flavor) die Verbindung von

Ziel und Quelle. Wird ein Element auf einem Ziel fallen gelassen, kann dies das Ereignis onDrop auslsen. Der Entwickler ist fr die Implementierung der Reaktion auf das Ereignis verantwortlich, das heit zum Beispiel Sortieren, Lschen etc.UI-Elemente fr Drag & Drop

Die Elemente, die im Web-Dynpro-Kontext die Drag-&-Drop-Funktionalitt untersttzen, sind in Tabelle 5.1 aufgelistet. In der Spalte UIElemente sehen Sie die Namen der UI-Elemente und Aggregate, in der Spalte Rolle, ob das UI-Element in einer Drag-&-Drop-Operation die Quelle oder das Ziel darstellt, und in der Spalte Beschreibung eine Erluterung zu der Operation.UI-Elemente Rolle Beschreibung Einzelne Knoten und Bltter knnen bewegt werden.

Tree: Knoten/Blatt Quelle

Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen

510

Drag & Drop fr UI-Elemente

5

UI-Elemente

Rolle

Beschreibung Mehrere Knoten knnen selektiert werden, falls sie zumindest einen gemeinsamen Flavor besitzen. Knoten knnen zwischen Kindknoten, an erster und letzter Stelle in einem Elternknoten und als neue Unterknoten unter einem Elternknoten eingefgt werden. Einzelne Zellen knnen bewegt werden. Voraussetzung dafr ist ein Griff (Handle), zum Beispiel Image, SectionHeader, Caption. Einschrnkung: Es ist nur ein einspaltiges GridLayout mglich.

Tree: Knoten/Blatt Quelle

Tree: Knoten

Ziel

GridLayout:

Quelle

Layoutzelle

GridLayout:

Ziel

Layoutzelle

UI-Elemente knnen zwischen den Zellen abgelegt werden. Einschrnkung: Es ist nur ein einspaltiges GridLayout mglich.

MatrixLayout:

Quelle

Layoutzelle

Einzelne Zellen knnen bewegt werden. Voraussetzung dafr ist ein Griff (Handle), zum Beispiel Image, SectionHeader, Caption. Einschrnkung: Es ist nur ein einzeiliges MatrixLayout mglich.

MatrixLayout:

Ziel

Layoutzelle

UI-Elemente knnen zwischen den Zellen abgelegt werden. Einschrnkung: Es ist nur ein einzeiliges MatrixLayout mglich.

Image Image

Quelle Ziel Quelle Ziel

Das Bild kann bewegt werden. Auf das Bild kann ein anderes UI-Element bewegt werden. Einzelne oder mehrere Eintrge knnen bewegt werden. Eintrge knnen zwischen bestehenden Eintrgen sowie an der ersten und letzten Position in der Liste eingefgt werden. Einzelne Tabellenzeilen knnen bewegt werden.

ItemListBox

ItemListBox

Table

Quelle

Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen (Forts.)

511

5

Drag & Drop fr UI-Elemente

UI-ElementeTable

Rolle Ziel

Beschreibung Eintrge knnen zwischen bestehenden Eintrgen und an der ersten und letzten Position eingefgt werden. Zudem knnen Elemente auf eine Tabellenzeile gezogen werden. Einzelne Items knnen bewegt werden. Zwischen Items sowie am Anfang und Ende der Items knnen Elemente eingefgt werden. Zudem kann ein Element auf ein Item gezogen werden. Hierbei handelt es sich um einen Wrapper fr UI-Elemente, die keine generische Drag-&-Drop-Untersttzung anbieten. Die UI-Elemente Image, SectionHeader und Caption knnen als Griff fr den Drag verwendet werden. Das Ereignis onDrop lst den Aufruf der Behandlermethode zu einem Drop aus. In der Behandlermethode werden die Reaktionen auf den Drop implementiert.

Accordion Accordion

Quelle Ziel

DropTarget

Ziel

UI-ElementEigenschaftisDragHandle

Quelle

Ereignis onDrop

Auslser

Tabelle 5.1 UI-Elemente mit Drag-&-Drop-Rollen (Forts.)

Im folgenden Abschnitt 5.1 besprechen wir die Elemente DragSourceInfo, DropTargetInfo, DropTarget und das Ereignis onDrop, die die Grundbausteine der Drag-&-Drop-Mechanismen darstellen. In den weiteren Abschnitten 5.2 bis 5.6 diskutieren wir im Detail die unterschiedlichen UI-Elemente, die fr Drag & Drop verwendet werden knnen. Dabei wird immer die Rolle des UI-Elementes als Quelle (Drag Source), als Ziel (Drop Target) und die Behandlung des Fallenlassens auf dieses Element anhand von Beispielen beschrieben. In Abschnitt 5.7 gehen wir auf die unterschiedlichen Verwendungsvarianten von Drag & Drop ein.

5.1Bausteine

Allgemeines

Die Implementierung von Drag-&-Drop-Operationen baut auf elementaren Bausteinen auf: Die DragSourceInfo dient als Information fr die Quelle der Drag-&-Drop-Operation.

512

Allgemeines

5.1

Die DropTargetInfo sammelt die Informationen ber das Ziel der Drag-&-Drop-Operation, wobei fr die Sammlung der Zielinformation auch das Drop Target verwendet werden kann. Mithilfe des Ereignisses onDrop kann ein Aktionsbehandler festgelegt werden, der die Implementierung der Reaktion auf das Fallenlassen eines Elementes auf ein anderes Element beinhaltet. Im Folgenden werden wir diese elementaren Bausteine besprechen. Die Beispiele zu den Bausteinen dienen als Anschauungsmaterial fr deren Verwendung.

5.1.1

DragSourceInfoQuelle

In den UI-Element-Eigenschaften der DragSourceInfo werden alle Informationen gesammelt, die zu der Quelle einer Drag-&-DropOperation gehren, das heit einer Drag Source. In Abbildung 5.1 sehen Sie ein Beispiel fr eine DragSourceInfo. Auf der linken Seite wird das UI-Element ItemListBox, fr das die DragSourceInfo definiert wird, in der Designdarstellung gezeigt. Auf der rechten Seite sind die dazu gehrenden UI-Elemente in der UI-Elemente-Hierarchie mit den Eigenschaften zur DragSourceInfo abgebildet.

DragSourceInfo

ItemListBox

1 2 3 4 5 6Abbildung 5.1 DragSourceInfo

Id

Der Wert der Eigenschaft Id (1) legt die eindeutige Bezeichnung der DragSourceInfo fest (siehe Kapitel 4, UI-Elemente und ihre Eigenschaften). Diese kann in weiterer Folge beim Ziel verwen-

Eigenschaften

513

5

Drag & Drop fr UI-Elemente

det werden, um festzustellen, von welcher Quelle (Source) aus die Drag-&-Drop-Operation gestartet wurde.data

Mithilfe der Eigenschaft data (2) knnen Sie Daten hinterlegen, die bei der Drag-&-Drop-Operation transportiert werden sollen. Diese Daten knnen vom Ziel (Target) der Drag-&-Drop-Operationen verwendet werden. Zum Beispiel knnte die ID eines Mitarbeiters transportiert und im Ziel fr die Ermittlung der Abrechnungsergebnisse herangezogen werden. Achten Sie darauf, dass keine sicherheitsbedenklichen oder voluminsen Daten bergeben werden, da Drag-&-Drop-Operationen auf dem Client ausgefhrt werden. Aus sicherheitstechnischen Aspekten bietet es sich an, die Daten nicht direkt (zum Beispiel der Name eines Mitarbeiters), sondern indirekt (zum Beispiel die Personalnummer) als Referenzen zu bertragen. Wie Sie in Abbildung 5.1 erkennen knnen, haben Sie die Mglichkeit, die Eigenschaft data an den Context zu binden. Damit knnen Sie zum Beispiel zeilenbezogene Daten fr Tabellenzeilen hinterlegen.enabled

Die Eigenschaft enabled (3) steuert, ob die Drag-&-Drop-Operation aus Sicht der Quelle aktiviert ist oder nicht. Diese Eigenschaft kann auch per Data Binding an ein Context-Attribut angebunden werden und ist somit whrend der Laufzeit aufgrund der Datennderung im Context nderbar.mimeType

Die Eigenschaft mimeType (4) definiert die Art der Daten, die an das Ziel bertragen werden. Sie wird in Release 7.0 EHP2 noch nicht vom Web-Dynpro-Framework umgesetzt und soll in spteren Releases zum Einsatz kommen.scope

Die Eigenschaft scope (5) legt die Reichweite der DragSourceInfo fest. Wird dieser Eigenschaft der Wert componentInstance zugewiesen, kann die DragSourceInfo nur in der Component verwendet werden, in der sie auch definiert wurde. Wurde der Wert global zugewiesen, kann die DragSourceInfo ber ComponentGrenzen hinweg verwendet werden.tags

Die Eigenschaft tags (6) (manchmal auch als Flavor bezeichnet)

514

Allgemeines

5.1

der DragSourceInfo ermglicht es Ihnen, zu definieren, welche Ziele fr diese Quelle relevant sind. Pro Tag kann ein oder knnen mehrere Bezeichner definiert werden, je nachdem, wie das Zusammenspiel zwischen UI-Elementen gewnscht ist. Falls ein Bezeichner aus der Source mit einem Bezeichner aus dem Target komplett oder in Teilen bereinstimmt, ist das Zusammenspiel mglich. Werden mehrere Bezeichner fr ein Tag festgelegt, mssen diese durch Leerzeichen getrennt werden. Die Gro- und Kleinschreibung ist relevant fr die Bezeichner. Des Weiteren drfen Sie nicht die Zeichen Doppelpunkt (:), Komma (,), Strichpunkt (;), Backslash (\), Slash (/) und Punkt (.) fr die Bezeichner verwenden. Ein Beispiel fr den Wert eines tags wre PO SM TM, wobei die Bezeichner der Reihe nach fr Process Owner, Scrum Master und Team Member stehen. Falls eine DragSourceInfo auf ein UI-Element aggregiert wird, das mehrfach instanziert wird, wie zum Beispiel Zelleditoren pro Zeile in einer Tabelle, und haben Sie eine Eigenschaft der DragSourceInfo an ein Attribut der dataSource des Aggregats gebunden, wird der Wert des Attributes der Lead-Selection verwendet.

5.1.2

DropTargetInfoZiel

Im UI-Element DropTargetInfo werden alle Informationen in Form von Eigenschaften gesammelt, die fr die Definition des Zieles einer Drag-&-Drop-Operation relevant sind. In Abbildung 5.2 sehen Sie ein Beispiel fr eine DropTargetInfo. Auf der linken Seite wird das UI-Element Tree im View Designer dargestellt, und auf der rechten Seite sehen Sie die dazu gehrenden UI-Elemente in der UI-Elemente-Hierarchie. Zum Tree haben wir einen TreeNodeType und einen TreeItemType fr unser Beispiel definiert (siehe Kapitel 4, UIElemente und ihre Eigenschaften). Fr den TreeItemType erkennen Sie auf der rechten Seite eine DropTargetInfo mit den dazu gehrenden Eigenschaften.Id

Der Wert der Eigenschaft Id (1) legt die eindeutige Bezeichnung der DropTargetInfo fest (siehe Kapitel 4, UI-Elemente und ihre Eigenschaften).

Eigenschaften

515

5

Drag & Drop fr UI-Elemente

DropTargetInfo

Tree TreeItemType TreeNodeType

1 2 3 4 5Abbildung 5.2 DropTargetInfo

enabled

Die Eigenschaft enabled (2) steuert, ob die Drag-&-Drop-Operation aus Sicht des Zieles aktiviert ist oder nicht. Diese Eigenschaft kann auch per Data Binding an ein Context-Attribut gebunden werden.name

Mithilfe der Eigenschaft name (3) legen Sie einen Namen fest, der bei der Behandlung der Drag-&-Drop-Operation im Ereignis onDrop ausgewertet werden kann (siehe Abschnitt 5.1.4, Ereignis onDrop). Im Speziellen wird diese Eigenschaft fr die Behandlung der Drag-&-Drop-Operationen im Kontext von Table verwendet (siehe Abschnitt 5.5).scope

Die Eigenschaft scope (4) legt die Reichweite der DropTargetInfo fest. Wird dieser Eigenschaft der Wert componentInstance

zugewiesen, kann die DropTargetInfo nur in der Component verwendet werden, in der sie auch definiert wurde. Wurde der Wert global zugewiesen, kann die DropTargetInfo ber ComponentGrenzen hinweg verwendet werden.tags

Die Eigenschaft tags (5) (manchmal auch als Flavor bezeichnet) der DragSourceInfo ermglicht es Ihnen, zu definieren, welche Ziele fr diese Quelle relevant sind. Pro Tag kann ein oder knnen mehrere Bezeichner definiert werden, je nachdem, wie das

516

Allgemeines

5.1

Zusammenspiel zwischen UI-Elementen gewnscht ist. Werden mehrere Bezeichner fr ein Tag festgelegt, mssen diese durch Leerzeichen getrennt werden. Die Gro- und Kleinschreibung ist relevant fr die Bezeichner, des Weiteren drfen Sie nicht die Zeichen Doppelpunkt (:), Komma (,), Strichpunkt (;), Backslash (\), Slash (/) und Punkt (.) verwenden. Eine besondere Bedeutung hat der Stern (*), da dieser als Joker verwendet werden kann. Ein Beispiel fr den Wert eines Tags wre PO SM TEAM*, wobei die Bezeichner der Reihe nach fr Process Owner, Scrum Master und TEAM* mit beliebigen Text stehen. In diesem Beispiel wird vom System ein Mustervergleich mit den Source-Bezeichnern durchgefhrt, und wrde die Source einen Bezeichner TEAM_AT beinhalten, wrde dieser dem Muster TEAM* im Ziel entsprechen. Mit dem Joker haben Sie demnach die Mglichkeit, Gruppen von Bezeichnern identisch zu behandeln.

5.1.3

DropTargetZielkapsel

UI-Elemente, die keine DropTargetInfo als Unterelement anbieten, knnen mithilfe des UI-Elementes DropTarget als Drop Target definiert werden. Dabei funktioniert das DropTarget wie eine Kapsel um das UI-Element, das als Drop Target funktionieren soll. Im View Designer knnen Sie nur ein Element unter dem DropTarget einfgen, jedoch stellt dies keine Einschrnkung dar, da Sie ein UI-Element TransparentContainer einfgen knnen, das wiederum mehrere UI-Elemente aufnehmen kann. In Abbildung 5.3 sehen Sie ein Beispiel fr die Verwendung des UIElementes DropTarget, das exemplarisch fr den Einsatz in anderen Verwendungskontexten ist. Im linken oberen Bereich wird der Drag-Vorgang von einer ItemListBox auf einen TransparentContainer veranschaulicht. Der TransparentContainer beinhaltet ein Bild und einen FormattedTextView und ist selbst durch ein DropTarget gekapselt. Im linken unteren Bereich wird das Ergebnis nach dem Drop auf den TransparentContainer dargestellt, das heit nachdem die Behandlermethode fr den Zeitpunkt onDrop aus der Drag Source abgearbeitet wurde.

DropTarget erzeugen

517

5

Drag & Drop fr UI-Elemente

1 3Drag Drop

2

Abbildung 5.3 UI-Element DropTarget

Um ein DropTarget in Ihrem Layout zu verwenden, mssen Sie nur wenige Schritte ausfhren. 1. Fgen Sie im ersten Schritt das UI-Element DropTarget in die UIElemente-Hierarchie ein (1). 2. Definieren Sie eine Aktion fr das Ereignis onDrop (2), wie in Abschnitt 5.1.4 beschrieben. 3. Erzeugen Sie fr das DropTarget eine DropTargetInfo (3). Weitere Details dazu finden Sie in Abschnitt 5.1.2. 4. Definieren Sie das Unterelement fr das DropTarget. Die Arbeit, die jetzt noch zu erledigen ist, betrifft die Implementierung der Behandlermethode fr das Ereignis onDrop. Diese gestalten Sie je nach der gewnschten Reaktion auf das Droppen. In unserem Beispiel wird in der Implementierung das Context-Element fr den ausgewhlten Mitarbeiter gelesen, formatiert und dem Image und FormattedTextView in Form eines Context-Knoten-Elementes zur Verfgung gestellt.

5.1.4

Ereignis onDrop

In den UI-Elementen, die als Ziel verwendet werden knnen, wird das Ereignis onDrop angeboten. Damit wird der funktionale Aspekt der Behandlung eines Fallenlassens auf das Ziel implementiert. Dem Ereignis mssen Sie eine Aktion zuordnen, die eine zugeordnete Aktionsbehandler-Methode besitzt (siehe Kapitel 2, Web-Dynpro

518

Allgemeines

5.1

Architektur). In diesem knnen Sie die gewnschte Reaktion des Drops implementieren, wie zum Beispiel das Einfgen einer neuen Tabellenzeile. Die Daten, die vom Ziel bertragen werden, stehen als Parameter der Aktionsbehandler-Methode fr das Ereignis onDrop zur Verfgung, wie Sie im Beispiel in Abbildung 5.4 sehen knnen. Dort sehen Sie die Parameter, die im Kontext eines ItemListBox-Drops bertragen werden, das heit an die Aktionsbehandler-Methode fr onDrop als Parameter bergeben werden: Der Parameter WDEVENT (1) reprsentiert wie immer bei einer Aktionsbehandler-Methode das Ereignis. In diesem Objekt sind die ereignisrelevanten Daten abgelegt, die sich auch in der Schnittstelle der Aktionsbehandler-Methode widerspiegeln. Die weiteren Parameter (2 bis 8) werden in unserem Beispiel explizit ber die Schnittstelle der Behandlermethode bergeben. Dies hngt von der Anlage der Aktion ab (siehe Kapitel 2, WebDynpro Architektur). Die Menge und Art der Parameter richten sich nach dem Typ des Drop-Ziels, daher werden wir zu den spter jeweils folgenden Beschreibungen der UI-Elemente immer auch die Parameter in einem Abschnitt Ereignis onDrop erlutern.Drop-Daten

1 2 3 4 5 6 7 8Abbildung 5.4 onDrop-Parameter

Die Parameter, die wir in Abbildung 5.4 als Teil der Parameterliste zur Aktionsbehandler-Methode fr das Ereignis onDrop gezeigt haben, finden sich auch im Objektattribut PARAMETERS des Referenzparameters WDEVENT wieder. Das bedeutet fr Sie, dass Sie auf zwei Wegen auf die Daten zugreifen knnen: einerseits ber explizite

519

5

Drag & Drop fr UI-Elemente

Parameter in der Aktionsbehandler-Methode des onDrop-Ereignisses (wobei diese nicht definiert sein mssen) und andererseits ber das Objektattribut PARAMETERS der Objektreferenz WDEVENT aus den Parametern der Aktionsbehandler-Methode des onDrop-Ereignisses. Im Folgenden erlutern wir die fr das Drag & Drop relevanten Parameter im Attribut PARAMETERS des Ereignisobjektes WDEVENT, das Sie in Abbildung 5.5 sehen knnen.

1 2 3

4 5 6 7 8 9 jAbbildung 5.5 WDEVENT-Objektattribute WDEVENT

Das Ereignisobjekt WDEVENT vom Typ CL_WD_CUSTOM_EVENT besitzt die Attribute PARAMETERS (1), NAME (2) und SOURCE_COMPONENT_ID (3). Das Attribut NAME beinhaltet den Namen des Auslseereignisses, in unserem Fall ON_DROP. Das Attribut SOURCE_COMPONENT_ID hlt den Namen der Web-Dynpro-Component, von der der Drag aus gestartet wurde. Falls die Drag-&-Drop-Operation in derselben WebDynpro-Component ausgefhrt wird, ist das Attribut initial. Das Attribut PARAMETERS reprsentiert eine interne Tabelle mit den folgenden Eintrgen:

520

Tree

5.2

ID

Der Eintrag ID (4) steht fr die ID des UI-Elementes, das das onDrop-Ereignis ausgelst hat, das heit fr das Ziel der Drag-&Drop-Operation.CONTEXT_ELEMENT

Der Eintrag CONTEXT_ELEMENT (5) reprsentiert das Context-Element aus der Quelle, die zu der Drag-&-Drop-Operation gehrt.DATA, MIME_TYPE, TAGS

Diese drei Eintrge (6, 7, 8) liefern die Daten, die in der DragSourceInfo der Quelle definiert wurden (siehe Abschnitt 5.1.1). INDEX

Der Eintrag INDEX (9) bietet die Information ber die Drop-Position im betroffenen Ziel. Zum Beispiel hat der INDEX den Wert 2 in einer ItemListBox, weil der Benutzer vor dem zweiten Eintrag gedroppt hat.OFFSET

Der Eintrag OFFSET (j) liefert die Positionsinformation der DropPosition relativ zum Eintrag INDEX oder anderen Bezugsgren. Zum Beispiel hat der Offset den Wert -1 in einer ItemListBox, da der Benutzer vor dem zweiten Eintrag gedroppt hat.

5.2

Tree

Das UI-Element Tree bietet vielfltige Mglichkeiten und Untersttzungen fr die Drag-&-Drop-Operationen. Wie diese im Detail zu realisieren sind, erfahren Sie in diesem Abschnitt.

5.2.1

DragSourceInfoKnoten oder Blatt

Falls Sie einen Knoten oder ein Blatt eines Baumes als Drag Source verwenden mchten, mssen Sie zu dem Knoten (TreeNodeType) oder Blatt (TreeItemType) ein Unterelement vom Typ DragSourceInfo im View Designer definieren. Die Definition der DragSourceInfo ist in Abschnitt 5.1.1 beschrieben. In Abbildung 5.6 sehen Sie eine eingefgte DragSourceInfo fr ein Blatt und einen Knoten. Im unteren Bereich der Abbildung erkennen Sie die optische Darstellung des Drag-Vorgangs.

521

5

Drag & Drop fr UI-Elemente

TreeNodeType

TreeItemType

Drag

Drag

Abbildung 5.6 Tree DragSourceInfo

5.2.2

DropTargetInfo

Wird der Tree als Drop Target verwendet, stehen die folgenden mglichen Einfgepositionen zur Verfgung: zwischen existierenden Blttern als erstes oder letztes Blatt auf ein existierendes Blatt bzw. auf einen existierenden KnotenBeispiel

In Abbildung 5.7 sehen Sie ein Drop-Beispiel. Im unteren Bereich der Abbildung erkennen Sie auf der linken Seite die Visualisierung der Suche nach der Einfgeposition durch den Benutzer. Dieser hat sich fr das Einfgen an der ersten Position entschieden.

522

Tree

5.2

TreeNodeType

TreeItemType

Drop auf Knoten

Drop-Bltter mit Einfgeposition

Drop auf Blatt

Abbildung 5.7 Tree DropTargetInfo

In der Abbildung rechts unten sehen Sie zwei Varianten fr das Fallenlassen auf den TreeItemType: einerseits zwischen den Blttern mit Visualisierung der Einfgeposition und andererseits auf einem anderen Blatt. Lsst der Benutzer das Element an der von ihm gewnschten Stelle fallen, wird das Ereignis onDrop des TreeNodeItem bzw. TreeItemType ausgelst und kann durch die Implementierung behandelt werden.

523

5

Drag & Drop fr UI-Elemente

5.2.3Parameter

Ereignis onDrop

Das Ereignisobjekt WDEVENT, das an die Behandlermethode bergeben wird, liefert fr die Implementierung die folgenden Informationen:ID

Das Element ID beschreibt die ID des Drop Targets.CONTEXT_ELEMENT

Das Element CONTEXT_ELEMENT liefert eine Referenz auf ein Context-Element. Falls auf ein Baumblatt oder einen Baumknoten gedroppt wird, ist dies das Context-Element, das die Datenbasis des Blattes/ Knotens bildet. Falls zwischen Blttern/Knoten gedroppt wird, ist dies das Context-Element, das fr das Blatt/den Knoten nach der Drop-Position steht. Falls am Ende von Blttern/Knoten gedroppt wird, ist dies das Context-Element, das fr das letzte Blatt/den letzten Knoten steht.DATA

Das Element DATA beinhaltet die Daten aus der Drag Source.MIME_TYPE

Das Element MIME_TYPE enthlt den MIME-Typ aus der Drag Source.TAGS

Das Element TAGS beinhaltet die Tags aus der Drag Source.OFFSET

ber OFFSET wird die Elementposition im Knoten des Baumes bestimmt. Der Parameter hat den Wert -1, falls in einer Liste von Blttern/Knoten gedroppt wird. Er hat den Wert 1, falls am Ende einer Liste von Blttern/Knoten gedroppt wird. Er hat den Wert 0, falls direkt auf ein Blatt/einen Knoten gedroppt wird.PATH

Das Element PATH enthlt den Pfad zum CONTEXT_ELEMENT im Context.

524

GridLayout/MatrixLayout

5.3

Fr die Implementierung der Reaktion auf das Fallenlassen von Elementen bieten sich unter anderen die Methoden move_* aus dem Interface IF_WD_CONTEXT_NODE dazu an, Elemente zu einem ContextKnoten zu verschieben.

5.3

GridLayout/MatrixLayoutLayout

Im GridLayout und MatrixLayout (siehe Kapitel 3, Container und Layouts) knnen einzelne Zellen dieses Layouts verschoben bzw. Objekte zwischen Zellen eingefgt werden. Dabei ist zu beachten, dass Drag & Drop nur bei einspaltigem GridLayout bzw. einzeiligem MatrixLayout mglich ist.

5.3.1

DragSource

Damit eine Drag-Operation durchgefhrt werden kann, muss fr eine Zelle ein Griff (Handle) definiert werden. Dieser ermglicht das Angreifen der Zelle. Dabei knnen ein SectionHeader, eine Caption oder ein Image mit der UI-Element-Eigenschaft isDragHandle = true eingesetzt werden. In Abbildung 5.8 sehen Sie ein Beispielszenario, das es dem Benutzer ermglicht, die Position einer ItemListBox zu verndern. Beim Verschieben der Box wird im User Interface die neue potenzielle Einfgeposition durch eine Box mit gestricheltem Rand visualisiert.TC1 TC11 Layout = GridLayout Layout.colCount = 1

Beispiel

TC12 SH12

Layoutdaten.dragData = "ITM" isDragHandle = true

Drag TC13 SH13 Layoutdaten.dragData = "ETM" isDragHandle = true

Abbildung 5.8 Drag GridLayout/MatrixLayout

525

5

Drag & Drop fr UI-Elemente

Auf der rechten Seite haben wir das Layout des Szenarios schematisch dargestellt. Der zentrale Container fr die Gestaltung ist der TransparentContainer TC1, der als Layout den Wert GridLayout und die Spaltenanzahl Layout.colCount = 1 erhlt. In TC1 haben wir drei weitere TransparentContainer platziert, die dann gezogen werden, wobei nur TC12 und TC13 fr den Drag verwendet werden. Beim Drag-Vorgang knnen auch Daten mitgegeben werden, diese werden in den Layoutdaten (LayoutDaten.dragData) abgelegt. In unserem Beispiel wird der TransparentContainer gezogen, daher werden die Drag-Daten in den dortigen Layoutdaten abgelegt. Als Ausprgungen haben wir in unserem Beispiel ITM fr Internal Team Members und ETM fr External Team Members verwendet.Handle

Fr den Griff (Handle) haben wir den SectionHeader verwendet (SH12 und SH13). Hier wurde im SectionHeader die UI-ElementEigenschaft isDragHandle = true gesetzt.

5.3.2

DropTarget

Wird GridLayout bzw. MatrixLayout als Drop Target verwendet, stehen die folgenden mglichen Einfgepositionen zur Verfgung: Im GridLayout und MatrixLayout knnen einzelne Zellen dieses Layouts verschoben werden. Im GridLayout und MatrixLayout knnen Objekte zwischen den Zellen eingefgt werden.

5.3.3

Ereignis onDrop

Das Ereignis onDrop wird man fr GridLayout und MatrixLayout vergeblich im View Designer suchen. Der einfache Grund dafr ist, dass dieses dynamisch gesetzt werden muss, wie wir im folgenden Abschnitt 5.3.4 besprechen werden. Jedoch ist es in der dynamischen Programmierung beim Setzen des Ereignisses erforderlich, den Namen einer Aktion an die Setter-Methode (set_on_drop) zu bergeben.Aktion und Behandler

Legen Sie als Vorbereitung fr die dynamische Programmierung mithilfe des Karteireiters Aktionen eine Aktion an. Dadurch wird automatisch eine Behandlermethode erzeugt, die fr die Behandlung des onDrop-Ereignisses herangezogen wird. In Listing 5.1 zeigen wir Ihnen ein Beispiel fr die Implementierung der Behandlermethode.

526

GridLayout/MatrixLayout

5.3

METHOD onactiondrop_tc . * Hier wird nur das Event-Objekt in den Attributen abgelegt. * Die eigentliche Behandlung erfolgt in WDDOMODIFYVIEW IF wdevent IS BOUND. wd_this->gd_index = wdevent->get_string( 'INDEX' ). wd_this->gd_offset = wdevent->get_string( 'OFFSET' ). wd_this->gd_data = wdevent->get_string( 'DATA' ). wd_this->gd_tags = wdevent->get_string( 'TAGS' ). wd_this->gd_id = wdevent->get_string( 'ID' ). ENDIF. ENDMETHOD.Listing 5.1 Behandlermethode fr GridLayout/MatrixLayout

Im Gegensatz zu den anderen Drag-&-Drop-Realisierungen mssen Sie bei GridLayout und MatrixLayout die Daten aus dem Ereignisobjekt WDEVENT zwischenspeichern, da diese zu einem spteren Zeitpunkt in der Methode wddomodifyview bentigt werden. Wir haben im Beispiel in Listing 5.1 die Attribute des View-Controllers verwendet. Die Parameter haben dabei die folgende Bedeutung:ID

WDEVENT puffern

Der Parameter ID stellt eine automatisch erzeugte ID dar.CONTEXT_ELEMENT

Der Parameter CONTEXT_ELEMENT ist immer initial.DATA

Der Parameter DATA reprsentiert die Daten aus der LayoutdatenEigenschaft dragData des gezogenen Elementes.MIME_TYPE

Der Parameter MIME_TYPE reprsentiert den MIME-Typ aus der Drag Source.TAGS

Der Parameter TAGS beinhaltet die Tags aus der Drag Source.OFFSET

Der Parameter OFFSET hlt die Elementposition in den Zellen des GridLayout oder MatrixLayout. Der Parameter hat den Wert -1, falls der Wert des INDEX als Einfgeposition verwendet werden soll. Er hat den Wert 1, falls am Ende der Zellen gedroppt wird.INDEX

Der Parameter INDEX liefert den Wert der Referenzposition, die in Kombination mit dem OFFSET die tatschliche Position ergibt.

527

5

Drag & Drop fr UI-Elemente

5.3.4Beispiel

Dynamische Programmierung

Im Vergleich zu den anderen Drag-&-Drop-UI-Elementen ist bei der Verwendung von GridLayout und MatrixLayout ein hohes Ma an dynamischer Programmierung (siehe Kapitel 7, Dynamische Programmierung) erforderlich. In Listing 5.2 sehen Sie ein Beispiel fr eine solche Implementierung.METHOD wddomodifyview . DATA: * Der TransparentContainer fr die D&D-Operation lr_tc TYPE REF TO cl_wd_transparent_container, * Das GridLayout im TransparentContainer lr_grid_layout TYPE REF TO cl_wd_grid_layout, * Die GridLayout-Daten fr dragData lr_grid_layout_data TYPE REF TO cl_wd_grid_data, * Eine neue DragSourceInfo fr den TransparentContainer lr_drag_source_info TYPE REF TO cl_wd_drag_source_info, * Eine neue DropTargetInfo fr den TransparentContainer lr_drop_target_info TYPE REF TO cl_wd_drop_target_info. * Beim ersten Mal IF first_time = abap_true. ************************************************************ * TC1 ************************************************************ * TransparentContainer ermitteln fr Drag & Drop lr_tc ?= view->get_element( id = 'TC1' ). * Layout zum TransparentContainer ermitteln lr_grid_layout ?= lr_tc->get_layout( ). * DropTargetInfo instanzieren CALL METHOD cl_wd_drop_target_info=>new_drop_target_info EXPORTING enabled = abap_true id = 'DTI_TC1' name = 'TC1' tags = 'TC' view = view RECEIVING control = lr_drop_target_info. * DropTarget zum Layout ergnzen CALL METHOD lr_grid_layout->set_drop_target_info EXPORTING the_drop_target_info = lr_drop_target_info. * DragSourceInfo instanzieren CALL METHOD cl_wd_drag_source_info=>new_drag_source_info EXPORTING data = 'TC12'

528

GridLayout/MatrixLayout

5.3

enabled = abap_true id = 'DSI_TC12' tags = 'TC' view = view RECEIVING control = lr_drag_source_info. * DragSource zum Layout ergnzen CALL METHOD lr_grid_layout->set_drag_source_info EXPORTING the_drag_source_info = lr_drag_source_info. * Drop-Aktion setzen * Muss vorher in den Aktionen definiert werden! CALL METHOD lr_grid_layout->set_on_drop EXPORTING value = 'DROP_TC'. ENDIF. ************************************************************ * Behandlung des Drops auf die TransparentContainer DATA: lt_children TYPE cl_wd_uielement_container=>tt_uielement, lr_child LIKE LINE OF lt_children, ld_drag_data TYPE string, ld_target_index TYPE i, ld_source_index TYPE i. * Ist ein onDrop aufgetreten? IF wd_this->gd_index IS NOT INITIAL. * TransparentContainer ermitteln lr_tc ?= view->get_element( id = 'TC1' ). * Kinder lt_children = lr_tc->get_children( ). * Finde das UI-Element, von dem gedraggt wurde LOOP AT lt_children INTO lr_child. ld_source_index = sy-tabix. * Hole die Layoutdaten vom Kind lr_grid_layout_data ?= lr_child->get_layout_data( ). * Hole von der UI-Eigenschaft dragData den Wert ld_drag_data = lr_grid_layout_data->get_drag_data( ). * Vergleiche den Wert mit den Daten von onDrop IF ld_drag_data = wd_this->gd_data. * Gefunden! EXIT. ENDIF. ENDLOOP. * Neue Position ermitteln IF wd_this->gd_offset = -1. ld_target_index = wd_this->gd_index.

529

5

Drag & Drop fr UI-Elemente

* Am Ende ELSE. ld_target_index = wd_this->gd_index + 1. ENDIF. * Durch das Lschen verschiebt sich der Index IF ld_source_index < ld_target_index. ld_target_index = ld_target_index - 1. ENDIF. * Aus der alten Position lschen und in die neue einfgen IF ld_source_index ld_target_index. * Lschen lr_tc->remove_child( index = ld_source_index ). * Einfgen lr_tc->add_child( the_child = lr_child index = ld_target_index ). * Fertig CLEAR wd_this->gd_index. ENDIF. "Ungleiche Position? ENDIF. "D&D? ENDMETHOD.Listing 5.2 Drag & Drop GridLayout/MatrixLayout Container-Layout ermitteln

Die Implementierung startet mit der Ermittlung der Referenz auf den TransparentContainer (es knnen auch andere Container sein, wie zum Beispiel eine Gruppe), fr den Drag & Drop realisiert wird, das heit in den Elemente eingefgt werden sollen oder dessen Kindelemente Sie per Drag & Drop verschieben mchten. ber diese Referenz wird eine Referenz auf das GridLayout (MatrixLayout) bezogen. Nach der Erzeugung eines DropTargetInfo- und DragSourceInfoObjektes werden beide Objekte dem Layout zugewiesen. Darber hinaus wird das onDrop-Ereignis mit einer Aktion gekoppelt, die Sie zuvor definiert haben. Die genannten Schritte werden nur einmal in der Lebenszeit des View-Controllers ausgefhrt. Die nchsten Schritte werden immer dann ausgefhrt, wenn der Benutzer eine Drag-&-Drop-Operation im Layout durchfhrt.

DropTargetInfo, DragSourceInfo, onDrop

Betroffenes Element

Anschlieend ermitteln Sie zu Ihrem Container die Kindelemente, um fr jedes Element prfen zu knnen, ob es das durch die Drag-&Drop-Operation betroffene ist. Sie knnen dazu mithilfe der Layoutdaten der Kindelemente die dragData ermitteln. Des Weiteren sind die dragData des fallen gelassenen Elementes aus der Aktionsbe-

530

ItemListBox

5.4

handler-Methode bekannt. Durch einen einfachen Vergleich auf Gleichheit knnen Sie feststellen, welches der Kindelemente es war, das gezogen wurde. Mithilfe von INDEX und OFFSET berechnen Sie die neue Position fr das gezogene Kindelement. Danach lschen Sie dieses Element aus der alten Position und fgen es in die neue Position ein.Positionieren

5.4

ItemListBox

In einer ItemListBox werden Eintrge in einer Box aufgelistet. Diese Eintrge kann der Benutzer einzeln oder mehrfach markieren und ziehen. Um einen einzelnen Eintrag zu draggen, reicht es, diesen anzuklicken und zu ziehen. Mchte ein Benutzer mehrere Eintrge ziehen, muss er mithilfe der Tastenkombination von () und der linken Maustaste oder den Pfeiltasten oder (Strg) und der linken Maustaste oder den Pfeiltasten den gewnschten Bereich markieren.Mehrfachselektion

5.4.1

DragSourceInfo

In Abbildung 5.9 sehen Sie die DragSourceInfo, die es ermglicht, dass der Benutzer einen oder mehrere Eintrge aus einer ItemListBox ziehen kann.

1

2

Einzel-Drag

3Mehrfach-Drag

Abbildung 5.9 ItemListBox DragSourceInfo

531

5

Drag & Drop fr UI-Elemente

Beschreibung

Die Eigenschaft data (1) haben wir an den Context gebunden, um von dort die Referenz hier als ID des Teammitglieds realisiert auf ein Element der DragSourceInfo zuzuweisen. Diese Referenz wird an das Drop Target bergeben. Unter (2) sehen Sie ein Beispiel fr eine Einzelselektion und unter (3) das fr eine Mehrfachselektion. Ausschlaggebend fr die Fhigkeit der Mehrfachselektion ist die UI-Element-Eigenschaft multipleSelection = true im UI-Element ItemListBox.

5.4.2Einfgepositionen

DropTargetinfo

Wird die ItemListBox als Drop Target verwendet, stehen die folgenden mglichen Einfgepositionen zur Verfgung: zwischen existierenden Eintrgen an erster und letzter Position innerhalb der Liste In Abbildung 5.10 finden Sie ein Drop-Beispiel. Im unteren Bereich der Abbildung sehen Sie die Visualisierung der Suche nach der Einfgeposition durch den Benutzer. Dieser hat sich fr das Einfgen an der vorletzten Position entschieden. Droppt der Benutzer an der von ihm gewnschten Stelle, wird das Ereignis onDrop der ItemListBox ausgelst und kann durch die Implementierung behandelt werden.

Drop mit Einfgeposition

Abbildung 5.10 ItemListBox DropTargetInfo

5.4.3Parameter

Ereignis onDrop

Das Ereignisobjekt WDEVENT, das an die Behandlermethode des Ereignisses bergeben wird, liefert fr die Implementierung die folgenden Informationen:

532

ItemListBox

5.4

ID

Der Parameter ID liefert die ID des Drop Targets.CONTEXT_ELEMENT

Der Parameter CONTEXT_ELEMENT liefert das Context-Element zur Drag Source.DATA

Der Parameter DATA beinhaltet die Daten aus der Drag Source.MIME_TYPE

Der Parameter MIME_TYPE beinhaltet den MIME-Typ aus der Drag Source.TAGS

Der Parameter TAGS hlt die Tags aus der Drag Source.INDEX

Der Parameter INDEX liefert die Basisinformation zur Einfgeposition.OFFSET

Der Parameter OFFSET liefert die Position relativ zum Index. Falls der Benutzer einen Eintrag an das Ende anhngen mchte, hat der Index den Wert, dem die Anzahl der Eintrge entspricht. Auerdem erhlt der Offset den Wert 1. Falls der Benutzer einen Eintrag in die Liste einfgen mchte, hat der Index den Wert, der dem Index des Eintrags nach der Einfgeposition entspricht. Zudem erhlt der Offset den Wert -1. Falls der Benutzer einen Eintrag am Anfang in die Liste einfgen mchte, hat der Index den Wert 1 und der Offset den Wert -1. Um die Reaktion auf das Droppen des Benutzers in der Aktionsbehandler-Methode zu implementieren, knnen Sie das folgende Muster verwenden: 1. Ermitteln Sie die Quelle der Drag-&-Drop-Operation. Dafr knnen Sie das Attribut DATA aus dem Event-Objekt WDEVENT oder aus den Parametern der Aktionsbehandler-Methode verwenden. 2. Ermitteln Sie die selektierten Eintrge auf der ItemListBox. Dazu beschaffen Sie sich die Referenz (IF_WD_CONTEXT_NODE) auf den Kontextknoten, an den die ItemListBox gebunden ist. Mithilfe der Methode get_selected_elements der Knotenreferenz ermitteln Sie die selektierten Eintrge des Benutzers.Werte

Muster

533

5

Drag & Drop fr UI-Elemente

3. Aufgrund der Attribute INDEX und OFFSET aus dem Event-Objekt WDEVENT oder aus den Parametern der Aktionsbehandler-Methode bestimmen Sie die Drop-Position. 4. Realisieren Sie Ihre gewnschte Reaktion auf den Drop.

5.5

Table

Das UI-Element Table bietet vielfltige Mglichkeiten und Untersttzungen fr die Drag-&-Drop-Operationen. Wie diese im Detail zu realisieren sind, erfahren Sie in diesem Abschnitt.

5.5.1Modi

Nicht hierarchische Tabellen

Sie knnen selektierte Zeilen einer Table ziehen und Tabellenzeilen, Bilder und andere Quellen (Drag Source) zwischen oder auf bereits existierende Tabellenzeilen fallen lassen. Die zur Verfgung gestellten Modi sind die folgenden:Einfgen

Fr die Tabelle werden DragSourceInfo, DropTargetInfo und onDrop festgelegt. In diesem Fall kann ein oder knnen mehrere Elemente zwischen bestehenden Zeilen eingefgt werden (zum Beispiel von einer ItemListBox).Verschieben

Fr die Tabelle werden DragSourceInfo, DropTargetInfo und onDrop definiert. In diesem Fall kann eine oder knnen mehrere Zeilen zwischen bestehenden Zeilen in der Table verschoben werden. Sollen mehrere Elemente verschoben werden, muss die Selektionskardinalitt im Context angepasst werden.Zeilen-Drop

Whlen Sie aus dem Kontextmen des UI-Elementes Table den Eintrag INSERT DROP_ROW_TRG_INF. Damit wird eine DropTargetInfo fr den Drop auf eine Zeile eingefgt. Pflegen Sie die Werte zu den Eigenschaften der DropTargetInfo. bernehmen Sie fr die Eigenschaft dropOnRowName des UI-Elementes Table den Wert der Eigenschaft name der DropTargetInfo. Fr die Tabelle knnen Sie mehrere DropTargetInfo fr den Zeilen-Drop definieren. In diesem Fall verwenden Sie das Data Binding der Eigenschaft dropOnRowName, um den unterschiedlichen Zeilen den Namen der DropTargetInfo zuzuordnen.

534

Table

5.5

Fr das Verschieben von mehreren Zeilen in der Tabelle mssen Sie im Context die Eigenschaft Selection fr die dataSource der Tabelle mit der Obergrenze n setzen, das heit 0..n oder 1..n. Falls Sie Zeilengruppierungen in der Tabelle verwenden (siehe Abschnitt 10.2, Table), sind keine Besonderheiten zu beachten.

Selection

DragSource Falls Sie eine oder mehrere Zeilen einer Tabelle als Drag Source verwenden mchten, mssen Sie zum Tree ein Unterelement vom Typ DragSourceInfo im View Designer definieren. In Abschnitt 5.1.1 finden Sie die Definition der DragSourceInfo. Abbildung 5.11 zeigt eine eingefgte DragSourceInfo fr eine Tabelle. Im unteren Bereich sehen Sie die optische Darstellung des Drag-Vorgangs. Wir unterscheiden zwischen einem Drag von einzelnen und mehreren Zeilen. Notwendige Voraussetzung fr den Mehrfach-Drag ist, dass die Eigenschaft Selection fr die dataSource der Tabelle mit der Obergrenze n gesetzt ist.Table

Beispiel

Mehrfach-Drag

Einzel-Drag

Drag

Drag

Abbildung 5.11 Table DragSourceInfo

DropTarget Wird die Table als Drop Target verwendet, stehen die folgenden mglichen Einfgepositionen zur Verfgung: zwischen existierenden Zeilen an erster und letzter Position innerhalb der aufgelisteten Zeilen auf eine Zeile In Abbildung 5.12 sehen Sie ein Beispiel fr das Fallenlassen zwischen Zeilen. Im oberen Bereich sehen erkennen die EigenschaftenZwischen den Zeilen Einfgepositionen

535

5

Drag & Drop fr UI-Elemente

der DropTargetInfo, die mit den passenden Werten versehen werden, wie in Abschnitt 5.1.2 beschrieben. In der Abbildung sehen Sie zwei Varianten fr das Fallenlassen zwischen Tabellenzeilen. Unabhngig davon, ob Sie eine oder mehrere Zeilen fallen lassen mchten, ist es ausreichend, eine DropTargetInfo fr den Vorgang zu definieren. Droppt der Benutzer an der von ihm gewnschten Stelle, wird das Ereignis onDrop der Table ausgelst und kann durch die Implementierung behandelt werden.Table

Einzel-Drop

Mehrfach-Drop

Einfgeposition

Einfgeposition

Drop

Drop

Abbildung 5.12 Table DropTargetInfo Auf eine Zeile

Mchten Sie das Fallenlassen auf eine Zeile erlauben, mssen Sie andere Definitionen fr das UI-Element Table festlegen. Im Folgenden beschreiben wir Ihnen die Vorgehensweise, um das Droppen auf eine Zeile zu ermglichen (siehe auch Abbildung 5.13).

1 3

2

Einfgeposition

Drop

Abbildung 5.13 Table dropOnRowTargetInfo

536

Table

5.5

1. Whlen Sie aus dem Kontextmen des UI-Elementes Table den Eintrag INSERT DROP_ROW_TRG_INF (dropOnRowTargetInfos). Damit wird eine DropTargetInfo fr den Drop auf eine Zeile eingefgt (1). 2. Pflegen Sie die Werte zu den Eigenschaften der DropTargetInfo (siehe Abschnitt 5.1.2). Der Wert der Eigenschaft name (2) wird im nchsten Schritt verwendet. 3. bernehmen Sie fr die Eigenschaft dropOnRowName des UI-Elementes Table den Wert der Eigenschaft name der DropTargetInfo (3). Damit haben Sie die Definition abgeschlossen. 4. Alternativ zu der Definition der DROP_ROW_TRG_INF (dropOnRowTargetInfo) knnen Sie auch eine bereits bestehende DropTargetInfo verwenden. Gehen Sie analog zum letzten Schritt der vorhergehenden Aufzhlung vor. 5. Fr die Tabelle knnen Sie mehrere DropTargetInfo fr den Zeilen-Drop definieren. In diesem Fall verwenden Sie das Data Binding der Eigenschaft dropOnRowName des UI-Elementes Table, um den unterschiedlichen Zeilen den Namen der DropTargetInfo zuzuordnen.

dropOnRowTargetInfo

Ereignis onDrop Das Ereignisobjekt WDEVENT, das an die Behandlermethode des Ereignisses bergeben wird, liefert fr die Implementierung die folgenden Attribute:ID: Der Parameter ID liefert die ID des Drop Targets. CONTEXT_ELEMENT:Parameter

Der Parameter CONTEXT_ELEMENT ist immer initial.DATA

Der Parameter DATA liefert die Daten aus der Drag Source.MIME_TYPE

Der Parameter MIME_TYPE liefert den MIME-Typ aus der Drag Source.TAGS

Der Parameter TAGS hlt die Information ber die Tags aus der Drag Source.

537

5

Drag & Drop fr UI-Elemente

OFFSET

Der Parameter OFFSET hlt einen Wert, der relativ zum ROW_ELEMENT zu interpretieren ist. Der Offset kann die Werte -1 (davor), 1 (danach, fr das Ende der Elemente) und 0 (auf ein Element) annehmen.ROW_ELEMENT

Der Parameter ROW_ELEMENT hlt das Context-Element aus der dataSource der Table, fr die das Einfgen durchzufhren ist.Implementierungsidee

Die Implementierung der Reaktion auf den Drop beinhaltet im Allgemeinen drei Schritte. 1. Ermittlung der Datenquelle(n) der Drag-&-Drop-Operation Um die Datenquelle(n) herauszufinden, bestimmen Sie zum Beispiel die Referenz (IF_WD_CONTEXT_NODE) auf den Kontextknoten, an den die Quelle gebunden ist. Mithilfe der Methode get_ selected_elements der Knotenreferenz ermitteln Sie die selektierten Elemente der Quelle. 2. Ermittlung von Positionen Ermitteln Sie den Index der Einfgeposition(en). Dabei untersttzt Sie die Methode get_index aus dem Interface IF_WD_CONTEXT_ ELEMENT und das OFFSET-Attribut aus dem Ereignisobjekt. 3. Manipulation der Context-Elemente der dataSource der Tabelle Das Interface IF_WD_CONTEXT_NODE bietet die Methoden move_* an, um Elemente auf einen Context-Knoten zu verschieben. Damit knnen Sie die zu verschiebenden Elemente an die Einfgeposition im Context und somit in der Table verschieben.

5.5.2Modi

Hierarchische Tabellen

In hierarchischen Tabellen, das heit in Tabellen, die eine MasterSpalte TreeByKeyTableColumn oder TreeByNestingTableColumn besitzen (siehe Abschnitt 10.2, Table), gibt es zwei unterschiedliche Drag-&-Drop-Modi:Einfacher Modus

Dieser Modus ist dafr gedacht, einen Drop zwischen Tabellenzeilen ausfhren zu knnen. Falls Sie diesen Modus verwenden mchten, reicht es, fr die Tabelle eine DragSourceInfo anzulegen (siehe Abschnitt 5.1.1). Zu beachten ist, dass Sie die Eigenschaft name initial belassen mssen.

538

Table

5.5

Komplexer Modus

Falls Sie der Eigenschaft name der DropTargetInfo einen Wert geben, ist nur das Droppen zwischen den Zeilen der hchsten Hierarchiestufe (direkt unter der Wurzel) mglich. Fr das Fallenlassen zwischen den Zeilen und auf eine Zeile von niedrigeren Hierarchiestufen mssen Sie eine oder mehrere dropOnRowTargetInfo anlegen und diese ber die Eigenschaft dropOnRowName des UI-Elementes Table der Tabelle bzw. den Zeilen der Tabelle zuordnen (siehe Abschnitt 5.5.1, Nicht hierarchische Tabellen). In Abbildung 5.14 sehen Sie Beispiele fr das Draggen unter Einbeziehung eines hierarchischen Baumes: Im oberen Bild wird aus einer ItemListBox ein Eintrag auf den Baum gezogen. Sie sehen die Markierung fr die Einfgeposition zwischen den Zeilen. Im unteren Bereich des Bildes dient der Baum selbst als DragQuelle. Sie sehen aufgrund der markierten Zeile und der fehlenden Markierung fr die Einfgeposition, dass auf eine Zeile gezogen wird. Bei der Implementierung der Behandlung des onDropEreignisses knnen Sie sich an Abschnitt 5.1.4 orientieren.Beispiel

Drag

Drag

Abbildung 5.14 Hierarchische Tabelle DragSource

539

5

Drag & Drop fr UI-Elemente

5.6Items

Accordion

In einem Accordion werden anklickbare AccordionItem- und MultipleAccordionItem-Elemente vertikal aufgelistet (siehe Abschnitt

3.2.1, Accordion). Diese Items kann der Benutzer im Accordion verschieben, das heit ein Item vor oder nach einem anderen Item platzieren. Des Weiteren ist es mglich, dass andere UI-Elemente in einer Drag-&-Drop-Operation auf ein Item gezogen werden.

5.6.1

DragSource

Falls Sie ein Item eines Accordion als Drag Source verwenden mchten, mssen Sie zum Accordion ein Unterelement vom Typ DragSourceInfo im View Designer definieren (siehe Abschnitt 5.1.1).Beispiel

In Abbildung 5.15 sehen Sie eine eingefgte DragSourceInfo fr ein Accordion (1). Zudem erkennen Sie unter Punkt 2 und 3 die Eigenschaft dragData des MultipleAccordionItem und des UI-Elementes AccordionItem, an denen Sie Daten fr den Drag-Vorgang hinterlegen knnen.MultipleAccordionItem AccordionItem

Accordion

1

2

3

Drag

Drag

Abbildung 5.15 Accordion DragSourceInfo Beschreibung

Im unteren Bereich der Abbildung sehen Sie die optische Darstellung des Drag-Vorgangs. Wir unterscheiden einerseits zwischen einem Drag von einzelnen Items, den Sie links unten in der Abbildung sehen. Andererseits knnen Sie auch einen Drag auf ein Item durch-

540

Accordion

5.6

fhren, dies wird in der Abbildung rechts unten dargestellt. Voraussetzung fr den Drag auf ein Item ist die Definition einer DropTargetInfo, die wir im nchsten Abschnitt besprechen.

5.6.2

DropTargetinfo

Wird das Accordion als Drop Target verwendet, stehen die folgenden mglichen Einfgepositionen zur Verfgung: zwischen existierenden Items an erster und letzter Position der Items auf ein Item In Abbildung 5.16 finden Sie zwei Drop-Beispiele. Einerseits ist fr den Drop zwischen den Items die DragSourceInfo-Definition zum Accordion relevant (1). Andererseits bentigen Sie die DragSourceInfo-Definition fr jene Items, auf denen Sie einen Drop ausfhren mchten (2 und 3).Accordion MultipleAccordionItem

Beispiel

AccordionItem

1 2 3

Einfgeposition Einfgeposition

Drop

Drop

Abbildung 5.16 Accordion, MultipleAccordionItem, AccordionItem DropTargetInfo

Im unteren Bereich der Abbildung sehen Sie die Visualisierung des Fallenlassens auf eine Einfgeposition durch den Benutzer. Dieser

Beschreibung

541

5

Drag & Drop fr UI-Elemente

hat sich im linken Beispiel in der Abbildung fr das Einfgen zwischen den Items entschieden. Im rechten Beispiel wird ein Drop auf ein Item ausgefhrt und bewirkt eine Reaktion, die im Ereignis onDrop des Accordion implementiert ist. Wir besprechen die Implementierung im nchsten Abschnitt.

5.6.3Parameter

Ereignis onDrop

Das Ereignisobjekt WDEVENT, das an die Behandlermethode des Ereignisses bergeben wird, liefert fr die Implementierung die folgenden Informationen:ID

Der Parameter ID liefert die ID des Drop Targets.CONTEXT_ELEMENT

Der Parameter CONTEXT_ELEMENT ist immer initial.DATA

Der Parameter DATA hlt die Daten aus der Drag Source.ITEM

Der Parameter ITEM liefert die Bezeichnung des betroffenen Items aus dem Accordion.ITEM_PATH

Der Parameter ITEM_PATH hlt den Pfad zum Element im Context, falls das betroffene Item ein MultipleAccordionItem ist. Ist das Element ein AccordionItem, ist ITEM_PATH leer.OFFSET

Der Parameter OFFSET hlt die Position relativ zum ITEM. Falls der OFFSET den Wert 1 hat, wurde nach einem Item gedroppt, und falls er den Wert -1 hat, wurde am Anfang der Items gedroppt. OFFSET nimmt den Wert 0 an, wenn ein Drop auf ein Item durchgefhrt wird.MIME_TYPE

Der Parameter MIME_TYPE liefert den MIME-Typ aus der Drag Source.TAGS

Der Parameter TAGS liefert die Tags aus der Drag Source.

542

Operationsmodi

5.7

5.7

Operationsmodi

In der Verwendung von Drag & Drop kristallisieren sich bestimmte Verwendungsmuster des Benutzers heraus. Wir beschreiben diese im Folgenden.

5.7.1

Browse & Collect

Bei Browse & Collect whlt ein Benutzer einen Eintrag bzw. mehrere Eintrge aus und zieht diesen/diese an eine bestimmte Position auf einem anderen UI-Element. Dadurch werden Daten entweder verschoben oder kopiert. Fr alle Zeilen wird die gleiche DragSourceInfo verwendet. berall, wo ein DropTargetInfo definiert ist, knnen Eintrge hineinkommen. Browse & Collect steht fr die folgenden UI-Elemente zur Verfgung:ItemListBox Table Tree

5.7.2

Generisches Drag & Drop

Beim generischen Drag & Drop zieht der Benutzer ein UI-Element fort und lsst es auf ein DropTarget fallen. Hierfr knnen Image, GridLayout und MatrixLayout verwendet werden. Wie wir in Abschnitt 5.1.3 besprochen haben, wird in diesem Fall ein DropTarget als verschalendes UI-Element verwendet.

5.7.3

Laufzeit-Authoring

Beim Laufzeit-Authoring zieht der Benutzer ein UI-Element an eine andere Stelle in einem GridLayout oder MatrixLayout (siehe Abschnitt 5.3). Dabei klickt er den Griff des UI-Elementes an und zieht diesen an die gewnschte Stelle. Damit ein UI-Element als Griff definiert werden kann, muss es die Eigenschaft isDragHandle besitzen. Die folgenden UI-Elemente bieten diese Eigenschaft an:Image Caption SectionHeader

543

5

Drag & Drop fr UI-Elemente

Zu einer Drag-&-Drop-Operation gehrt nicht nur die Quelle, sondern auch ein Ziel, das das Ereignis onDrop fr die Behandlung des Drops anbietet. Fr die folgenden UI-Elemente steht das Event onDrop zur Verfgung:Tree (ber AbstractTreeNodeType) Accordion DropTarget GridLayout MatrixLayout ItemListBox Table

544

Index*Impl.swf 886 *Island 883, 890 Achtung 899 Aggregat 892 aggregiertes Element 893 Barrierefreiheit 899 Bibliothek 886 bidirektionale Daten 884 Caching 900 Container 884 Datentransfer 889 Debugging 891, 900 Entkopplung 890 Ereignis 884 fireEvent( ) 897 GACDataSource 893 GACEvent 893 GACEventParameter 893 GACProperty 893 height 893 kein Dialogfenster 900 kein bersetzungsanschluss 899 keine Personalisierung 899 Konvertierungs-Exit 889 Library-Download 888 MIME Repository 886 Registrierung 889 UI-Element 891 Vorgehen 886 width 893 _blank 466 1 aus n 764, 772 12-Stunden-Format 283 Tabellentyp WDR_NAME_VALUE_LIST 1029 Text 1009, 1010 Wertehilfe 782 Wiederverwendung 782 ABAP_INTFDESCR 714 Ablauflogik 27 Absatz 297 absoluter Pfad 470 Abstand 387, 450 ACC 288 Accessibility 288 ACCESSIBILITY_MODE 1080, 1085 accessibilityDescription 1078 Accordion 216, 540 AccordionItem 216, 219 aggregiertes Element 219 allowDeselect 218 DragSource 540 DragSourceInfo 219 DropTargetInfo 219, 541 Eigenschaft 217 Ereignis 218 Load-on-Demand 219 MultipleAccordionItem 216, 221 onDrop 218, 542 onSelect 218 Scroll-Balken 221 selectedItem 218 ToggleIcon 217 visuelle Darstellung 217 WDEVENT 542 ACF 476, 481 Formular 482 Protokoll 458 ACF_WHITELIST_SETUP 455 AcfExecute 454 Achtung 457 archives 456 Beispiel 457 CL_WDR_ACFEXECUTE_HNDL 454 class 456 Eigenschaft 456 height 456

AABAP ABAP Workbench 58 Klassenhierarchie 190 ABAP Dictionary 1011 Bindung an/aus 1011 Datenelement WDR_TEXT_KEY 1016

1137

Index

Voraussetzung 454 Whitelist 455 width 456 AcfUpDownload 458 Achtung 461 archives 460 CL_WDR_ACFUPDOWNLOAD_ HNDL 459 class 460 Eigenschaft 460 Ereignis 461 height 460 onComplete 461 Voraussetzung 460 width 461 activateAccessKey 998 Active Component Framework ACF ActiveX Control 483 Installation 484 add_child( ) 728, 736 add_event_handler( ) 759 Admin-Modus 875 Adobe Entwicklungsumgebung 885 Flash 884, 885 Flash Player 885 Flex 2.0 887 Flex 3.0 887 Flex Builder 885 Flex Library 885 LiveCycle Designer 478 PDF-Ausgabe 978 Advanced Style Pattern Container 625, 626, 627 Aggregation 190 agile Softwareentwicklung 411 Ajax 34, 1066 Aktion 64, 73, 123, 736 Anlegen 73, 78, 92, 123, 124 Ausfhrung 114 Lesen 1099 Roundtrip 116 Standard 1036 Standardaktion 123 Typ 73, 123 validierungsunabhngige 73, 106, 115, 124, 1036 Aktionstaste 194, 322 Kombination 195

aktuelle Konfiguration 875 aktueller Wert, Standardwert 998 Aliasname 1012 Alignment 584 Alternating Table Cells 647 ALV-Configuration-Model 969 Anfangspunkt 364 Animation Performance 1054 Anmeldesprache 1084 Anordnung horizontale 266 Richtung 373 UI-Element 258 Anpassung, visuelle 545 Anpassungsmglichkeit 545 Antwortgeschwindigkeit 255 Anwendung 34, 47, 143, 679 Anlegen 62, 94 Beenden 87 Beispiel 57 Browser-Titel ndern 58 Client-Umgebung 1102 Definition 57 Editor 47, 95 Eigenschaft 47, 62 externe 454 Konfiguration 852, 868, 869, 870, 871 Metadaten 1102 Name 1040 performante 252 Testen 48, 95 Anwendungsparameter 48, 1052, 1083, 1084 Animation 1053 Anwendungskonfiguration 1083 Auswertungsreihenfolge 1084 Benutzerparameter 1084 Delta-Rendering 1053 globaler 868, 1083 Inline-CSS 1053 URL-Parameter 1084 WDACCESSIBILITY 1079 WDHIDEMOREFIELDHELPASDEFAULT 834 Web-Dynpro-Anwendung 1083 apply_filter( ) 923 apply_sorting( ) 926 Arbeitsablauf 365

1138

Index

Arbeitsgeschwindigkeit 763 Assistance-Klasse 125, 767, 1014 Anwendungsfall 125 CL_WD_COMPONENT_ASSISTANCE 125 Eintragung 126 Praxis 1014, 1017 Singleton 125 Text 1010 Attribut 109 Anlegen 131 enabled 149 Information 767 Public 91, 109 readOnly 149 Registerkarte 91, 109 required 149 Sichtbarkeit 110 Verwendung 92 visible 149 wd_assist 1017 wd_comp_controller 110 wd_context 110 wd_this 110 ATTRIBUTE 711 Attributeigenschaft 136, 148 Attributname 136 Binden 150 Formatierung 137 Null-Wert 136 Read-only 136 Typisierung 136 Wertehilfe-Modus 137 attributes 711 Attributtabelle 712 Aufbereitungsinformation 545 Aufzhlung 298 Aufzhlungssymbol 298 Ausgabedarstellung 289 Ausnahme 96 OO-Ausnahme 1026 Ausnahmeklasse Ausnahmetext 1010 CX_ROOT 1026 Ausrichtung, horizontale 302 Aussehen 545 Auswahlliste 372, 764, 767 Domnenfestwert 768 Implementierung 768, 770

Auswahlmglichkeit 339 CheckBox 764 CheckBoxGroup 764 DropDownByIndex 764 DropDownByKey 764 ItemListBox 764 RadioButton 764 RadioButtonGroupByIndex 764 RadioButtonGroupByKey 764 TriStateCheckBox 764

BBackground Color Page Layout Control 614 Text 592 BAdI, CALENDER_DEFINITION 351 Balkenbreite 437 Balkendiagramm 396 Barrierefreiheit 289, 1076 accessibilityDescription 1078 Anforderung 1076 Anwendung 289 Anwendungskonfiguration 1079 Einschalten 1079 Entwicklung 1077 Fehler 288 Prfung 46, 289 Prfung zur Designzeit 1078 Test 1079, 1080 tooltip 1077 Voraussetzung 1077 Base Font Size 577, 589, 590 Baumhierarchie 376 Behinderung 289 Benutzer blinder 289 Einstellung 878, 879 Benutzerfreundlichkeit 763 Berechtigung, Konfiguration 853 Bereichsauswahl 918 Beschreibungsobjekt 698 Ermittlung 698, 699 Bildschirmleseprogramm 289 bind_( ) 735 bind_element( ) 1115 bind_elements( ) 1115 bind_structure( ) 1115 bind_table( ) 1115

1139

Index

Blatt 375, 385 Standardbild 380 blinder Benutzer 289 Body, Tray 606 Border 582 Color 582 Group Box 612 Page Layout Control 614 Style 581 Width 579 bound_( ) 735 Box, Breite 437 BreadCrumb 346, 661 Achtung 349 aggregiertes Element 348 Barrierefreiheit 348 behaviour 347 BreadCrumbStep 347, 349 Eigenschaft 347 Ereignis 347 MultipleBreadCrumbStep 347, 349 onSelect 347 separatorImageSource 347 separatorText 347 Trennzeichen 347 visuelle Darstellung 346 Breakpoint, externer 1072 Breitengrad 426 Browse & Collect 372, 543 Browse-Button 470 Browser Cache 571 externer 563 BSP 1045 BSP_UPDATE_MIMEREPOS 552 Burn-Down-Chart 411 Business Add-in 351 Business Server Page 1045 BusinessGraphics 33, 37, 393, 408, 412 aggregiertes Element 401 backgroundColor 394 Barrierefreiheit 401 Beispiel 411 Category 395, 401 categorySource 395 Chart Designer 399, 409 chartType 395 customizing 399 Diagrammtyp 393

dimension 399 Eigenschaft 394 Ereignis 401 fontFamily 400 height 400 IF_WD_BUSIN_GRAPHICS_MTD_ HNDL 410 igsUrl 400 imageData 400 Internet Graphics Service 408 onAction 401, 412 Series 404 seriesSource 400 SimpleSeries 403 transparentColor 400 visuelle Darstellung 394 width 401 Button 246, 320, 589, 662 activateAccessKey 321 Barrierefreiheit 323 Beispiel 75 design 321 Eigenschaft 321 Emphasized 322 Ereignis 322 explanation 322 gedrckter 342 hotkey 322 imageFirst 322 imageSource 322 Next 322 Next Step 664 Previous 322 Previous Step 664 Style 662 text 322 Toggling 665 visuelle Darstellung 320 ButtonChoice 246, 323 activateAccessKey 324 aggregiertes Element 325 Barrierefreiheit 325 imageSource 324 MenuActionItem 326 repeatSelectedAction 324 selectedActionItem 324 text 325 visuelle Darstellung 323 ButtonRow 245 aggregiertes Element 246

1140

Index

Barrierefreiheit 245 Button 246 ButtonChoice 246 Drucktastenleiste 245 ToggleButton 246 visuelle Darstellung 245

CCaching 571 Calendar 603 Calendar Style 603 CALENDAR_DEFINITION 351 cancel_navigation 1037 Caption 167, 258, 294, 902, 957, 1010 Achtung 29