En este post vamos a tratar de explicar el concepto de modularización y cómo llevarlo a cabo dentro de nuestras aplicaciones SAPUI5.
La modularización consiste en la división del código de nuestras aplicaciones en partes más pequeñas e independientes (llamadas módulos) que permitan la reutilización de ese código, mejorando la legibilidad del código y sobre todo su mantenimiento.
El framework SAPUI5 soporta la modularización en las aplicaciones JavaScript, donde cada módulo define una lista de dependencias de otros módulos que necesitan ser cargados antes de poder usar dicho módulo. Para la carga de forma asíncrona de un módulo y de sus posibles dependencias tenemos las sentencias sap.ui.define() y sap.ui.require().
Para la definición de un módulo JavaScript utilizaremos sap.ui.define() como única instrucción para un fichero de tipo .js. Esta instrucción tiene la siguiente sintaxis:
sap.ui.define(Nombre, Dependencias, FuncFactory, Export)
Los parámetros:
- Nombre: define el nombre del módulo, es de tipo string y puede ser omitido, en cuyo caso se sustituirá por el nombre del fichero.
- Dependencias: es un array de strings donde definimos los módulos necesarios para la ejecución del módulo que estamos definiendo, y por tanto son otros módulos que necesitamos cargar. El nombre de las dependencias pueden comenzar por “ ./ “, lo que indica que el recurso se encuentra en la misma ruta que el módulo que estamos definiendo.
- FuncFactory: es la función donde generamos el valor u objeto que vamos a devolver. Indicar que dentro de los parámetros de esta función hacemos referencia a los módulos indicados en el array de dependencias para poder utilizarlos dentro de nuestra función Factory.
- Export: de tipo booleano, indica si el módulo debe únicamente usarse con código de SAP.
Para la carga en un determinado momento de uno o varios módulos de forma asíncrona podemos utilizar la sentencia sap.ui.require, con la siguiente sintaxis:
sap.ui.require(Dependencias, callbackSuccess, callbackError)
Hay que tener cuidado a la hora de cargar recursos desde dentro de nuestra aplicación, ya que por defecto va a tratar de buscar la ruta de nuestros recursos desde la ruta en la que nos encontramos cargando los recursos. Para resolver esto, tenemos el parámetro de configuración en el bootstrap data-sap-ui-resourceroots, donde le indicamos que sustituya el espacio de nombres de la ruta de los recursos propios de la aplicación por la ruta dónde se encuentra el fichero en el que se define el bootstrap, en este caso el index.html.
En este ejemplo a la hora de cargar el módulo Util.js sustituiría la parte de la ruta sap/training/prueba por la dirección donde está definida la configuración, en este caso el index.html.
Espero que con este post quede un poco más clara la modularización dentro de nuestras aplicaciones SAPUI5 y el por qué tienen la estructura que tienen los ficheros .js que nos genera directamente el SAP Web IDE cuando creamos aplicaciones usando algún template.
Espero vuestros comentarios, hasta el siguiente post.
