Skip to content

Commit 393ffb0

Browse files
oblomov-devoblomov-dev
authored
Merge pull request #113 from abap2UI5/claude/practical-sagan-a0sj7
Reorganize hello world guide for better learning flow
2 parents 7c5bf2e + c4fcbd2 commit 393ffb0

1 file changed

Lines changed: 45 additions & 50 deletions

File tree

‎docs/get_started/hello_world.md‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,26 @@ Go back to the landing page in your browser and enter `ZCL_APP_HELLO_WORLD` to l
2323
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.
2424
:::
2525

26+
### How Apps Work
27+
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:
28+
29+
- **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).
30+
- **State lives in your class.** Public attributes of your app class hold data between roundtrips; abap2UI5 serializes and restores them for you, so you don't manage sessions manually.
31+
- **The `client` object is your only API.** Use it to display views, check which event fired, bind attributes to UI5 controls, and trigger navigation.
32+
33+
Every abap2UI5 app implements the `z2ui5_if_app` interface. It has a single method, `main`, with one parameter: `client` of type `z2ui5_if_client`:
34+
```abap
35+
INTERFACE z2ui5_if_app PUBLIC.
36+
METHODS main
37+
IMPORTING
38+
client TYPE REF TO z2ui5_if_client.
39+
ENDINTERFACE.
40+
```
41+
42+
→ *For a deeper look at the lifecycle and framework internals, see [How It All Works](/technical/how_it_all_works) and [Concept](/technical/concept).*
43+
2644
### View Display
27-
Let's add a view to show some text:
45+
Instead of a message box, let's render a view with some text:
2846
```abap
2947
CLASS zcl_app_hello_world DEFINITION PUBLIC.
3048
PUBLIC SECTION.
@@ -43,28 +61,8 @@ CLASS zcl_app_hello_world IMPLEMENTATION.
4361
ENDCLASS.
4462
```
4563

46-
### Info
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:
48-
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).
50-
- **State lives in your class.** Public attributes of your app class hold data between roundtrips; abap2UI5 serializes and restores them for you, so you don't manage sessions manually.
51-
- **The `client` object is your only API.** Use it to display views, check which event fired, bind attributes to UI5 controls, and trigger navigation.
52-
53-
Every abap2UI5 app implements the `z2ui5_if_app` interface. It has a single method, `main`, with one parameter: `client` of type `z2ui5_if_client`:
54-
```abap
55-
INTERFACE z2ui5_if_app PUBLIC.
56-
METHODS main
57-
IMPORTING
58-
client TYPE REF TO z2ui5_if_client.
59-
ENDINTERFACE.
60-
```
61-
The `client` object is your only entry point into the framework. Use it to show views, handle events, share data, and navigate between apps.
62-
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).*
64-
6564
### Events
66-
67-
Let's extend the code with some event handling:
65+
Now add a button and react to its press event:
6866
```abap
6967
CLASS zcl_app_hello_world DEFINITION PUBLIC.
7068
PUBLIC SECTION.
@@ -76,24 +74,25 @@ CLASS zcl_app_hello_world IMPLEMENTATION.
7674
7775
IF client->check_on_init( ).
7876
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( ) ).
77+
DATA(view) = z2ui5_cl_xml_view=>factory(
78+
)->page( `abap2UI5 - Hello World`
79+
)->text( `My Text`
80+
)->button(
81+
text = `post`
82+
press = client->_event( `POST` ) ).
83+
client->view_display( view->stringify( ) ).
8484
8585
ELSEIF client->check_on_event( `POST` ).
8686
87-
client->message_box_display( `Hello World!` ).
87+
client->message_box_display( `Hello World!` ).
8888
8989
ENDIF.
9090
9191
ENDMETHOD.
9292
ENDCLASS.
9393
```
9494

95-
### Info
96-
The framework calls the `main` method on every roundtrip — on initialization and after every user interaction (button press, input submit, etc.):
95+
The framework calls `main` on every roundtrip — on initialization and after every user interaction (button press, input submit, etc.):
9796

9897
```text
9998
┌─────────┐ ┌──────────┐ ┌─────────┐
@@ -107,15 +106,15 @@ The framework calls the `main` method on every roundtrip — on initialization a
107106
└─────────┘ └──────────┘ └──────────┘
108107
```
109108

110-
To distinguish between lifecycle events, check for the following events:
109+
Use the lifecycle checks to tell these phases apart:
111110

112111
- `client->check_on_init( )` — first call when the app starts
113-
- `client->check_on_event( )` — user triggered an event (e.g., button press)
112+
- `client->check_on_event( )` — user triggered an event (e.g. a button press)
114113

115-
Each `check_*` method returns `abap_true` only for its specific phase, so is acts as a dispatcher:
114+
Each `check_*` method returns `abap_true` only for its own phase, so the `IF`/`ELSEIF` chain acts as a dispatcher.
116115

117116
### Data Flow
118-
Finally, add a public attribute to send data to the backend:
117+
Finally, add a public attribute and bind it to an input field to send data back to the server:
119118
```abap
120119
CLASS zcl_app_hello_world DEFINITION PUBLIC.
121120
PUBLIC SECTION.
@@ -126,24 +125,22 @@ ENDCLASS.
126125
CLASS zcl_app_hello_world IMPLEMENTATION.
127126
METHOD z2ui5_if_app~main.
128127
129-
CASE abap_true.
130-
131-
WHEN client->check_on_init( ).
128+
IF client->check_on_init( ).
132129
133-
DATA(view) = z2ui5_cl_xml_view=>factory(
134-
)->page( `abap2UI5 - Hello World`
135-
)->text( `My Text`
136-
)->button(
137-
text = `post`
138-
press = client->_event( `POST` )
139-
)->input( client->_bind_edit( name ) ).
140-
client->view_display( view->stringify( ) ).
130+
DATA(view) = z2ui5_cl_xml_view=>factory(
131+
)->page( `abap2UI5 - Hello World`
132+
)->text( `My Text`
133+
)->button(
134+
text = `post`
135+
press = client->_event( `POST` )
136+
)->input( client->_bind_edit( name ) ).
137+
client->view_display( view->stringify( ) ).
141138
142-
WHEN client->check_on_event( `POST` ).
139+
ELSEIF client->check_on_event( `POST` ).
143140
144-
client->message_box_display( |Your name is { name }.| ).
141+
client->message_box_display( |Your name is { name }.| ).
145142
146-
ENDCASE.
143+
ENDIF.
147144
148145
ENDMETHOD.
149146
ENDCLASS.
@@ -153,5 +150,3 @@ That's all you need. Set a breakpoint to watch the communication and data update
153150
### Jump into the Code
154151
Press `Ctrl+F12` in any running app to open the source code, view, and model side by side:
155152
![Source code viewer opened with Ctrl+F12 showing code, view, and model](/get_started/image-2.png)
156-
157-

0 commit comments

Comments
 (0)