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.