Skip to content

Commit e79682a

Browse files
committed
Add missing explanations for key concepts across documentation
- hello_world.md: show z2ui5_if_app interface definition, explain client object, document roundtrip lifecycle, and explain CASE abap_true dispatcher pattern - model.md: explain path = abap_true parameter for _bind/_bind_edit - events.md: document $source vs $parameters vs $event prefixes with descriptions, explain difference between _event (backend) and _event_client (frontend) - expression_binding.md: explain {= ... } syntax and JavaScript operators (===) - view.md: explain what stringify() does (XML serialization) - performance.md: add code example for view_model_update vs view_display, fix incorrect method names in suggestions (model_update → view_model_update) https://claude.ai/code/session_01AaA4EMw83KMzGP6kaDZPJU
1 parent d4cc581 commit e79682a

6 files changed

Lines changed: 77 additions & 7 deletions

File tree

docs/configuration/performance.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,38 @@ Frontend logic is kept to a minimum: no business logic runs in the browser. Ever
1010

1111
abap2UI5 has been successfully tested with tables containing large numbers of entries and columns. So, you can confidently develop your app — performance shouldn't be a concern.
1212

13+
### view_display vs view_model_update
14+
15+
The most impactful optimization is choosing the right update method:
16+
17+
- **`client->view_display( )`** — sends a new XML view and model to the frontend. UI5 destroys the current view and creates a new one from scratch. Use this only on initialization or when the view structure changes.
18+
- **`client->view_model_update( )`** — sends only updated model data. UI5 refreshes the existing view via data binding — only the changed controls are re-rendered. This preserves UI state (scroll position, focus, etc.) and is significantly faster.
19+
20+
```abap
21+
METHOD z2ui5_if_app~main.
22+
23+
CASE abap_true.
24+
25+
WHEN client->check_on_init( ).
26+
DATA(view) = z2ui5_cl_xml_view=>factory(
27+
)->page( `My App`
28+
)->text( client->_bind( mv_text )
29+
)->button( text = `update` press = client->_event( `UPDATE` ) ).
30+
client->view_display( view->stringify( ) ).
31+
32+
WHEN client->check_on_event( `UPDATE` ).
33+
mv_text = `new value`.
34+
client->view_model_update( ).
35+
36+
ENDCASE.
37+
38+
ENDMETHOD.
39+
```
40+
1341
### Suggestions
1442
Want to optimize your app even more? Here are a few tips:
15-
* Only call the `client->view_display` method when necessary. Instead, prefer using `client->model_update` so the UI5 framework only re-renders the controls that have actually changed
16-
* Prefer using `client->bind` and use `client->bind_edit` only when users need to make changes that are processed in the backend. Otherwise, it leads to unnecessary data transfers
43+
* Only call `client->view_display` when necessary. Prefer `client->view_model_update` so the UI5 framework only re-renders controls that have actually changed
44+
* Prefer `client->_bind` and use `client->_bind_edit` only when users need to make changes that are processed in the backend. Otherwise, it leads to unnecessary data transfers
1745
* Declare public attributes in your app class only for variables displayed in the frontend. This helps prevent the framework from accessing unused values
1846
* Follow standard ABAP best practices, such as reducing loops and using sorted tables, as you would in any other ABAP development project
1947

docs/development/events.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ METHOD z2ui5_if_app~main.
2727
2828
ENDMETHOD.
2929
```
30-
If the backend needs additional information about the specific event, use parameters like `$event`, `$source`, and `$params` to send further details. Use the t_arg parameter to include these details. Check out [this documentation](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
30+
If the backend needs additional information about the specific event, use the `t_arg` parameter to include additional details. Three special prefixes are available:
31+
32+
- **`$source`** — the UI5 control that triggered the event (e.g. `${$source>/text}` returns the button text)
33+
- **`$parameters`** — the event parameters as defined by the UI5 control (e.g. `${$parameters>/id}` returns the element ID)
34+
- **`$event`** — the UI5 event object itself (e.g. `$event>sId` returns the event type like `press`)
35+
36+
Check out [this documentation](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
3137

3238
#### Source
3339
Send properties of the event source control to the backend:
@@ -127,7 +133,14 @@ This is just a demonstration. In this case, it would be easier to access `name`
127133
:::
128134

129135
### Frontend
130-
If you don't want to process the event in the backend, you can also directly trigger actions at the frontend. The following frontend events are available:
136+
If you don't want to process the event in the backend, you can directly trigger actions at the frontend using `client->_event_client`. The difference between the two methods:
137+
138+
- **`client->_event( )`** — triggers a backend roundtrip, the event is processed in the `main` method
139+
- **`client->_event_client( )`** — executes an action directly in the browser, no backend call
140+
141+
To use a frontend event on a UI5 control property (like `press`), wrap `_event_client` inside `_event`. To execute a frontend event after backend processing, pass `_event_client` to `client->follow_up_action`.
142+
143+
The following frontend events are available:
131144
```abap
132145
CONSTANTS:
133146
BEGIN OF cs_event,

