Skip to content

Commit 2b7e0cd

Browse files
francisco-milanfrancisco-milan
authored
New Sample: FlexBox Size Adjustments (#285)
1 parent b7ea304 commit 2b7e0cd

3 files changed

+185
-0
lines changed

‎src/z2ui5_cl_demo_app_000.clas.abap

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -924,6 +924,14 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
924924
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
925925
).
926926

927+
panel->generic_tile(
928+
header = 'Flex Box'
929+
subheader = 'Size Adjustments'
930+
press = client->_event( 'Z2UI5_CL_DEMO_APP_244' )
931+
mode = 'LineMode'
932+
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
933+
).
934+
927935
panel = page->panel(
928936
expandable = abap_false
929937
expanded = abap_true

‎src/z2ui5_cl_demo_app_244.clas.abap

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
class z2ui5_cl_demo_app_244 definition
2+
public
3+
create public .
4+
5+
public section.
6+
7+
interfaces Z2UI5_IF_APP .
8+
9+
data CHECK_INITIALIZED type ABAP_BOOL .
10+
PROTECTED SECTION.
11+
12+
DATA client TYPE REF TO z2ui5_if_client.
13+
14+
METHODS display_view
15+
IMPORTING
16+
client TYPE REF TO z2ui5_if_client.
17+
METHODS on_event
18+
IMPORTING
19+
client TYPE REF TO z2ui5_if_client.
20+
METHODS z2ui5_display_popover
21+
IMPORTING
22+
id TYPE string.
23+
24+
PRIVATE SECTION.
25+
ENDCLASS.
26+
27+
28+
29+
CLASS z2ui5_cl_demo_app_244 IMPLEMENTATION.
30+
31+
32+
METHOD DISPLAY_VIEW.
33+
34+
DATA(page) = z2ui5_cl_xml_view=>factory( )->shell(
35+
)->page(
36+
title = `abap2UI5 - Sample: Flex Box - Size Adjustments`
37+
navbuttonpress = client->_event( 'BACK' )
38+
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
39+
40+
page->header_content(
41+
)->button( id = `hint_icon`
42+
icon = `sap-icon://hint`
43+
tooltip = `Sample information`
44+
press = client->_event( 'POPOVER' ) ).
45+
46+
page->header_content(
47+
)->link(
48+
text = 'UI5 Demo Kit'
49+
target = '_blank'
50+
href = 'https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxSizeAdjustments' ).
51+
52+
DATA(layout) = page->vbox(
53+
)->panel( headertext = `Equal flexibility and content` class = `sapUiDemoFlexBoxSizeAdjustments`
54+
)->flex_box( alignitems = `Start`
55+
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
56+
)->layout_data(
57+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
58+
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
59+
)->layout_data(
60+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
61+
)->button( text = `3` width = `100%` type = `Accept` )->get(
62+
)->layout_data(
63+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent( )->get_parent( )->get_parent(
64+
65+
)->panel( headertext = `Different flexibility, equal content` class = `sapUiDemoFlexBoxSizeAdjustments`
66+
)->flex_box( alignitems = `Start`
67+
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
68+
)->layout_data(
69+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
70+
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
71+
)->layout_data(
72+
)->flex_item_data( growfactor = `2` )->get_parent( )->get_parent(
73+
)->button( text = `3` width = `100%` type = `Accept` )->get(
74+
)->layout_data(
75+
)->flex_item_data( growfactor = `3` )->get_parent( )->get_parent( )->get_parent( )->get_parent(
76+
77+
)->panel( headertext = `Equal flexibility, different content` class = `sapUiDemoFlexBoxSizeAdjustments`
78+
)->flex_box( alignitems = `Start`
79+
)->button( text = `1` width = `50px` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
80+
)->layout_data(
81+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
82+
)->button( text = `2` width = `100px` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
83+
)->layout_data(
84+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
85+
)->button( text = `3` width = `150px` type = `Accept` )->get(
86+
)->layout_data(
87+
)->flex_item_data( growfactor = `1`)->get_parent( )->get_parent( )->get_parent( )->get_parent(
88+
89+
)->panel( headertext = `Equal flexibility, different content, width 0` class = `sapUiDemoFlexBoxSizeAdjustments`
90+
)->flex_box( alignitems = `Start`
91+
)->button( text = `1` width = `100%` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
92+
)->layout_data(
93+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
94+
)->button( text = `2` width = `100%` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
95+
)->layout_data(
96+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
97+
)->button( text = `3` width = `100%` type = `Accept` )->get(
98+
)->layout_data(
99+
)->flex_item_data( growfactor = `1`)->get_parent( )->get_parent( )->get_parent( )->get_parent(
100+
101+
)->panel( headertext = `Different flexibility and content, width 0` class = `sapUiDemoFlexBoxSizeAdjustments`
102+
)->flex_box( alignitems = `Start`
103+
)->button( text = `1` width = `50px` type = `Emphasized` class = `sapUiSmallMarginEnd` )->get(
104+
)->layout_data(
105+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
106+
)->button( text = `2` width = `100px` type = `Reject` class = `sapUiSmallMarginEnd` )->get(
107+
)->layout_data(
108+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
109+
)->button( text = `3` width = `150px` type = `Accept` )->get(
110+
)->layout_data(
111+
)->flex_item_data( growfactor = `1`)->get_parent(
112+
113+
).
114+
115+
client->view_display( page->stringify( ) ).
116+
117+
ENDMETHOD.
118+
119+
120+
METHOD ON_EVENT.
121+
122+
CASE client->get( )-event.
123+
WHEN 'BACK'.
124+
client->nav_app_leave( ).
125+
WHEN 'POPOVER'.
126+
z2ui5_display_popover( `hint_icon` ).
127+
ENDCASE.
128+
129+
ENDMETHOD.
130+
131+
132+
METHOD Z2UI5_DISPLAY_POPOVER.
133+
134+
DATA(view) = z2ui5_cl_xml_view=>factory_popup( ).
135+
view->quick_view( placement = `Bottom` width = `auto`
136+
)->quick_view_page( pageid = `sampleInformationId`
137+
header = `Sample information`
138+
description = `Automatic size adjustments can be achieved for Flex Items with the use of Flex Item Data settings on the contained controls.`
139+
).
140+
141+
client->popover_display(
142+
xml = view->stringify( )
143+
by_id = id
144+
).
145+
146+
ENDMETHOD.
147+
148+
149+
METHOD Z2UI5_IF_APP~MAIN.
150+
151+
me->client = client.
152+
153+
IF check_initialized = abap_false.
154+
check_initialized = abap_true.
155+
display_view( client ).
156+
ENDIF.
157+
158+
on_event( client ).
159+
160+
ENDMETHOD.
161+
ENDCLASS.

‎src/z2ui5_cl_demo_app_244.clas.xml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
3+
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
4+
<asx:values>
5+
<VSEOCLASS>
6+
<CLSNAME>Z2UI5_CL_DEMO_APP_244</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>Flex Box - Size Adjustments</DESCRIPT>
9+
<STATE>1</STATE>
10+
<CLSCCINCL>X</CLSCCINCL>
11+
<FIXPT>X</FIXPT>
12+
<UNICODE>X</UNICODE>
13+
</VSEOCLASS>
14+
</asx:values>
15+
</asx:abap>
16+
</abapGit>

0 commit comments

Comments
 (0)