Fullscreen – address form with edit switch

The class

" @keywords simpleform simple form sap.ui.layout.form simpleform480 bar button vbox title label text input
" @summary The same fullscreen address form built with SimpleForm: Edit / Save / Cancel in the page header switch it between display and change mode.
" @origin sap.ui.layout.sample.SimpleForm480 - https://sdk.openui5.org/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleForm480 (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_329 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA edit_mode    TYPE abap_bool.
    DATA suppliername TYPE string.
    DATA street       TYPE string.
    DATA housenumber  TYPE string.
    DATA zipcode      TYPE string.
    DATA city         TYPE string.
    DATA country      TYPE string.
    DATA url          TYPE string.
    DATA twitter      TYPE string.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    " the record clone Page.controller.js keeps for Cancel - see the sidecar
    DATA backup_suppliername TYPE string.
    DATA backup_street       TYPE string.
    DATA backup_housenumber  TYPE string.
    DATA backup_zipcode      TYPE string.
    DATA backup_city         TYPE string.
    DATA backup_country      TYPE string.
    DATA backup_url          TYPE string.
    DATA backup_twitter      TYPE string.

    METHODS view_display.
    METHODS on_event.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_329 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( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

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

    " both fragments Page.controller.js swaps in and out, inlined - see the sidecar
    view->ele( n = `View` ns = `mvc`
        )->a( n = `height`     v = `100%`
        )->a( n = `xmlns:mvc`  v = `sap.ui.core.mvc`
        )->a( n = `xmlns`      v = `sap.m`
        )->a( n = `xmlns:l`    v = `sap.ui.layout`
        )->a( n = `xmlns:form` v = `sap.ui.layout.form`
        )->a( n = `xmlns:core` v = `sap.ui.core`

        )->ele( `Page`
            )->a( n = `id`         v = `page`
            )->a( n = `showHeader` v = `true`

            )->ele( `customHeader`
                )->ele( `Bar`
                    )->ele( `contentRight`
                        )->tag( `Button`
                            )->a( n = `id`      v = `edit`
                            )->a( n = `text`    v = `Edit`
                            " enabled from the start (Page.controller.js waits for the mock request) - see the sidecar
                            )->a( n = `enabled` v = `true`
                            )->a( n = `visible` v = |\{= !${ client->_bind( edit_mode ) }\}|
                            )->a( n = `press`   v = client->_event( `EDIT` )
                        )->tag( `Button`
                            )->a( n = `id`      v = `save`
                            )->a( n = `text`    v = `Save`
                            )->a( n = `type`    v = `Emphasized`
                            )->a( n = `visible` v = client->_bind( edit_mode )
                            )->a( n = `press`   v = client->_event( `SAVE` )
                        )->tag( `Button`
                            )->a( n = `id`      v = `cancel`
                            )->a( n = `text`    v = `Cancel`
                            )->a( n = `visible` v = client->_bind( edit_mode )
                            )->a( n = `press`   v = client->_event( `CANCEL` )

                    )->end(
                )->end(
            )->end(
            )->ele( `content`

                " Display.fragment.xml
                )->ele( `VBox`
                    )->a( n = `class`   v = `sapUiSmallMargin`
                    )->a( n = `visible` v = |\{= !${ client->_bind( edit_mode ) }\}|

                    )->ele( n = `SimpleForm` ns = `form`
                        )->a( n = `id`                      v = `SimpleFormDisplay480`
                        )->a( n = `editable`                v = `false`
                        )->a( n = `layout`                  v = `ResponsiveGridLayout`
                        )->a( n = `title`                   v = `Address`
                        )->a( n = `labelSpanXL`             v = `4`
                        )->a( n = `labelSpanL`              v = `4`
                        )->a( n = `labelSpanM`              v = `4`
                        )->a( n = `labelSpanS`              v = `12`
                        )->a( n = `adjustLabelSpan`         v = `false`
                        )->a( n = `emptySpanXL`             v = `0`
                        )->a( n = `emptySpanL`              v = `0`
                        )->a( n = `emptySpanM`              v = `0`
                        )->a( n = `emptySpanS`              v = `0`
                        )->a( n = `columnsXL`               v = `2`
                        )->a( n = `columnsL`                v = `2`
                        )->a( n = `columnsM`                v = `1`
                        )->a( n = `singleContainerFullSize` v = `false`

                        )->ele( n = `content` ns = `form`
                            )->tag( n = `Title` ns = `core`
                                )->a( n = `text` v = `Office`
                            )->tag( `Label`
                                )->a( n = `text` v = `Name`
                            )->tag( `Text`
                                )->a( n = `id`   v = `nameText`
                                )->a( n = `text` v = client->_bind( suppliername )
                            )->tag( `Label`
                                )->a( n = `text` v = `Street/No.`
                            )->tag( `Text`
                                )->a( n = `text` v = |{ client->_bind( street ) } { client->_bind( housenumber ) }|
                            )->tag( `Label`
                                )->a( n = `text` v = `ZIP Code/City`
                            )->tag( `Text`
                                )->a( n = `text` v = |{ client->_bind( zipcode ) } { client->_bind( city ) }|
                            )->tag( `Label`
                                )->a( n = `text` v = `Country`
                            )->tag( `Text`
                                )->a( n = `id`   v = `countryText`
                                )->a( n = `text` v = client->_bind( country )
                            )->tag( n = `Title` ns = `core`
                                )->a( n = `text` v = `Online`
                            )->tag( `Label`
                                )->a( n = `text` v = `Web`
                            )->tag( `Text`
                                )->a( n = `text` v = client->_bind( url )
                            )->tag( `Label`
                                )->a( n = `text` v = `Twitter`
                            )->tag( `Text`
                                )->a( n = `text` v = client->_bind( twitter )

                        )->end(
                    )->end(
                )->end(

                " Change.fragment.xml
                )->ele( `VBox`
                    )->a( n = `class`   v = `sapUiSmallMargin`
                    )->a( n = `visible` v = client->_bind( edit_mode )

                    )->ele( n = `SimpleForm` ns = `form`
                        )->a( n = `id`                      v = `SimpleFormChange480`
                        )->a( n = `editable`                v = `true`
                        )->a( n = `layout`                  v = `ResponsiveGridLayout`
                        )->a( n = `title`                   v = `Address`
                        )->a( n = `labelSpanXL`             v = `4`
                        )->a( n = `labelSpanL`              v = `4`
                        )->a( n = `labelSpanM`              v = `4`
                        )->a( n = `labelSpanS`              v = `12`
                        )->a( n = `adjustLabelSpan`         v = `false`
                        )->a( n = `emptySpanXL`             v = `0`
                        )->a( n = `emptySpanL`              v = `0`
                        )->a( n = `emptySpanM`              v = `0`
                        )->a( n = `emptySpanS`              v = `0`
                        )->a( n = `columnsXL`               v = `2`
                        )->a( n = `columnsL`                v = `2`
                        )->a( n = `columnsM`                v = `1`
                        )->a( n = `singleContainerFullSize` v = `false`

                        )->ele( n = `content` ns = `form`
                            )->tag( n = `Title` ns = `core`
                                )->a( n = `text` v = `Office`
                            )->tag( `Label`
                                )->a( n = `text` v = `Name`
                            )->tag( `Input`
                                )->a( n = `id`    v = `name`
                                )->a( n = `value` v = client->_bind( suppliername )
                            )->tag( `Label`
                                )->a( n = `text` v = `Street/No.`
                            )->tag( `Input`
                                )->a( n = `value` v = client->_bind( street )

                            )->ele( `Input`
                                )->a( n = `value` v = client->_bind( housenumber )

                                )->ele( `layoutData`
                                    )->tag( n = `GridData` ns = `l`
                                        )->a( n = `span` v = `XL2 L3 M3 S4`

                                )->end(
                            )->end(
                            )->tag( `Label`
                                )->a( n = `text` v = `ZIP Code/City`

                            )->ele( `Input`
                                )->a( n = `value` v = client->_bind( zipcode )

                                )->ele( `layoutData`
                                    )->tag( n = `GridData` ns = `l`
                                        )->a( n = `span` v = `XL2 L3 M3 S4`

                                )->end(
                            )->end(
                            )->tag( `Input`
                                )->a( n = `value` v = client->_bind( city )
                            )->tag( `Label`
                                )->a( n = `text` v = `Country`

                            )->ele( `Select`
                                )->a( n = `id`          v = `country`
                                )->a( n = `selectedKey` v = client->_bind( country )

                                )->ele( `items`
                                    )->tag( n = `Item` ns = `core`
                                        )->a( n = `text` v = `England`
                                        )->a( n = `key`  v = `England`
                                    )->tag( n = `Item` ns = `core`
                                        )->a( n = `text` v = `Germany`
                                        )->a( n = `key`  v = `Germany`
                                    )->tag( n = `Item` ns = `core`
                                        )->a( n = `text` v = `USA`
                                        )->a( n = `key`  v = `USA`

                                )->end(
                            )->end(
                            )->tag( n = `Title` ns = `core`
                                )->a( n = `text` v = `Online`
                            )->tag( `Label`
                                )->a( n = `text` v = `Web`
                            )->tag( `Input`
                                )->a( n = `value` v = client->_bind( url )
                            )->tag( `Label`
                                )->a( n = `text` v = `Twitter`
                            )->tag( `Input`
                                )->a( n = `value` v = client->_bind( twitter ) ).

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

  ENDMETHOD.


  METHOD on_event.

    " the Edit/Save/Cancel handlers of Page.controller.js - see the sidecar
    CASE client->get_event( ).

      WHEN `EDIT`.
        backup_suppliername = suppliername.
        backup_street       = street.
        backup_housenumber  = housenumber.
        backup_zipcode      = zipcode.
        backup_city         = city.
        backup_country      = country.
        backup_url          = url.
        backup_twitter      = twitter.
        edit_mode           = abap_true.

      WHEN `SAVE`.
        edit_mode = abap_false.

      WHEN `CANCEL`.
        suppliername = backup_suppliername.
        street       = backup_street.
        housenumber  = backup_housenumber.
        zipcode      = backup_zipcode.
        city         = backup_city.
        country      = backup_country.
        url          = backup_url.
        twitter      = backup_twitter.
        edit_mode    = abap_false.

    ENDCASE.

  ENDMETHOD.


  METHOD model_init.

    " the row 0 Page.controller.js element-binds, flattened - see the sidecar
    suppliername = `Red Point Stores`.
    street       = `Main St`.
    housenumber  = `1618`.
    zipcode      = `31415`.
    city         = `Maintown`.
    country      = `Germany`.
    url          = `http://www.sap.com`.
    twitter      = `@sap`.

  ENDMETHOD.

ENDCLASS.