SAPTutorial de UI5 para principiantes
jessica blake
⚡ Resumen inteligente
SAPUI5 es SAPEl marco HTML5 responsivo de impulsa las aplicaciones web empresariales en dispositivos de escritorio, móviles y tabletas. Este tutorial explica la arquitectura MVC, el modelo de componentes, las bibliotecas y cómo crear componentes padre e hijo dentro de Eclipse.
¿Qué es SAPUI5?
SAPUI5 es un conjunto de bibliotecas para crear aplicaciones web responsivas que se ejecutan en múltiples dispositivos como computadoras de escritorio, dispositivos móviles y tabletas. SAPUI5 funciona en concepto MVC acelerar el ciclo de desarrollo mediante la creación de datos, lógica empresarial y representación de datos por separado en la vista. Por lo tanto, el desarrollo de la vista y el controlador puede realizarse de forma independiente para crear modelos (contenedores de datos).
SAPUI5 es el último de la serie de SAP Tecnologías de desarrollo de UI. Para proporcionar integración web para el subyacente SAP Sistema ERP, SAP Se le ocurrieron múltiples tecnologías de desarrollo de UI como BSP (páginas de servidor empresarial), PDK (kit de desarrollo de portal), Web Dynpro. Java, Web Dynpro ABAP. Y el sucesor de Web Dynpro ABAP es SAPUI5.
SAPUI5 Architectura
SAPUI ArchiDiagrama de tecnología
En lo anterior ArchiEn la arquitectura, el primer recuadro, «Dispositivos», indica los dispositivos en los que se ejecutan las aplicaciones UI5. Se puede acceder a las aplicaciones UI5 a través de una aplicación móvil o cualquier navegador. Esta capa se denomina «Capa de Presentación».
SAPLas aplicaciones UI5 y los servicios oData residen en el SAP Servidor de puerta de enlace NetWeaver. Esta capa de la arquitectura se denomina "capa de aplicación".
La lógica empresarial real se implementa en SAP Sistemas centrales como ECC, CRM y BW. La lógica empresarial se puede implementar utilizando SAP programas y módulos de funciones. SAP Los datos transaccionales y maestros residen en SAP sistemas. Esta capa se denomina "Capa de base de datos" o "Capa de persistencia".
SAPComponente UI5
Un componente es una pieza de código reutilizable. Hay 2 tipos de componentes proporcionados por SAPinterfaz de usuario5:
- Componentes de la interfaz de usuario: representan una interfaz de usuario que contiene elementos de la interfaz de usuario. Estos se basan en el SAPClase UI5 llamada sap.ui.core.UIComponent
- Componentes sin rostro: estos no tienen una interfaz de usuario. Estos se basan en el SAPClase UI5 llamada sap.ui.core.Component
Básicamente, un componente es una carpeta. Cuando creas un nuevo SAPEn la aplicación UI5, podrá ver una estructura de carpetas creada en su explorador de proyectos como se muestra a continuación.
En esta aplicación UI5, PassNum es un componente. El archivo Component.js es obligatorio para que una aplicación UI5 se comporte como un componente.
siguiente en este SAPUI5 Eclipse tutorial, aprenderemos cómo configurar SAPUI5.
SAPConfiguración de UI5
Antes de comenzar, debes asegurarte de que:
- Eclipse (Versión Luna) está instalada en su computadora portátil.
- SAP Herramientas de desarrollo para Eclipse Luna se instala en su Eclipse (SAP Herramientas de desarrollo para Eclipse Luna - https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad está instalado y usted tiene acceso a SAP Sistema NetWeaver Gateway para el despliegue y las pruebas de la aplicación que vamos a desarrollar en este blog.
Una vez que la aplicación esté completamente creada, debería verse como se muestra a continuación:
En esta SAPEn esta guía de tutoriales de UI5, crearemos dos componentes: un componente padre y un componente hijo. Primero, crearemos el componente hijo y luego lo utilizaremos en el componente padre.
Empecemos a ensuciarnos las manos.
Parte 1) Crear aplicación secundaria
Nuestro objetivo es crear un componente hijo que acepte un número del 1 al 12 y muestre el nombre del mes. Por ejemplo, cuando reciba el número 3, debería mostrar "Marzo".
Paso 1) Crear el proyecto de interfaz de usuario
Vaya a Archivo->Nuevo->Otro->SAPDesarrollo de aplicaciones UI5 -> Proyecto de aplicación.
Crear un proyecto de aplicación para SAPInstale la interfaz de usuario 5 siguiendo el asistente. Vea la captura de pantalla a continuación.
Introduzca el nombre del proyecto y deje las demás selecciones como sugiere el asistente.
En la captura de pantalla anterior, se muestran dos tipos de bibliotecas como botones de opción:
- savia.m
- sap.ui.commons
Al seleccionar sap.m, le está indicando al asistente que cree un proyecto de aplicación UI5 cuya sección de arranque incluirá automáticamente la biblioteca sap.m, que está diseñada para crear aplicaciones web responsivas.
siguiente en este SAP En el tutorial de Fiori, verá la sección del asistente que aparece a continuación, donde deberá crear la vista inicial. Una vista inicial es la primera que se mostrará al acceder a la aplicación.
Aquí debe indicar el nombre de la vista y seleccionar el tipo de vista. SAPUI5 admite 4 tipos de vista, como se evidencia en la pantalla de arriba. Entonces la interfaz de usuario de un SAPLa aplicación UI5 se puede construir usando JavaScript o XML o JSON o HTML, el lenguaje con el que te sientas más cómodo.
Al finalizar el asistente, se creará un nuevo proyecto y se mostrará en la ventana Explorador de proyectos. Eclipse como abajo.
Paso 2) Código Component.js
A continuación, vamos a crear un archivo Component.js y escribir en él el siguiente código.
sap.ui.core.UIComponent.extend("DisplayMonth.Component", { metadata: { "name": "DisplayMonth", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; var oView = sap.ui.view({ viewName: "DisplayMonth.displaymonth.DisplayMonthView", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(oView); }, init: function() { // call super init (will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var sRootPath = jQuery.sap.getModulePath("DisplayMonth"); }, });
Paso 3) Código Index.html
A continuación, vamos a indicarle a nuestro archivo index.html que cargue Component.js cuando se acceda a la aplicación. Escribe el siguiente código en el archivo index.html.
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"DisplayMonth": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "DisplayMonth" }) }).placeAt("content"); }); </script> </head> // start of body of SAPUI5 application. It contains a div element. <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Paso 4) Código DisplayMonthView.view.xml
A continuación, escribiremos código en nuestra vista displaymonth para mostrar el mes cuyo número se recibe del componente padre.
<html:style> #__xmlview1--id{ margin-left: 30rem; margin-top: 9rem; font-size: 6rem; font-style: italic; background-color: burlywood; } </html:style> <App id="fioricontent"> <Page title="Child Component"> <content> <Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text> </content> </Page> </App>
Después de pegar el código anterior, su vista debería verse como se muestra a continuación.
Paso 5) Código DisplayMonthView.controller.js
Y finalmente, escribamos el código del archivo del controlador de DisplayMonthView.
El código está escrito únicamente en el método de enlace onInit(), por lo que solo se incluye esa parte. El resto del archivo es el generado por el framework.
onInit : function() { sap.ui.getCore().getEventBus().subscribe("exchange", "data", function(channel, event, oEventData) { jsonModel = new sap.ui.model.json.JSONModel({ monthumber : oEventData, monthname : '' }); // derive month name from month number switch (jsonModel.oData.monthumber) { case "1": jsonModel.oData.monthname = 'January'; break; case "2": jsonModel.oData.monthname = 'February'; break; case "3": jsonModel.oData.monthname = 'March'; break; case "4": jsonModel.oData.monthname = 'April'; break; case "5": jsonModel.oData.monthname = 'May'; break; case "6": jsonModel.oData.monthname = 'June'; break; case "7": jsonModel.oData.monthname = 'July'; break; case "8": jsonModel.oData.monthname = 'August'; break; case "9": jsonModel.oData.monthname = 'September'; break; case "10": jsonModel.oData.monthname = 'October'; break; case "11": jsonModel.oData.monthname = 'November'; break; case "12": jsonModel.oData.monthname = 'December'; break; } this.getView().setModel(jsonModel, "myModel"); }, this); },
Paso 6) Implementación de la aplicación en SAP Servidor de puerta de enlace NetWeaver
Despliegue el proyecto y asigne el nombre técnico a la aplicación BSP generada en el servidor frontend ABAP. Sea el nombre zdisplaymesTu proyecto debería verse como se muestra a continuación.
PARTE 2) Crear un componente principal
Ahora es el momento de crear un nuevo Componente (Componente Padre) que consumirá el Componente que hemos creado hasta ahora en este tutorial.
Paso 1) Crea un nuevo SAPaplicación UI5
Vaya a Archivo->Nuevo->Otro->SAPDesarrollo de aplicaciones UI5 -> Proyecto de aplicación. A continuación, siga las instrucciones del asistente para crear un nuevo proyecto. SAPProyecto de aplicación UI5. Esto se describió en detalle en el Paso 1 de la Parte 1 de este tutorial anterior.
El nombre del proyecto del componente padre es Número de contraseñaEl nombre técnico de la aplicación BSP generada después del despliegue es zpassnumLa estructura del proyecto se verá como se muestra a continuación.
Ahora vamos a escribir código en los archivos index.html, Component.js, PassNum.view.xml y PassNum.controller.js.
Paso 2) Fuente Code del archivo Index.html del componente padre
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{"PassNum": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "PassNum" }) }).placeAt("content"); }); </script> </head> // start of Body of SAPUI5 application, Contains a div tag, <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Paso 3) Código fuente del archivo Component.js del componente principal
sap.ui.core.UIComponent.extend("PassNum.Component", { metadata: { "name": "PassNum", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; // Creating Reference of a PassNum XML view var myView = sap.ui.view({ viewName: "PassNum.passnum.PassNum", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(myView); }, init: function() { // call super init (this will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // ensure to use absolute paths relative to own component // (running in the Fiori Launchpad, relative paths will fail) var sRootPath = jQuery.sap.getModulePath("PassNum"); }, });
Paso 4) Código fuente del archivo PassNum.view.xml
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
Después de usar el código anterior en tu vista, esta debería verse como se muestra a continuación.
Paso 5) Código fuente de PassNum.controller.js
Solo se ha modificado el método onInit(). Todo lo demás en este archivo permanece igual.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Paso 6) Implementación del componente principal en SAP Servidor de puerta de enlace NetWeaver
Implemente la aplicación en el servidor frontend ABAP y ejecútela. Para ello, haga clic con el botón derecho en el proyecto y seleccione la opción "Ejecutar en el servidor ABAP".
La siguiente URL se abrirá en el Eclipse navegador.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Copia el URL y ejecútalo en el navegador. En el nombre de host anterior (marcado en amarillo) se encuentra el nombre de host de tu servidor frontend ABAP.
Resultado
Haz clic en el botón 'Primero' y debería aparecer enero en el componente secundario.
Disfrute creando hermosas aplicaciones web responsivas usando SAPUI5.
