Close

SAPUI5: Mi Primer App con SAPUI5

¿Que es SAPUI5?

Con mis propias palabras podría definir como un framework front-end de javascript donde nos facilita programar mediante el patrón MVC(modelo-vista-controlador), algo similar a lo que hacemos con las tecnologias AngularJs o BackBone, utilizando javascript de alguna manera programando javascript estilo POO. Ademas de  todo esto tenemos la oportunidad de generar una App móvil híbrida a base de nuestro desarrollo en SAPUI5 ya sea con tecnología como Apache Cordova.

El día de hoy vamos a crear una app sencilla sobre la tecnologia SAPUI5 donde simplemente maquetaremos una pantalla y dentro de esa pantalla programaremos un pequeño hola mundo.

Conforme vaya teniendo tiempo iré subiendo más ejemplo con más complejidad y haciendo cosas impresionantes.

Primero vamos a crear una carpeta dentro de nuestro htdocs en caso de tener XAMPP o dentro de www en caso de tener WAMP, que es donde estaremos metiendo todos nuestros archivos.

tendremos una estructura como la siguiente:

miPrimerApp_estructura_SAPUI5_desarrollohidrocalido

Empezaremos creando nuestro index.html

index.html

Empezamos con la importación del framework SAPUI5, lo haremos directamente desde los servidores de SAP HANA ya que lo podemos descargar desde el sitio de SAPUI5 sin ningun problema.

Despues tenemos unos metodos donde lo que indicamos es que :

sap.ui.localResources(“apps”);   // indicamos que nuestras vistas y controladores los cargaremos directamente en la carpeta apps
sap.ui.getCore().attachInit(function () {}); // le indicamos que sera el método inicial
sap.ui.jsview(“idAppDH”,”apps.App”).placeAt(“content”); // indicamos que ira a la carpeta de apps y tomara el archivo App.view.js donde creamos nuestra vista y la pintaremos dentro del div content

App.controller.js

En nuestro controlador al inicio importamos unas librerias para después ocupar en nuestros metodos, simplemente declaramos “use strict” esto significa que estamos usando javascript en modo USO ESTRICTO donde si no declaras alguna variable o algún objeto te marcara error.

Tenemos nuestro método oInit que es un método que nace sobre nuestro controlador, se ejecuta al iniciar nuestro controller, vendrìa siendo algo similar a un constructor.

Por ultimo tenemos un método que mandamos a llamar cuando el botón a sido presionado, donde simplemente manipulamos nuestra caja de texto con sap.ui.getCore().byId(NUESTROID) .

App.view.js

La vista puede ser algo confusa pues SAPUI5 nos da la oportunidad de maqueta con XML,Javascript y HTML, por ahora estaremos maquetando con Javascript puede ser algo complejo de entender pero vienen siendo puros objetos, puedes encontrar documentación más clara sobre los objetos a usar en la siguiente pagina:

https://sapui5.netweaver.ondemand.com/explored.html

 

Tenemos un método que se llama createContent que como su nombre lo dice sera el método que ejecutara al ser invocada la vista donde meteremos todo nuestro código para crear nuestra respectiva vista.

Vamos creando objetos en este caso una pagina, una caja de texto y un botón en el footer de nuestra App, para después agregar estos objetos y pasarlos como parámetros nuestro addContent que es el que recibe todos los elementos que metemos en nuestra vista.

Todo lo que gusten saber sobre como crear un botón, caja de texto, una pagina móvil,demos, la pueden encontrar en la liga que les proporcione en la parte de arriba.

Por ultimo  corremos nuestra App como http://localhost/carpetaMiProyecto

Ver Ejemplo 

Conclusión : Siendo un framework reciente me ha estado agradando, al venir de un ambiente como AngularJS se comprende más o menos su lógica pero si cambia por completo toda la forma de trabajar nuestra vista que es donde yo lo note, poco a poco estaré subiendo mas tutoriales donde mostrare como maquetar con un XML, como usar los componentes, como compilar nuestra app con cordova ,etc…

Saludos.

Descargar Ejemplo 

2 thoughts on “SAPUI5: Mi Primer App con SAPUI5

  1. gracias amigo! yo estoy haciendo un curso en open sap pero muchas cosas no las explican bien y no se usar muy bien la documentación no la entiendo mucho (https://sapui5.hana.ondemand.com) es que veo que cuando maquetan en xml hay veces donde abren y cierran las etiquetas asi y otras veces asi o por lo menos no se como agregan bien o usar las propiedades, eventos, asosiaciones de un elemento si podrias hacer un pequeño tutorial de eso te lo agradeceria y maquetr con xml en teoria se ve mas facil que hacerlo con js porque cuando la pagina se va agrandando mas y mas es mas claro xml y segun los de sap es mejor para tener una vision mas clara del modelo mvc

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.