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.

  PROTECTED SECTION.
  PRIVATE SECTION.
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, and three things around it:

abap
INTERFACE z2ui5_if_app PUBLIC.
  INTERFACES if_serializable_object.

  DATA id_draft TYPE string.
  DATA id_app   TYPE string.

  METHODS main
    IMPORTING
      client TYPE REF TO z2ui5_if_client.
ENDINTERFACE.

if_serializable_object is there because the framework stores your whole instance between two roundtrips and reads it back — which is what lets a class attribute survive from one click to the next. id_draft and id_app are the ids it manages for that; you never set them. (The interface also carries the framework's version and license as constants.)

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

Working Samples ​

Complete apps from the sample catalog that use what this page describes. Each is a single class in abap2UI5/samples unless its row names another of the three sample repositories — pull that repository with abapGit and start the class with ?app_start=<class>.

SampleClass
Basics I — Hello World, the Smallest AppZ2UI5_CL_SMP_APP_493