Merge pull request #21 from abap2UI5/tree

Tree

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' },

docs/development/specific/device.md → docs/development/model/device.md

@@ -1,9 +1,20 @@
+---
+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}`  ).
+```
+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.
 
@@ -50,10 +61,11 @@ 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.
 
 ENDCLASS.
-```
+```
+For a working example, refer to `z2ui5_cl_demo_app_122`.

docs/development/specific/odata.md → 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(

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.
+```