¿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:
Empezaremos creando nuestro index.html
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="UTF-8"> <title>Desarrollo Hidrocálido</title> <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" > </script> <script> sap.ui.localResources("apps"); sap.ui.getCore().attachInit(function () { sap.ui.jsview("idAppDH","apps.App").placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast, JSONModel) { "use strict"; return Controller.extend("apps.App", { onInit : function () { MessageToast.show("www.desarrollohidrocalido.com"); }, eventoPress : function () { var txtNombre; txtNombre = sap.ui.getCore().byId("txtNombre"); if (txtNombre.getValue()!=''){ MessageToast.show("Hola: "+txtNombre.getValue()); txtNombre.setValue(""); }else{ MessageToast.show("Debe Ingresar Un Nombre"); } } }); }); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
sap.ui.jsview("apps.App", { getControllerName: function() { return "apps.App"; }, createContent: function(oController) { var currentView,footer,miFooter,miPagina,miCajaTexto,miApp; currentView=this; footer = [ oButton = new sap.m.Button("idBtnHolaMundo", { type: "Emphasized", text: "Presioname :)", press: [oController.eventoPress, oController] }) ]; miFooter = new sap.m.Bar("idMiBar"); miFooter.addContentMiddle(footer[0]); miPagina = new sap.m.Page("idMiPagina", { title: "Ejemplo Hola Mundo - Desarrollo Hidrocálido", showNavButton: false, showHeader: true, showFooter: true }); miCajaTexto = new sap.m.Input("txtNombre", { type: "Text", placeholder: "Escribe tu nombre...", }); miPagina.setFooter(miFooter); miPagina.addContent(miCajaTexto); miApp = new sap.m.App("idMiApp"); miApp.addPage(miPagina); currentView.destroyContent(); currentView.addContent(miApp); } }); |
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
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.
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
Que tal amigo, que bueno que te sirvió el post y respecto a la maquetación no tiene gran ciencia las mismas propiedades están en el XML es cuestión de lógica.
Saludos.