FlexBox

Layout-Container nach dem CSS-Flexbox-Modell. Ordnet Kind-Komponenten in Reihen oder Spalten an. Die DynamicFlexBox-Variante erlaubt zusätzlich das Hinzufügen und Entfernen von Items zur Laufzeit.

Designer-Attribute

Attribut	Beschreibung	Default
controlId	Eindeutige ID	automatisch generiert
direction	Row, Column, RowReverse, ColumnReverse	Row
justifyContent	Start, End, Center, SpaceBetween, SpaceAround	Start
alignItems	Start, End, Center, Stretch, Baseline	Stretch
wrap	NoWrap, Wrap, WrapReverse	NoWrap
width	Breite (CSS-Wert)	–
height	Höhe (CSS-Wert)	–
visible	Sichtbar	true
spanS / spanM / spanL / spanXL	Grid-Layout	12

ABAP-API

Zugriff über:

Methode	Zweck
me->get_flex_box( '<controlId>' )	Statische FlexBox
me->get_dynamic_flex_box( '<controlId>' )	Dynamische FlexBox mit Items-API

DynamicFlexBox – Items-API

Methode	Zweck
ADD_ITEM	Komponente am Ende anhängen
REMOVE_ITEM	Komponente nach controlId entfernen
REMOVE_ITEMS	Alle Items entfernen
GET_ITEMS	Tabelle aller 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 aus generierter Konstanten-Klasse

Die mc_event_*-Konstanten stammen aus einer Konstanten-Klasse, die der Designer automatisch erzeugen kann. Damit entfällt das Tippen von String-Literalen für Event-Keys.

Nächste Schritte

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