Siguiendo con lo comentado en el artículo anterior sobre creación de aplicaciones SAPUI5, en esta segunda parte vamos a ver con más detalle los ficheros más importantes que forman la base de un proyecto SAPUI5 y los modificaremos para ver en funcionamiento nuestra primera aplicación SAPUI5.
4. Ficheros principales de una aplicación SAPUI5
index.html
Como introdujimos en el artículo anterior, este fichero es el punto de entrada a la aplicación SAPUI5. En él encontramos tres partes principales:
- Bootstrap: El bootstrap es el primer script que se ejecuta al cargar la aplicación SAPUI5. En él se establecen valores de configuración tales como el idioma (data-sap-ui-language) o el tema (data-sap-ui-theme) por defecto a utilizar. Así mismo, se cargan las librerías necesarias para la aplicación (data-sap, tanto las del core como las opcionales que vimos en el artículo sobre librerías SAPUI5: en este caso, al haber elegido m como librería base, la encontramos ya entre las librerías a incluir.
- Lógica de negocio: Después del bootstrap se encuentra un segundo script en el que ya sí se comienzan a declarar e instanciar los elementos SAPUI5 necesarios: controles, vistas, etc. para después colocar estas en el área UI. En este casovemos cómo crea un control App a la que se añade la vista SAPUI5 que hemos creado como vista inicial. Después, mediante el método placeAt coloca esta App en content, que no es otra cosa que un DIV HTML declarado en el área UI.
- Area UI: El área UI es un bloque de código HTML que es la base de la aplicación SAPUI5 a la que se le irá añadiendo código dinámicamente. Inicialmente cuenta únicamente con el elemento <BODY> y un <DIV> cuyo ID es content, al que como hemos visto anteriormente se hace referencia desde la lógica de negocio. Este código HTML se puede modificar cómo se desee, borrando o creando bloques HTML. Mediante el método addContent se irá pegando el código derivado de controles, vistas etc. en estos bloques HTML indicando siempre el ID de cada bloque.
Prueba.view.js
Como hemos visto, al haber generado una vista inicial en el proyecto, desde el index.html automáticamente se hace referencia a una vista SAPUI5, la cual se corresponde directamente con este fichero Prueba.view.js. En esta vista podemos crear diferentes controles que compondrán la interfaz de la aplicación SAPUI5: botones, textos, tablas, listas etc.
En una vista SAPUI5, sea el lenguaje que sea, veremos siempre dos elementos importantes: la referencia al controlador y el contenido.
En este caso al ser una vista Javascript, estos dos elementos se corresponden con dos funciones:
- getControllerName: En esta función obtenemos la referencia al controlador que dotará de funcionalidad a la vista.
- createContent: Función en la que iremos creando y añadiendo controles SAPUI5. Para ver un ejemplo sencillo, vamos a añadir una página que dentro tendrá un botón de la librería m. y rellenaremos sus propiedades y eventos.
Prueba.controller.js
Como podemos ver en el ejemplo anterior, a la vista Prueba se le ha asignado un controlador en el que se implementará la lógica necesaria para atender a eventos, realizar validaciones etc. El fichero Prueba.controller.js es el fichero que se corresponde con este controlador.
Por defecto, al crear automáticamente el controlador con el wizard este crea ya una serie de funciones comentadas que se corresponden con los eventos básicos de la aplicación (onInit, onBeforeRendering, onAfterRendering y onExit).
En el código del botón anteriormente creado en la vista, podemos ver que el control sap.m.Button responde a un evento press, para el cual se indica una función propia del controlador. Es decir, cuando se pulse el botón, la aplicación buscará el controlador asociado a la vista y ejecutará la función onPress que este tenga implementado. A continuación vemos el código del controlador:
Con todo esto, ya podemos ver en funcionamiento nuestro primer proyecto SAPUI5. Para ello, pulsamos con el botón derecho sobre el proyecto en el Project Explorer y seleccionamos la opción Run As –> Web App Preview con lo que se abrirá un navegador integrado en Eclipse donde podremos ver la aplicación SAPUI5 en funcionamiento:
Con esto ya hemos creado nuestra primera aplicación SAPUI5.
Sencillamente, GRACIAS TOTALES»
¡A ti!😉
Sensei, tengo un problema. La URL que me entrega el proceso, al parecer está errónea.
Cómo podría solucionarlo ?
http://localhost:49891/ZRVR_APL/index.html
2019 y sigue siendo un tutorial muy útil! sobre todo a todos los que nos iniciamos en el mundo de app’s en sap. Muchas gracias por la disposición y compartir conocimiento, me gustaría saber si existe alguna comunidad donde conseguir mas información acerca de app en sapui5 o fiori.
Saludos Cordiales!
hola,
estoy empezando en esto del sap ui5 y necesito tutoriales o ayuda para el desarrollo de apps en eclise se los agradeceria mucho…
Hola Simón, gracias por tu aporte. Tomamos nota, y seguiremos haciendo tutoriales de este tipo.
Un saludo!
Muy buena la serie de artículos de SapUI5!
Acabo de empezar un proyecto con esta tecnología y estos artículos han sido perfectos para iniciarme ¿vas a escribir más?
Se nota que conoces el framework y nos sería muy útil más artículos con más ejemplos.
Saludos!
Hola Jose, muchas gracias por leernos y por tus palabras, es lo que nos anima a seguir manteniendo este blog. A día de hoy tenemos algunos artículos pensados sobre el tema, pero si quieres sugerirnos algún tema, ¡Somos todo oídos!. Puedes ponerte en contacto con nosotros a través de nuestro formulario si así lo deseas.
Un saludo.
Buenas,
llevo una semana con el tutorial de la siguiente página de SAP: https://sapui5.netweaver.ondemand.com/#docs/guide/99ac68a5b1c3416ab5c84c99fefa250d.html
Esta muy bien porque te va guiando paso a paso por los puntos más importantes de la arquitectura de una aplicación SapUI5. Sin embargo, hay un punto que no explica del todo bien (o por lo menos yo no he conseguido que me funcione siguiendo el tutorial) y es la navegación entre páginas, el «routing». Es un poco confuso como pasa de una página a otra a través de «routes». No se si sería mucho pedir pero estaría bien un ejemplo de como pasar de una página a otra pasando un parámetro entre ambas páginas (por ejemplo, la típica página de búsqueda que al pulsar sobre un resultado del listado te lleve a la vista de detalle). La verdad es que tengo mil preguntas más pero ese es el punto donde más me he atascado.
Por cierto, veo que en vuestro ejemplos añadís los componentes a las vistas mediante Javascript ¿no utilizáis XML por alguna razón en especial?
¡Muchísimas gracias, en serio, sois de gran ayuda!
Buenas de nuevo,
ya he resuelto el problema con la forma de navegación y los parámetros pasados entre páginas. Así que por mi no hace falta que tratéis este tema de momento (es un salto demasiado grande en la evolución de los artículos). Aún así seguiré vuestras publicaciones ya que durante muchos meses voy a estar metido en el mundo SAPUI5 de lleno.
Gracias! un saludo!
Hola Jose, nos alegramos que hayas resuelto el problema con tanta rapidez. ¡Ánimo con SAPUI5!