Tutorial SAPUI5 para principiantes: ¿Qué es Fiori con ejemplos?

¿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 tecnologías de desarrollo de UI de SAP. Para proporcionar integración web para el sistema SAP ERP subyacente, SAP ideó múltiples tecnologías de desarrollo de UI como BSP (páginas de servidor empresarial), PDK (kit de desarrollo de portal), Web Dynpro Java y Web Dynpro ABAP. Y el sucesor de Web Dynpro ABAP es SAPUI5.

SAPUI5 Architectura

SAPUI5 Architectura
SAPUI5 Architectura

SAPUI ArchiDiagrama de tecnología

En lo anterior Architecnología, primero box, es decir, 'Dispositivos' indican 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 en estos dispositivos. Esta capa de la archiLa tecnología se llama "Capa de presentación".

Las aplicaciones SAPUI5 y los servicios oData residen en SAP NetWeaver Gateway Server. Esta capa de la archiLa tecnología se llama "Capa de aplicación".

La lógica empresarial real se implementa en los sistemas centrales de SAP como ECC, CRM y BW, etc.… La lógica empresarial se puede implementar utilizando programas y módulos de funciones de SAP. Los datos maestros y transaccionales de SAP residen en los sistemas SAP. Esta capa de la archiLa tecnología se llama 'Capa de base de datos' o 'Capa de persistencia'.

Componente SAPUI5

Un componente es una pieza de código de trabajo que se reutiliza cuando sea necesario. Hay 2 tipos de componentes proporcionados por SAPUI5

  1. Componentes de la interfaz de usuario: representan una interfaz de usuario que contiene elementos de la interfaz de usuario. Estos se basan en la clase SPAUI5 llamada sap.ui.core.UIComponent
  2. Componentes sin rostro: no tienen una interfaz de usuario. Estos se basan en la clase SAPUI5 llamada sap.ui.core.Component

Básicamente, un componente es una carpeta. Cuando cree una nueva aplicación SAPUI5, podrá ver una estructura de carpetas creada en su explorador de proyectos como se muestra a continuación.

Componente SAPUI5

En esta aplicación UI5, PassNum es un componente. El archivo Component.js es obligatorio para que la aplicación UI5 se comporte como un componente. El archivo Component.js es el controlador del componente.

Siguiente en este SAPUI5 Eclipse tutorial, aprenderemos cómo configurar SAPUI5.

Configuración de SAPUI5

Antes de comenzar, debe asegurarse de que:

  1. Eclipse (Versión Luna) está instalada en su computadora portátil.
  2. Herramientas de desarrollo SAP para Eclipse Luna e instalado en tu eclipse (Herramientas de desarrollo SAP para Eclipse Luna - https://tools.hana.ondemand.com/luna/)
  3. El panel de inicio de sesión de SAP está instalado y usted tiene acceso al sistema SAP NetWeaver Gateway para implementar y probar esta aplicación que vamos a crear en este blog.

Una vez que la aplicación esté completamente creada, debería verse como se muestra a continuación:

Configuración de SAPUI5

En esta guía de tutoriales de SAPUI5, crearemos 2 componentes, a saber, el componente principal y el componente secundario. Primero, crearemos un componente secundario y luego lo consumiremos en el componente principal.

Empecemos a ensuciarnos las manos.

Parte 1) Crear aplicación secundaria

Nuestro objetivo es crear un componente secundario que acepte un número del 1 al 12 y muestre el nombre del mes. Por ejemplo, recibe 3; debería mostrar "Marzo".

Paso 1) Crear el proyecto de interfaz de usuario

Vaya a Archivo->Nuevo->Otro->Desarrollo de aplicaciones SAPUI5->Proyecto de aplicación.

Crear el proyecto de interfaz de usuario

Cree un proyecto de aplicación para SAPUI5 siguiendowing el asistente que se abre. Vea la captura de pantalla a continuación.

Crear el proyecto de interfaz de usuario

Ingrese el nombre del proyecto, deje que las otras selecciones sigan siendo las mismas que sugiere el asistente.

Crear el proyecto de interfaz de usuario

En la captura de pantalla anterior, se muestran 2 tipos de bibliotecas.yed como botones de radio

  1. savia.m
  2. sap.ui.commons

Cuando selecciona 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á destinada a crear una aplicación web responsiva.

A continuación, en este tutorial de SAP FIORI, verá la siguiente sección del asistente donde deberá crear la Vista inicial. Una vista inicial es una vista que se representará primero cuando se acceda a la aplicación.

