mirror of
https://github.com/abap2UI5/abap2UI5.git
synced 2025-04-29 02:58:20 +08:00
2ebee1f190
* view definition * update view * xml view * bugfix startapp * update view * view update * update view extensions * view extension
197 lines
8.7 KiB
ABAP
197 lines
8.7 KiB
ABAP
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| &&
|
|
|
|
`<html><head><style>` && |\n| &&
|
|
`body {background-color: powderblue;}` && |\n| &&
|
|
`h1 {color: blue;}` && |\n| &&
|
|
`p {color: red;}` && |\n| &&
|
|
`</style>` &&
|
|
`</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</h1>` && |\n| &&
|
|
`<p>This is a paragraph.</p>` && |\n| &&
|
|
`<h1>My First JavaScript</h1>` && |\n| &&
|
|
`<button type="button" onclick="myFunction()">` && |\n| &&
|
|
`Click me to display Date and Time.</button>` && |\n| &&
|
|
`<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><canvas id="canvas" width="500" height="300"></canvas>` && |\n| &&
|
|
`<script> debugger; let 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( ) { sap.z2ui5.oView.getController().onEvent({ 'EVENT' : 'POST', 'METHOD' : 'UPDATE' }, 'this is my data' ) }` && |\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>` && |\n| &&
|
|
`</html> ` && |\n| &&
|
|
`</mvc:View>`.
|
|
|
|
|
|
|
|
ENDMETHOD.
|
|
ENDCLASS.
|