From 21a46738c8169a8f6b26f07d2c93e847a8b3f128 Mon Sep 17 00:00:00 2001 From: Francisco Milan Date: Tue, 30 Jul 2024 16:00:30 +0000 Subject: [PATCH 1/3] New Sample: OverflowToolbar - Alignment (1) --- src/z2ui5_cl_demo_app_000.clas.abap | 10 +- src/z2ui5_cl_demo_app_250.clas.abap | 150 ++++++++++++++++++++++++++++ src/z2ui5_cl_demo_app_250.clas.xml | 16 +++ 3 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 src/z2ui5_cl_demo_app_250.clas.abap create mode 100644 src/z2ui5_cl_demo_app_250.clas.xml diff --git a/src/z2ui5_cl_demo_app_000.clas.abap b/src/z2ui5_cl_demo_app_000.clas.abap index 805ff8cb..eb11091a 100644 --- a/src/z2ui5_cl_demo_app_000.clas.abap +++ b/src/z2ui5_cl_demo_app_000.clas.abap @@ -28,7 +28,7 @@ ENDCLASS. -CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION. +CLASS Z2UI5_CL_DEMO_APP_000 IMPLEMENTATION. METHOD z2ui5_if_app~main. @@ -973,6 +973,14 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION. class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom' ). + panel->generic_tile( + header = 'OverflowToolbar' + subheader = 'Alignment' + press = client->_event( 'Z2UI5_CL_DEMO_APP_250' ) + mode = 'LineMode' + class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom' + ). + panel = page->panel( expandable = abap_false expanded = abap_true diff --git a/src/z2ui5_cl_demo_app_250.clas.abap b/src/z2ui5_cl_demo_app_250.clas.abap new file mode 100644 index 00000000..7994131b --- /dev/null +++ b/src/z2ui5_cl_demo_app_250.clas.abap @@ -0,0 +1,150 @@ +class Z2UI5_CL_DEMO_APP_250 definition + public + create public . + +public section. + + interfaces Z2UI5_IF_APP . + + data CHECK_INITIALIZED type ABAP_BOOL . + PROTECTED SECTION. + + DATA client TYPE REF TO z2ui5_if_client. + + METHODS display_view + IMPORTING + client TYPE REF TO z2ui5_if_client. + METHODS on_event + IMPORTING + client TYPE REF TO z2ui5_if_client. + METHODS z2ui5_display_popover + IMPORTING + id TYPE string. + + PRIVATE SECTION. +ENDCLASS. + + + +CLASS Z2UI5_CL_DEMO_APP_250 IMPLEMENTATION. + + + METHOD DISPLAY_VIEW. + + DATA(page_01) = z2ui5_cl_xml_view=>factory( )->shell( + )->page( + title = 'abap2UI5 - Sample: OverflowToolbar - Alignment' + navbuttonpress = client->_event( 'BACK' ) + shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ). + + page_01->header_content( + )->button( id = `hint_icon` + icon = `sap-icon://hint` + tooltip = `Sample information` + press = client->_event( 'POPOVER' ) ). + + page_01->header_content( + )->link( + text = 'UI5 Demo Kit' + target = '_blank' + href = 'https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.OverflowToolbar/sample/sap.m.sample.ToolbarAlignment' ). + + DATA(page_02) = page_01->page( + )->invisible_text( ns = `core` + id = `inputLabel` + text = `Input label`)->get_parent( + + )->message_strip( text = `Left and Right aligned content.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->button( text = `Reject` type = `Reject` + )->toolbar_spacer( + )->button( text = `Accept` type = `Accept` )->get_parent( + + )->message_strip( text = `Centered content.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->toolbar_spacer( + )->button( text = `Centered content` type = `Accept` + )->toolbar_spacer( )->get_parent( + + )->message_strip( text = `Right aligned content.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->toolbar_spacer( + )->button( text = `Right aligned content` type = `Accept` )->get_parent( + + )->message_strip( text = `You can have as many sections as you want with ToolbarSpacer.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->button( text = `Accept` type = `Accept` + )->toolbar_spacer( + )->checkbox( text = `CheckBox` + )->toolbar_spacer( + )->button( tooltip = `Dropdown` icon = `sap-icon://drop-down-list` + )->toolbar_spacer( + )->radio_button( text = `RadioButton` )->get_parent( + )->toolbar_spacer( + )->button( text = `Reject` type = `Reject` )->get_parent( + + )->message_strip( text = `Flexible Toolbar Spacers share the free horizontal space equally, thus content centering is not as precise as in Bar.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->button( text = `This is a very long button text. This is a very long button text.` + )->toolbar_spacer( + )->button( text = `Centered Button` + )->toolbar_spacer( + )->button( text = `Short Button` )->get_parent( + + )->message_strip( text = `ToolbarSpacer does not have to be flexible, a fixed width can be specified too.` class = `sapUiTinyMargin` + )->overflow_toolbar( class = `sapUiMediumMarginTop` + )->input( arialabelledby = `inputLabel` width = `100px` placeholder = `First Name` + )->input( arialabelledby = `inputLabel` width = `100px` placeholder = `Last Name` + )->toolbar_spacer( width = `40px` + )->input( arialabelledby = `inputLabel` type = `Email` width = `100px` placeholder = `Email` + )->input( arialabelledby = `inputLabel` type = `Number` width = `80px` placeholder = `Age` + )->toolbar_spacer( + )->button( text = `Submit` type = `Accept` )->get_parent( + ). + + client->view_display( page_02->stringify( ) ). + + ENDMETHOD. + + + METHOD ON_EVENT. + + CASE client->get( )-event. + WHEN 'BACK'. + client->nav_app_leave( ). + WHEN 'POPOVER'. + z2ui5_display_popover( `hint_icon` ). + ENDCASE. + + ENDMETHOD. + + + METHOD Z2UI5_DISPLAY_POPOVER. + + DATA(view) = z2ui5_cl_xml_view=>factory_popup( ). + view->quick_view( placement = `Bottom` width = `auto` + )->quick_view_page( pageid = `sampleInformationId` + header = `Sample information` + description = `OverflowToolbar and Toolbar are often used for left/right alignment. This is easily achieved with ToolbarSpacer.` ). + + client->popover_display( + xml = view->stringify( ) + by_id = id + ). + + ENDMETHOD. + + + METHOD Z2UI5_IF_APP~MAIN. + + me->client = client. + + IF check_initialized = abap_false. + check_initialized = abap_true. + display_view( client ). + ENDIF. + + on_event( client ). + + ENDMETHOD. +ENDCLASS. diff --git a/src/z2ui5_cl_demo_app_250.clas.xml b/src/z2ui5_cl_demo_app_250.clas.xml new file mode 100644 index 00000000..6c34970b --- /dev/null +++ b/src/z2ui5_cl_demo_app_250.clas.xml @@ -0,0 +1,16 @@ + + + + + + Z2UI5_CL_DEMO_APP_250 + E + OverflowToolbar - Alignment + 1 + X + X + X + + + + From 59dc6a750954ff15465edd70018653370b973b0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mil=C3=A1n?= <36721657+francisco-milan@users.noreply.github.com> Date: Tue, 30 Jul 2024 10:01:23 -0600 Subject: [PATCH 2/3] New Sample: OverflowToolbar - Alignment (2) --- src/z2ui5_cl_demo_app_000.clas.abap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/z2ui5_cl_demo_app_000.clas.abap b/src/z2ui5_cl_demo_app_000.clas.abap index eb11091a..47724540 100644 --- a/src/z2ui5_cl_demo_app_000.clas.abap +++ b/src/z2ui5_cl_demo_app_000.clas.abap @@ -28,7 +28,7 @@ ENDCLASS. -CLASS Z2UI5_CL_DEMO_APP_000 IMPLEMENTATION. +CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION. METHOD z2ui5_if_app~main. From 189eb19cf78c35e87c040de147ea71b02471ca4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mil=C3=A1n?= <36721657+francisco-milan@users.noreply.github.com> Date: Tue, 30 Jul 2024 10:02:14 -0600 Subject: [PATCH 3/3] New Sample: OverflowToolbar - Alignment (3) --- src/z2ui5_cl_demo_app_250.clas.abap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/z2ui5_cl_demo_app_250.clas.abap b/src/z2ui5_cl_demo_app_250.clas.abap index 7994131b..4145915c 100644 --- a/src/z2ui5_cl_demo_app_250.clas.abap +++ b/src/z2ui5_cl_demo_app_250.clas.abap @@ -1,4 +1,4 @@ -class Z2UI5_CL_DEMO_APP_250 definition +class z2ui5_cl_demo_app_250 definition public create public . @@ -26,7 +26,7 @@ ENDCLASS. -CLASS Z2UI5_CL_DEMO_APP_250 IMPLEMENTATION. +CLASS z2ui5_cl_demo_app_250 IMPLEMENTATION. METHOD DISPLAY_VIEW.