miércoles, 14 de diciembre de 2016

SAPUI5: Cómo comenzamos


Hemos oído hablar mucho sobre Fiori y SAPUI5. ¡Que guay, poder hacer aplicaciones para SAP que se puedan usar en el móvil! ¡Yo quiero, yo quiero, yo quiero! Pero... ¿por dónde empiezo?

Qué es SAPUI5

Antes de nada, tenemos que saber qué es SAPUI5. Pues no es nada más (y nada menos) que una librería HTML5 que nos proporciona SAP para hacer páginas web. Es decir, un grupo de componentes que podemos reutilizar para trabajar "más rápido y más bonito".

Como estamos hablamos de HTML5, tenemos que pensar que también nos tendremos que pelear con Javascript y con CSS3 (hojas de estilos). Y si se nos va la pinza, incluso trastear con JQuery (así, a lo loco). Sobre HTML5 podemos encontrar un muy buen curso en MiriadaX - Desarrollo en HTML5.

Así que usaremos SAPUI5 como "lenguaje" para desarrollar aplicaciones que integraremos posteriormente en nuestro portal SAP Fiori.

Ojo, podemos crear una aplicación SAPUI5 (u OpenUI5, que es la parte libre y gratuita de SAPUI5) sin tener que integrarlo con Fiori. Pero como yo al final trasteo con Fiori, mis ejemplos acabarán orientándose al mismo.

Vamos a comparar SAPUI5 con una simple página web en HTML como la siguiente:


Super aplicación para hacer páginas web

Ese código nos generaría algo así:

Es una simple imagen, no la pulses :P
Mientras que con un código como el siguiente en SAPUI5:

El código este lo ha generado el Web IDE, que no tengo ganas de aprender tanto código
 Tendríamos esto:

El caso es que no es mucho más distinto del primer caso :O

El primer ejemplo es un componente genérico en HTML, con sus eventos genéricos y al que le podemos aplicar estilos con la correspondiente hoja de estilos.

El segundo, es un componente específico construido mediante SAPUI5. Se trata de un botón que nos proporciona distintas funcionalidades para modificarlo mediante Javascript: Determinar qué hace cuando lo pulsan, añadir un icono, habilitarlo o deshabilitarlo, asignar qué tipo de botón es, etc.

Dónde encuentro documentación de SAPUI5


La documentación de SAPUI5 la podemos obtener en la web UI Development Toolkit for HTML5, donde podemos encontrar, entre otras cosas:

  • Una sección con guías de desarrollo muy completa.
  • Una sección Explored para buscar ejemplos de componentes (que podemos usar para copiar y pegar vilmente).
  • Una sección con la API Reference para obtener la información de cada componente.
  • Una sección con los iconos disponibles en SAPUI5.
Para nuestro ejemplo del botón, podríamos obtener la referencia al botón sap.m.Button  para saber los métodos que podemos utilizar, así como códigos de ejemplo de botones que podemos aprovechar para no partir de cero.

Qué tengo que usar para desarrollar en SAPUI5


¿Y cómo puedo desarrollar las aplicaciones para SAPUI5? Podríamos hacerlo con Eclipse, pero SAP nos proporciona un entorno web de desarrollo muy completo, el SAP Web IDE.

Se trata de un editor web que nos proporciona diversas plantillas para poder crear nuestras aplicaciones SAPUI5 y basadas en Fiori. Porque generar una aplicación SAPUI5 de cero es todo un engorro, y lo mejor es partir de dichas plantillas.

Para poder acceder al SAP Web IDE, necesitas una cuenta en el SAP HANA Cloud Platform. Para probarlo (en modo trial) puedes crearte una cuenta gratuita mediante tu usuario OSS de SAP (si lo tienes) o con una cuenta de correo.

Desde tu cuenta de HCP, en la sección Services, puedes acceder al Web IDE.



Tutorial de Hola Mundo en SAPUI5


Ya en el Web IDE, puedes crearte una aplicación partiendo de una plantilla


En nuestro caso, como es una aplicación que no se conectará a ningún Backend, la hemos creado de tipo SAPUI5 en lugar de hacerla de tipo Fiori:



Después vamos rellenando la información que nos pide. Lo primero es asignarle un nombre al proyecto (cumpliendo con las típicas normas de nomenclatura: sin símbolos raros, sin espacios en blanco, etc.) y un namespace. El proyecto será cómo lo veremos en el árbol de proyectos, mientras que el namespace será el nombre interno de la aplicación. En mi caso, si es que me acuerdo para posteriores ejemplos, el namespace será jorgcalleja.nombre_especifico_de_la_app...