Crear el proyecto de interfaz de usuario

Aquí debe proporcionar el nombre de la vista y seleccionar el tipo de vista. SAPUI5 admite 4 tipos de vista, como se evidencia en la pantalla anterior. Entonces, la interfaz de usuario de una aplicación SAPUI5 se puede construir usando Javascript o XML o JSON o HTML en cualquier idioma con el que se sienta cómodo.

Al final del asistente, se creará un nuevo proyecto y se mostraráyed en la ventana del Explorador de proyectos de Eclipse como abajo.

Crear el proyecto de interfaz de usuario

Paso 2) Código Component.js

A continuación, creemos un archivo Component.js y escribamos el siguiente código en él.

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, indiquemos al archivo index.html que cargue Component.js en SAPUI5 cuando se accede a la aplicación desde el navegador. Entonces escriba 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, escribamos código en nuestra vista de mes de visualización que mostrará el mes cuyo número de mes se recibe del componente principal.

<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 haber pegado el código anterior, su vista debería verse como a continuación:

Código DisplayMonthView.view.xml

Paso 5) Código DisplayMonthView.controller.js

Y finalmente, escribamos el código del archivo Controlador de DisplayMonthView.

El código está escrito solo en el método de enlace onInit() de este controlador, por lo que se pega aquí solo el código onInit(). El resto del archivo es el generado por el marco.

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 Netweaver Gateway Server

Implemente el proyecto y proporcione el nombre técnico de la aplicación BSP que se generará en el servidor frontend ABAP. deja que el nombre sea zdisplaymes. En este punto, su proyecto de aplicación debería verse como se muestra a continuación.

Servidor de puerta de enlace SAP Netweaver

PARTE 2) Crear un componente principal

Ahora es el momento de crear un nuevo Componente (Componente Principal) que consumirá el Componente que creamos hasta ahora en este tutorial.

Paso 1) Cree una nueva aplicación SAPUI5

Vaya a Archivo->Nuevo->Otro->Desarrollo de aplicaciones SAPUI5->Proyecto de aplicación. Luego siga las instrucciones del asistente para crear un nuevo proyecto de aplicación SAPUI5. Esto se describió en detalle en el Paso 1 de la Parte 1 de este tutorial anterior.

El nombre del proyecto del componente principal es PassNum. Y el nombre técnico de la aplicación BSP generada después de la implementación del componente SAPUI5 en el servidor frontend ABAP es zpassnum. La estructura del proyecto se verá como a continuación.

Crear una nueva aplicación SAPUI5

Ahora escribamos código en los archivos index.html, Component.js y PassNum.view.xml y PassNum.controller.js.

Paso 2) Código fuente de Index.html del componente principal

<!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 su vista, su vista debería verse como a continuación

Código fuente del archivo PassNum.view.xml

Paso 5) Código fuente de PassNum.controller.js

Sólo se ha cambiado el método onInit(). Todo lo demás en este archivo sigue 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 el servidor SAP Netweaver Gateway

Implemente la aplicación en el servidor frontend ABAP y ejecútela. Debería poder ejecutarlo haciendo clic derecho en el proyecto y haciendo clic en la opción "Ejecutar en el servidor ABAP".

Implementación del componente principal en el servidor SAP Netweaver Gateway

La siguiente URL se abrirá en eclipse navegador.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Copie la URL y ejecútela en el navegador real. En el nombre de host anterior, marcado en amarillo, está el nombre de host de su servidor frontend ABAP.

Salida

Salida del servidor SAP Netweaver Gateway

Haga clic en el botón "Primero", enero debería aparecer en el componente secundario.

Salida del servidor SAP Netweaver Gateway

Disfrute creando aplicaciones web hermosas y responsivas usando SAPUI5.

Resumen

En este tutorial de SAPUI5, hemos aprendido:

  • SAPUI5 explorado: SAPUI5 es el último de la serie de tecnologías de desarrollo de UI de SAP.
  • ¿Qué es SAP UI5? SAPUI5 es un conjunto de bibliotecas que se utiliza para crear aplicaciones web responsivas.
  • Componentes de SAPUI5 archiLa tecnología son dispositivos, cliente, NetWeaver Gateway y capa de persistencia.
  • Un componente SAPUI5 es una pieza de código de trabajo que se reutiliza cuando sea necesario
  • Los tipos de componentes SAPUI5 son 1) componentes de interfaz de usuario, 2) componentes sin rostro
  • Aprendimos cómo consumir un componente sapui5 en otro componente sapui5 y pasar datos entre los dos componentes.