bugfixes and demos (#170)

* demos

* demos

* abaplint
This commit is contained in:
oblomov 2023-04-12 11:35:16 +02:00
parent 7c7834b1e2
commit e513b5452d
13 changed files with 447 additions and 302 deletions

View File

@ -79,28 +79,34 @@ CLASS z2ui5_cl_app_demo_00 IMPLEMENTATION.
)->button( text = 'Popups & Flow Logic' press = client->_event( 'z2ui5_cl_app_demo_12' )
)->button( text = 'Popover' press = client->_event( 'z2ui5_cl_app_demo_26' )
).
*
grid->simple_form( title = 'HowTo - Messages' layout = 'ResponsiveGridLayout' )->content( 'form'
)->button( text = 'Toast, Box & Strip' press = client->_event( 'z2ui5_cl_app_demo_08' )
)->button( text = 'Illustrated Message' press = client->_event( 'z2ui5_cl_app_demo_33' )
)->button( text = 'T100 & bapiret popup' press = client->_event( 'z2ui5_cl_app_demo_34' )
)->button( text = 'Message Manager' press = client->_event( 'z2ui5_cl_app_demo_38' )
).
grid->simple_form( title = 'HowTo - Layouts' layout = 'ResponsiveGridLayout' )->content( 'form'
)->button( text = 'Layout (Header, Footer, Grid)' press = client->_event( 'z2ui5_cl_app_demo_10' )
)->button( text = 'Object Page' press = client->_event( 'z2ui5_cl_app_demo_17' )
)->button( text = 'Dynamic Page' press = client->_event( 'z2ui5_cl_app_demo_30' )
* )->button( text = 'Split App' press = client->_event( 'z2ui5_cl_app_demo_17' )
).
*
grid->simple_form( title = 'HowTo - Extensions' layout = 'ResponsiveGridLayout' )->content( 'form'
grid->simple_form( title = 'HowTo - Extension II' layout = 'ResponsiveGridLayout' )->content( 'form'
)->button( text = 'Views - Normal, Generic, XML' press = client->_event( 'z2ui5_cl_app_demo_23' )
)->button( text = 'Import UI5-XML-View' press = client->_event( 'z2ui5_cl_app_demo_31' )
)->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_32 ' )
)->button( text = 'Custom Control' press = client->_event( 'z2ui5_cl_app_demo_37' )
).
grid->simple_form( title = 'HowTo - Messages' layout = 'ResponsiveGridLayout' )->content( 'form'
)->button( text = 'Toast, Box & Strip' press = client->_event( 'z2ui5_cl_app_demo_08' )
)->button( text = 'Illustrated Message' press = client->_event( 'z2ui5_cl_app_demo_33' )
)->button( text = 'T100 & bapiret popup' press = client->_event( 'z2ui5_cl_app_demo_34' )
)->button( text = 'Message Manager' press = client->_event( 'z2ui5_cl_app_demo_38' )
grid->simple_form( title = 'HowTo - Extension II' layout = 'ResponsiveGridLayout' )->content( 'form'
)->button( text = 'HTML, JS, CSS' press = client->_event( 'z2ui5_cl_app_demo_32' )
)->button( text = 'Canvas & SVG' press = client->_event( 'z2ui5_cl_app_demo_36' )
)->button( text = 'ext. Library' press = client->_event( 'z2ui5_cl_app_demo_40' )
).
DATA(form) = page->grid( 'L9 M12 S12'
)->content( 'layout'
)->simple_form( 'Demos I'

View File

@ -97,7 +97,7 @@ CLASS z2ui5_cl_app_demo_23 IMPLEMENTATION.
` > <Link ` && |\n| &&
` text="Source_Code" ` && |\n| &&
` target="_blank" ` && |\n| &&
` href="<system>sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n| &&
` href="&lt;system&gt;sap/bc/adt/oo/classes/Z2UI5_CL_APP_DEMO_23/source/main" ` && |\n| &&
` /></headerContent> <f:SimpleForm ` && |\n| &&
` title="Form Title" ` && |\n| &&
` > <f:content ` && |\n| &&

View File

@ -1,153 +0,0 @@
CLASS z2ui5_cl_app_demo_29 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
data mv_value type string.
DATA product TYPE string.
DATA quantity TYPE i.
DATA input21 TYPE string.
DATA input22 TYPE string.
DATA input41 TYPE string.
PROTECTED SECTION.
data client TYPE REF TO z2ui5_if_client.
DATA:
BEGIN OF app,
check_initialized TYPE abap_bool,
view_main TYPE string,
view_popup TYPE string,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
END OF app.
METHODS z2ui5_on_init.
METHODS z2ui5_on_event.
METHODS z2ui5_on_render.
PRIVATE SECTION.
ENDCLASS.
CLASS Z2UI5_CL_APP_DEMO_29 IMPLEMENTATION.
METHOD z2ui5_if_app~controller.
me->client = client.
app-get = client->get( ).
app-view_popup = ``.
IF app-check_initialized = abap_false.
app-check_initialized = abap_true.
z2ui5_on_init( ).
ENDIF.
IF app-get-event IS NOT INITIAL.
z2ui5_on_event( ).
ENDIF.
z2ui5_on_render( ).
client->set_next( app-next ).
CLEAR app-get.
CLEAR app-next.
ENDMETHOD.
METHOD z2ui5_on_event.
CASE app-get-event.
WHEN 'POST'.
client->popup_message_toast( app-get-event_data ).
WHEN 'MYCC'.
client->popup_message_toast( 'MYCC event ' && mv_value ).
WHEN 'BACK'.
client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
ENDCASE.
ENDMETHOD.
METHOD z2ui5_on_init.
product = 'tomato'.
quantity = '500'.
app-view_main = 'VIEW_MAIN'.
input41 = 'faasdfdfsaVIp'.
input21 = '40'.
input22 = '40'.
mv_value = 'test'.
ENDMETHOD.
METHOD z2ui5_on_render.
app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n| &&
` xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n| &&
` xmlns:z2ui5="z2ui5" xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n| &&
` ><m:Button ` && |\n| &&
` text="back" ` && |\n| &&
` press="` && client->_event( 'BACK' ) && `" ` && |\n| &&
` class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n| &&
` <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n| &&
`<html><head><style>` && |\n| &&
`body {background-color: powderblue;}` && |\n| &&
`h1 {color: blue;}` && |\n| &&
`p {color: red;}` && |\n| &&
`</style>` &&
`</head>` && |\n| &&
`<body>` && |\n| &&
`<h1>This is a heading with css</h1>` && |\n| &&
`<p>This is a paragraph with css.</p>` && |\n| &&
`<h1>My First JavaScript</h1>` && |\n| &&
`<button type="button" onclick="myFunction()">` && |\n| &&
`run javascript code sent from the backend.</button>` && |\n| &&
`<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n| &&
`<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n| &&
` baseProfile="full"` && |\n| &&
` width="500" height="500"` && |\n| &&
` xmlns="http://www.w3.org/2000/svg">` && |\n| &&
` <rect width="100%" height="100%" />` && |\n| &&
` <circle id="circle" cx="100" cy="100" r="80" />` && |\n| &&
` </svg>` && |\n| &&
`<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n| &&
`<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n| &&
` if (canvas.getContext){` && |\n| &&
`let context = canvas.getContext('2d');` && |\n| &&
`context.fillStyle = 'rgb(200,0,0)';` && |\n| &&
`context.fillRect (10, 10, 80, 80);` && |\n| &&
`context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n| &&
`context.fillRect (100, 10, 80, 80);` && |\n| &&
`context.strokeStyle = 'rgb(200,0,0)';` && |\n| &&
`context.strokeRect (190, 10, 80, 80);` && |\n| &&
`context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n| &&
` context.strokeRect (280, 10, 80, 80);` && |\n| &&
` context.fillStyle = 'rgb(200,0,0)';` && |\n| &&
` context.fillRect (370, 10, 80, 80);` && |\n| &&
` context.clearRect (380, 20, 60, 20);` && |\n| &&
` context.fillRect (390, 25, 10, 10);` && |\n| &&
` context.fillRect (420, 25, 10, 10);` && |\n| &&
` context.clearRect (385, 60, 50, 10); } ` && |\n| &&
` function myFunction( ) { alert( 'button pressed' ) }` && |\n| &&
` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n| &&
`</script></body>` && |\n| &&
`</html> ` && |\n| &&
`</mvc:View>`.
ENDMETHOD.
ENDCLASS.

View File

@ -14,6 +14,7 @@ CLASS z2ui5_cl_app_demo_31 DEFINITION PUBLIC.
check_initialized TYPE abap_bool,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
popup type string,
END OF app.
METHODS z2ui5_on_init.
@ -33,6 +34,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
app-get = client->get( ).
me->client = client.
app-popup = ``.
IF app-check_initialized = abap_false.
app-check_initialized = abap_true.
@ -60,8 +62,9 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
WHEN 'BACK'.
client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
WHEN 'POPUP'.
app-popup = 'TEST'.
WHEN 'DATA'.
client->popup_message_box( 'Event raised value:' && mv_value ).
ENDCASE.
ENDMETHOD.
@ -93,8 +96,8 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n| &&
` subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title" press="` && client->_event( 'DATA' ) && `"` && |\n| &&
` subheader="Subtitle" frameType= "TwoByHalf">` && |\n| &&
` <TileContent />` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
@ -164,6 +167,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
METHOD z2ui5_on_render_popup.
if app-popup = `TEST`.
app-next-xml_popup = `<core:FragmentDefinition` && |\n| &&
` xmlns="sap.m"` && |\n| &&
` xmlns:core="sap.ui.core">` && |\n| &&
@ -205,6 +209,7 @@ CLASS z2ui5_cl_app_demo_31 IMPLEMENTATION.
` </ViewSettingsDialog>` && |\n| &&
`</core:FragmentDefinition>`.
endif.
ENDMETHOD.
ENDCLASS.

View File

@ -94,30 +94,6 @@ CLASS Z2UI5_CL_APP_DEMO_32 IMPLEMENTATION.
METHOD z2ui5_on_render.
* app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n| &&
* ` xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n| &&
* ` xmlns:z2ui5="z2ui5" xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n| &&
* ` ><m:Button ` && |\n| &&
* ` text="back" ` && |\n| &&
* ` press="` && client->_event( 'BACK' ) && `" ` && |\n| &&
* ` class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n| &&
* ` <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n| &&
* `<html><head><style>` && |\n| &&
* `body {background-color: powderblue;}` && |\n| &&
* `h1 {color: blue;}` && |\n| &&
* `p {color: red;}` && |\n| &&
* `</style>` &&
* `</head>` && |\n| &&
* `<body>` && |\n| &&
* `<h1>This is a heading with css</h1>` && |\n| &&
* `<p>This is a paragraph with css.</p>` && |\n| &&
* `<h1>My First JavaScript</h1>` && |\n| &&
* `<button type="button">send</button>` && |\n| &&
* `<Input id='input' value='frontend data' /> ` &&
* `</body>` && |\n| &&
* `</html> ` && |\n| &&
* `</mvc:View>`.
app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n| &&
` xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n| &&
` xmlns:z2ui5="z2ui5" xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n| &&

View File

@ -5,7 +5,7 @@
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_APP_DEMO_32</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>extension - html examples</DESCRIPT>
<DESCRIPT>extension - html css js</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>

View File

@ -5,7 +5,7 @@
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_APP_DEMO_36</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>extension - html js 2</DESCRIPT>
<DESCRIPT>extension - canvas and svg</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>

View File

@ -4,25 +4,27 @@ CLASS z2ui5_cl_app_demo_37 DEFINITION PUBLIC.
INTERFACES z2ui5_if_app.
data mv_value type string.
DATA product TYPE string.
DATA quantity TYPE i.
DATA mv_value TYPE string.
DATA input21 TYPE string.
DATA input22 TYPE string.
DATA input41 TYPE string.
PROTECTED SECTION.
data client TYPE REF TO z2ui5_if_client.
DATA client TYPE REF TO z2ui5_if_client.
DATA:
BEGIN OF app,
check_initialized TYPE abap_bool,
view_main TYPE string,
view_popup TYPE string,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
END OF app.
DATA mv_load_cc TYPE abap_bool.
DATA mv_display_cc TYPE abap_bool.
METHODS get_js_custom_control
RETURNING
VALUE(result) TYPE string.
METHODS z2ui5_on_init.
METHODS z2ui5_on_event.
METHODS z2ui5_on_render.
@ -32,7 +34,7 @@ ENDCLASS.
CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
CLASS z2ui5_cl_app_demo_37 IMPLEMENTATION.
METHOD z2ui5_if_app~controller.
@ -66,8 +68,16 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
WHEN 'POST'.
client->popup_message_toast( app-get-event_data ).
WHEN 'MYCC'.
client->popup_message_toast( 'MYCC event ' && mv_value ).
WHEN 'LOAD_CC'.
mv_load_cc = abap_true.
client->popup_message_box( 'Custom Control loaded ' ).
WHEN 'DISPLAY_CC'.
mv_display_cc = abap_true.
client->popup_message_box( 'Custom Control displayed ' ).
WHEN 'MYCC'.
client->popup_message_toast( `Custom Control input: ` && mv_value ).
WHEN 'BACK'.
client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
@ -79,16 +89,6 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
METHOD z2ui5_on_init.
product = 'tomato'.
quantity = '500'.
app-view_main = 'VIEW_MAIN'.
input41 = 'faasdfdfsaVIp'.
input21 = '40'.
input22 = '40'.
mv_value = 'test'.
ENDMETHOD.
@ -102,96 +102,66 @@ CLASS Z2UI5_CL_APP_DEMO_37 IMPLEMENTATION.
` press="` && client->_event( 'BACK' ) && `" ` && |\n| &&
` class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n| &&
` <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n| &&
`<html><head><style>` && |\n| &&
`body {background-color: powderblue;}` && |\n| &&
`h1 {color: blue;}` && |\n| &&
`p {color: red;}` && |\n| &&
`</style>` &&
`<m:Button text="Load Custom Control" press="` && client->_event( 'LOAD_CC' ) && `" />` && |\n| &&
`<m:Button text="Display Custom Control" press="` && client->_event( 'DISPLAY_CC' ) && `" />` && |\n| &&
`<html><head> ` &&
`</head>` && |\n| &&
`<body>` && |\n| &&
`<script> debugger; if(!z2ui5.MyCC){ jQuery.sap.declare("z2ui5.MyCC");` && |\n| &&
|\n| &&
` sap.ui.define( [` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` ], function (Control) {` && |\n| &&
` "use strict";` && |\n| &&
|\n| &&
` return Control.extend("z2ui5.MyCC", {` && |\n| &&
|\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` value: { type: "string" }` && |\n| &&
` },` && |\n| &&
` events: {` && |\n| &&
` "change": {` && |\n| &&
` allowPreventDefault: true,` && |\n| &&
` parameters: {}` && |\n| &&
` }` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
|\n| &&
` renderer: function (oRm, oControl) {` && |\n| &&
|\n| &&
` oControl.oInput = new sap.m.Input({` && |\n| &&
` value: oControl.getProperty("value")` && |\n| &&
` });` && |\n| &&
|\n| &&
` oControl.oButton = new sap.m.Button({` && |\n| &&
` text: 'button text',` && |\n| &&
` press: function (oEvent) {` && |\n| &&
` // this.oInput._sTypedInValue` && |\n| &&
` // this.oInput.getProperty( 'value' ) ` && |\n| &&
` this.setProperty("value", this.oInput._sTypedInValue );` && |\n| &&
` this.fireChange();` && |\n| &&
` }.bind(oControl)` && |\n| &&
` });` && |\n| &&
` oRm.renderControl(oControl.oInput);` && |\n| &&
` oRm.renderControl(oControl.oButton);` && |\n| &&
` }` && |\n| &&
` });` && |\n| &&
`}); } </script>` && |\n| &&
|\n| &&
`<h1>This is a heading with css</h1>` && |\n| &&
`<p>This is a paragraph with css.</p>` && |\n| &&
`<h1>My First JavaScript</h1>` && |\n| &&
`<button type="button" onclick="myFunction()">` && |\n| &&
`run javascript code sent from the backend.</button>` && |\n| &&
`<button type="button" onclick="myFunction2()">sent data to backend and come back</button>` && |\n| &&
`<Input id='input' value='frontend data' /><h1>This is SVG</h1><p id="demo"></p><svg id="svg" version="1.1"` && |\n| &&
` baseProfile="full"` && |\n| &&
` width="500" height="500"` && |\n| &&
` xmlns="http://www.w3.org/2000/svg">` && |\n| &&
` <rect width="100%" height="100%" />` && |\n| &&
` <circle id="circle" cx="100" cy="100" r="80" />` && |\n| &&
` </svg>` && |\n| &&
`<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /></div><h1>This is canvas</h1><canvas id="canvas" width="500" height="300"></canvas>` && |\n| &&
`<script> debugger; var canvas = document.getElementById(sap.z2ui5.oView.createId( 'canvas' ));` && |\n| &&
` if (canvas.getContext){` && |\n| &&
`let context = canvas.getContext('2d');` && |\n| &&
`context.fillStyle = 'rgb(200,0,0)';` && |\n| &&
`context.fillRect (10, 10, 80, 80);` && |\n| &&
`context.fillStyle = 'rgba(0, 0, 200, 0.5)';` && |\n| &&
`context.fillRect (100, 10, 80, 80);` && |\n| &&
`context.strokeStyle = 'rgb(200,0,0)';` && |\n| &&
`context.strokeRect (190, 10, 80, 80);` && |\n| &&
`context.strokeStyle = 'rgba(0, 0, 200, 0.5)';` && |\n| &&
` context.strokeRect (280, 10, 80, 80);` && |\n| &&
` context.fillStyle = 'rgb(200,0,0)';` && |\n| &&
` context.fillRect (370, 10, 80, 80);` && |\n| &&
` context.clearRect (380, 20, 60, 20);` && |\n| &&
` context.fillRect (390, 25, 10, 10);` && |\n| &&
` context.fillRect (420, 25, 10, 10);` && |\n| &&
` context.clearRect (385, 60, 50, 10); } ` && |\n| &&
` function myFunction( ) { alert( 'button pressed' ) }` && |\n| &&
` function myFunction2( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, ` && ' document.getElementById(sap.z2ui5.oView.createId( "input" )).value ' && ` ) }` && |\n| &&
`</script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"> </script>` &&
* ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `" value="` && client->_bind( mv_value ) && `"/>` && |\n| &&
`<body>`.
`</body>` && |\n| &&
`</html> ` && |\n| &&
`</mvc:View>`.
IF mv_load_cc = abap_true.
mv_load_cc = abap_false.
app-next-xml_main = app-next-xml_main && get_js_custom_control( ).
ENDIF.
IF mv_display_cc = abap_true.
app-next-xml_main = app-next-xml_main && ` <z2ui5:MyCC change=" ` && client->_event( 'MYCC' ) && `" value="` && client->_bind( mv_value ) && `"/>`.
ENDIF.
app-next-xml_main = app-next-xml_main && `</body>` && |\n| &&
`</html> ` && |\n| &&
`</mvc:View>`.
ENDMETHOD.
METHOD get_js_custom_control.
result = `<script>if(!z2ui5.MyCC){ jQuery.sap.declare("z2ui5.MyCC");` && |\n| &&
` sap.ui.define( [` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` ], function (Control) {` && |\n| &&
` "use strict";` && |\n| &&
` return Control.extend("z2ui5.MyCC", {` && |\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` value: { type: "string" }` && |\n| &&
` },` && |\n| &&
` events: {` && |\n| &&
` "change": {` && |\n| &&
` allowPreventDefault: true,` && |\n| &&
` parameters: {}` && |\n| &&
` }` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
` renderer: function (oRm, oControl) {` && |\n| &&
` oControl.oInput = new sap.m.Input({` && |\n| &&
` value: oControl.getProperty("value")` && |\n| &&
` });` && |\n| &&
` oControl.oButton = new sap.m.Button({` && |\n| &&
` text: 'button text',` && |\n| &&
` press: function (oEvent) {` && |\n| &&
` debugger;` && |\n| &&
* ` this.setProperty("value", this.oInput._sTypedInValue )` && |\n| &&
` this.setProperty("value", this.oInput.getProperty( 'value') )` && |\n| &&
` this.fireChange();` && |\n| &&
` }.bind(oControl)` && |\n| &&
` });` && |\n| &&
` oRm.renderControl(oControl.oInput);` && |\n| &&
` oRm.renderControl(oControl.oButton);` && |\n| &&
` }` && |\n| &&
` });` && |\n| &&
`}); } </script>`.
ENDMETHOD.
ENDCLASS.

View File

@ -0,0 +1,208 @@
CLASS z2ui5_cl_app_demo_39 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA mv_value TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
DATA:
BEGIN OF app,
check_initialized TYPE abap_bool,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
END OF app.
METHODS z2ui5_on_init.
METHODS z2ui5_on_event.
METHODS z2ui5_on_render_main.
METHODS z2ui5_on_render_popup.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_app_demo_39 IMPLEMENTATION.
METHOD z2ui5_if_app~controller.
app-get = client->get( ).
me->client = client.
IF app-check_initialized = abap_false.
app-check_initialized = abap_true.
z2ui5_on_init( ).
ENDIF.
IF app-get-event IS NOT INITIAL.
z2ui5_on_event( ).
ENDIF.
z2ui5_on_render_main( ).
z2ui5_on_render_popup( ).
client->set_next( app-next ).
CLEAR app-get.
CLEAR app-next.
ENDMETHOD.
METHOD z2ui5_on_event.
CASE app-get-event.
WHEN 'BACK'.
client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
WHEN 'POPUP'.
client->popup_message_box( 'Event raised value:' && mv_value ).
ENDCASE.
ENDMETHOD.
METHOD z2ui5_on_init.
mv_value = '200'.
ENDMETHOD.
METHOD z2ui5_on_render_main.
app-next-xml_main = `<mvc:View controllerName="sap.m.sample.GenericTileAsLaunchTile.Page"` && |\n| &&
`xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"` && |\n| &&
` xmlns:form="sap.ui.layout.form">` && |\n| &&
` <form:SimpleForm editable="true" width="40rem">` && |\n| &&
` <Label text="Loading time" />` && |\n| &&
` <Input id="loadingMinSeconds" width="8rem" type="Number" description="seconds" value="-1"/>` && |\n| &&
` <Button text="Start loading" type="Emphasized" press="onFormSubmit"/>` && |\n| &&
` </form:SimpleForm> ` && |\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" press="onPress"` && |\n| &&
` frameType="OneByHalf" subheader="Subtitle">` && |\n| &&
` <TileContent>` && |\n| &&
` <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n| &&
` subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n| &&
` <TileContent />` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type"` && |\n| &&
` subheader="Subtitle" press="press" frameType= "TwoByHalf">` && |\n| &&
` <TileContent unit="EUR" footer="Current Quarter">` && |\n| &&
` <ImageContent src="sap-icon://home-share" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Right click to open in new tab"` && |\n| &&
` subheader="Link tile" press="press" url="https://www.sap.com/">` && |\n| &&
` <TileContent>` && |\n| &&
` <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n| &&
` subheader="Subtitle" press="press">` && |\n| &&
` <TileContent unit="EUR" footer="Current Quarter">` && |\n| &&
` <ImageContent src="sap-icon://home-share" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type"` && |\n| &&
` subheader="Subtitle" press="press">` && |\n| &&
` <TileContent>` && |\n| &&
` <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/SAPLogoLargeTile_28px_height.png" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Manage Activity Master Data Type With a Long Title Without an Icon"` && |\n| &&
` subheader="Subtitle Launch Tile" mode="HeaderMode" press="press">` && |\n| &&
` <TileContent unit="EUR" footer="Current Quarter" />` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Jessica D. Prince Senior Consultant"` && |\n| &&
` subheader="Department" press="press" appShortcut = "shortcut" systemInfo = "systeminfo">` && |\n| &&
` <TileContent>` && |\n| &&
` <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/ProfileImage_LargeGenTile.png" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n| &&
` press="press" frameType= "OneByHalf">` && |\n| &&
` <TileContent unit="EUR" footer="Current Quarter">` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Sales Fulfillment Application Title"` && |\n| &&
` press="press" frameType= "TwoByHalf">` && |\n| &&
` <TileContent unit="EUR" footer="Current Quarter">` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
|\n| &&
` <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Jessica D. Prince Senior Consultant"` && |\n| &&
` subheader="Department" press="press" frameType="TwoByHalf">` && |\n| &&
` <TileContent>` && |\n| &&
` <ImageContent src="test-resources/sap/m/demokit/sample/GenericTileAsLaunchTile/images/ProfileImage_LargeGenTile.png" />` && |\n| &&
` </TileContent>` && |\n| &&
` </GenericTile>` && |\n| &&
`</mvc:View>`.
ENDMETHOD.
METHOD z2ui5_on_render_popup.
app-next-xml_popup = `<core:FragmentDefinition` && |\n| &&
` xmlns="sap.m"` && |\n| &&
` xmlns:core="sap.ui.core">` && |\n| &&
` <ViewSettingsDialog` && |\n| &&
` confirm="handleConfirm">` && |\n| &&
` <sortItems>` && |\n| &&
` <ViewSettingsItem text="Field 1" key="1" selected="true" />` && |\n| &&
` <ViewSettingsItem text="Field 2" key="2" />` && |\n| &&
` <ViewSettingsItem text="Field 3" key="3" />` && |\n| &&
` </sortItems>` && |\n| &&
` <groupItems>` && |\n| &&
` <ViewSettingsItem text="Field 1" key="1" selected="true" />` && |\n| &&
` <ViewSettingsItem text="Field 2" key="2" />` && |\n| &&
` <ViewSettingsItem text="Field 3" key="3" />` && |\n| &&
` </groupItems>` && |\n| &&
` <filterItems>` && |\n| &&
` <ViewSettingsFilterItem text="Field1" key="1">` && |\n| &&
` <items>` && |\n| &&
` <ViewSettingsItem text="Value A" key="1a" />` && |\n| &&
` <ViewSettingsItem text="Value B" key="1b" />` && |\n| &&
` <ViewSettingsItem text="Value C" key="1c" />` && |\n| &&
` </items>` && |\n| &&
` </ViewSettingsFilterItem>` && |\n| &&
` <ViewSettingsFilterItem text="Field2" key="2">` && |\n| &&
` <items>` && |\n| &&
` <ViewSettingsItem text="Value A" key="2a" />` && |\n| &&
` <ViewSettingsItem text="Value B" key="2b" />` && |\n| &&
` <ViewSettingsItem text="Value C" key="2c" />` && |\n| &&
` </items>` && |\n| &&
` </ViewSettingsFilterItem>` && |\n| &&
` <ViewSettingsFilterItem text="Field3" key="3">` && |\n| &&
` <items>` && |\n| &&
` <ViewSettingsItem text="Value A" key="3a" />` && |\n| &&
` <ViewSettingsItem text="Value B" key="3b" />` && |\n| &&
` <ViewSettingsItem text="Value C" key="3c" />` && |\n| &&
` </items>` && |\n| &&
` </ViewSettingsFilterItem>` && |\n| &&
` </filterItems>` && |\n| &&
` </ViewSettingsDialog>` && |\n| &&
`</core:FragmentDefinition>`.
ENDMETHOD.
ENDCLASS.

View File

@ -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_APP_DEMO_39</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>extension - import xml view 2</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -0,0 +1,117 @@
CLASS z2ui5_cl_app_demo_40 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA mv_barcode TYPE string.
DATA mv_load_lib TYPE abap_bool.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
DATA:
BEGIN OF app,
check_initialized TYPE abap_bool,
view_main TYPE string,
view_popup TYPE string,
get TYPE z2ui5_if_client=>ty_s_get,
next TYPE z2ui5_if_client=>ty_s_next,
END OF app.
METHODS z2ui5_on_init.
METHODS z2ui5_on_event.
METHODS z2ui5_on_render.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_app_demo_40 IMPLEMENTATION.
METHOD z2ui5_if_app~controller.
me->client = client.
app-get = client->get( ).
app-view_popup = ``.
IF app-check_initialized = abap_false.
app-check_initialized = abap_true.
z2ui5_on_init( ).
ENDIF.
IF app-get-event IS NOT INITIAL.
z2ui5_on_event( ).
ENDIF.
z2ui5_on_render( ).
client->set_next( app-next ).
CLEAR app-get.
CLEAR app-next.
ENDMETHOD.
METHOD z2ui5_on_event.
CASE app-get-event.
WHEN 'LOAD_BC'.
client->popup_message_box( 'JSBarcode Library loaded').
mv_load_lib = abap_true.
WHEN 'BACK'.
client->nav_app_leave( client->get_app( app-get-id_prev_app_stack ) ).
ENDCASE.
ENDMETHOD.
METHOD z2ui5_on_init.
ENDMETHOD.
METHOD z2ui5_on_render.
app-next-xml_main = `<mvc:View controllerName="project1.controller.View1"` && |\n| &&
` xmlns:mvc="sap.ui.core.mvc" displayBlock="true"` && |\n| &&
` xmlns:z2ui5="z2ui5" xmlns:m="sap.m" xmlns="http://www.w3.org/1999/xhtml"` && |\n| &&
` ><m:Button ` && |\n| &&
` text="back" ` && |\n| &&
` press="` && client->_event( 'BACK' ) && `" ` && |\n| &&
` class="sapUiContentPadding sapUiResponsivePadding--content"/> ` && |\n| &&
` <m:Link target="_blank" text="Source_Code" href="` && z2ui5_cl_xml_view_helper=>hlp_get_source_code_url( app = me get = client->get( ) ) && `"/>` && |\n| &&
`<html><head>` && |\n| &&
`</head>` && |\n| &&
`<body>` && |\n| &&
`<m:Button text="LoadJSBarcode" press="` && client->_event( 'LOAD_BC' ) && `" />` && |\n| &&
`<m:Input value="` && client->_bind( mv_barcode ) && `" />` && |\n| &&
`<m:Button text="Display Barcode" press="` && client->_event( 'DISPLAY_BC' ) && `" />` && |\n| &&
`<h1>JSBarcode Library</h1>` && |\n| &&
` <svg class="barcode"` && |\n| &&
` jsbarcode-format="upc"` && |\n| &&
` jsbarcode-value="` && mv_barcode && `"` && |\n| &&
` jsbarcode-textmargin="0"` && |\n| &&
` jsbarcode-fontoptions="bold">` && |\n| &&
`</svg>` && |\n|.
IF mv_load_lib = abap_true.
mv_load_lib = abap_false.
app-next-xml_main = app-next-xml_main && `<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"> </script>`.
ENDIF.
app-next-xml_main = app-next-xml_main && `<script> JsBarcode(".barcode").init(); </script>` &&
`</body>` && |\n| &&
`</html> ` && |\n| &&
`</mvc:View>`.
ENDMETHOD.
ENDCLASS.

View File

@ -3,9 +3,9 @@
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_APP_DEMO_29</CLSNAME>
<CLSNAME>Z2UI5_CL_APP_DEMO_40</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>extension - html js css</DESCRIPT>
<DESCRIPT>extension - ext library</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>