Dynamische Layout-Manipulation 

Unter bestimmten Umständen kann es sinnvoll sein, das Layout einer View zur Laufzeit zu verändern. In diesem Zusammenhang ist es möglich, sowohl UI-Elemente hinzuzufügen als auch zu entfernen. Sie können jedoch auch dynamisch die Eigenschaften eines UI-Elements verändern, ein Ereignis gegen eine Aktion binden oder das Parameter-Mapping von Ereignis-Parametern manipulieren.

Grundsätzlich sollte die dynamische Manipulation des Layouts – genau wie die dynamische Manipulation des Contexts – wirklich nur dann zum Einsatz kommen, wenn eine Component nicht auf deklarativem Wege aufgebaut werden kann. Dies kann zum Beispiel dann der Fall sein, wenn Teile der Component zur Design-Zeit noch nicht bekannt sind.

 Änderungen an der Struktur eines View-Layouts müssen grundsätzlich in der Methode WDDOMODIFYVIEW (oder einer darin gerufenen Methode) durchgeführt werden.

 Sie finden eine vollständige Liste aller UI-Elemente-Klassen mit deren Methoden im Referenzteil dieser Dokumentation.

 

Container und UI-Elemente

Der Umgang mit der dynamischen Layout-Manipulation setzt das Verständnis des Aufbaus einer View voraus: In einer View werden eine Reihe von UI-Elementen in Beziehung zu einander angeordnet. Diese Anordnung geschieht in so genannten Containern. Zur Beschreibung der Anordnung  wird für jeden Container ein so genanntes Layout ausgewählt, es stehen Flow-, Matrix-, oder RowLayout zur Verfügung (siehe Referenzdokumkentation Kapitel Layout). Jedes UI-Element verfügt passend zum einbettenden Container über so genannte Layoutdaten. Diese Layoutdaten beinhalten die Beschreibung, an welcher Stelle im Layout des Containers ein eingebettetes UI-Element angeordnet ist.

 Layout des Containers und Layoutdaten des eingebetteten UI-Elements müssen immer zusammen passen. Beispiel: Wenn der Container vom Typ FlowLayout ist, müssen die Layoutdaten der eingebetteten UI-Elemente vom Typ FlowData sein.

 

Jede View enthält zum Zeitpunkt des Anlegens bereits einen leeren Container, den so genannten ROOTUIELEMENTCONTAINER. Innerhalb dieses Containers wird das gesamte Layout der View  aufgebaut.

Hinzufügen eines UI-Elements in einen Container

Wenn Sie einem UI-Element-Container ein neues UI-Element hinzufügen wollen, müssen Sie folgende Schritte bedenken:

●     Es muss festgelegt werden, um was für ein UI-Element es sich handelt.

●     Zu dem Container-Element, in welches das neue UI-Element eingefügt werden soll, muss eine Referenz erzeugt werden (Methode view->GET_ELEMENT).

●     Es muss die Stelle im Layout des Containers bestimmt werden, an der sich das neue Element einordnen soll. Zu diesem Zweck müssen für das neu angelegte UI-Element die passenden Layoutdaten angelegt werden.

Das folgende Code-Fragment zeigt die für das Hinzufügen eines UI-Elements vom Typ Schaltfläche (Button) nötigen Schritte:

 

method WDDOMODIFYVIEW .   data: LR_CONTAINER         type ref to CL_WD_UIELEMENT_CONTAINER,       LR_BUTTON            type ref to CL_WD_BUTTON,       LR_FLOW_DATA         type ref to CL_WD_FLOW_DATA.      LR_BUTTON           =  CL_WD_BUTTON=>NEW_BUTTON( ).  LR_FLOW_DATA        =  CL_WD_FLOW_DATA=>NEW_FLOW_DATA( element = LR_BUTTON ).    LR_CONTAINER ?= view->GET_ELEMENT( 'ROOTUIELEMENTCONTAINER' ).    LR_CONTAINER->ADD_CHILD( LR_BUTTON ). . . endmethod.

Die Eigenschaften des neu eingefügten UI-Elements

Wenn Sie eine Eigenschaft des UI-Elements bei der dynamischen Erzeugung setzen wollen, werden Sie die Werte bei der Erzeugung mit übergeben. Das oben stehende Beispiel soll um einen Text auf der anzulegenden Schaltfläche erweitert werden wobei der Text vorher im Online Text Repository angelegt wurde:

data:    MY_TEXT       type string.          MY_TEXT      =  CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( 'MY_TEXT_ALIAS' ).    LR_BUTTON    =  CL_WD_BUTTON=>NEW_BUTTON( text = MY_TEXT ).

Eine Eigenschaft wie der Text der Schaltfläche lässt sich auch später noch verändern. Hierfür besitzt die Klasse CL_WD_BUTTON, wie auch alle anderen Basis-Klassen von UI-Elementen, jeweils die geeignete Methode – im Fall des oben stehenden Beispiels also die Methode SET_TEXT. Auf die gleiche Weise können auch alle anderen Eigenschaften eines UI-Elements gesetzt bzw. verändert werden. So können Sie beispielsweise der Schaltfläche eine (unabhängig davon angelegte) Aktion zuordnen oder die Zuordnung dynamisch verändern.

LR_BUTTON    =  CL_WD_BUTTON=>NEW_BUTTON(        text = MY_TEXT                                              On_action = MY_ACTION ).

Eigenschaften von UI-Elementen können außerdem an Context-Knoten gebunden werden. Dafür besitzt die Klasse CL_WD_[UI-Element-Typ] ein Set von Methoden BIND_[Eigenschaftstyp]:

LR_BUTTON->BIND_TEXT( 'NODE_NAME.ATTRIBUT_NAME' ).

 

Entfernen eines UI-Elements aus einem Container

Um ein UI-Element aus einem Container zu entfernen enthält die Klasse CL_WD_UIELEMENT_CONTAINER die Methode REMOVE_CHILD.