You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/get_started/hello_world.md
+40-40Lines changed: 40 additions & 40 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,6 @@ outline: [2, 4]
5
5
6
6
Just copy the following class into your system:
7
7
8
-
Build a class:
9
8
```abap
10
9
CLASS zcl_app_hello_world DEFINITION PUBLIC.
11
10
PUBLIC SECTION.
@@ -24,7 +23,27 @@ Go back to the landing page in your browser and enter `ZCL_APP_HELLO_WORLD` to l
24
23
While the HTTP handler has to distinguish between Standard ABAP and ABAP for Cloud, the apps themselves are independent. You're free to choose whether to build your apps with ABAP Cloud compatibility.
25
24
:::
26
25
27
-
### Idea
26
+
### View Display
27
+
Let's add a view to show some text:
28
+
```abap
29
+
CLASS zcl_app_hello_world DEFINITION PUBLIC.
30
+
PUBLIC SECTION.
31
+
INTERFACES z2ui5_if_app.
32
+
ENDCLASS.
33
+
34
+
CLASS zcl_app_hello_world IMPLEMENTATION.
35
+
METHOD z2ui5_if_app~main.
36
+
37
+
DATA(view) = z2ui5_cl_xml_view=>factory(
38
+
)->page( `abap2UI5 - Hello World`
39
+
)->text( `My Text` ).
40
+
client->view_display( view->stringify( ) ).
41
+
42
+
ENDMETHOD.
43
+
ENDCLASS.
44
+
```
45
+
46
+
### Info
28
47
abap2UI5 follows a thin-frontend model: the browser only renders UI5 views, while all logic, state, and data handling stay in ABAP on the server. Three ideas to keep in mind before writing code:
29
48
30
49
-**One method, many calls.** The framework calls your app's `main` method on every roundtrip — on the initial start *and* after every user interaction (button press, input change, navigation).
@@ -43,8 +62,9 @@ The `client` object is your only entry point into the framework. Use it to show
43
62
44
63
→ *For a deeper look at the lifecycle and framework internals, see [How It All Works](/technical/how_it_all_works) and [Concept](/technical/concept).*
45
64
46
-
### View Display
47
-
Let's add a view to show some text:
65
+
### Events
66
+
67
+
Let's extend the code with some event handling:
48
68
```abap
49
69
CLASS zcl_app_hello_world DEFINITION PUBLIC.
50
70
PUBLIC SECTION.
@@ -54,16 +74,25 @@ ENDCLASS.
54
74
CLASS zcl_app_hello_world IMPLEMENTATION.
55
75
METHOD z2ui5_if_app~main.
56
76
57
-
DATA(view) = z2ui5_cl_xml_view=>factory(
58
-
)->page( `abap2UI5 - Hello World`
59
-
)->text( `My Text` ).
60
-
client->view_display( view->stringify( ) ).
77
+
IF client->check_on_init( ).
78
+
79
+
DATA(view) = z2ui5_cl_xml_view=>factory(
80
+
)->page( `abap2UI5 - Hello World`
81
+
)->text( `My Text`
82
+
)->button( text = `post` press = client->_event( `POST` ) ).
83
+
client->view_display( view->stringify( ) ).
84
+
85
+
ELSEIF client->check_on_event( `POST` ).
86
+
87
+
client->message_box_display( `Hello World!` ).
88
+
89
+
ENDIF.
61
90
62
91
ENDMETHOD.
63
92
ENDCLASS.
64
93
```
65
94
66
-
### Event Handler
95
+
### Info
67
96
The framework calls the `main` method on every roundtrip — on initialization and after every user interaction (button press, input submit, etc.):
68
97
69
98
```text
@@ -78,41 +107,12 @@ The framework calls the `main` method on every roundtrip — on initialization a
78
107
└─────────┘ └──────────┘ └──────────┘
79
108
```
80
109
81
-
To distinguish between lifecycle events, use `CASE abap_true`:
110
+
To distinguish between lifecycle events, check for the following events:
82
111
83
112
-`client->check_on_init( )` — first call when the app starts
84
113
-`client->check_on_event( )` — user triggered an event (e.g., button press)
85
-
-`client->check_on_navigated( )` — returned from another app via navigation
86
-
87
-
Each `check_*` method returns `abap_true` only for its specific phase, so `CASE abap_true` acts as a dispatcher:
88
-
```abap
89
-
CLASS zcl_app_hello_world DEFINITION PUBLIC.
90
-
PUBLIC SECTION.
91
-
INTERFACES z2ui5_if_app.
92
-
ENDCLASS.
93
-
94
-
CLASS zcl_app_hello_world IMPLEMENTATION.
95
-
METHOD z2ui5_if_app~main.
96
-
97
-
CASE abap_true.
98
-
99
-
WHEN client->check_on_init( ).
100
-
101
-
DATA(view) = z2ui5_cl_xml_view=>factory(
102
-
)->page( `abap2UI5 - Hello World`
103
-
)->text( `My Text`
104
-
)->button( text = `post` press = client->_event( `POST` ) ).
105
-
client->view_display( view->stringify( ) ).
106
-
107
-
WHEN client->check_on_event( `POST` ).
108
-
109
-
client->message_box_display( `Hello World!` ).
110
-
111
-
ENDCASE.
112
114
113
-
ENDMETHOD.
114
-
ENDCLASS.
115
-
```
115
+
Each `check_*` method returns `abap_true` only for its specific phase, so is acts as a dispatcher:
116
116
117
117
### Data Flow
118
118
Finally, add a public attribute to send data to the backend:
0 commit comments