mirror of
https://github.com/abap2UI5/abap2UI5.git
synced 2025-04-29 20:16:24 +08:00
refactoring and visualization (#121)
* refactoring && to || * refactoring * refactoring * renaming * refactoring * refactoring and visualization
This commit is contained in:
parent
8283f76a0c
commit
9bdc16f140
|
@ -132,6 +132,23 @@ CLASS Z2UI5_CL_APP_DEMO_00 IMPLEMENTATION.
|
|||
)->flex_item_data(
|
||||
growfactor = '3'
|
||||
styleclass = 'sapUiTinyMargin' ).
|
||||
|
||||
|
||||
* form->flex_box( class = 'columns'
|
||||
* )->button(
|
||||
* text = 'Visualization'
|
||||
* press = client->_event( 'z2ui5_cl_app_demo_16' ) )->get(
|
||||
* )->layout_data(
|
||||
* )->flex_item_data(
|
||||
* growfactor = '1'
|
||||
* styleclass = 'sapUiTinyMargin'
|
||||
* )->get_parent( )->get_parent(
|
||||
* )->text( `Use the sap.suite.ui.microchart controls to visualize data - `
|
||||
* && 'choose between bar charts, donut charts, line charts or radial charts and make your boring data beautiful' )->get(
|
||||
* )->layout_data(
|
||||
* )->flex_item_data(
|
||||
* growfactor = '3'
|
||||
* styleclass = 'sapUiTinyMargin' ).
|
||||
ENDCASE.
|
||||
|
||||
ENDMETHOD.
|
||||
|
|
|
@ -122,9 +122,8 @@ CLASS z2ui5_cl_app_demo_02 IMPLEMENTATION.
|
|||
title = 'abap2UI5 - Selection-Screen Example'
|
||||
navbuttonpress = client->_event( 'BACK' )
|
||||
)->header_content(
|
||||
)->link(
|
||||
text = 'Source_Code'
|
||||
href = client->get( )-s_request-url_source_code
|
||||
)->link( text = 'Demo' href = `https://twitter.com/OblomovDev/status/1628701535222865922`
|
||||
)->link( text = 'Source_Code' href = client->get( )-s_request-url_source_code
|
||||
)->get_parent( ).
|
||||
|
||||
DATA(grid) = page->grid( 'L6 M12 S12'
|
||||
|
|
|
@ -136,79 +136,6 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
|
|||
ENDMETHOD.
|
||||
|
||||
|
||||
METHOD z2ui5_on_init.
|
||||
|
||||
mt_suggestion = VALUE #(
|
||||
( descr = 'this is the color Green' value = 'GREEN' )
|
||||
( descr = 'this is the color Blue' value = 'BLUE' )
|
||||
( descr = 'this is the color Black' value = 'BLACK' )
|
||||
( descr = 'this is the color Grey' value = 'GREY' )
|
||||
( descr = 'this is the color Blue2' value = 'BLUE2' )
|
||||
( descr = 'this is the color Blue3' value = 'BLUE3' ) ).
|
||||
|
||||
mt_suggestion_city = VALUE #(
|
||||
( value = 'London' descr = 'London' )
|
||||
( value = 'Paris' descr = 'Paris' )
|
||||
( value = 'Rome' descr = 'Rome' ) ).
|
||||
|
||||
mt_employees = VALUE #(
|
||||
( city = 'London' name = 'Tom' lastname = 'lastname1' nr = '00001' )
|
||||
( city = 'London' name = 'Tom2' lastname = 'lastname2' nr = '00002' )
|
||||
( city = 'London' name = 'Tom3' lastname = 'lastname3' nr = '00003' )
|
||||
( city = 'London' name = 'Tom4' lastname = 'lastname4' nr = '00004' )
|
||||
( city = 'Rome' name = 'Michaela1' lastname = 'lastname5' nr = '00005' )
|
||||
( city = 'Rome' name = 'Michaela2' lastname = 'lastname6' nr = '00006' )
|
||||
( city = 'Rome' name = 'Michaela3' lastname = 'lastname7' nr = '00007' )
|
||||
( city = 'Rome' name = 'Michaela4' lastname = 'lastname8' nr = '00008' )
|
||||
( city = 'Paris' name = 'Hermine1' lastname = 'lastname9' nr = '00009' )
|
||||
( city = 'Paris' name = 'Hermine2' lastname = 'lastname10' nr = '00010' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' ) ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
|
||||
METHOD z2ui5_on_rendering.
|
||||
|
||||
DATA(page) = client->factory_view( 'MAIN'
|
||||
|
@ -224,7 +151,7 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
|
|||
href = client->get( )-s_request-url_source_code
|
||||
)->get_parent( ).
|
||||
|
||||
DATA(form) = page->grid( 'XL12 L12 M12 S12'
|
||||
DATA(form) = page->grid( 'L7 M7 S7'
|
||||
)->content( 'l'
|
||||
)->simple_form( 'Input with Value Help'
|
||||
)->content( 'f' ).
|
||||
|
@ -356,4 +283,78 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
|
|||
type = 'Emphasized' ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
|
||||
METHOD z2ui5_on_init.
|
||||
|
||||
mt_suggestion = VALUE #(
|
||||
( descr = 'this is the color Green' value = 'GREEN' )
|
||||
( descr = 'this is the color Blue' value = 'BLUE' )
|
||||
( descr = 'this is the color Black' value = 'BLACK' )
|
||||
( descr = 'this is the color Grey' value = 'GREY' )
|
||||
( descr = 'this is the color Blue2' value = 'BLUE2' )
|
||||
( descr = 'this is the color Blue3' value = 'BLUE3' ) ).
|
||||
|
||||
mt_suggestion_city = VALUE #(
|
||||
( value = 'London' descr = 'London' )
|
||||
( value = 'Paris' descr = 'Paris' )
|
||||
( value = 'Rome' descr = 'Rome' ) ).
|
||||
|
||||
mt_employees = VALUE #(
|
||||
( city = 'London' name = 'Tom' lastname = 'lastname1' nr = '00001' )
|
||||
( city = 'London' name = 'Tom2' lastname = 'lastname2' nr = '00002' )
|
||||
( city = 'London' name = 'Tom3' lastname = 'lastname3' nr = '00003' )
|
||||
( city = 'London' name = 'Tom4' lastname = 'lastname4' nr = '00004' )
|
||||
( city = 'Rome' name = 'Michaela1' lastname = 'lastname5' nr = '00005' )
|
||||
( city = 'Rome' name = 'Michaela2' lastname = 'lastname6' nr = '00006' )
|
||||
( city = 'Rome' name = 'Michaela3' lastname = 'lastname7' nr = '00007' )
|
||||
( city = 'Rome' name = 'Michaela4' lastname = 'lastname8' nr = '00008' )
|
||||
( city = 'Paris' name = 'Hermine1' lastname = 'lastname9' nr = '00009' )
|
||||
( city = 'Paris' name = 'Hermine2' lastname = 'lastname10' nr = '00010' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
|
||||
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' ) ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
ENDCLASS.
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<VSEOCLASS>
|
||||
<CLSNAME>Z2UI5_CL_APP_DEMO_09</CLSNAME>
|
||||
<LANGU>E</LANGU>
|
||||
<DESCRIPT>selscreen - f4 help</DESCRIPT>
|
||||
<DESCRIPT>selscreen - value help</DESCRIPT>
|
||||
<STATE>1</STATE>
|
||||
<CLSCCINCL>X</CLSCCINCL>
|
||||
<FIXPT>X</FIXPT>
|
||||
|
|
|
@ -161,7 +161,7 @@ CLASS Z2UI5_CL_APP_DEMO_13 IMPLEMENTATION.
|
|||
|
||||
DATA(page) = client->factory_view( 'IMPORT_TABLE'
|
||||
)->page(
|
||||
title = 'abap2ui5 - Table Maintenance'
|
||||
title = 'abap2UI5 - Table Maintenance'
|
||||
navbuttonpress = client->_event( 'BACK' )
|
||||
)->header_content(
|
||||
)->link(
|
||||
|
|
|
@ -45,53 +45,68 @@ ENDCLASS.
|
|||
|
||||
|
||||
|
||||
CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
|
||||
CLASS z2ui5_cl_app_demo_16 IMPLEMENTATION.
|
||||
|
||||
|
||||
METHOD render_tab_bar.
|
||||
|
||||
DATA(tab) = container->tab( text = 'Bar Chart' selected = client->_bind( mv_tab_bar_active ) ).
|
||||
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
|
||||
DATA(grid) = container->tab(
|
||||
text = 'Bar Chart'
|
||||
selected = client->_bind( mv_tab_bar_active )
|
||||
)->grid( 'XL6 L6 M6 S12' ).
|
||||
|
||||
grid->link(
|
||||
text = 'Go to the SAP Demos for Interactive bar Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveBarChart/sample/sap.suite.ui.microchart.sample.InteractiveBarChart'
|
||||
).
|
||||
text = 'Go to the SAP Demos for Interactive bar Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveBarChart/sample/sap.suite.ui.microchart.sample.InteractiveBarChart'
|
||||
)->text(
|
||||
text = 'Absolute and Percentage value'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data(
|
||||
)->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
grid->text( text = 'Absolute and Percentage value' class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
|
||||
"Example with absolute and percentage values
|
||||
DATA(bar) = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Center' class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
)->bars( ).
|
||||
DATA(bar) = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Center'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
)->bars( ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel1 ) label = 'Product 1' value = '10' ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel2 ) label = 'Product 2' value = '20' ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel3 ) label = 'Product 3' value = '70' ).
|
||||
|
||||
|
||||
bar = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Center' class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
)->bars( ).
|
||||
bar = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Center'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
)->bars( ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel1 ) label = 'Product 1' value = '10' displayedvalue = '10%' ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel2 ) label = 'Product 2' value = '20' displayedvalue = '20%' ).
|
||||
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel3 ) label = 'Product 3' value = '70' displayedvalue = '70%' ).
|
||||
|
||||
|
||||
DATA(layout) = grid->vertical_layout( )->layout_data( 'l' )->grid_data( 'XL12 L12 M12 S12' )->get_parent( )->get_parent( ).
|
||||
|
||||
layout->text( text = 'Positive and Negative values' class = 'sapUiSmallMargin' ).
|
||||
bar = layout->flex_box( width = '20rem' height = '10rem' alignitems = 'Center' class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
labelwidth = '25%'
|
||||
)->bars( ).
|
||||
bar = grid->vertical_layout(
|
||||
)->layout_data( 'l'
|
||||
)->grid_data( 'XL12 L12 M12 S12'
|
||||
)->get_parent(
|
||||
)->text(
|
||||
text = 'Positive and Negative values'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->flex_box(
|
||||
width = '20rem'
|
||||
height = '10rem'
|
||||
alignitems = 'Center'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_bar_chart(
|
||||
selectionchanged = client->_event( 'BAR_CHANGED' )
|
||||
press = client->_event( 'BAR_PRESS' )
|
||||
labelwidth = '25%'
|
||||
)->bars( ).
|
||||
bar->interact_bar_chart_bar( label = 'Product 1' value = '25' ).
|
||||
bar->interact_bar_chart_bar( label = 'Product 2' value = '-50' ).
|
||||
bar->interact_bar_chart_bar( label = 'Product 3' value = '-100' ).
|
||||
|
@ -101,58 +116,74 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
|
|||
|
||||
METHOD render_tab_donut.
|
||||
|
||||
DATA(tab) = container->tab( text = 'Donut Chart' selected = client->_bind( mv_tab_donut_active ) ).
|
||||
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
|
||||
DATA(grid) = container->tab(
|
||||
text = 'Donut Chart'
|
||||
selected = client->_bind( mv_tab_donut_active )
|
||||
)->grid( 'XL6 L6 M6 S12' ).
|
||||
|
||||
grid->link(
|
||||
text = 'Go to the SAP Demos for Interactive Donut Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveDonutChart/sample/sap.suite.ui.microchart.sample.InteractiveDonutChart'
|
||||
).
|
||||
grid->text( text = 'Three segments' class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
|
||||
text = 'Go to the SAP Demos for Interactive Donut Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveDonutChart/sample/sap.suite.ui.microchart.sample.InteractiveDonutChart'
|
||||
)->text(
|
||||
text = 'Three segments'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data(
|
||||
)->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
DATA(seg) = grid->flex_box(
|
||||
width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
|
||||
)->items(
|
||||
)->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
)->segments( ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel1 ) label = 'Implementation Phase' value = '40.0' displayedvalue = '40.0%' ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel2 )
|
||||
label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel3 )
|
||||
label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Start'
|
||||
justifycontent = 'SpaceBetween'
|
||||
)->items(
|
||||
)->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
)->segments( ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel1 ) label = 'Impl. Phase' value = '40.0' displayedvalue = '40.0%' ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel2 ) label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
|
||||
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel3 ) label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
|
||||
|
||||
grid->text(
|
||||
text = 'Four segments'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data(
|
||||
)->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
grid->text( text = 'Four segments' class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
|
||||
seg = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Start'
|
||||
justifycontent = 'SpaceBetween'
|
||||
)->items( )->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
press = client->_event( 'DONUT_PRESS' )
|
||||
displayedsegments = '4'
|
||||
)->segments( ).
|
||||
seg->interact_donut_chart_segment( label = 'Design Phase' value = '32.0' displayedvalue = '32.0%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '28' displayedvalue = '28%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Test Phase' value = '25' displayedvalue = '25%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Launch Phase' value = '15' displayedvalue = '15%' ).
|
||||
|
||||
seg = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
|
||||
)->items(
|
||||
)->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
press = client->_event( 'DONUT_PRESS' )
|
||||
displayedsegments = '4'
|
||||
)->segments( ).
|
||||
seg->interact_donut_chart_segment( label = 'Design Phase' value = '32.0' displayedvalue = '32.0%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '28' displayedvalue = '28%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Test Phase' value = '25' displayedvalue = '25%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Launch Phase' value = '15' displayedvalue = '15%' ).
|
||||
grid->text(
|
||||
text = 'Error Messages'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data(
|
||||
)->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
|
||||
grid->text( text = 'Error Messages' class = 'sapUiSmallMargin'
|
||||
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
seg = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
|
||||
)->items( )->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
showerror = abap_true
|
||||
errormessagetitle = 'No data'
|
||||
errormessage = 'Currently no data is available'
|
||||
)->segments( ).
|
||||
seg = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Start'
|
||||
justifycontent = 'SpaceBetween'
|
||||
)->items( )->interact_donut_chart(
|
||||
selectionchanged = client->_event( 'DONUT_CHANGED' )
|
||||
showerror = abap_true
|
||||
errormessagetitle = 'No data'
|
||||
errormessage = 'Currently no data is available'
|
||||
)->segments( ).
|
||||
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '40.0' displayedvalue = '40.0%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
|
||||
seg->interact_donut_chart_segment( label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
|
||||
|
||||
|
||||
|
||||
|
@ -165,24 +196,136 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
|
|||
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
|
||||
|
||||
grid->link(
|
||||
text = 'Go to the SAP Demos for Interactive Line Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveLineChart/sample/sap.suite.ui.microchart.sample.InteractiveLineChart'
|
||||
).
|
||||
text = 'Go to the SAP Demos for Interactive Line Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveLineChart/sample/sap.suite.ui.microchart.sample.InteractiveLineChart' ).
|
||||
|
||||
grid->text(
|
||||
text = 'Absolute and Percentage values'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->get(
|
||||
)->layout_data(
|
||||
)->grid_data( 'XL12 L12 M12 S12' ).
|
||||
|
||||
DATA(point) = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Center'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->items( )->interact_line_chart(
|
||||
selectionchanged = client->_event( 'LINE_CHANGED' )
|
||||
precedingpoint = '15'
|
||||
succeddingpoint = '89'
|
||||
)->points( ).
|
||||
point->interact_line_chart_point( label = 'May' value = '33.1' secondarylabel = 'Q2' ).
|
||||
point->interact_line_chart_point( label = 'June' value = '12' ).
|
||||
point->interact_line_chart_point( label = 'July' value = '51.4' secondarylabel = 'Q3' ).
|
||||
point->interact_line_chart_point( label = 'Aug' value = '52' ).
|
||||
point->interact_line_chart_point( label = 'Sep' value = '69.9').
|
||||
point->interact_line_chart_point( label = 'Oct' value = '0.9' secondarylabel = 'Q4' ).
|
||||
|
||||
point = grid->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Start'
|
||||
class = 'SpaceBetween'
|
||||
)->items(
|
||||
)->interact_line_chart(
|
||||
selectionchanged = client->_event( 'LINE_CHANGED' )
|
||||
press = client->_event( 'LINE_PRESS' )
|
||||
precedingpoint = '-20'
|
||||
)->points( ).
|
||||
point->interact_line_chart_point( label = 'May' value = '33.1' displayedvalue = '33.1%' secondarylabel = '2015' ).
|
||||
point->interact_line_chart_point( label = 'June' value = '2.2' displayedvalue = '2.2%' secondarylabel = '2015' ).
|
||||
point->interact_line_chart_point( label = 'July' value = '51.4' displayedvalue = '51.4%' secondarylabel = '2015' ).
|
||||
point->interact_line_chart_point( label = 'Aug' value = '19.9' displayedvalue = '19.9%' ).
|
||||
point->interact_line_chart_point( label = 'Sep' value = '69.9' displayedvalue = '69.9%' ).
|
||||
point->interact_line_chart_point( label = 'Oct' value = '0.9' displayedvalue = '9.9%' ).
|
||||
|
||||
point = grid->vertical_layout(
|
||||
)->layout_data( ns = 'l'
|
||||
)->grid_data( 'XL12 L12 M12 S12'
|
||||
)->get_parent(
|
||||
)->text(
|
||||
text = 'Preselected values'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->flex_box(
|
||||
width = '22rem'
|
||||
height = '13rem'
|
||||
alignitems = 'Start'
|
||||
class = 'sapUiSmallMargin'
|
||||
)->items(
|
||||
)->interact_line_chart(
|
||||
selectionchanged = client->_event( 'LINE_CHANGED' )
|
||||
press = client->_event( 'LINE_PRESS' )
|
||||
)->points( ).
|
||||
point->interact_line_chart_point( label = 'May' value = '33.1' displayedvalue = '33.1%' selected = abap_true ).
|
||||
point->interact_line_chart_point( label = 'June' value = '2.2' displayedvalue = '2.2%' ).
|
||||
point->interact_line_chart_point( label = 'July' value = '51.4' displayedvalue = '51.4%' ).
|
||||
point->interact_line_chart_point( label = 'Aug' value = '19.9' displayedvalue = '19.9%' selected = abap_true ).
|
||||
point->interact_line_chart_point( label = 'Sep' value = '69.9' displayedvalue = '69.9%' ).
|
||||
point->interact_line_chart_point( label = 'Oct' value = '0.9' displayedvalue = '9.9%' ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
|
||||
METHOD render_tab_radial.
|
||||
|
||||
DATA(tab) = container->tab( text = 'Radial Chart' selected = client->_bind( mv_tab_radial_active ) ).
|
||||
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
|
||||
DATA(grid) = container->tab(
|
||||
text = 'Radial Chart'
|
||||
selected = client->_bind( mv_tab_radial_active )
|
||||
)->grid( 'XL12 L12 M12 S12' ).
|
||||
|
||||
grid->link(
|
||||
text = 'Go to the SAP Demos for Radial Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.RadialMicroChart/sample/sap.suite.ui.microchart.sample.RadialMicroChart'
|
||||
).
|
||||
text = 'Go to the SAP Demos for Radial Charts here...'
|
||||
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.RadialMicroChart/sample/sap.suite.ui.microchart.sample.RadialMicroChart' ).
|
||||
|
||||
grid->vertical_layout(
|
||||
)->horizontal_layout(
|
||||
)->radial_micro_chart(
|
||||
sice = 'M'
|
||||
percentage = '45'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
)->radial_micro_chart(
|
||||
sice = 'S'
|
||||
percentage = '45'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
)->get_parent(
|
||||
)->horizontal_layout(
|
||||
)->radial_micro_chart(
|
||||
sice = 'M'
|
||||
percentage = '99.9'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Good'
|
||||
)->radial_micro_chart(
|
||||
sice = 'S'
|
||||
percentage = '99.9'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Good'
|
||||
)->get_parent(
|
||||
)->horizontal_layout(
|
||||
)->radial_micro_chart(
|
||||
sice = 'M'
|
||||
percentage = '0'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Error'
|
||||
)->radial_micro_chart(
|
||||
sice = 'S'
|
||||
percentage = '0'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Error'
|
||||
)->get_parent(
|
||||
)->horizontal_layout(
|
||||
)->radial_micro_chart(
|
||||
sice = 'M'
|
||||
percentage = '0.1'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Critical'
|
||||
)->radial_micro_chart(
|
||||
sice = 'S'
|
||||
percentage = '0.1'
|
||||
press = client->_event( 'RADIAL_PRESS' )
|
||||
valueColor = 'Critical'
|
||||
).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
|
@ -240,27 +383,11 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
|
|||
).
|
||||
|
||||
DATA(container) = page->tab_container( ).
|
||||
|
||||
render_tab_donut( client = client container = container ).
|
||||
render_tab_bar( client = client container = container ).
|
||||
render_tab_line( client = client container = container ).
|
||||
render_tab_donut( client = client container = container ).
|
||||
render_tab_bar( client = client container = container ).
|
||||
render_tab_line( client = client container = container ).
|
||||
render_tab_radial( client = client container = container ).
|
||||
|
||||
" tab = container->tab( 'Interactive Line Chart' ).
|
||||
" tab = container->tab( 'Radial Micro Chart' ).
|
||||
|
||||
page->footer( )->overflow_toolbar(
|
||||
)->overflow_toolbar_button(
|
||||
text = 'Delete'
|
||||
icon = 'sap-icon://delete'
|
||||
)->toolbar_spacer(
|
||||
)->overflow_toolbar_button(
|
||||
text = 'Edit'
|
||||
icon = 'sap-icon://edit'
|
||||
)->overflow_toolbar_button(
|
||||
text = 'Upload'
|
||||
type = 'Emphasized'
|
||||
icon = 'sap-icon://upload-to-cloud' ).
|
||||
|
||||
ENDCASE.
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<VSEOCLASS>
|
||||
<CLSNAME>Z2UI5_CL_APP_DEMO_16</CLSNAME>
|
||||
<LANGU>E</LANGU>
|
||||
<DESCRIPT>demo - charts a diagrams</DESCRIPT>
|
||||
<DESCRIPT>demo - visualization</DESCRIPT>
|
||||
<STATE>1</STATE>
|
||||
<CLSCCINCL>X</CLSCCINCL>
|
||||
<FIXPT>X</FIXPT>
|
||||
|
|
|
@ -15,45 +15,26 @@ CLASS z2ui5_lcl_utility DEFINITION INHERITING FROM cx_no_check.
|
|||
TYPES:
|
||||
BEGIN OF ty,
|
||||
BEGIN OF s,
|
||||
BEGIN OF msg,
|
||||
id TYPE string,
|
||||
ty TYPE string,
|
||||
no TYPE string,
|
||||
v1 TYPE string,
|
||||
v2 TYPE string,
|
||||
v3 TYPE string,
|
||||
v4 TYPE string,
|
||||
END OF msg,
|
||||
BEGIN OF msg_result,
|
||||
message TYPE string,
|
||||
is_error TYPE abap_bool,
|
||||
type TYPE abap_bool,
|
||||
t_bapi TYPE bapirettab,
|
||||
s_bapi TYPE LINE OF bapirettab,
|
||||
message TYPE string,
|
||||
s_bapi TYPE LINE OF bapirettab,
|
||||
END OF msg_result,
|
||||
END OF s,
|
||||
BEGIN OF t,
|
||||
attri TYPE STANDARD TABLE OF ty_attri WITH EMPTY KEY,
|
||||
END OF t,
|
||||
BEGIN OF o,
|
||||
me TYPE REF TO z2ui5_lcl_utility,
|
||||
END OF o,
|
||||
END OF ty.
|
||||
|
||||
DATA:
|
||||
BEGIN OF ms_error,
|
||||
x_root TYPE REF TO cx_root,
|
||||
uuid TYPE string,
|
||||
kind TYPE string,
|
||||
text TYPE string,
|
||||
s_msg TYPE ty-s-msg_result,
|
||||
o_log TYPE ty-o-me,
|
||||
END OF ms_error.
|
||||
|
||||
METHODS constructor
|
||||
IMPORTING
|
||||
val TYPE any OPTIONAL
|
||||
kind TYPE string OPTIONAL
|
||||
previous LIKE previous OPTIONAL
|
||||
PREFERRED PARAMETER val.
|
||||
|
||||
|
@ -210,8 +191,6 @@ CLASS z2ui5_lcl_utility IMPLEMENTATION.
|
|||
ms_error-s_msg-message = val.
|
||||
ENDTRY.
|
||||
|
||||
ms_error-kind = kind.
|
||||
|
||||
TRY.
|
||||
ms_error-uuid = get_uuid( ).
|
||||
CATCH cx_root ##CATCH_ALL.
|
||||
|
@ -2040,6 +2019,18 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
|
|||
|
||||
ENDMETHOD.
|
||||
|
||||
METHOD z2ui5_if_view~horizontal_layout.
|
||||
|
||||
result = _generic(
|
||||
name = `HorizontalLayout`
|
||||
ns = `l`
|
||||
t_prop = VALUE #(
|
||||
( n = `class` v = class )
|
||||
( n = `width` v = width )
|
||||
) ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
METHOD z2ui5_if_view~vertical_layout.
|
||||
|
||||
result = _generic(
|
||||
|
@ -2069,7 +2060,8 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
|
|||
|
||||
METHOD z2ui5_if_view~grid_data.
|
||||
|
||||
result = _generic(
|
||||
result = me.
|
||||
_generic(
|
||||
name = `GridData`
|
||||
ns = `l`
|
||||
t_prop = VALUE #(
|
||||
|
@ -2204,6 +2196,8 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
|
|||
( n = `label` v = label )
|
||||
( n = `secondaryLabel` v = secondarylabel )
|
||||
( n = `value` v = value )
|
||||
( n = `displayedValue` v = displayedvalue )
|
||||
( n = `selected` v = _=>get_json_boolean( selected ) )
|
||||
) ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
@ -2211,7 +2205,7 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
|
|||
METHOD z2ui5_if_view~points.
|
||||
|
||||
result = _generic(
|
||||
name = `Points`
|
||||
name = `points`
|
||||
ns = `mchart`
|
||||
t_prop = VALUE #(
|
||||
) ).
|
||||
|
@ -2220,15 +2214,16 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
|
|||
|
||||
METHOD z2ui5_if_view~radial_micro_chart.
|
||||
|
||||
result = _generic(
|
||||
name = `RadialMicorChart`
|
||||
ns = `mchart`
|
||||
t_prop = VALUE #(
|
||||
( n = `percentage` v = percentage )
|
||||
( n = `press` v = press )
|
||||
( n = `sice` v = sice )
|
||||
( n = `valueColor` v = valuecolor )
|
||||
) ).
|
||||
result = me.
|
||||
_generic(
|
||||
name = `RadialMicroChart`
|
||||
ns = `mchart`
|
||||
t_prop = VALUE #(
|
||||
( n = `percentage` v = percentage )
|
||||
( n = `press` v = press )
|
||||
( n = `sice` v = sice )
|
||||
( n = `valueColor` v = valuecolor )
|
||||
) ).
|
||||
|
||||
ENDMETHOD.
|
||||
|
||||
|
@ -2677,7 +2672,7 @@ CLASS z2ui5_lcl_system_runtime IMPLEMENTATION.
|
|||
ENDTRY.
|
||||
|
||||
LOOP AT result->ms_db-t_attri REFERENCE INTO DATA(lr_attri)
|
||||
WHERE bind_type = z2ui5_if_view=>cs-bind_type-two_way.
|
||||
WHERE bind_type = z2ui5_if_view=>cs-bind_type-two_way.
|
||||
|
||||
FIELD-SYMBOLS <attribute> TYPE any.
|
||||
DATA(lv_name) = c_prefix && to_upper( lr_attri->name ).
|
||||
|
|
|
@ -63,6 +63,13 @@ INTERFACE z2ui5_if_view
|
|||
RETURNING
|
||||
VALUE(result) TYPE REF TO z2ui5_if_view.
|
||||
|
||||
METHODS horizontal_layout
|
||||
IMPORTING
|
||||
class TYPE clike OPTIONAL
|
||||
width TYPE clike OPTIONAL
|
||||
RETURNING
|
||||
VALUE(result) TYPE REF TO z2ui5_if_view.
|
||||
|
||||
METHODS flex_box
|
||||
IMPORTING
|
||||
class TYPE clike OPTIONAL
|
||||
|
@ -278,6 +285,8 @@ INTERFACE z2ui5_if_view
|
|||
label TYPE clike OPTIONAL
|
||||
value TYPE clike OPTIONAL
|
||||
secondarylabel TYPE clike OPTIONAL
|
||||
displayedvalue TYPE clike OPTIONAL
|
||||
selected TYPE clike OPTIONAL
|
||||
RETURNING
|
||||
VALUE(result) TYPE REF TO z2ui5_if_view.
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user