Ahora que ya conocemos qué es SAPUI5 y qué librerías SAPUI5 tenemos a nuestra disposición, nos ponemos manos a la obra y vamos a explicar cómo crear una aplicación SAPUI5. Para ello, vamos a ver qué herramientas necesitamos y cuáles son los primeros pasos que debemos dar para ver en funcionamiento una aplicación SAPUI5.

1. Entorno de desarrollo SAPUI5

En primer lugar, para ponernos a desarrollar una aplicación SAPUI5 deberemos tener instalado el entorno de desarrollo por excelencia: Eclipse, para el que deberemos instalar dos plugins especiales propios de SAPUI5:

• SAPUI5 ABAP Repository Team Provider: Nos proveerá de la funcionalidad necesaria para deployar nuestra aplicación SAPUI5 a un repository ABAP.
• UI Development toolkit for HTML5: Descargará todas las librerías y recursos necesarios para el desarrollo de aplicaciones SAPUI5.

2. Creación de un proyecto SAPUI5

Una vez que disponemos del entorno de desarrollo Eclipse, con los componentes necesarios instalados, el siguiente paso es crear un proyecto SAPUI5. Para ello, seguimos los siguientes pasos:

1. Desde el menú File de Eclipse: File –> New –> Project
2. Dentro de la carpeta SAPUI5 Application Development, elegir la opción Application Project:

3. En la siguiente pantalla, además de elegir el nombre del proyecto, es el momento de elegir la librería SAPUI5 base del proyecto: ui.commons (aplicación escritorio) o sap.m (aplicación móvil). Además, tenemos la opción de crear una vista inicial o no. Normalmente, seleccionamos esta opción para que automáticamente nos cree la primera vista donde vamos a ir creando la interfaz de nuestra aplicación SAPUI5, así como el controlador asociado a esta.

4. Si hemos seleccionado la opción “Create an Initial View” tendremos que dar un nombre a esta vista inicial además de elegir el tipo de vista SAP UI5 que queremos que sea. Las vistas pueden desarrollarse en los siguientes formatos: Javascript, XML, JSON y HTML.

La elección de un formato u otro depende principalmente de las preferencias del desarrollador. Aunque es cierto que las vistas de tipo Javascript son las que más potencia tienen, pero por otra parte, las vistas XML son las más ligeras en cuanto a lo que a carga de la página se refiere. Para este ejemplo elegiremos Javascript.

5. Por último, pulsando “Finalizar” el wizard de creación de proyecto SAPUI5 terminará y en el explorador de proyectos de Explorer ya dispondremos de la estructura inicial de nuestro nuevo proyecto SAPUI5.

3. Estructura básica del proyecto SAPUI5

Nada más crear un proyecto SAPUI5 nos encontraremos con la estructura de ficheros que se puede observar en la siguiente imagen.

En ella podemos encontrar todas las librerías y recursos necesarios para el desarrollo SAPUI5, pero donde tenemos que prestar especial atención es en la carpeta WebContent del proyecto, en la que se encontrarán todos los ficheros que tendremos que manipular para ir desarrollando nuestra aplicación SAPUI5.

• html: Es el punto de acceso a la aplicación, donde se cargarán todos los recursos necesarios y en donde se encontrará el HTML al que se irá añadiendo contenido para crear la interfaz final de la aplicación.
• /proyectodeprueba/Prueba.view.js: Fichero Javascript en el que se desarrollará la vista inicial de la aplicación. Como ya se ha comentado, las vistas pueden ser ficheros Javascript, XML, JSON o HTML.
• /proyectodeprueba/Prueba.controller.js: Fichero Javascript correspondiente al controlador asociado a la vista inicial de la aplicación SAPUI5. En él se implementará la funcionalidad propia de la vista: respuesta a eventos, validaciones, etc. En el caso de los controladores, siempre serán ficheros Javascript.

En la segunda parte de este artículo, incidiremos más en cada uno de estos ficheros y veremos con qué elementos clave cuenta cada uno de ellos, además de empezar a diseñar una interfaz para esta aplicación SAPUI5.