Horizontal Layout

" @keywords horizontallayout horizontal layout sap.ui.layout named model image
" @summary The Horizontal Layout control is a simple way to align multiple controls horizontally. By default the contained controls are not wrapped. If you want more sophisticated layout options, consider Grid or Flex Box based layouts.
CLASS z2ui5_cl_smpc_app_162 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA widths TYPE string.
    DATA widthm TYPE string.
    DATA widthl TYPE string.
    DATA pic1   TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_162 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      model_init( ).
      view_display( ).
    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    " The original binds the image src against a separate 'img' JSON model
    " ({img>/products/pic1}) while the widths come from the default model.
    " abap2UI5 has one default model, so the picture path is folded into it and
    " the src binds it directly (the 'img>' prefix is dropped - last path
    " segment identical, which structural-diff matches). One model of truth,
    " thin frontend.
    view->ele( n = `View` ns = `mvc`
        )->a( n = `xmlns:l`   v = `sap.ui.layout`
        )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
        )->a( n = `xmlns`     v = `sap.m`

        )->ele( n = `HorizontalLayout` ns = `l`
            )->a( n = `class` v = `sapUiContentPadding`

            )->tag( `Image`
                )->a( n = `src`          v = client->_bind( pic1 )
                )->a( n = `densityAware` v = `true`
                )->a( n = `width`        v = client->_bind( widths )
            )->tag( `Image`
                )->a( n = `src`          v = client->_bind( pic1 )
                )->a( n = `densityAware` v = `true`
                )->a( n = `width`        v = client->_bind( widthm )
            )->tag( `Image`
                )->a( n = `src`          v = client->_bind( pic1 )
                )->a( n = `densityAware` v = `true`
                )->a( n = `width`        v = client->_bind( widthl ) ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.


  METHOD model_init.

    " original widths are Device.system.phone dependent - reproduced from the
    " server-side device mirror (client->get( )-s_device, app 012 precedent;
    " the twin sample 173 has done it this way since it was written)
    IF client->get( )-s_device-system = z2ui5_if_client=>cs_device-system-phone.
      widths = `2em`.
      widthm = `4em`.
      widthl = `6em`.
    ELSE.
      widths = `5em`.
      widthm = `10em`.
      widthl = `15em`.
    ENDIF.
    pic1   = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-7777-large.jpg`.

  ENDMETHOD.

ENDCLASS.