Skip to content

Commit d4da829

Browse files
oblomov-devoblomov-dev
authored
Merge pull request #102 from abap2UI5/claude/inspiring-dijkstra-tzCPG
Simplify device info access and reorganize documentation
2 parents 28ae798 + c22a28d commit d4da829

4 files changed

Lines changed: 49 additions & 99 deletions

File tree

‎docs/cookbook/browser_interaction/focus.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,22 @@ outline: [2, 4]
33
---
44
# Focus
55

6+
Read which control currently holds the focus from the backend, or move the focus from the backend to a specific field — both work without any custom control.
7+
8+
#### Read the Current Focus
9+
10+
`client->get( )-s_focus` tells you which control currently holds the focus and where the caret sits inside it. Useful when an action depends on the field the user was just editing.
11+
12+
```abap
13+
DATA(focus) = client->get( )-s_focus.
14+
15+
DATA(id) = focus-id. " id of the focused control
16+
DATA(selection_start) = focus-selection_start. " caret start, in chars
17+
DATA(selection_end) = focus-selection_end. " caret end, in chars
18+
```
19+
20+
#### Set the Focus
21+
622
Set the input focus from the backend with the `set_focus` frontend event. Pass the target control's `id` as the first argument — the framework moves the cursor to that field after the next roundtrip.
723

824
This is useful for guided data entry, barcode scanning, or any flow where the next field to focus depends on backend logic.

‎docs/cookbook/browser_interaction/scrolling.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,27 @@ outline: [2, 4]
33
---
44
# Scrolling
55

6-
Scroll a control programmatically from the backend with two frontend events:
6+
Read the current scroll positions from the backend, or scroll a control programmatically from the backend with two frontend events:
77

88
- **`cs_event-scroll_to`** — scroll a container to a specific pixel position.
99
- **`cs_event-scroll_into_view`** — bring a control into the viewport, wherever the surrounding scroll container currently sits.
1010

1111
Useful for jump-to-top buttons, restoring positions after navigation, or revealing a row after a backend search.
1212

13+
#### Read the Scroll Position
14+
15+
`client->get( )-s_scroll` reports the scroll positions of the page and any open dialogs at the moment the event was fired. Each container exposes the id of the scrollable element and its `x` / `y` offsets in pixels.
16+
17+
```abap
18+
DATA(scroll) = client->get( )-s_scroll.
19+
20+
DATA(main_y) = scroll-main-y. " main page
21+
DATA(nest_y) = scroll-nest-y. " first nested view
22+
DATA(nest2_y) = scroll-nest2-y. " second nested view
23+
DATA(popup_y) = scroll-popup-y. " open popup
24+
DATA(popover_y) = scroll-popover-y. " open popover
25+
```
26+
1327
#### Scroll to a Position
1428

1529
Pass the control id and the vertical position. Optionally also a horizontal position and a scroll behavior (`auto`, `smooth`, or `instant`):

‎docs/cookbook/device_capabilities/info.md‎

