Skip to content

New Sample: FlexBox Size Adjustments #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 27, 2024
Merged

New Sample: FlexBox Size Adjustments #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a88d7b6
Commit
francisco-milan Jul 27, 2024
502cc56
New Sample: FlexBox Size Adjustments (2)
francisco-milan Jul 27, 2024
d644dee
New Sample: FlexBox Size Adjustments (3)
francisco-milan Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/z2ui5_cl_demo_app_000.clas.abap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -924,6 +924,14 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
).

panel->generic_tile(
header = 'Flex Box'
subheader = 'Size Adjustments'
press = client->_event( 'Z2UI5_CL_DEMO_APP_244' )
mode = 'LineMode'
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
).

panel = page->panel(
expandable = abap_false
expanded = abap_true
Expand Down
161 changes: 161 additions & 0 deletions src/z2ui5_cl_demo_app_244.clas.abap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
class z2ui5_cl_demo_app_244 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_244 IMPLEMENTATION.


METHOD DISPLAY_VIEW.

DATA(page) = z2ui5_cl_xml_view=>factory( )->shell(
)->page(
title = `abap2UI5 - Sample: Flex Box - Size Adjustments`
navbuttonpress = client->_event( 'BACK' )
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).

page->header_content(
)->button( id = `hint_icon`
icon = `sap-icon://hint`
tooltip = `Sample information`
press = client->_event( 'POPOVER' ) ).

page->header_content(
)->link(
text = 'UI5 Demo Kit'
target = '_blank'
href = 'https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxSizeAdjustments' ).

DATA(layout) = page->vbox(
)->panel( headertext = `Equal flexibility and content` class = `sapUiDemoFlexBoxSizeAdjustments`
)->flex_box( alignitems = `Start`
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `3` width = `100%` type = `Accept` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent( )->get_parent( )->get_parent(

)->panel( headertext = `Different flexibility, equal content` class = `sapUiDemoFlexBoxSizeAdjustments`
)->flex_box( alignitems = `Start`
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `2` )->get_parent( )->get_parent(
)->button( text = `3` width = `100%` type = `Accept` )->get(
)->layout_data(
)->flex_item_data( growfactor = `3` )->get_parent( )->get_parent( )->get_parent( )->get_parent(

)->panel( headertext = `Equal flexibility, different content` class = `sapUiDemoFlexBoxSizeAdjustments`
)->flex_box( alignitems = `Start`
)->button( text = `1` width = `50px` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `2` width = `100px` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `3` width = `150px` type = `Accept` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1`)->get_parent( )->get_parent( )->get_parent( )->get_parent(

)->panel( headertext = `Equal flexibility, different content, width 0` class = `sapUiDemoFlexBoxSizeAdjustments`
)->flex_box( alignitems = `Start`
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `3` width = `100%` type = `Accept` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1`)->get_parent( )->get_parent( )->get_parent( )->get_parent(

)->panel( headertext = `Different flexibility and content, width 0` class = `sapUiDemoFlexBoxSizeAdjustments`
)->flex_box( alignitems = `Start`
)->button( text = `1` width = `50px` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `2` width = `100px` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
)->button( text = `3` width = `150px` type = `Accept` )->get(
)->layout_data(
)->flex_item_data( growfactor = `1`)->get_parent(

).

client->view_display( page->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 = `Automatic size adjustments can be achieved for Flex Items with the use of Flex Item Data settings on the contained controls.`
).

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.
16 changes: 16 additions & 0 deletions src/z2ui5_cl_demo_app_244.clas.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_DEMO_APP_244</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>Flex Box - Size Adjustments</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>