Debugging tools (#745)

* debugging-tools

* Update README.md

* abaplint fix

---------

Co-authored-by: Nestor Lara <nlara@nuveplatform.com>
This commit is contained in:
oblomov 2023-12-28 15:44:12 +01:00 committed by GitHub
parent 673e0ab462
commit 28a84bfd0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 188 additions and 184 deletions

View File

@ -32,7 +32,7 @@
2. Displaying Selection Screens & Tables [(SCN - 23.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-output-of-lists-and-tables-toolbar-and-editable-2-3/)<br>
3. Popups, F4-Help, Messages & Controller Logic [(SCN - 30.03.2023)](https://blogs.sap.com/2023/03/30/abap2ui5-3-4-flow-logic-pop-ups-f4-help/)<br>
4. Advanced Functionality & Demonstrations [(SCN - 02.04.2023)](https://blogs.sap.com/2023/04/02/abap2ui5-4-5-additional-features-demos/)<br>
5. Extensions with XML Views, HTML, JS & CC [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)<br>
5. Creating UIs with XML Views, HTML, CSS & JavaScript [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)<br>
6. Installation, Configuration & Debugging [(SCN - 14.04.2023)](https://blogs.sap.com/2023/04/14/abap2ui5-6-7-installation-configuration-debugging/)<br>
7. Technical Background: Under the Hood of abap2UI5 [(SCN - 26.04.2023)](https://blogs.sap.com/2023/04/26/abap2ui5-7-7-technical-background-under-the-hood-of-abap2ui5/)<br>
8. Repository Organization: Working with abapGit, abaplint & open-abap [(SCN - 21.08.2023)](https://blogs.sap.com/2023/08/21/abap2ui5-a1-repository-setup-with-abapgit-abaplint-open-abap/)<br>

View File

@ -437,6 +437,7 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
DATA(lt_config) = t_config.
IF lt_config IS INITIAL.
lt_config = VALUE #(
* ( n = `src` v = `https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js` )
( n = `src` v = `https://sdk.openui5.org/resources/sap-ui-cachebuster/sap-ui-core.js` )
( n = `data-sap-ui-theme` v = `sap_horizon` )
( n = `data-sap-ui-async` v = `true` )
@ -489,7 +490,7 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
r_result = r_result && `` &&
z2ui5_cl_fw_cc_debugging_tools=>get_js( ) &&
` sap.ui.require(["z2ui5/DebuggingTools","z2ui5/Controller"], (DebuggingTools) => { sap.z2ui5.DebuggingTools = new DebuggingTools(); ` && |\n| &&
` sap.z2ui5.DebuggingTools.activateLogging(` && z2ui5_cl_util_func=>boolean_abap_2_json( check_debugging ) && ` );` && |\n| &&
* ` sap.z2ui5.DebuggingTools.activateLogging(` && z2ui5_cl_util_func=>boolean_abap_2_json( check_debugging ) && ` );` && |\n| &&
` });`.
ENDIF.
r_result = r_result && ` ` && |\n| &&

View File

@ -22,64 +22,32 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
result = `` && |\n| &&
`sap.ui.define( "z2ui5/DebuggingTools" ,[` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` "z2ui5/Controller",` && |\n| &&
` "sap/ui/core/Fragment",` && |\n| &&
` "sap/ui/model/json/JSONModel"` && |\n| &&
`], (Control, Controller, Fragment, JSONModel) => {` && |\n| &&
` "use strict";` && |\n| &&
|\n| &&
` return Control.extend("z2ui5.DebuggingTools", {` && |\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` checkLoggingActive: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: ""` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
` events: {` && |\n| &&
` "finished": {` && |\n| &&
` allowPreventDefault: true,` && |\n| &&
` parameters: {},` && |\n| &&
` }` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
|\n| &&
` async show() {` && |\n| &&
|\n| &&
` var oFragmentController = {` && |\n| &&
` onItemSelect:function(oEvent){` && |\n| &&
` let selItem = oEvent.getSource().getSelectedItem();` && |\n| &&
` ` && |\n| &&
` if (selItem == 'MODEL'){` && |\n| &&
` oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oResponse.OVIEWMODEL, null, 3);` && |\n| &&
` oEvent.getSource().getModel().oData.type = 'json';` && |\n| &&
` oEvent.getSource().getModel().refresh();` && |\n| &&
` return;` && |\n| &&
` } ` && |\n| &&
` if (selItem == 'VIEW'){` && |\n| &&
` var XML = this.prettifyXml( sap.z2ui5.oResponse.PARAMS.S_VIEW.XML );` && |\n| &&
` oEvent.getSource().getModel().oData.value = XML;` && |\n| &&
` oEvent.getSource().getModel().oData.type = 'xml';` && |\n| &&
` oEvent.getSource().getModel().refresh();` && |\n| &&
` return;` && |\n| &&
` } ` && |\n| &&
` if (selItem == 'PLAIN'){` && |\n| &&
` oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oResponse, null, 3 );` && |\n| &&
` oEvent.getSource().getModel().oData.type = 'json';` && |\n| &&
` oEvent.getSource().getModel().refresh();` && |\n| &&
` return;` && |\n| &&
` } ` && |\n| &&
` if (selItem == 'REQUEST'){` && |\n| &&
` oEvent.getSource().getModel().oData.value = JSON.stringify( sap.z2ui5.oBody , null, 3 );` && |\n| &&
` oEvent.getSource().getModel().oData.type = 'json';` && |\n| &&
` oEvent.getSource().getModel().refresh();` && |\n| &&
` return;` && |\n| &&
` } ` && |\n| &&
` },` && |\n| &&
|\n| &&
` prettifyXml (sourceXml) ` && |\n| &&
` {` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` "sap/ui/core/Fragment",` && |\n| &&
` "sap/ui/model/json/JSONModel"` && |\n| &&
`], (Control, Fragment, JSONModel) => {` && |\n| &&
` "use strict";` && |\n| &&
|\n| &&
` return Control.extend("project1.control.DebuggingTools", {` && |\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` checkLoggingActive: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: ""` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
` events: {` && |\n| &&
` "finished": {` && |\n| &&
` allowPreventDefault: true,` && |\n| &&
` parameters: {},` && |\n| &&
` }` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
|\n| &&
` async show() {` && |\n| &&
|\n| &&
` var oFragmentController = {` && |\n| &&
` prettifyXml: function (sourceXml) { ` && |\n| &&
` var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');` && |\n| &&
` // describes how we want to modify the XML - indent everything` && |\n| &&
` var sParse = unescape( '%3Cxsl%3Astylesheet%20xmlns%3Axsl%3D%22http%3A//www.w3.org/1999/XSL/Transform%22%3E%0A%20%20%3Cxsl%3Astrip-space%20elements%3D%22*%22/%3E%0A%20%20%3Cxsl%3Atemplate%20match%3D%22para%5Bconten` &&
@ -94,130 +62,165 @@ CLASS Z2UI5_CL_FW_CC_DEBUGGING_TOOLS IMPLEMENTATION.
` var resultXml = new XMLSerializer().serializeToString(resultDoc);` && |\n| &&
` return resultXml;` && |\n| &&
` },` && |\n| &&
|\n| &&
` onClose: function(){` && |\n| &&
` this.oDialog.close();` && |\n| &&
|\n| &&
` }` && |\n| &&
` };` && |\n| &&
|\n| &&
* ` let XMLDef = ` && escape( val = ```<core:FragmentDefinition` && |\n| &&
' let XMLDef = atob("PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgICAgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB' &&
'4bWxuczp0bnQ9InNhcC50bnQiCiAgICAgICAgICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiPgogICAgICAgICAgICAgICAgICA8SEJveD4KICAgICAgICAgICAgICA' &&
'gIDx0bnQ6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUmV' &&
'zcG9uc2UiIGljb249InNhcC1pY29uOi8vZW1wbG95ZWUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iUGxhaW4iIGlkPSJQTEFJTiIga2V5PSJQTEFJTiIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVml' &&
'ldyBYTUwiIGlkPSJWSUVXIiBrZXk9IlZJRVciLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlZpZXcgTW9kZWwiIGlkPSJNT0RFTCIga2V5PSJNT0RFTCIgIC8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJ' &&
'WaWV3IFBvcHVwIFhNTCIgaWQ9IlBPUFVQIiBrZXk9IlBPUFVQIiBlbmFibGVkPSJmYWxzZSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVmlldyBOZXN0IFhNTCIgZW5hYmxlZD0iZmFsc2UiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC90bnQ6TmF2aWdhdGl' &&
'vbkxpc3RJdGVtPgogICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpY29uPSJzYXAtaWNvbjovL2J1aWxkaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IkJvZHkiIGlkPSJSRVFVRVN' &&
'UIiBrZXk9IlJFUVVFU1QiIC8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgIDwvdG50OlNpZGVOYXZpZ2F0aW9uPgogICAgICAgICAgICAgICAgICAgIDxlZGl0b3I6Q29kZUVkaXR' &&
'vcgogICAgICAgICAgICAgICAgICAgIHR5cGU9InsvdHlwZX0iCiAgICAgICAgICAgICAgICAgICAgdmFsdWU9J3svdmFsdWV9JwogICAgICAgICAgICAgICAgaGVpZ2h0PSI3MDBweCIgd2lkdGg9IjEyMDBweCIvPiA8L0hCb3g+CiAgICAgICAgICAgICAgIDxmb290ZXI+PFRvb2xiYXI+PEJ1dHRvbiB0ZXh0PSJTZXR1cCIgcHJ' &&
'lc3M9Im9uUHJlc3MiLz48VG9vbGJhclNwYWNlci8+PEJ1dHRvbiB0ZXh0PSJDbG9zZSIgcHJlc3M9Im9uQ2xvc2UiLz48L1Rvb2xiYXI+PC9mb290ZXI+CiAgICAgICAgICAgICAgIDwvRGlhbG9nPgogICAgICAgICAgICA8L2NvcmU6RnJhZ21lbnREZWZpbml0aW9uPg==") ' && |\n| &&
* ` let XMLDef = ``<core:FragmentDefinition` && |\n| &&
* ` xmlns="sap.m"` && |\n| &&
* ` xmlns:mvc="sap.ui.core.mvc"` && |\n| &&
* ` xmlns:core="sap.ui.core"` && |\n| &&
* ` xmlns:tnt="sap.tnt"` && |\n| &&
* ` xmlns:editor="sap.ui.codeeditor">` && |\n| &&
* ` <Dialog title="abap2UI5 - Debugging Tools" stretch="true">` && |\n| &&
* ` <HBox>` && |\n| &&
* ` <tnt:SideNavigation id="sideNavigation" selectedKey="PLAIN" itemSelect="onItemSelect">` && |\n| &&
* ` <tnt:NavigationList>` && |\n| &&
* ` <tnt:NavigationListItem text="Response" icon="sap-icon://employee">` && |\n| &&
* ` <tnt:NavigationListItem text="Plain" id="PLAIN" key="PLAIN"/>` && |\n| &&
* ` <tnt:NavigationListItem text="View XML" id="VIEW" key="VIEW"/>` && |\n| &&
* ` <tnt:NavigationListItem text="View Model" id="MODEL" key="MODEL" />` && |\n| &&
* ` <tnt:NavigationListItem text="View Popup XML" id="POPUP" key="POPUP" enabled="false"/>` && |\n| &&
* ` <tnt:NavigationListItem text="View Nest XML" enabled="false"/>` && |\n| &&
* ` </tnt:NavigationListItem>` && |\n| &&
* ` <tnt:NavigationListItem text="Previous Request" icon="sap-icon://building">` && |\n| &&
* ` <tnt:NavigationListItem text="Body" id="REQUEST" key="REQUEST" />` && |\n| &&
* ` </tnt:NavigationListItem>` && |\n| &&
* ` </tnt:NavigationList>` && |\n| &&
* ` </tnt:SideNavigation>` && |\n| &&
* ` <editor:CodeEditor` && |\n| &&
* ` type="{/type}"` && |\n| &&
* ` value='{/value}'` && |\n| &&
* ` height="700px" width="1200px"/> </HBox>` && |\n| &&
* ` <footer><Toolbar><Button text="Setup" press="onPress"/><ToolbarSpacer/><Button text="Close" press="onClose"/></Toolbar></footer>` && |\n| &&
* ` </Dialog>` && |\n| &&
* ` </core:FragmentDefinition>`` ` &&
`;` && |\n| &&
* format = cl_abap_format=>e_xml_text ) && `;` && |\n| &&
|\n| &&
` if ( this.oFragment ){` && |\n| &&
` this.oFragment.close();` && |\n| &&
` this.oFragment.destroy();` && |\n| &&
` }` && |\n| &&
` this.oFragment = await Fragment.load({` && |\n| &&
` definition : XMLDef,` && |\n| &&
` // name: "project1.control.DevTool",` && |\n| &&
` controller: oFragmentController,` && |\n| &&
` });` && |\n| &&
|\n| &&
` oFragmentController.oDialog = this.oFragment ;` && |\n| &&
` ` && |\n| &&
` let value = JSON.stringify( sap.z2ui5.oResponse, null, 3 );` && |\n| &&
` let oData = { type : 'json' , value : value };` && |\n| &&
` var oModel = new JSONModel(oData);` && |\n| &&
` this.oFragment.setModel(oModel);` && |\n| &&
` this.oFragment.open();` && |\n| &&
|\n| &&
` },` && |\n| &&
|\n| &&
` activateLogging(checkActive) {` && |\n| &&
` document.addEventListener ("keydown", function (zEvent) {` && |\n| &&
` if (zEvent.ctrlKey ) { if ( zEvent.key === "a") { // case sensitive` && |\n| &&
` sap.z2ui5.DebuggingTools.show();` && |\n| &&
` } }` && |\n| &&
` } );` && |\n| &&
` },` && |\n| &&
* ` if (!checkActive) {` && |\n| &&
* ` return;` && |\n| &&
* ` }` && |\n| &&
* ` ` && |\n| &&
* ` sap.z2ui5.onBeforeRoundtrip.push(() => {` && |\n| &&
* ` console.log('Request Object:');` && |\n| &&
* ` console.log(sap.z2ui5.oBody);` && |\n| &&
* ` });` && |\n| &&
* |\n| &&
* ` sap.z2ui5.onAfterRoundtrip.push(() => {` && |\n| &&
* |\n| &&
* ` console.log('Response Object:', sap.z2ui5.oResponse);` && |\n| &&
* |\n| &&
* ` // Destructure for easier access` && |\n| &&
* ` const { S_VIEW, S_POPUP, S_POPOVER, S_VIEW_NEST, S_VIEW_NEST2 } = sap.z2ui5.oResponse.PARAMS;` && |\n| &&
* |\n| &&
* ` // Helper function to log XML` && |\n| &&
* ` const logXML = (label, xml) => {` && |\n| &&
* ` if (xml !== '') {` && |\n| &&
* ` console.log(``${label}:``, xml);` && |\n| &&
* ` }` && |\n| &&
* ` };` && |\n| &&
* |\n| &&
* ` // Log different XML responses` && |\n| &&
* ` logXML('UI5-XML-View', S_VIEW.XML);` && |\n| &&
* ` logXML('UI5-XML-Popup', S_POPUP.XML);` && |\n| &&
* ` logXML('UI5-XML-Popover', S_POPOVER.XML);` && |\n| &&
* ` logXML('UI5-XML-Nest', S_VIEW_NEST.XML);` && |\n| &&
* ` logXML('UI5-XML-Nest2', S_VIEW_NEST2.XML);` && |\n| &&
* |\n| &&
* ` });` && |\n| &&
* |\n| &&
* ` },` && |\n| &&
* |\n| &&
* ` async init() {` && |\n| &&
* |\n| &&
* |\n| &&
* ` },` && |\n| &&
* |\n| &&
* ` exit() {` && |\n| &&
* ` },` && |\n| &&
* |\n| &&
* ` onAfterRendering() {` && |\n| &&
* ` },` && |\n| &&
|\n| &&
` renderer(oRm, oControl) {` && |\n| &&
` }` && |\n| &&
` onItemSelect: function (oEvent) {` && |\n| &&
` let selItem = oEvent.getSource().getSelectedItem();` && |\n| &&
|\n| &&
` if (selItem == 'MODEL') {` && |\n| &&
` debugger; this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oView?.getModel()?.getData(), null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'VIEW') {` && |\n| &&
` debugger; this.displayEditor( oEvent, this.prettifyXml( sap?.z2ui5?.oView?.mProperties?.viewContent ) , 'xml' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'PLAIN') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify(sap.z2ui5.oResponse, null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'REQUEST') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify(sap.z2ui5.oBody, null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'POPUP') {` && |\n| &&
` this.displayEditor( oEvent, this.prettifyXml( sap?.z2ui5?.oResponse?.PARAMS?.S_POPUP?.XML ) , 'xml' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'POPUP_MODEL') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify( sap.z2ui5.oViewPopup.getModel().getData(), null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'POPOVER') {` && |\n| &&
` this.displayEditor( oEvent, sap?.z2ui5?.oResponse?.PARAMS?.S_POPOVER?.XML , 'xml' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'POPOVER_MODEL') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oViewPopover?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'NEST1') {` && |\n| &&
` this.displayEditor( oEvent, sap?.z2ui5?.oViewNest?.mProperties?.viewContent , 'xml' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'NEST1_MODEL') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oViewNest?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'NEST2') {` && |\n| &&
` this.displayEditor( oEvent, sap?.z2ui5?.oViewNest2?.mProperties?.viewContent , 'xml' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
` if (selItem == 'NEST2_MODEL') {` && |\n| &&
` this.displayEditor( oEvent, JSON.stringify( sap?.z2ui5?.oViewNest2?.getModel( )?.getData( ) , null, 3) , 'json' );` && |\n| &&
` return;` && |\n| &&
` }` && |\n| &&
|\n| &&
` },` && |\n| &&
|\n| &&
` displayEditor (oEvent, content, type) {` && |\n| &&
` oEvent.getSource().getModel().oData.value = content;` && |\n| &&
` oEvent.getSource().getModel().oData.type = type;` && |\n| &&
` oEvent.getSource().getModel().refresh();` && |\n| &&
` },` && |\n| &&
|\n| &&
` ` && |\n| &&
|\n| &&
` onClose: function () {` && |\n| &&
` this.oDialog.close();` && |\n| &&
|\n| &&
` }` && |\n| &&
` };` && |\n| &&
|\n| &&
* ` let XMLDef = ``<core:FragmentDefinition` && |\n| &&
* ` xmlns="sap.m"` && |\n| &&
* ` xmlns:mvc="sap.ui.core.mvc"` && |\n| &&
* ` xmlns:core="sap.ui.core"` && |\n| &&
* ` xmlns:tnt="sap.tnt"` && |\n| &&
* ` xmlns:editor="sap.ui.codeeditor">` && |\n| &&
* ` <Dialog title="abap2UI5 - Debugging Tools" stretch="true">` && |\n| &&
* ` <HBox>` && |\n| &&
* ` <tnt:SideNavigation id="sideNavigation" selectedKey="PLAIN" itemSelect="onItemSelect">` && |\n| &&
* ` <tnt:NavigationList>` && |\n| &&
* ` <tnt:NavigationListItem text="Communication" icon="sap-icon://employee">` && |\n| &&
* ` <tnt:NavigationListItem text="Previous Request" id="REQUEST" key="REQUEST" />` && |\n| &&
* ` <tnt:NavigationListItem text="Response" id="PLAIN" key="PLAIN"/>` && |\n| &&
* ` </tnt:NavigationListItem>` && |\n| &&
* ` <tnt:NavigationListItem text="View" icon="sap-icon://employee">` && |\n| &&
* ` <tnt:NavigationListItem text="View (XML)" id="VIEW" key="VIEW"/>` && |\n| &&
* ` <tnt:NavigationListItem text="View Model (JSON)" id="MODEL" key="MODEL" />` && |\n| &&
* ` <tnt:NavigationListItem text="Popup (XML)" id="POPUP" key="POPUP" enabled="{/activePopup}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Popup Model (JSON)" id="POPUP_MODEL" key="POPUP_MODEL" enabled="{/activePopup}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Popover (XML)" id="POPOVER" key="POPOVER" enabled="{/activePopover}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Popover Model (JSON)" id="POPOVER_MODEL" key="POPOVER_MODEL" enabled="{/activePopover}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Nest1 (XML)" id="NEST1" key="NEST1" enabled="{/activeNest1}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Nest1 Model (JSON)" id="NEST1_MODEL" key="NEST1_MODEL" enabled="{/activeNest1}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Nest2 (XML)" id="NEST2" key="NEST2" enabled="{/activeNest2}"/>` && |\n| &&
* ` <tnt:NavigationListItem text="Nest2 Model (JSON)" id="NEST2_MODEL" key="NEST2_MODEL" enabled="{/activeNest2}"/>` && |\n| &&
* ` </tnt:NavigationListItem>` && |\n| &&
* ` </tnt:NavigationList>` && |\n| &&
* ` </tnt:SideNavigation>` && |\n| &&
* ` <editor:CodeEditor` && |\n| &&
* ` type="{/type}"` && |\n| &&
* ` value='{/value}'` && |\n| &&
* ` height="800px" width="1200px"/> </HBox>` && |\n| &&
* ` <footer><Toolbar><ToolbarSpacer/><Button text="Close" press="onClose"/></Toolbar></footer>` && |\n| &&
* ` </Dialog>` && |\n| &&
* ` </core:FragmentDefinition>``;` && |\n| &&
` let XMLDef = ``PGNvcmU6RnJhZ21lbnREZWZpbml0aW9uCiAgICAgICAgICAgIHhtbG5zPSJzYXAubSIKICAgICAgICAgICAgICAgIHhtbG5zOm12Yz0ic2FwLnVpLmNvcmUubXZjIgogICAgICAgICAgICAgICAgeG1sbnM6Y29yZT0ic2FwLnVpLmNvcmUiCiAgICAgICAgICAgICAgICB4bWxuczp`
&&
`0bnQ9InNhcC50bnQiCiAgICAgICAgICAgICAgICB4bWxuczplZGl0b3I9InNhcC51aS5jb2RlZWRpdG9yIj4KICAgICAgICAgICAgICAgICAgPERpYWxvZyB0aXRsZT0iYWJhcDJVSTUgLSBEZWJ1Z2dpbmcgVG9vbHMiIHN0cmV0Y2g9InRydWUiPgogICAgICAgICAgICAgICAgICA8SEJveD4KICAgICAgICAgICAgICAgIDx0bnQ` &&
`6U2lkZU5hdmlnYXRpb24gaWQ9InNpZGVOYXZpZ2F0aW9uIiBzZWxlY3RlZEtleT0iUExBSU4iIGl0ZW1TZWxlY3Q9Im9uSXRlbVNlbGVjdCI+CiAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iQ29tbXVuaWN` &&
`hdGlvbiIgaWNvbj0ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJQcmV2aW91cyBSZXF1ZXN0IiBpZD0iUkVRVUVTVCIga2V5PSJSRVFVRVNUIiAvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGl` &&
`zdEl0ZW0gdGV4dD0iUmVzcG9uc2UiICAgICAgICAgICAgICAgIGlkPSJQTEFJTiIgICAgICAgICBrZXk9IlBMQUlOIi8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0gdGV4dD0iVmlldyIgaWNvbj0` &&
`ic2FwLWljb246Ly9lbXBsb3llZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJWaWV3IChYTUwpIiAgICAgICAgICAgaWQ9IlZJRVciICAgICAgICAgIGtleT0iVklFVyIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0` &&
`gdGV4dD0iVmlldyBNb2RlbCAoSlNPTikiICAgIGlkPSJNT0RFTCIgICAgICAgICBrZXk9Ik1PREVMIiAgLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIChYTUwpIiAgICAgICAgICBpZD0iUE9QVVAiICAgICAgICAga2V5PSJQT1BVUCIgICAgICAgICAgZW5` &&
`hYmxlZD0iey9hY3RpdmVQb3B1cH0iLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcHVwIE1vZGVsIChKU09OKSIgICBpZD0iUE9QVVBfTU9ERUwiICAga2V5PSJQT1BVUF9NT0RFTCIgICAgZW5hYmxlZD0iey9hY3RpdmVQb3B1cH0iLz4KICAgICAgICAgICAgICA` &&
`gICAgICAgICAgICAgIDx0bnQ6TmF2aWdhdGlvbkxpc3RJdGVtIHRleHQ9IlBvcG92ZXIgKFhNTCkiICAgICAgICBpZD0iUE9QT1ZFUiIgICAgICAga2V5PSJQT1BPVkVSIiAgICAgICAgZW5hYmxlZD0iey9hY3RpdmVQb3BvdmVyfSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRudDpOYXZpZ2F0aW9uTGlzdEl0ZW0` &&
`gdGV4dD0iUG9wb3ZlciBNb2RlbCAoSlNPTikiIGlkPSJQT1BPVkVSX01PREVMIiBrZXk9IlBPUE9WRVJfTU9ERUwiICBlbmFibGVkPSJ7L2FjdGl2ZVBvcG92ZXJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSAoWE1MKSIgICAgICAgICAgaWQ9Ik5FU1Q` &&
`xIiAgICAgICAgIGtleT0iTkVTVDEiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MSBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QxX01PREVMIiAgIGtleT0iTkVTVDFfTU9ERUwiICAgIGVuYWJsZWQ` &&
`9InsvYWN0aXZlTmVzdDF9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiAoWE1MKSIgICAgICAgICAgaWQ9Ik5FU1QyIiAgICAgICAgIGtleT0iTkVTVDIiICAgICAgICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9Ii8+CiAgICAgICAgICAgICAgICAgICA` &&
`gICAgICAgICA8dG50Ok5hdmlnYXRpb25MaXN0SXRlbSB0ZXh0PSJOZXN0MiBNb2RlbCAoSlNPTikiICAgaWQ9Ik5FU1QyX01PREVMIiAgIGtleT0iTkVTVDJfTU9ERUwiICAgIGVuYWJsZWQ9InsvYWN0aXZlTmVzdDJ9Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvdG50Ok5hdmlnYXRpb25MaXN0SXRlbT4KICAgICAgICA` &&
`gICAgICAgICAgICA8L3RudDpOYXZpZ2F0aW9uTGlzdD4KICAgICAgICAgICAgICAgIDwvdG50OlNpZGVOYXZpZ2F0aW9uPgogICAgICAgICAgICAgICAgICAgIDxlZGl0b3I6Q29kZUVkaXRvcgogICAgICAgICAgICAgICAgICAgIHR5cGU9InsvdHlwZX0iCiAgICAgICAgICAgICAgICAgICAgdmFsdWU9J3svdmFsdWV9JwogICA` &&
`gICAgICAgICAgICAgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjEyMDBweCIvPiA8L0hCb3g+CiAgICAgICAgICAgICAgIDxmb290ZXI+PFRvb2xiYXI+PFRvb2xiYXJTcGFjZXIvPjxCdXR0b24gdGV4dD0iQ2xvc2UiIHByZXNzPSJvbkNsb3NlIi8+PC9Ub29sYmFyPjwvZm9vdGVyPgogICAgICAgICAgICAgICA8L0RpYWxvZz4KICA` &&
`gICAgICAgICAgPC9jb3JlOkZyYWdtZW50RGVmaW5pdGlvbj4=``;` && |\n| &&
` XMLDef = atob( XMLDef );` && |\n| &&
` if (this.oFragment) {` && |\n| &&
` this.oFragment.close();` && |\n| &&
` this.oFragment.destroy();` && |\n| &&
` }` && |\n| &&
` this.oFragment = await Fragment.load({` && |\n| &&
` definition: XMLDef,` && |\n| &&
` controller: oFragmentController,` && |\n| &&
` });` && |\n| &&
|\n| &&
` oFragmentController.oDialog = this.oFragment;` && |\n| &&
|\n| &&
` let value = JSON.stringify(sap.z2ui5.oResponse, null, 3);` && |\n| &&
` debugger; let oData = { ` && |\n| &&
` type: 'json', ` && |\n| &&
` value: value,` && |\n| &&
` activeNest1 : sap?.z2ui5?.oViewNest?.mProperties?.viewContent !== undefined,` && |\n| &&
` activeNest2 : sap?.z2ui5?.oViewNest2?.mProperties?.viewContent !== undefined,` && |\n| &&
` activePopup : sap?.z2ui5?.oResponse?.PARAMS?.S_POPUP?.XML !== undefined,` && |\n| &&
` activePopover : sap?.z2ui5?.oResponse?.PARAMS?.S_POPOVER?.XML !== undefined,` && |\n| &&
` };` && |\n| &&
` var oModel = new JSONModel(oData);` && |\n| &&
` this.oFragment.setModel(oModel);` && |\n| &&
` this.oFragment.open();` && |\n| &&
|\n| &&
` },` && |\n| &&
|\n| &&
` async init() {` && |\n| &&
|\n| &&
` document.addEventListener("keydown", function (zEvent) {` && |\n| &&
` if (zEvent.ctrlKey ) { if ( zEvent.key === "a") { // case sensitive` && |\n| &&
` sap.z2ui5.DebuggingTools.show();` && |\n| &&
` } }` && |\n| &&
` });` && |\n| &&
|\n| &&
` },` && |\n| &&
|\n| &&
` renderer(oRm, oControl) {` && |\n| &&
` }, ` && |\n| &&
` });` && |\n| &&
`});`.