✒️SAP Fiori La reutilización de código

• ¿Qué es un módulo?

En resumen, un módulo es una parte más pequeña y modular de una aplicación JavaScript que se carga y ejecuta en el navegador. No hay reglas estrictas sobre qué código pertenece a un módulo, pero generalmente tienen un tema común o abordan una funcionalidad específica. La modularización permite dividir el código en partes independientes para facilitar su reutilización y mantenimiento. Los módulos pueden tener un nombre que los identifica y utilizan la función sap.ui.define para su definición. También pueden tener dependencias que deben resolverse antes de que se ejecute la función de devolución del módulo.

• La carga de un módulo en el controlador

El texto explica cómo se carga y utiliza un módulo en el controlador de una aplicación SAPUI5. Los módulos se consideran nodos en un gráfico, y sus dependencias deben estar conectadas. SAPUI5 permite cargar recursos de forma asíncrona utilizando las sentencias sap.ui.define y sap.ui.require.

El sap.ui.define se utiliza para definir un módulo JavaScript y sus dependencias. Permite cargar los módulos de forma asíncrona y llamar a una función de devolución de llamada una vez que se han cargado.

El sap.ui.require se utiliza para cargar dependencias de forma asincrónica sin necesidad de declarar un espacio de nombres. También se puede proporcionar una función de devolución de llamada opcional.

Es importante tener cuidado al cargar recursos desde dentro de la aplicación, ya que por defecto se buscará la ruta de los recursos en la ubicación donde se cargan. Para resolver esto, se puede utilizar el parámetro de configuración data-sap-ui-resourceroots en el bootstrap para indicar la ubicación de los recursos.

En resumen, el texto explica cómo cargar módulos y sus dependencias de forma asíncrona en una aplicación SAPUI5 utilizando las sentencias sap.ui.define y sap.ui.require, y cómo manejar la ubicación de los recursos.

• Los fragmentos

Los fragmentos son partes reutilizables de la interfaz de usuario que se utilizan para modularizar la vista de una aplicación. Son como vistas, pero no tienen un controlador asociado. Se utilizan en diálogos y pantallas dinámicas, y pueden incluirse en diferentes vistas según los escenarios comerciales. Los fragmentos son independientes del concepto Modelo-Vista-Controlador (MVC) y pueden utilizarse sin MVC, pero también se pueden integrar con vistas y controladores. SAPUI5 proporciona diferentes tipos de fragmentos, como fragmentos XML, HTML y JS. Los fragmentos son útiles cuando se desea reutilizar una interfaz de usuario en varias vistas o intercambiar partes de la interfaz de usuario bajo ciertas circunstancias. Un fragmento incrustado dentro de una vista se comporta como parte de esa vista, incluyéndose en el DOM y comportándose como si se hubiera definido en la vista misma.

• La implementación de diálogo como fragmento

El texto habla sobre la implementación de ventanas de diálogo en SAPUI5 utilizando fragmentos. Se menciona que se crea un fragmento con un mensaje de diálogo y se muestra cuando el usuario hace clic en un botón específico. El fragmento contiene un botón para cerrar el mensaje.

• La reutilización de un fragmento desde cualquier controlador

En este texto se describe cómo reutilizar un fragmento (cuadro de diálogo) en diferentes controladores y vistas de una aplicación.

Inicialmente, se menciona que el fragmento se crea en el controlador de la vista HelloPanel, pero esto requeriría copiar y pegar el código en cada controlador que necesite el diálogo, lo cual generaría redundancia de código no deseada.

Para solucionar esto, se propone invocar el diálogo a nivel de componente. Se sugiere realizar los siguientes cambios en el archivo Component.js:

Agregar una dependencia al controlador que contiene los métodos para abrir el diálogo.

Crear una instancia del objeto del diálogo y pasarle la instancia del controlador desde donde se invoca mediante el método this.getRootControl().

Destruir la instancia en el método exit() del controlador para liberar la memoria asignada en el objeto auxiliar. Esto se logra eliminando la propiedad que contiene la referencia a la vista.

Crear una función que permita crear el diálogo desde otros controladores.

Implementar una función de reutilización llamada openDialog que llame al método open del objeto auxiliar. Esto desacopla los detalles de implementación del diálogo de la codificación de la aplicación.

Utilizar this.getOwnerComponent() para obtener la instancia del componente de la aplicación y acceder al método onOpenDialog declarado en Component.js.

Se menciona que el método this.getOwnerComponent() obtiene el componente de la vista del controlador y devuelve undefined si no hay ningún componente conectado a la vista o si la vista no está conectada al controlador.