abap2UI5

Appearance

Step 1: The App Class ​

Every abap2UI5 app is one ABAP class implementing the interface z2ui5_if_app. That interface has a single method, main, and the framework calls it with one parameter: client, your only API. This is the smallest app that can exist:

abap
CLASS zcl_app_walkthrough DEFINITION PUBLIC.
  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.
ENDCLASS.

CLASS zcl_app_walkthrough IMPLEMENTATION.
  METHOD z2ui5_if_app~main.
    client->message_box_display( `Hello World` ).
  ENDMETHOD.
ENDCLASS.

Press Run this example under the code — the class starts right here in the browser. To run it in your own system instead, copy it in, open the abap2UI5 startup page (see the Quickstart), and enter the class name.

What Just Happened ​

  • No app project, no OData service, no frontend artifact. The class is the app. abap2UI5 follows a thin-frontend model: the browser only renders, while all logic, state and data stay in ABAP on the server.
  • main runs on every roundtrip. The framework calls it when the app starts and again after every user interaction. Right now every call shows the same message box; from Step 3 on we will tell the calls apart.
  • client is the whole API. Displaying views and messages, reacting to events, binding data — everything in this tutorial goes through this one object.

The Interface ​

z2ui5_if_app is the whole contract between your class and the framework — one method, one parameter:

abap
INTERFACE z2ui5_if_app PUBLIC.
  METHODS main
    IMPORTING
      client TYPE REF TO z2ui5_if_client.
ENDINTERFACE.

(The real interface also declares a few attributes the framework manages for you — you can ignore them.)

→ For a deeper look at the lifecycle and framework internals, see How It All Works and Concept.

Next, we replace the message box with a real UI5 view.

Working Samples ​

Complete apps from the sample catalogue that use what this page describes. Each is a single class — pull the repository with abapGit and start it with ?app_start=<class>.

SampleClass
Basics I — Hello World, the Smallest AppZ2UI5_CL_SMP_APP_493