diff --git a/src/00/z2ui5_cl_sample_app_g01.clas.abap b/src/00/z2ui5_cl_sample_app_g01.clas.abap index f1327861..4ee76127 100644 --- a/src/00/z2ui5_cl_sample_app_g01.clas.abap +++ b/src/00/z2ui5_cl_sample_app_g01.clas.abap @@ -275,7 +275,6 @@ CLASS z2ui5_cl_sample_app_g01 IMPLEMENTATION. ( group = `only with javascript and css and html` header = `Messages with Styles I` sub = `` app = `z2ui5_cl_demo_app_310` ) ( group = `only with javascript and css and html` header = `Messages with Styles II` sub = `` app = `z2ui5_cl_demo_app_311` ) ( group = `only with javascript and css and html` header = `PDF Viewer` sub = `Display PDFs via iframe` app = `z2ui5_cl_demo_app_079` ) - ( group = `only with javascript and css and html` header = `tab` sub = `focus edit controls` app = `z2ui5_cl_demo_app_346` ) ( group = `only with javascript and css and html` header = `Tile` sub = `KPI Tile` app = `z2ui5_cl_demo_app_277` ) ( group = `only with javascript and css and html` header = `tree` sub = `drag & drop` app = `z2ui5_cl_demo_app_317` ) ( group = `only with javascript and css and html` header = `tree` sub = `popup select - state` app = `z2ui5_cl_demo_app_178` ) diff --git a/src/01/02/z2ui5_cl_demo_app_346.clas.abap b/src/01/02/z2ui5_cl_demo_app_346.clas.abap new file mode 100644 index 00000000..8d0009a6 --- /dev/null +++ b/src/01/02/z2ui5_cl_demo_app_346.clas.abap @@ -0,0 +1,254 @@ +CLASS z2ui5_cl_demo_app_346 DEFINITION PUBLIC. + + PUBLIC SECTION. + INTERFACES z2ui5_if_app. + + TYPES: + BEGIN OF ty_s_row, + index TYPE i, + title TYPE string, + value TYPE string, + info TYPE string, + checkbox TYPE abap_bool, + description TYPE string, + END OF ty_s_row. + DATA t_tab TYPE STANDARD TABLE OF ty_s_row WITH EMPTY KEY. + + DATA focuscolumn TYPE string. + DATA focusrow TYPE string. + DATA focusid TYPE string READ-ONLY. + + PROTECTED SECTION. + CONSTANTS: + BEGIN OF cs_column, + title TYPE string VALUE `Title`, + color TYPE string VALUE `Color`, + info TYPE string VALUE `Info`, + checkbox TYPE string VALUE `Checkbox`, + description TYPE string VALUE `Description`, + END OF cs_column. + + DATA client TYPE REF TO z2ui5_if_client. + + METHODS on_init. + METHODS on_event. + METHODS view_display. + METHODS focus. + METHODS read_focus. + METHODS next_focus. + METHODS default_focus. + + PRIVATE SECTION. +ENDCLASS. + + +CLASS z2ui5_cl_demo_app_346 IMPLEMENTATION. + + METHOD z2ui5_if_app~main. + + me->client = client. + + IF client->check_on_init( ). + on_init( ). + ELSEIF client->check_on_navigated( ). + view_display( ). + ELSEIF client->check_on_event( ). + on_event( ). + ENDIF. + + ENDMETHOD. + + + METHOD on_init. + + t_tab = VALUE #( + ( index = 0 title = `entry 01` value = `red` info = `completed` description = `this is a description` checkbox = abap_true ) + ( index = 1 title = `entry 02` value = `blue` info = `completed` description = `this is a description` checkbox = abap_true ) + ( index = 2 title = `entry 03` value = `green` info = `completed` description = `this is a description` checkbox = abap_true ) + ( index = 3 title = `entry 04` value = `orange` info = `completed` description = `` checkbox = abap_true ) + ( index = 4 title = `entry 05` value = `grey` info = `completed` description = `this is a description` checkbox = abap_true ) + ( index = 5 ) ). + + default_focus( ). + view_display( ). + focus( ). + + ENDMETHOD. + + + METHOD on_event. + + CASE client->get( )-event. + WHEN `FOCUS`. + focus( ). + WHEN `NEXT`. + read_focus( ). + next_focus( ). + focus( ). + WHEN `RESET`. + default_focus( ). + focus( ). + ENDCASE. + + client->view_model_update( ). + + ENDMETHOD. + + + METHOD view_display. + + DATA(view) = z2ui5_cl_xml_view=>factory( ). + + DATA(page) = view->shell( + )->page( + title = `abap2UI5 - Focus a Table Cell` + navbuttonpress = client->_event_nav_app_leave( ) + shownavbutton = client->check_app_prev_stack( ) ). + + page->message_strip( + text = `Set the keyboard focus to any editable table cell from the backend - type a column id ` && + `(Title, Color, Info, Checkbox or Description) and a row index, then press Set Focus, or ` && + `use Next / Reset. No JavaScript is shipped with the view: every cell has a stable control ` && + `id (_) that the set_focus follow-up action targets, and the framework reports ` && + `the currently focused cell back to the backend in s_focus.` + type = `Information` + showicon = abap_true + class = `sapUiSmallMargin` ). + + DATA(tab) = page->table( + )->header_toolbar( + )->overflow_toolbar( + )->title( client->_bind( focusid ) + )->toolbar_spacer( + )->label( `Column Id` + )->input( + value = client->_bind_edit( focuscolumn ) + submit = client->_event( `FOCUS` ) + placeholder = `Column` + width = `8rem` + )->label( `Row Index` + )->input( + value = client->_bind_edit( focusrow ) + submit = client->_event( `FOCUS` ) + placeholder = `Row` + type = `Number` + width = `6rem` + )->button( + text = `Set Focus` + press = client->_event( `FOCUS` ) + )->button( + text = `Next Focus` + press = client->_event( `NEXT` ) + )->button( + text = `Reset Focus` + press = client->_event( `RESET` ) + )->get_parent( )->get_parent( ). + + tab->columns( + )->column( )->text( `Index` )->get_parent( + )->column( )->text( `Title` )->get_parent( + )->column( )->text( `Color` )->get_parent( + )->column( )->text( `Info` )->get_parent( + )->column( )->text( `Checkbox` )->get_parent( + )->column( )->text( `Description` ). + + " Build the rows explicitly (no aggregation binding): only then does every + " cell keep the stable control id _ that set_focus can target. + " A bound template would clone the cells under randomly generated ids. + DATA(path) = client->_bind_edit( val = t_tab path = abap_true ). + DATA(items) = tab->items( ). + + LOOP AT t_tab REFERENCE INTO DATA(row). + + DATA(i) = sy-tabix - 1. + + items->column_list_item( + )->cells( + )->text( |{ row->index }| + )->input( + id = |{ cs_column-title }_{ i }| + value = |\{{ path }/{ i }/TITLE\}| + submit = client->_event( `NEXT` ) + )->input( + id = |{ cs_column-color }_{ i }| + value = |\{{ path }/{ i }/VALUE\}| + submit = client->_event( `NEXT` ) + )->input( + id = |{ cs_column-info }_{ i }| + value = |\{{ path }/{ i }/INFO\}| + submit = client->_event( `NEXT` ) + )->checkbox( + id = |{ cs_column-checkbox }_{ i }| + selected = |\{{ path }/{ i }/CHECKBOX\}| + )->input( + id = |{ cs_column-description }_{ i }| + value = |\{{ path }/{ i }/DESCRIPTION\}| + submit = client->_event( `NEXT` ) ). + + ENDLOOP. + + client->view_display( view->stringify( ) ). + + ENDMETHOD. + + + METHOD focus. + + focusid = |{ focuscolumn }_{ focusrow }|. + + client->follow_up_action( + val = z2ui5_if_client=>cs_event-set_focus + t_arg = VALUE #( ( focusid ) ) ). + + ENDMETHOD. + + + METHOD read_focus. + + SPLIT client->get( )-s_focus-id AT `_` INTO DATA(col) DATA(row). + + IF row IS NOT INITIAL + AND row CO `0123456789` + AND ( col = cs_column-title + OR col = cs_column-color + OR col = cs_column-info + OR col = cs_column-checkbox + OR col = cs_column-description ). + + focuscolumn = col. + focusrow = row. + ENDIF. + + ENDMETHOD. + + + METHOD next_focus. + + focuscolumn = SWITCH #( focuscolumn + WHEN cs_column-title THEN cs_column-color + WHEN cs_column-color THEN cs_column-info + WHEN cs_column-info THEN cs_column-checkbox + WHEN cs_column-checkbox THEN cs_column-description + ELSE cs_column-title ). + + IF focuscolumn = cs_column-title. + + DATA(nextrow) = CONV i( focusrow ) + 1. + IF line_exists( t_tab[ nextrow + 1 ] ). + focusrow = |{ nextrow }|. + ELSE. + focusrow = `0`. + ENDIF. + ENDIF. + + ENDMETHOD. + + + METHOD default_focus. + + focuscolumn = cs_column-title. + focusrow = `0`. + + ENDMETHOD. + +ENDCLASS. diff --git a/src/01/02/z2ui5_cl_demo_app_346.clas.xml b/src/01/02/z2ui5_cl_demo_app_346.clas.xml new file mode 100644 index 00000000..0fe89bc6 --- /dev/null +++ b/src/01/02/z2ui5_cl_demo_app_346.clas.xml @@ -0,0 +1,16 @@ + + + + + + Z2UI5_CL_DEMO_APP_346 + E + Focus - Set Focus in a Table Cell (A) + 1 + X + X + X + + + + diff --git a/src/01/z2ui5_cl_demo_app_g00.clas.abap b/src/01/z2ui5_cl_demo_app_g00.clas.abap index 69b4c274..a53091a1 100644 --- a/src/01/z2ui5_cl_demo_app_g00.clas.abap +++ b/src/01/z2ui5_cl_demo_app_g00.clas.abap @@ -218,6 +218,7 @@ CLASS z2ui5_cl_demo_app_g00 IMPLEMENTATION. ( group = `Basic I` header = `Event` sub = `Handle events & change the view` app = `z2ui5_cl_demo_app_004` ) ( group = `Basic I` header = `Formatter` sub = `Date Object for DatePicker` app = `z2ui5_cl_demo_app_457` ) ( group = `Basic I` header = `Formatter` sub = `Date Objects for PlanningCalendar` app = `z2ui5_cl_demo_app_456` ) + ( group = `Basic I` header = `Formatter` sub = `Inline Icons` app = `z2ui5_cl_demo_app_466` ) ( group = `Basic I` header = `Formatter` sub = `Simple` app = `z2ui5_cl_demo_app_453` ) ( group = `Basic I` header = `Formatter` sub = `Use via core:require` app = `z2ui5_cl_demo_app_450` ) ( group = `Basic I` header = `Message` sub = `Backend Processing` app = `z2ui5_cl_demo_app_008` ) @@ -250,6 +251,7 @@ CLASS z2ui5_cl_demo_app_g00 IMPLEMENTATION. ( group = `Basic II` header = `Browser` sub = `Open Telephon, Email usw (A)` app = `z2ui5_cl_demo_app_316` ) ( group = `Basic II` header = `Browser` sub = `Title (A)` app = `z2ui5_cl_demo_app_125` ) ( group = `Basic II` header = `Focus` sub = `Jump with the focus (A)` app = `z2ui5_cl_demo_app_189` ) + ( group = `Basic II` header = `Focus` sub = `Set Focus in a Table Cell (A)` app = `z2ui5_cl_demo_app_346` ) ( group = `Basic II` header = `Focus` sub = `Set Focus in Textfield (A)` app = `z2ui5_cl_demo_app_133` ) ( group = `Basic II` header = `Input` sub = `Clipboard (A)` app = `z2ui5_cl_demo_app_325` ) ( group = `Basic II` header = `Input` sub = `Hide/show Soft Keyboard (A)` app = `z2ui5_cl_demo_app_352` ) @@ -261,7 +263,6 @@ CLASS z2ui5_cl_demo_app_g00 IMPLEMENTATION. ( group = `Basic II` header = `More` sub = `File Uploader (C)` app = `z2ui5_cl_demo_app_074` ) ( group = `Basic II` header = `More` sub = `Geoloaction (C)` app = `z2ui5_cl_demo_app_120` ) ( group = `Basic II` header = `More` sub = `Message Manager (C)` app = `z2ui5_cl_demo_app_467` ) - ( group = `Basic II` header = `More` sub = `MessageStrip Inline Icons` app = `z2ui5_cl_demo_app_466` ) ( group = `Basic II` header = `More` sub = `Multi Input (C)` app = `z2ui5_cl_demo_app_078` ) ( group = `Basic II` header = `More` sub = `Panel, setExpanded (A)` app = `z2ui5_cl_demo_app_448` ) ( group = `Basic II` header = `More` sub = `PDF Viewer Display (A)` app = `z2ui5_cl_demo_app_449` )