Creará una interfaz de usuario web rápida dentro de su módulo web existente para usar su marco de prueba. Crea una nueva carpeta llamada exerciseAsync hago web->resources expediente.
El primer archivo es el Component.js, con el siguiente código:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("sap.xs.exerciseAsync.Component", {
metadata: {
manifest: "json"
},
init: function () {
sap.ui.core.UIComponent.prototype.init.apply(
this, arguments);
// Chat Model
var oModel = this.getModel("chatModel");
oModel.setData({
chat: "",
message: ""
});
},
destroy: function () {
// call the base component's destroy function
UIComponent.prototype.destroy.apply(this, arguments);
}
});
});
Crea el manifest.json expediente. Normalmente, anunciaría el modelo de internacionalización aquí (i18n), pero codificará los textos en inglés de manera rigurosa, ya que este no es el enfoque de este ejercicio.
{
"_version": "1.4.0",
"start_url": "index.html",
"sap.app": {
"_version": "1.4.0",
"type": "application",
"resources": "resources.json",
"i18n": "i18n/i18n.properties",
"id": "exerciseAsync",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "${project.version}"
}
},
"sap.fiori": {
"_version": "2.0.0",
"registrationIds": [],
"archeType": "transactional"
},
"sap.ui": {
"_version": "1.60.0",
"technology": "UI5",
"icons": {
"icon": "/images/favicon.ico",
"favIcon": "/images/favicon.ico"
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize",
"sap_belize_plus"
]
},
"sap.ui5": {
"config": {
"sapFiori2Adaptation": true
},
"rootView": {
"viewName": "sap.xs.exerciseAsync.view.App",
"type": "XML",
"id": "app",
"async": true
},
"dependencies": {
"minUI5Version": "1.60.0",
"libs": {
"sap.ui.core": {
"minVersion": "1.60.0"
},
"sap.m": {
"minVersion": "1.60.0"
},
"sap.ui.layout": {
"minVersion": "1.60.0"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"handleValidation": true,
"models": {
"chatModel": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultBindingMode": "TwoWay"
}
},
"config": {
"type": "sap.ui.model.json.JSONModel"
},
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleUrl": "./i18n/i18n.properties"
}
}
}
}
}
Crear index.html archivo con el siguiente contenido:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" -->
<script id="sap-ui-bootstrap" src="{{{sapui5_sb.url}}}/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize_plus"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-language="en"
data-sap-ui-resourceroots='{
"sap.xs.exerciseAsync": "./",
"view": "./view" }'
data-sap-ui-libs="sap.m,sap.ui.comp,sap.ui.core,sap.ui.layout,sap.ui.unified">
</script>
<script type="text/javascript" src="../common/startup.js"></script>
<script>
localShellStartup("sap.xs.exerciseAsync");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Ahora creará las vistas y el controlador en sus carpetas correspondientes dentro del exerciseAsync carpeta y el siguiente código, respectivamente. El nombre de los componentes se conoce como App como puede ver en la vista raíz especificada en manifest.json
view/App.view.xml
<mvc:View controllerName="sap.xs.exerciseAsync.controller.App" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"
height="100%">
<Page title="{i18n>appTitle}">
<content>
<ScrollContainer height="100%" width="100%" horizontal="true" vertical="true">
<Panel headerText="Node.js Async Test Framework" expandable="true" expanded="true">
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<l:content>
<TextArea id="chatInfo" value="{chatModel>/chat}" cols="60" rows="8" editable="false"/>
</l:content>
</l:VerticalLayout>
<Button text="Basic Async" press="sendBasic"/>
<Button text="File Sync" press="sendFileS"/>
<Button text="File Async" press="sendFileA"/>
<Button text="HTTP Client" press="sendHTTP"/>
<Button text="DB1" press="sendDB1"/>
<Button text="DB2" press="sendDB2"/>
</Panel>
</ScrollContainer>
</content>
</Page>
</mvc:View>
controller/App.controller.js:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-undef: 0, no-sequences: 0, no-unused-expressions: 0*/
//To use a javascript controller its name must end with .controller.js
sap.ui.define([
"sap/xs/exerciseAsync/controller/BaseController",
"sap/ui/model/json/JSONModel"
], function(BaseController, JSONModel) {
"use strict";
jQuery.sap.require("sap.ui.core.ws.WebSocket");
var connection = new sap.ui.core.ws.WebSocket("/node/excAsync");
return BaseController.extend("sap.xs.exerciseAsync.controller.App", {
onInit: function() {
this.getView().addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact mode
// connection opened
connection.attachOpen(function(oControlEvent) {
sap.m.MessageToast.show("connection opened");
});
// server messages
connection.attachMessage(function(oControlEvent) {
var oModel = sap.ui.getCore().getComponent("comp").getModel("chatModel");
var result = oModel.getData();
var data = jQuery.parseJSON(oControlEvent.getParameter("data"));
var msg = data.text,
lastInfo = result.chat;
if (lastInfo.length > 0) {
lastInfo += "rn";
}
oModel.setData({
chat: lastInfo + msg
}, true);
// scroll to textarea bottom to show new messages
// $("#comp---app--chatInfo-inner").scrollTop($("#comp---app--chatInfo-inner")[0].scrollHeight);
});
// error handling
connection.attachError(function(oControlEvent) {
sap.m.MessageToast.show("Websocket connection error");
});
// onConnectionClose
connection.attachClose(function(oControlEvent) {
sap.m.MessageToast.show("Websocket connection closed");
});
},
// send message
sendBasic: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "async"
}));
},
sendFileS: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "fileSync"
}));
},
sendFileA: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "fileAsync"
}));
},
sendHTTP: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "httpClient"
}));
},
sendDB1: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "dbAsync"
}));
},
sendDB2: function() {
var oModel = this.getOwnerComponent().getModel("chatModel");
oModel.setData({
chat: ""
}, true);
connection.send(JSON.stringify({
action: "dbAsync2"
}));
},
onErrorCall: function(oError) {
if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400") {
var errorRes = JSON.parse(oError.responseText);
if (!errorRes.error.innererror) {
sap.m.MessageBox.alert(errorRes.error.message.value);
} else {
if (!errorRes.error.innererror.message) {
sap.m.MessageBox.alert(errorRes.error.innererror.toString());
} else {
sap.m.MessageBox.alert(errorRes.error.innererror.message);
}
}
return;
} else {
sap.m.MessageBox.alert(oError.response.statusText);
return;
}
}
});
});
controller/BaseController.controller.js:
/*global history */
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function (Controller, History) {
"use strict";
return Controller.extend("sap.xs.exerciseAsync.controller.BaseController", {
/**
* Convenience method for accessing the router in every controller of the application.
* @public
* @returns {sap.ui.core.routing.Router} the router for this component
*/
getRouter : function () {
return this.getOwnerComponent().getRouter();
},
/**
* Convenience method for getting the view model by name in every controller of the application.
* @public
* @param {string} sName the model name
* @returns {sap.ui.model.Model} the model instance
*/
getModel : function (sName) {
return this.getView().getModel(sName);
},
/**
* Convenience method for setting the view model in every controller of the application.
* @public
* @param {sap.ui.model.Model} oModel the model instance
* @param {string} sName the model name
* @returns {sap.ui.mvc.View} the view instance
*/
setModel : function (oModel, sName) {
return this.getView().setModel(oModel, sName);
},
/**
* Convenience method for getting the resource bundle.
* @public
* @returns {sap.ui.model.resource.ResourceModel} the resourceModel of the component
*/
getResourceBundle : function () {
return this.getOwnerComponent().getModel("i18n").getResourceBundle();
},
/**
* Event handler for navigating back.
* It there is a history entry we go one step back in the browser history
* If not, it will replace the current entry of the browser history with the master route.
* @public
*/
onNavBack : function() {
var sPreviousHash = History.getInstance().getPreviousHash();
if (sPreviousHash !== undefined) {
history.go(-1);
} else {
this.getRouter().navTo("master", {}, true);
}
}
});
}
);
Ahora necesitamos crear una biblioteca JavaScript reutilizable que utilizará varias aplicaciones frontend. Cree una nueva carpeta con un nombre común en su carpeta web / de recursos. Dentro de la carpeta común, cree un archivo llamado startup.js.
web/resources/common/startup.js
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-shadow:0*/
function onLoadSession(myJSON) {
try {
var result = JSON.parse(myJSON);
if (result.session.length > 0) {
if (result.session[0].familyName !== "") {
return result.session[0].givenName + " " + result.session[0].familyName;
} else {
return result.session[0].UserName;
}
}
} catch (e) {
return "";
}
return "";
}
function getSessionInfo() {
var aUrl = "/node/getSessionInfo";
return onLoadSession(
jQuery.ajax({
url: aUrl,
method: "GET",
dataType: "json",
async: false
}).responseText);
}
function localShellStartup(name) {
sap.ui.getCore().attachInit(function () {
var ComponentContainer = new sap.ui.core.ComponentContainer({
height: "100%"
});
var username = "Test User";
// create a shell
new sap.ui.unified.Shell({
id: "myShell",
icon: "/images/sap_18.png",
headEndItems: new sap.ui.unified.ShellHeadItem({
icon: "sap-icon://log",
tooltip: "Logoff",
press: function () {
window.location.href = "/my/logout";
}
}),
user: new sap.ui.unified.ShellHeadUserItem({
image: "sap-icon://person-placeholder",
username: username
}),
content: ComponentContainer
}).placeAt("content");
var oComponent = sap.ui.component({
id: "comp",
name: name,
manifestFirst: true,
async: true
}).then(function (oComponent) {
ComponentContainer.setComponent(oComponent);
});
});
}