Después asignamos nombre a la página principal. Cada aplicación web puede estar compuesta por varias páginas, entre las que navegaremos. Para este ejemplo, en principio sólo creamos una página.
El tipo de vista puede ser XML, JSON, Javascript o HTML. Como estoy pensando en orientarme a aplicaciones Fiori, la haré de tipo XML. Al principio puede parecer un lío (yo me volvía loco hasta que las entendí), pero luego no puedes vivir sin ella... ay, que romántico que soy.


Cuando finalicemos el proceso, se nos habrá creado una estructura de carpetas en nuestro proyecto HOLA_MUNDO. La estructura se basa en la arquitectura modelo-vista-controlador (MVC), para quien sepa lo que demonios signifique eso. Así, la página que nos hemos generado antes tendría tres partes:

  • Lo que se pinta (la "Vista"), que se guarda en view/principal.view.xml. 
  • Lo que se ejecuta (el "controlador"), que se guarda en controller/principal.controller.js, 
  • Lo que se trata (el modelo), que serían los datos que se recuperan del backend, de un fichero plano o que generamos dinámicamente mediante código. El controlador se encargaría de tratar ese modelo y volcarlo en la vista.
Aparte de esos tres componentes (en este caso no tenemos modelo), se crea un fichero Component.js, que es el fichero "central" de la aplicación SAPUI5. Ese fichero (junto al manifest.json) es el que determina cual es la aplicación inicial, cómo se navega entre páginas, etc. Es lo que se va a invocar para crear el contenido (algo parecido al index.html).



Ok, pues ya tenemos nuestra aplicación, pero sin botón ni nada. Pues para poder pintarlo sin tener que tirar código, seleccionamos la vista (principal.view.xml) y pulsamos botón derecho -> Open With -> Layout Editor.



Y en el layout ya podemos arrastrar el elemento gráfico que queramos añadir y modificar las propiedades: El texto que se muestra, el ancho, etc.


Ahora sólo hay que pulsar el botón de Play (Run) que hay en la barra de herramientas para ejecutar la aplicación y, ¡tachán! ¡Ya tenemos nuestro primer Hola Mundo!


Lógicamente, el botón no hace nada. Por Dios, que es un triste Hola Mundo, no se puede pedir más. Ya hemos creado nuestra aplicación y sabemos un poco más sobre SAPUI5. 

Eso sí, todavía no lo hemos publicado y sólo podemos acceder nosotros. Pero tiempo al tiempo.






7 comentarios:

  1. Hola!. Excelente explicación!. estoy comenzando, por cuestiones laborales, a aprender a utilizar SAPUI5 y quisiera pedirte si podrías explicar como usar las vistas JS. Y ampliar un poco más el uso en Eclipse. Muchas gracias. Saludos.

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias!

      La verdad es que vistas puras en js nunca he creado más que algún Hola mundo para probar hace tiempo, es una asignatura pendiente, al comenzar con desarrollos para Fiori comencé con vistas xml y,aunque al principio me parecía complejo, al final son fáciles de entender y me da la impresión de que visualmente el código queda más claro que con vistas js. Una opinión propia, claro. Además, te obliga a respetar más la arquitectura mvc y para lo que no te llegue, lo amplías en el controlador (que al final no deja de ser modificar la vista en js pero en el controlador... así que ahí ya no respetas el mvc,qué paradoja :D ,aunque eso ya es más filosofía que programación).
      En cualquier caso quería hacer algún post sobre crear o modificar objetos con js así que en algún momento alguno caerá. Pero no sé para cuando :(

      Sobre eclipse, por temas de máquina yo lo usaba en la versión kepler para ampliar estándar, pero se me quedaba corto cuando tocó crear nuevas vi que por tema plantillas era más fácil usar el web ide y,además, el kepler sólo me dejaba actualizar a la 1.28, así que lo acabé olvidando. A ver si pruebo a instalar el eclipse oxygen para ver cómo están ahora las cosas con el eclipse (y a instalar también el web ide personal edition).

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. oye muchisimas gracias, ahora me gustaria ver si podrias poner tamien como hacer el mismo boton pero sin el layout, solo con codigo , asi nos vamos familiarizando que libreria usar, donde agregarla y asi particularmente busque en sapui5 sdk demo kit y vi el boton pero no se donde agrego su libreria ni como usar sus propiedades o cual es la etiqueta del boton ya que ahi no sale solo sale propiedades, metodos, eventos y esas cosas , muchas gracias!

    ResponderEliminar
    Respuestas
    1. tuve fue un problema al abrir el layout editor me sale un error y dice que vea en la consola de sap web ide

      Eliminar
    2. segun lei en un foro de sap solo funciona con la starter template , en otro lei que solo funciona en chrome y asi es efectivamente al igual que solo hay extension para ui5 inspector en chrome

      Eliminar
    3. Genial que te haya sido útil. Tendré en cuenta, para futuros posts, hacer uno explicando cómo crear objetos dinámicamente mediante javascript, en lugar de hacerlo en el xml.

      Eliminar