Skip to content

Commit 6c59786

Browse files
francisco-milanfrancisco-milan
authored
New Sample: Flex Box - Nested (#297)
* New Sample: Flex Box - Nested (1) * New Sample: Flex Box - Nested (2) * New Sample: Flex Box - Nested (3)
1 parent 9c5a5fe commit 6c59786

File tree

3 files changed

+188
-0
lines changed

3 files changed

+188
-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
@@ -1005,6 +1005,14 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
10051005
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
10061006
).
10071007

1008+
panel->generic_tile(
1009+
header = 'Flex Box'
1010+
subheader = 'Nested'
1011+
press = client->_event( 'Z2UI5_CL_DEMO_APP_254' )
1012+
mode = 'LineMode'
1013+
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
1014+
).
1015+
10081016
panel = page->panel(
10091017
expandable = abap_false
10101018
expanded = abap_true

‎src/z2ui5_cl_demo_app_254.clas.abap‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
class z2ui5_cl_demo_app_254 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_254 IMPLEMENTATION.
30+
31+
32+
METHOD DISPLAY_VIEW.
33+
34+
DATA(css) = `.nestedFlexboxes .item1 {` &&
35+
` padding: 1rem;` &&
36+
` background-color: #d1dbbd;` &&
37+
`}` &&
38+
`.nestedFlexboxes .item2 {` &&
39+
` padding: 1rem;` &&
40+
` background-color: #7D8A2E;` &&
41+
`}` &&
42+
`.nestedFlexboxes .item3 {` &&
43+
` padding: 1rem;` &&
44+
` background-color: #C9D787;` &&
45+
`}` &&
46+
`.nestedFlexboxes .item4 {` &&
47+
` padding: 1rem;` &&
48+
` background-color: #FFFFFF;` &&
49+
`}` &&
50+
`.nestedFlexboxes .item5 {` &&
51+
` padding: 1rem;` &&
52+
` background-color: #FFC0A9;` &&
53+
`}` &&
54+
`.nestedFlexboxes .item6 {` &&
55+
` padding: 1rem;` &&
56+
` background-color: #FF8598;` &&
57+
`}` &&
58+
59+
`.nestedFlexboxes h2 {` &&
60+
` color: #32363a;` &&
61+
`}`.
62+
63+
DATA(view) = z2ui5_cl_xml_view=>factory( ).
64+
view->_generic( name = `style` ns = `html` )->_cc_plain_xml( css )->get_parent( ).
65+
66+
DATA(page) = view->shell(
67+
)->page(
68+
title = `abap2UI5 - Sample: Flex Box - Nested`
69+
navbuttonpress = client->_event( 'BACK' )
70+
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
71+
72+
page->header_content(
73+
)->button( id = `hint_icon`
74+
icon = `sap-icon://hint`
75+
tooltip = `Sample information`
76+
press = client->_event( 'POPOVER' ) ).
77+
78+
page->header_content(
79+
)->link(
80+
text = 'UI5 Demo Kit'
81+
target = '_blank'
82+
href = 'https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.FlexBox/sample/sap.m.sample.FlexBoxNested' ).
83+
84+
DATA(layout) = page->hbox(
85+
fitcontainer = `abap_true`
86+
alignItems = `Stretch`
87+
class = `sapUiSmallMargin nestedFlexboxes`
88+
)->html( content = `<h2>1</h2>`
89+
)->layout_data( ns = `core`
90+
)->flex_item_data( growFactor = `2` styleClass = `item1` )->get_parent( )->get_parent(
91+
)->html( content = `<h2>2</h2>`
92+
)->layout_data( ns = `core`
93+
)->flex_item_data( growFactor = `3` styleClass = `item2` )->get_parent( )->get_parent(
94+
95+
)->vbox( fitcontainer = abap_false
96+
)->layout_data(
97+
)->flex_item_data( growFactor = `7` )->get_parent(
98+
99+
)->html( content = `<h2>3</h2>`
100+
)->layout_data( ns = `core`
101+
)->flex_item_data( growFactor = `5` styleClass = `item3` )->get_parent( )->get_parent(
102+
103+
)->hbox( fitcontainer = `abap_true` alignitems = `Stretch`
104+
)->layout_data(
105+
)->flex_item_data( growFactor = `3` )->get_parent(
106+
107+
)->html( content = `<h2>4</h2>`
108+
)->layout_data( ns = `core`
109+
)->flex_item_data( growFactor = `1` styleClass = `item4` )->get_parent( )->get_parent(
110+
)->html( content = `<h2>5</h2>`
111+
)->layout_data( ns = `core`
112+
)->flex_item_data( growFactor = `1` styleClass = `item5` )->get_parent( )->get_parent( )->get_parent( )->get_parent(
113+
114+
)->html( content = `<h2>6</h2>`
115+
)->layout_data( ns = `core`
116+
)->flex_item_data( growFactor = `5` styleClass = `item6` )->get_parent( )->get_parent(
117+
).
118+
119+
client->view_display( page->stringify( ) ).
120+
121+
ENDMETHOD.
122+
123+
124+
METHOD ON_EVENT.
125+
126+
CASE client->get( )-event.
127+
WHEN 'BACK'.
128+
client->nav_app_leave( ).
129+
WHEN 'POPOVER'.
130+
z2ui5_display_popover( `hint_icon` ).
131+
ENDCASE.
132+
133+
ENDMETHOD.
134+
135+
136+
METHOD Z2UI5_DISPLAY_POPOVER.
137+
138+
DATA(view) = z2ui5_cl_xml_view=>factory_popup( ).
139+
view->quick_view( placement = `Bottom` width = `auto`
140+
)->quick_view_page( pageid = `sampleInformationId`
141+
header = `Sample information`
142+
description = `Flex Boxes can be nested. Remember also that HBox and VBox are 'convenience' controls based on the Flex Box control.` ).
143+
144+
client->popover_display(
145+
xml = view->stringify( )
146+
by_id = id
147+
).
148+
149+
ENDMETHOD.
150+
151+
152+
METHOD Z2UI5_IF_APP~MAIN.
153+
154+
me->client = client.
155+
156+
IF check_initialized = abap_false.
157+
check_initialized = abap_true.
158+
display_view( client ).
159+
ENDIF.
160+
161+
on_event( client ).
162+
163+
ENDMETHOD.
164+
ENDCLASS.

‎src/z2ui5_cl_demo_app_254.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_254</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>Flex Box - Nested</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)