abap2UI5

Appearance

View ​

In abap2UI5, the output is generated by importing a UI5 XML View. Here’s a basic example:

abap
METHOD z2ui5_if_app~main.

    client->view_display( 
        |<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" | &
        |          displayBlock="true" height="100%">| &
        |  <Shell>| &
        |     <Page title="My title">| &
        |         <Text text="My text"/>| &
        |     </Page>| &
        |  </Shell>| &
        |</mvc:View>| ).

ENDMETHOD.

You can use any UI5 control available in the UI5 SDK. However, working with XML can become cumbersome. A more efficient approach is to use the Z2UI5_CL_XML_VIEW class. Here's an improved version of the code above:

abap
  METHOD z2ui5_if_app~main.

    client->view_display(
        z2ui5_cl_xml_view=>factory(
            )->shell(
                )->page( 'My title'
                    )->Text( 'My text' 
        )->stringify( ) ).

  ENDMETHOD.

Tips for Usage:

  • Explore the API: Check the API of Z2UI5_CL_XML_VIEW and use code completion to easily identify the available controls and properties.
  • Sample Repository: Refer to the sample repository for pre-written XML examples that you can copy, paste, and adjust as needed.

What’s Next? ​

This current setup is static. In the next section, we will explore how to bind and exchange data between the view and the application logic.