From fac27668ac535b365228eb938b25fd787afb4645 Mon Sep 17 00:00:00 2001 From: oblomov-dev <102328295+oblomov-dev@users.noreply.github.com> Date: Sun, 8 Dec 2024 15:43:59 +0000 Subject: [PATCH 1/2] update --- docs/.vitepress/config.mjs | 8 +- .../development/{specific => model}/device.md | 16 +- docs/development/{ => model}/model.md | 0 docs/development/{specific => model}/odata.md | 11 +- docs/development/model/tables.md | 156 ++++++++++++++++++ docs/development/tables.md | 9 - 6 files changed, 180 insertions(+), 20 deletions(-) rename docs/development/{specific => model}/device.md (72%) rename docs/development/{ => model}/model.md (100%) rename docs/development/{specific => model}/odata.md (96%) create mode 100644 docs/development/model/tables.md delete mode 100644 docs/development/tables.md diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 10108dd..6e06d60 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -96,10 +96,10 @@ export default defineConfig({ items: [ { text: 'General', link: '/development/general' }, { text: 'View', link: '/development/view' }, - { text: 'Model', link: '/development/model', collapsed: true , items:[ - // { text: 'Tables, Trees', link: '/development/tables' }, - { text: 'OData', link: '/development/specific/odata' }, - // { text: 'Device Model', link: '/development/specific/device' }, + { text: 'Model', link: '/development/model/model', collapsed: true , items:[ + { text: 'Tables, Trees', link: '/development/model/tables' }, + { text: 'OData', link: '/development/model/odata' }, + { text: 'Device Model', link: '/development/model/device' }, ]}, { text: 'Events', link: '/development/events' }, { text: 'Navigation', link: '/development/navigation' }, diff --git a/docs/development/specific/device.md b/docs/development/model/device.md similarity index 72% rename from docs/development/specific/device.md rename to docs/development/model/device.md index 2349748..9340b07 100644 --- a/docs/development/specific/device.md +++ b/docs/development/model/device.md @@ -1,9 +1,18 @@ +--- +outline: [2, 4] +--- # Device Model +### Frontend +The device model is bound to the view by default with the name `device`. You can access it easily in your view. For example: +```abap +page->input( description = `device model - resize - width` value = `{device>/resize/width}` enabled = abap_false ). +``` +Explore all available parameters in the [UI5 Documentation.](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device) -#### Device Information -This example demonstrates how to retrieve detailed device information such as UI5 version, device type, OS, browser, and screen dimensions. Also see `z2ui5_cl_demo_app_122`. +### Backend +You can also retrieve detailed device information on the backend using a custom info frontend control. This allows you to access UI5 version, device type, OS, browser details, and screen dimensions. Below is an example implementation, which demonstrates how to collect and use this information: ```abap CLASS z2ui5_cl_sample_device DEFINITION PUBLIC CREATE PUBLIC. @@ -56,4 +65,5 @@ CLASS z2ui5_cl_sample_device IMPLEMENTATION. ENDMETHOD. ENDCLASS. -``` \ No newline at end of file +``` +For a working example, refer to `z2ui5_cl_demo_app_122`. \ No newline at end of file diff --git a/docs/development/model.md b/docs/development/model/model.md similarity index 100% rename from docs/development/model.md rename to docs/development/model/model.md diff --git a/docs/development/specific/odata.md b/docs/development/model/odata.md similarity index 96% rename from docs/development/specific/odata.md rename to docs/development/model/odata.md index aabb4c9..77fab0a 100644 --- a/docs/development/specific/odata.md +++ b/docs/development/model/odata.md @@ -1,8 +1,11 @@ +--- +outline: [2, 4] +--- # OData By default, you can bind all public attributes of your implementation class to UI5 properties, enabling the display of internal tables and, with bind_edit, even updating data. Additionally, in scenarios where direct access to database tables is required, using pre-defined OData services can be beneficial. Leveraging OData protocols provides features such as pagination and growing, which enhance performance when handling large datasets. -### Define Second Model +#### Define Second Model As an example, we will use the test OData service `/sap/opu/odata/DMO/API_TRAVEL_U_V2/`, which is available in most ABAP systems. Ensure the service is publicly accessible. Use the following method to define the model and make it available under the name `TRAVEL`: ```abap client->follow_up_action( client->_event_client( @@ -11,7 +14,7 @@ client->follow_up_action( client->_event_client( ( `/sap/opu/odata/DMO/UI_FLIGHT_R_V2/` ) ( `FLIGHT` ) ) ) ). ``` -### Bind Data +#### Bind Data Next, bind this OData model to your view definition. Since we’re using a non-default model, we must explicitly specify the model name for each binding. Here's an example: ```abap DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table( @@ -32,7 +35,7 @@ tab->items( )->column_list_item( )->cells( ``` By using the growing property we can make use of the feature that not all data is loaded at once, leveraging performance. -### Full Example +#### Full Example Here’s the complete source code: ```abap METHOD z2ui5_if_app~main. @@ -62,7 +65,7 @@ METHOD z2ui5_if_app~main. ENDMETHOD. ``` -### Multiple OData Models +#### Multiple OData Models You can also bind multiple OData models simultaneously. Here’s an example: ```abap DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table( diff --git a/docs/development/model/tables.md b/docs/development/model/tables.md new file mode 100644 index 0000000..544168d --- /dev/null +++ b/docs/development/model/tables.md @@ -0,0 +1,156 @@ +# Tables, Trees +In this section, we will explore how to bind deep data models, such as tables and trees. + +### Tables +The example below demonstrates how to bind a simple table to a UI5 control: +```abap +CLASS z2ui5_cl_sample_tab DEFINITION PUBLIC. + + PUBLIC SECTION. + INTERFACES z2ui5_if_app. + + TYPES: + BEGIN OF ty_row, + count TYPE i, + value TYPE string, + descr TYPE string, + END OF ty_row. + DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY. + +ENDCLASS. + +CLASS z2ui5_cl_sample_tab IMPLEMENTATION. + METHOD z2ui5_if_app~main. + + DO 100 TIMES. + DATA ls_row TYPE ty_row. + ls_row-count = sy-index. + ls_row-value = 'red'. + ls_row-descr = 'this is a description'. + INSERT ls_row INTO TABLE t_tab. + ENDDO. + + DATA(view) = z2ui5_cl_xml_view=>factory( )->page( )->table( + items = client->_bind( t_tab ) ). + + tab->columns( + )->column( )->text( 'Color' )->get_parent( + )->column( )->text( 'Info' )->get_parent( + )->column( )->text( 'Description' ). + tab->items( )->column_list_item( )->cells( + )->text( '{VALUE}' + )->text( '{INFO}' + )->text( '{DESCR}' ). + + client->view_display( view->stringify( ) ). + + ENDMETHOD. +ENDCLASS. + +``` + +### Editable +Making a table editable is a simple change. You just need to switch the binding mode to `bind_edit` : +```abap + METHOD z2ui5_if_app~main. + + DO 100 TIMES. + DATA ls_row TYPE ty_row. + ls_row-count = sy-index. + ls_row-value = 'red'. + ls_row-descr = 'this is a description'. + INSERT ls_row INTO TABLE t_tab. + ENDDO. + + DATA(view) = z2ui5_cl_xml_view=>factory( )->page( )->table( + items = client->_bind_edit( t_tab ) ). + + tab->columns( + )->column( )->text( 'Color' )->get_parent( + )->column( )->text( 'Info' )->get_parent( + )->column( )->text( 'Description' ). + tab->items( )->column_list_item( )->cells( + )->text( '{VALUE}' + )->text( '{INFO}' + )->text( '{DESCR}' ). + + client->view_display( view->stringify( ) ). + + ENDMETHOD. +``` + +### Tree +To work with trees, you need to use nested structures. Here is an example: +```abap +CLASS z2ui5_cl_sample_tree DEFINITION + PUBLIC + FINAL + CREATE PUBLIC . + + PUBLIC SECTION. + INTERFACES z2ui5_if_app. + + TYPES: + BEGIN OF ty_prodh_node_level3, + is_selected TYPE abap_bool, + text TYPE string, + prodh TYPE string, + END OF ty_prodh_node_level3, + BEGIN OF ty_prodh_node_level2, + is_selected TYPE abap_bool, + text TYPE string, + prodh TYPE string, + nodes TYPE STANDARD TABLE OF ty_prodh_node_level3 WITH DEFAULT KEY, + END OF ty_prodh_node_level2, + BEGIN OF ty_prodh_node_level1, + is_selected TYPE abap_bool, + text TYPE string, + prodh TYPE string, + nodes TYPE STANDARD TABLE OF ty_prodh_node_level2 WITH DEFAULT KEY, + END OF ty_prodh_node_level1, + ty_prodh_nodes TYPE STANDARD TABLE OF ty_prodh_node_level1 WITH DEFAULT KEY. + + DATA prodh_nodes TYPE ty_prodh_nodes. + +ENDCLASS. + +CLASS z2ui5_cl_sample_tree IMPLEMENTATION. + METHOD z2ui5_if_app~main. + + prodh_nodes = + VALUE #( ( text = 'Machines' + prodh = '00100' + nodes = VALUE #( ( text = 'Pumps' + prodh = '0010000100' + nodes = VALUE #( ( text = 'Pump 001' + prodh = '001000010000000100' ) + ( text = 'Pump 002' + prodh = '001000010000000105' ) + ) + ) ) + ) + ( text = 'Paints' + prodh = '00110' + nodes = VALUE #( ( text = 'Gloss paints' + prodh = '0011000105' + nodes = VALUE #( ( text = 'Paint 001' + prodh = '001100010500000100' ) + ( text = 'Paint 002' + prodh = '001100010500000105' ) + ) + ) ) + ) ). + + DATA(page) = z2ui5_cl_xml_view=>factory( )->page( ). + + page->tree( items = client->_bind_edit( prodh_nodes ) + )->items( + )->standard_tree_item( selected = '{IS_SELECTED}' + title = '{TEXT}' ). + + client->view_display( page->button( text = 'Open Popup here...' + press = client->_event( 'POPUP_TREE' ) )->stringify( ) ). + + ENDMETHOD. +ENDCLASS. +``` diff --git a/docs/development/tables.md b/docs/development/tables.md deleted file mode 100644 index f529b0d..0000000 --- a/docs/development/tables.md +++ /dev/null @@ -1,9 +0,0 @@ -# Tables, Trees - -### List - -### Table - -### Editable - -### Tree \ No newline at end of file From e1d6e2389a8600799bae3bfadc9ac2e612db1d97 Mon Sep 17 00:00:00 2001 From: oblomov-dev <102328295+oblomov-dev@users.noreply.github.com> Date: Sun, 8 Dec 2024 15:46:20 +0000 Subject: [PATCH 2/2] update --- docs/development/model/device.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/development/model/device.md b/docs/development/model/device.md index 9340b07..94ea2c2 100644 --- a/docs/development/model/device.md +++ b/docs/development/model/device.md @@ -7,7 +7,9 @@ outline: [2, 4] The device model is bound to the view by default with the name `device`. You can access it easily in your view. For example: ```abap -page->input( description = `device model - resize - width` value = `{device>/resize/width}` enabled = abap_false ). +page->input( + description = `device model - resize - width` + value = `{device>/resize/width}` ). ``` Explore all available parameters in the [UI5 Documentation.](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device) @@ -59,7 +61,7 @@ CLASS z2ui5_cl_sample_device IMPLEMENTATION. client->view_display( lo_view->stringify( ) ). IF client->get( )-event = 'POST'. - client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ). + "process device info here... ENDIF. ENDMETHOD.