docs/development/model/expression_binding.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Expression Binding lets you compute values directly in XML views using JavaScript-like expressions. This is especially useful in abap2UI5, as it can reduce server roundtrips by moving calculations, logical conditions, and string operations to the frontend.
44

5+
The syntax `{= ... }` marks a UI5 expression binding. Inside the expression, you can use JavaScript operators (like `===` for strict equality or `Math.max`) and reference model properties with `$` followed by a binding path. Note: `===` is the JavaScript strict equality operator (not an ABAP operator) — it is required because UI5 evaluates these expressions in the browser.
6+
57
#### Calculate the Maximum Value at the Frontend
68

79
```abap

docs/development/model/model.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,13 @@ ENDCLASS.
6666
::: tip **Data in Public Attributes**
6767
When using One-Way or Two-Way binding, ensure your data is stored in the public attributes of your class. This allows the framework to access it from outside. This is similar to the PBO/PAI logic, where data had to be stored in global variables.
6868
:::
69+
70+
#### Path Parameter
71+
Both `_bind` and `_bind_edit` accept an optional parameter `path = abap_true`. By default, these methods return the full binding expression (e.g. `{/XX/NAME}`). With `path = abap_true`, only the raw model path is returned (e.g. `/XX/NAME`), which is useful when you need to embed it in complex binding expressions like UI5 types or expression binding:
72+
```abap
73+
"default - returns full binding expression: {/XX/QUANTITY}
74+
client->_bind( quantity )
75+
76+
"with path - returns only the model path: /XX/QUANTITY
77+
client->_bind( val = quantity path = abap_true )
78+
```

docs/development/view.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ In abap2UI5, the UI is rendered from a UI5 XML view that you build in your ABAP
2020
2121
ENDMETHOD.
2222
```
23-
You can use any UI5 control available in the [UI5 SDK](https://sapui5.hana.ondemand.com). However, writing raw XML quickly gets cumbersome. A more practical approach is to use the `Z2UI5_CL_XML_VIEW` helper class, which provides a fluent API for building views:
23+
You can use any UI5 control available in the [UI5 SDK](https://sapui5.hana.ondemand.com). However, writing raw XML quickly gets cumbersome. A more practical approach is to use the `Z2UI5_CL_XML_VIEW` helper class, which provides a fluent API for building views. The `stringify( )` method at the end serializes the view tree into an XML string that the framework sends to the frontend:
2424

2525
```abap
2626
METHOD z2ui5_if_app~main.

docs/get_started/hello_world.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,19 @@ outline: [2, 4]
33
---
44
# Hello World
55

6+
### The Interface
7+
Every abap2UI5 app implements the `Z2UI5_IF_APP` interface. It has a single method `main` with one parameter — `client` of type `Z2UI5_IF_CLIENT`:
8+
```abap
9+
INTERFACE z2ui5_if_app PUBLIC.
10+
METHODS main
11+
IMPORTING
12+
client TYPE REF TO z2ui5_if_client.
13+
ENDINTERFACE.
14+
```
15+
The `client` object is your only access point to the framework. Use it to display views, handle events, exchange data, and navigate between apps.
16+
617
### Basic Example
7-
Every abap2UI5 app implements the `Z2UI5_IF_APP` interface. Create a new class with the following code:
18+
Create a new class with the following code:
819
```abap
920
CLASS zcl_app_hello_world DEFINITION PUBLIC.
1021
@@ -44,7 +55,13 @@ ENDCLASS.
4455
```
4556

4657
### Event Handler
47-
Next, we extend the app with a button and an event handler. To ensure that the view is only rendered at the start, we also check for the `on_init` event:
58+
The `main` method is called on every roundtrip — that is, on initialization and after every user interaction (button press, input submit, etc.). To control what happens when, use `CASE abap_true` to distinguish between lifecycle events:
59+
60+
- `client->check_on_init( )` — first call when the app starts
61+
- `client->check_on_event( )` — user triggered an event (e.g. button press)
62+
- `client->check_on_navigated( )` — returned from another app via navigation
63+
64+
This pattern works because each `check_*` method returns `abap_true` only for its specific phase, making `CASE abap_true` act as a dispatcher:
4865
```abap
4966
CLASS zcl_app_hello_world DEFINITION PUBLIC.
5067
PUBLIC SECTION.

0 commit comments

Comments
 (0)