La reutilización de código
1. Introducción
En SAPUI5, la reutilización de código busca aprovechar partes ya desarrolladas (vistas, fragmentos o funciones) para evitar duplicaciones, reducir errores y mejorar la mantenibilidad.
Esta práctica es fundamental en el desarrollo profesional de aplicaciones Fiori, donde los componentes se diseñan para ser modulares, escalables y reutilizables.
2. Concepto general
La reutilización consiste en centralizar la lógica o la interfaz común para que pueda emplearse en distintas partes del proyecto o en diferentes aplicaciones.
SAPUI5 ofrece diversas formas de reutilizar código:
-
Fragments → Porciones de interfaz reutilizables (XML, HTML o JS).
-
Controllers base o helpers → Funciones comunes para varios controladores.
-
Módulos utilitarios (utilities) → Archivos JS con lógica compartida.
-
Componentes reutilizables → Pequeñas aplicaciones o módulos integrables en otras apps Fiori.
3. Formas de reutilización más frecuentes
a)
Fragments (Fragmentos de vista)
Permiten reutilizar partes de una interfaz sin crear una vista completa.
Ejemplo: cuadros de diálogo, filtros o cabeceras.
if (!this._oDialog) { this._oDialog = sap.ui.xmlfragment("proyecto.view.Dialogo", this); this.getView().addDependent(this._oDialog); } this._oDialog.open();
Ventaja:
Pueden incluirse en varias vistas sin duplicar código.
b)
Controllers base
Agrupan funciones comunes que pueden ser heredadas por otros controladores.
sap.ui.define([], function() { "use strict"; return { mostrarMensaje: function(texto) { sap.m.MessageToast.show(texto); } }; });
Ventaja:
Evitan repetir la misma lógica (mensajes, validaciones, cálculos, etc.) en cada vista.
c)
Módulos utilitarios
Se crean mediante sap.ui.define para exportar funciones genéricas (por ejemplo, cálculos o formateadores).
sap.ui.define([], function() { return { calcularIVA: function(valor) { return valor * 1.22; } }; });
Ventaja:
Separan la lógica de negocio de la presentación, facilitando el mantenimiento y las pruebas.
d)
Componentes reutilizables
Permiten integrar un bloque funcional completo (interfaz + lógica) dentro de otra aplicación Fiori.
Ejemplo:
Un componente de búsqueda de materiales que puede insertarse en diferentes proyectos mediante un ComponentContainer.
4. Ventajas de la reutilización
-
Disminuye el tiempo de desarrollo.
-
Mejora la consistencia visual y funcional de la aplicación.
-
Facilita la actualización de la lógica común desde un solo punto.
-
Fomenta una arquitectura modular y escalable.
-
Facilita la colaboración entre desarrolladores.
5. Buenas prácticas
-
Centralizar las funciones de uso común en controladores base o módulos “util”.
-
Nombrar fragmentos y módulos de forma coherente y descriptiva.
-
Documentar la ubicación y propósito de cada artefacto reutilizable.
-
Evitar duplicación de código o fragmentos innecesarios.
-
Versionar los elementos reutilizables para mantener control de cambios.
6. Conclusión
La reutilización de código en SAPUI5 es clave para el desarrollo eficiente de aplicaciones Fiori.
Aplicando fragmentos, controladores base y módulos utilitarios, se logra un código limpio, mantenible y reutilizable en múltiples proyectos.
Preguntas de repaso
-
¿Qué permite la reutilización de código en SAPUI5?
Aprovechar partes ya desarrolladas (vistas, fragmentos o funciones) para reducir duplicidad y mejorar mantenimiento.
-
¿Qué elemento se utiliza para reutilizar porciones de interfaz?
Los Fragments.
-
¿Qué objetivo tiene un controlador base (BaseController)?
Compartir funciones comunes entre distintos controladores.
-
¿Qué ventaja tiene crear módulos utilitarios con sap.ui.define?
Centralizan la lógica de negocio y pueden ser reutilizados por cualquier vista o controlador.
-
Menciona una buena práctica al reutilizar código en SAPUI5.
Mantener una nomenclatura clara, evitar duplicaciones y documentar cada fragmento o módulo.