FlexBox

Layout-Container nach dem CSS-Flexbox-Modell. Ordnet Kind-Komponenten in Reihen oder Spalten an. Die DynamicFlexBox ist ein eigener Palette-Typ mit denselben Layout-Attributen (siehe die Untertabelle unten), aber im Designer kein Container: Sie nimmt keine Kinder per Drag-and-Drop auf – ihre Items kommen ausschließlich zur Laufzeit aus ABAP über die Items-API.

Designer-Attribute

Attribut	Beschreibung	Default
controlId	Eindeutige ID	automatisch generiert
width	Breite (CSS-Wert)	100%
height	Höhe (CSS-Wert)	–
backgroundDesign	Hintergrund-Stil. Werte: Solid, Transparent, Translucent	Transparent
direction	Anordnung der Kinder. Werte: Row, Column, RowReverse, ColumnReverse, Inherit	Column
alignContent	Ausrichtung der Zeilen bei Umbruch. Werte: Start, End, Center, SpaceBetween, SpaceAround, Stretch, Inherit	Stretch
alignItems	Ausrichtung der Kinder quer zur Richtung. Werte: Start, End, Center, Baseline, Stretch, Inherit	Stretch
justifyContent	Ausrichtung der Kinder in Richtung. Werte: Start, End, Center, SpaceBetween, SpaceAround, Inherit	Start
renderType	Rendering der Kinder. Werte: Div, List, Bare	Div
fitContainer	Füllt den umgebenden Container aus	false
wrap	Umbruch der Kinder. Werte: NoWrap, Wrap, WrapReverse	NoWrap
visible	Sichtbar	true
spanS / spanM / spanL / spanXL	Grid-Layout	12

DynamicFlexBox (Kinder aus dem Backend)

Attribut	Beschreibung	Default
controlId	Eindeutige ID der Komponente	automatisch generiert
width	Breite (CSS-Wert)	100%
height	Höhe (CSS-Wert)	–
backgroundDesign	Hintergrund-Stil. Werte: Solid, Transparent, Translucent	Transparent
direction	Anordnung der Kinder. Werte: Row, Column, RowReverse, ColumnReverse, Inherit	Column
alignContent	Ausrichtung der Zeilen bei Umbruch. Werte: Start, End, Center, SpaceBetween, SpaceAround, Stretch, Inherit	Stretch
alignItems	Ausrichtung der Kinder quer zur Richtung. Werte: Start, End, Center, Baseline, Stretch, Inherit	Stretch
justifyContent	Ausrichtung der Kinder in Richtung. Werte: Start, End, Center, SpaceBetween, SpaceAround, Inherit	Start
renderType	Rendering der Kinder. Werte: Div, List, Bare	Div
fitContainer	Füllt den umgebenden Container aus	false
wrap	Umbruch der Kinder. Werte: NoWrap, Wrap, WrapReverse	NoWrap
visible	Komponente sichtbar	true
spanS / spanM / spanL / spanXL	Breite im Grid-Layout	12

ABAP-API

Zugriff über:

Getter	Komponente
me->get_control( '<controlId>' )	Statische FlexBox — es gibt keinen typisierten Getter, Properties über set_property_value
me->get_dynamic_flex_box( '<controlId>' )	Dynamische FlexBox mit Items-API

DynamicFlexBox – Items-API

Methode	Zweck
ADD_ITEM	Komponente am Ende anhängen; eine leere controlId löst eine Ausnahme /mobbuild/cx_exception aus, eine vorhandene Komponente gleicher controlId wird ersetzt
GET_ITEM	Komponente nach controlId
GET_ITEMS	Tabelle aller Items
REMOVE_ITEM	Komponente nach controlId entfernen
REMOVE_ITEMS	Alle Items entfernen
INIT	Alle Items entfernen (wie REMOVE_ITEMS)

Geerbte Methoden: siehe Control.

Beispiel /mobbuild/cl_ex_dyn_flexbox: Dynamische MessageStrips

Das Beispiel fügt einer DynamicFlexBox bei jedem Klick einen neuen MessageStrip hinzu, entfernt das letzte Item oder leert die FlexBox komplett:

METHOD on_pai.

  DATA(lv_event_key) = me->get_event( )->get_event_key( ).

  IF lv_event_key EQ mc_event_add.
    me->on_add( ).
  ELSEIF lv_event_key EQ mc_event_remove.
    me->on_remove( ).
  ELSEIF lv_event_key EQ mc_event_remove_all.
    me->on_remove_all( ).
  ENDIF.

ENDMETHOD.

METHOD on_add.

  DATA(lo_flex_box) = me->get_dynamic_flex_box( 'dynamicFlexBox' ).
  DATA(lt_controls) = lo_flex_box->get_items( ).
  DATA(lv_count)    = lines( lt_controls ).

  DATA(lo_temp)          = |Message{ lv_count }|.
  DATA(lo_message_strip) = /mobbuild/cl_message_strip=>create( ).

  lo_message_strip->set_control_id( lo_temp ).
  lo_message_strip->set_text( lo_temp ).
  lo_message_strip->set_type( /mobbuild/cl_message_type=>co_error ).
  lo_message_strip->set_property_value(
    iv_key   = 'class'
    iv_value = 'sapUiTinyMargin' ).

  lo_flex_box->add_item( lo_message_strip ).

ENDMETHOD.

METHOD on_remove.

  DATA(lo_flex_box) = me->get_dynamic_flex_box( 'dynamicFlexBox' ).
  DATA(lt_controls) = lo_flex_box->get_items( ).
  DATA(lv_count)    = lines( lt_controls ).

  IF lv_count > 0.
    READ TABLE lt_controls INTO DATA(lo_last_control) INDEX lv_count.
    lo_flex_box->remove_item( lo_last_control->get_control_id( ) ).
  ENDIF.

ENDMETHOD.

METHOD on_remove_all.
  DATA(lo_flex_box) = me->get_dynamic_flex_box( 'dynamicFlexBox' ).
  lo_flex_box->remove_items( ).
ENDMETHOD.

Konstanten statt String-Literale

Die mc_event_*-Konstanten sind in der Beispielklasse selbst deklariert. Vergleichbare Konstanten für controlIds und Event-Keys (mc_mb_*) erzeugt der Designer auf Knopfdruck in der gebundenen View-Klasse – siehe Konstanten-Attribute.

Nächste Schritte

• Panel – Container mit optionaler Überschrift
• IconTabBar – mehrere Tab-Bereiche