Lines changed: 3 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,7 @@ abap2UI5 ships the current frontend state with every roundtrip. Read it from `cl
77

88
#### Device
99

10-
`client->get( )-s_device` describes the user's device and browser: operating system, browser name and version, screen orientation, current viewport size, and capability flags (touch, pointer, retina).
11-
12-
```abap
13-
DATA(device) = client->get( )-s_device.
14-
15-
DATA(system) = device-system. " e.g. `desktop`, `phone`, `tablet`
16-
DATA(orientation) = device-orientation. " `landscape` | `portrait`
17-
18-
DATA(browser) = device-browser-name. " e.g. `chrome`
19-
DATA(brw_version) = device-browser-version.
20-
21-
DATA(os) = device-os-name. " e.g. `win`, `mac`, `ios`, `android`
22-
DATA(os_version) = device-os-version.
23-
24-
DATA(width) = device-resize-width. " current viewport, in px
25-
DATA(height) = device-resize-height.
26-
27-
DATA(touch) = device-support-touch.
28-
DATA(pointer) = device-support-pointer.
29-
DATA(retina) = device-support-retina.
30-
```
31-
32-
::: tip **Bind Directly in the View**
33-
If you only need device information in the view (not in ABAP logic), bind to the built-in UI5 device model via `{device>/...}` instead — no backend roundtrip required. See [Device Model](../model/device_model.md).
34-
:::
10+
For reading device information via `client->get( )-s_device`, see [Device Model](../model/device_model.md).
3511

3612
#### UI5
3713

@@ -48,30 +24,8 @@ DATA(theme) = ui5-theme. " e.g. `sap_horizon`
4824

4925
#### Focus
5026

51-
`client->get( )-s_focus` tells you which control currently holds the focus and where the caret sits inside it. Useful when an action depends on the field the user was just editing.
52-
53-
```abap
54-
DATA(focus) = client->get( )-s_focus.
55-
56-
DATA(id) = focus-id. " id of the focused control
57-
DATA(selection_start) = focus-selection_start. " caret start, in chars
58-
DATA(selection_end) = focus-selection_end. " caret end, in chars
59-
```
60-
61-
To move the focus from the backend instead of reading it, see [Focus](../browser_interaction/focus.md).
27+
For reading the current focus via `client->get( )-s_focus`, see [Focus](../browser_interaction/focus.md).
6228

6329
#### Scroll
6430

65-
`client->get( )-s_scroll` reports the scroll positions of the page and any open dialogs at the moment the event was fired. Each container exposes the id of the scrollable element and its `x` / `y` offsets in pixels.
66-
67-
```abap
68-
DATA(scroll) = client->get( )-s_scroll.
69-
70-
DATA(main_y) = scroll-main-y. " main page
71-
DATA(nest_y) = scroll-nest-y. " first nested view
72-
DATA(nest2_y) = scroll-nest2-y. " second nested view
73-
DATA(popup_y) = scroll-popup-y. " open popup
74-
DATA(popover_y) = scroll-popover-y. " open popover
75-
```
76-
77-
To scroll from the backend, see [Scrolling](../browser_interaction/scrolling.md).
31+
For reading scroll positions via `client->get( )-s_scroll`, see [Scrolling](../browser_interaction/scrolling.md).

‎docs/cookbook/model/device_model.md‎

Lines changed: 15 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ outline: [2, 4]
33
---
44
# Device Model
55

6-
abap2UI5 offers two ways to access device information: directly in the view via the UI5 device model (frontend), or by collecting it into ABAP attributes via a custom control (backend).
6+
abap2UI5 offers two ways to access device information: directly in the view via the UI5 device model (frontend), or in ABAP logic via `client->get( )-s_device` (backend).
77

88
### Frontend
99

@@ -16,58 +16,24 @@ page->input(
1616
For all parameters, see the [UI5 docs](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device).
1717

1818
### Backend
19-
When you need device information in your ABAP logic (e.g., to adapt behavior based on the browser or screen size), use the `info_frontend` custom control. It collects the values on the frontend and returns them via two-way binding (`_bind_edit`). Once the `finished` event fires, all bound attributes are filled and available to ABAP:
20-
```abap
21-
CLASS z2ui5_cl_sample_device DEFINITION PUBLIC.
22-
23-
PUBLIC SECTION.
24-
INTERFACES z2ui5_if_app.
25-
26-
DATA ui5_version TYPE string.
27-
DATA ui5_theme TYPE string.
28-
DATA ui5_gav TYPE string.
29-
DATA device_systemtype TYPE string.
30-
DATA device_os TYPE string.
31-
DATA device_browser TYPE string.
32-
DATA check_initialized TYPE abap_bool.
33-
DATA device_phone TYPE abap_bool.
34-
DATA device_desktop TYPE abap_bool.
35-
DATA device_tablet TYPE abap_bool.
36-
DATA device_combi TYPE abap_bool.
37-
DATA device_height TYPE string.
38-
DATA device_width TYPE string.
19+
When you need device information in your ABAP logic (e.g., to adapt behavior based on the browser or screen size), read it from `client->get( )-s_device` — no custom control, no extra event needed. The value is shipped with every roundtrip:
3920

40-
ENDCLASS.
41-
42-
CLASS z2ui5_cl_sample_device IMPLEMENTATION.
43-
44-
METHOD z2ui5_if_app~main.
21+
```abap
22+
DATA(device) = client->get( )-s_device.
4523
46-
DATA(view) = z2ui5_cl_xml_view=>factory(
47-
)->page( )->_z2ui5(
48-
)->info_frontend(
49-
finished = client->_event( `POST` )
50-
device_browser = client->_bind_edit( device_browser )
51-
device_os = client->_bind_edit( device_os )
52-
device_systemtype = client->_bind_edit( device_systemtype )
53-
ui5_gav = client->_bind_edit( ui5_gav )
54-
ui5_theme = client->_bind_edit( ui5_theme )
55-
ui5_version = client->_bind_edit( ui5_version )
56-
device_phone = client->_bind_edit( device_phone )
57-
device_desktop = client->_bind_edit( device_desktop )
58-
device_tablet = client->_bind_edit( device_tablet )
59-
device_combi = client->_bind_edit( device_combi )
60-
device_height = client->_bind_edit( device_height )
61-
device_width = client->_bind_edit( device_width ) ).
24+
DATA(system) = device-system. " e.g. `desktop`, `phone`, `tablet`
25+
DATA(orientation) = device-orientation. " `landscape` | `portrait`
6226
63-
client->view_display( view->stringify( ) ).
27+
DATA(browser) = device-browser-name. " e.g. `chrome`
28+
DATA(brw_version) = device-browser-version.
6429
65-
IF client->get( )-event = `POST`.
66-
"process device info here...
67-
ENDIF.
30+
DATA(os) = device-os-name. " e.g. `win`, `mac`, `ios`, `android`
31+
DATA(os_version) = device-os-version.
6832
69-
ENDMETHOD.
33+
DATA(width) = device-resize-width. " current viewport, in px
34+
DATA(height) = device-resize-height.
7035
71-
ENDCLASS.
36+
DATA(touch) = device-support-touch.
37+
DATA(pointer) = device-support-pointer.
38+
DATA(retina) = device-support-retina.
7239
```
73-
For a complete example, see `Z2UI5_CL_DEMO_APP_122`.

0 commit comments

Comments
 (0)