Skip to content

Commit a856af4

Browse files
francisco-milanfrancisco-milan
authored
New Sample: Icon (#316)
1 parent fab2a4a commit a856af4

3 files changed

+194
-0
lines changed

‎src/z2ui5_cl_demo_app_000.clas.abap

+7
Original file line numberDiff line numberDiff line change
@@ -535,6 +535,13 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
535535
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
536536
).
537537

538+
panel->generic_tile(
539+
header = 'Icon'
540+
press = client->_event( 'Z2UI5_CL_DEMO_APP_268' )
541+
mode = 'LineMode'
542+
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
543+
).
544+
538545

539546
panel = page->panel(
540547
expandable = abap_false

‎src/z2ui5_cl_demo_app_268.clas.abap

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
CLASS z2ui5_cl_demo_app_268 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_268 IMPLEMENTATION.
30+
31+
32+
METHOD display_view.
33+
34+
DATA(css) = `.size1 {` &&
35+
` font-size : 1.5rem;` &&
36+
`}` &&
37+
`.size2 {` &&
38+
` font-size : 2.5rem;` &&
39+
`}` &&
40+
`.size3 {` &&
41+
` font-size : 5rem;` &&
42+
`}` &&
43+
`.size4 {` &&
44+
` font-size : 7.5rem;` &&
45+
`}` &&
46+
`.size5 {` &&
47+
` font-size : 10rem;` &&
48+
`}` &&
49+
50+
`@media (max-width:599px) {` &&
51+
` .size1 {` &&
52+
` font-size : 1rem;` &&
53+
` }` &&
54+
` .size2 {` &&
55+
` font-size : 2rem;` &&
56+
`}` &&
57+
` .size3 {` &&
58+
` font-size : 3rem;` &&
59+
` }` &&
60+
` .size4 {` &&
61+
` font-size : 4rem;` &&
62+
` }` &&
63+
` .size5 {` &&
64+
` font-size : 5rem;` &&
65+
` }` &&
66+
`}`.
67+
68+
DATA(view) = z2ui5_cl_xml_view=>factory( ).
69+
view->_generic( name = `style` ns = `html` )->_cc_plain_xml( css )->get_parent( ).
70+
71+
DATA(page) = view->shell(
72+
)->page(
73+
title = `abap2UI5 - Sample: Icon`
74+
navbuttonpress = client->_event( 'BACK' )
75+
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
76+
77+
page->header_content(
78+
)->button( id = `button_hint_id`
79+
icon = `sap-icon://hint`
80+
tooltip = `Sample information`
81+
press = client->_event( 'CLICK_HINT_ICON' ) ).
82+
83+
page->header_content(
84+
)->link(
85+
text = 'UI5 Demo Kit'
86+
target = '_blank'
87+
href = 'https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.core.Icon/sample/sap.ui.core.sample.Icon' ).
88+
89+
page->hbox( class = `sapUiSmallMargin`
90+
)->icon(
91+
src = `sap-icon://syringe`
92+
class = `size1`
93+
color = `#031E48` )->get(
94+
)->layout_data( ns = `core`
95+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
96+
)->icon(
97+
src = `sap-icon://pharmacy`
98+
class = `size2`
99+
color = `#64E4CE` )->get(
100+
)->layout_data( ns = `core`
101+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
102+
)->icon(
103+
src = `sap-icon://electrocardiogram`
104+
class = `size3`
105+
color = `#E69A17` )->get(
106+
)->layout_data( ns = `core`
107+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
108+
)->icon(
109+
src = `sap-icon://doctor`
110+
class = `size4`
111+
color = `#1C4C98` )->get(
112+
)->layout_data( ns = `core`
113+
)->flex_item_data( growfactor = `1` )->get_parent( )->get_parent(
114+
)->icon(
115+
src = `sap-icon://stethoscope`
116+
class = `size5`
117+
color = `#8875E7`
118+
press = client->_event( `handleStethoscopePress` ) )->get(
119+
)->layout_data( ns = `core`
120+
)->flex_item_data( growfactor = `1`
121+
).
122+
123+
client->view_display( page->stringify( ) ).
124+
125+
ENDMETHOD.
126+
127+
128+
METHOD on_event.
129+
130+
CASE client->get( )-event.
131+
WHEN 'BACK'.
132+
client->nav_app_leave( ).
133+
WHEN 'CLICK_HINT_ICON'.
134+
z2ui5_display_popover( `button_hint_id` ).
135+
WHEN 'handleStethoscopePress'.
136+
client->message_toast_display( `Over budget!` ).
137+
ENDCASE.
138+
139+
ENDMETHOD.
140+
141+
142+
METHOD z2ui5_display_popover.
143+
144+
DATA(view) = z2ui5_cl_xml_view=>factory_popup( ).
145+
view->quick_view( placement = `Bottom` width = `auto`
146+
)->quick_view_page( pageid = `sampleInformationId`
147+
header = `Sample information`
148+
description = `Built with an embedded font, icons scale well, and can be altered with CSS. ` &&
149+
`They can also fire a press event. See the Icon Explorer for more icons.` ).
150+
151+
client->popover_display(
152+
xml = view->stringify( )
153+
by_id = id
154+
).
155+
156+
ENDMETHOD.
157+
158+
159+
METHOD z2ui5_if_app~main.
160+
161+
me->client = client.
162+
163+
IF check_initialized = abap_false.
164+
check_initialized = abap_true.
165+
display_view( client ).
166+
ENDIF.
167+
168+
on_event( client ).
169+
170+
ENDMETHOD.
171+
ENDCLASS.

‎src/z2ui5_cl_demo_app_268.clas.xml

+16
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_268</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>Icon</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)