✒️SAP BTPFIORI / La reutilización de código Por Jose Baz Suarez

Selector Alummnos / Empresas

SAP BTPFIORI La reutilización de código

SAP BTPFIORI La reutilización de códigoLa 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

  1. ¿Qué permite la reutilización de código en SAPUI5?
    Aprovechar partes ya desarrolladas (vistas, fragmentos o funciones) para reducir duplicidad y mejorar mantenimiento.

  2. ¿Qué elemento se utiliza para reutilizar porciones de interfaz?
    Los Fragments.

  3. ¿Qué objetivo tiene un controlador base (BaseController)?
    Compartir funciones comunes entre distintos controladores.

  4. ¿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.

  5. Menciona una buena práctica al reutilizar código en SAPUI5.
    Mantener una nomenclatura clara, evitar duplicaciones y documentar cada fragmento o módulo.

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP SemiSenior

Jose Rodrigo Baz Suarez

Profesión: Analista de Inventarios y Auditoria - Uruguay - Legajo: WX92M

✒️Autor de: 47 Publicaciones Académicas

🎓Egresado del módulo:

Disponibilidad Laboral: FullTime

Presentación:

Analista con experiencia en sap, contabilidad, inventarios y costos. manejo de cierres, balances, reportes y mejoras de procesos administrativos.

Certificación Académica de Jose Baz

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "La reutilización de código" de la mano de nuestros alumnos.

SAP SemiSenior

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...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

La reutilizacion de codigo Modulo: en la division del codigo de las app en partes mas pequeñas. Nombre Definicion Dependencias La carga de un modulo en el contralador Sincrono: Las instrucciones se ejecutan una después de la otra, El programa espera a que una tarea termine antes de continuar con la siguiente. Asincrona: El programa lanza una tarea y sigue con la siguiente, sin esperar a que termine. Útil para tareas lentas como acceder a una API, leer archivos, cargar servicios OData en SAPUI5, etc. Sentencias para una carga asincrona sap.ui.define: definicion de un modulo JavaScript. sap.ui.requiere: cargar módulos JavaScript de manera asíncrona, es decir, bajo demanda y sin bloquear...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. QUE ES UN MODULO Es un archivo JS que se puede cargar y ejecutar en un navegador. No tienen una estructura o sintaxis predefinida, pero los desarrolladores pueden utilizar las siguiente funciones: Nombre: Definicion: basada en la funcion sap.ui.define, esta sintaxis AYUDA A GARANTIZAR UNA CARGA ASINCRONICA DE RECURSOS Dependencias 2. LA CARGA DE UN MODULO EN EL CONTROLADOR Los modulos necesarios en SAPUI5 estan habilitados para cargarse de forma asincrona. los procesos asincronicos son operaciones que se ejecutan "en paralelo" al flujo de ejecucion de las apps. Cuando un procesoa sincrono termina, el mismo dispara un evento que es asociado al callback. Para la carga de forma asincrona de un modulo y de...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


La modularizacion consiste en dividir el código de nuestras aplicaciones en partes más pequeñas e independientes que permite la reutilización del código mejorando la legitimidad del mismo y sobre todo su mantenimiento. El fraemwork SAP GUI5 soporta la modularizacion de las aplicaciones JAVASCRIPT donde cada módulo define una lista de dependencias de otros módulos que necesitan ser cargados antes de poder usar dichos módulos para la carga de forma sincrona de un módulo de sus posibles dependencias obtenemos las sentencias SAP.UI.DEFINE y SAP.UI.REQUIRE. Al igual que document.fragment en HTML el fragmento en si no tiene presentación en HTML cuando se inserta en el árbol...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Navigation and Code Reusability SAPUI5 supports the modularization of JavaScript applications. This means instead of defining and loading a large JavaScript package, an application can be divided into smaller parts that can be loaded at runtime as needed. These smaller individual files are called modules. Modularization involves dividing the application code into smaller, independent parts (modules) that facilitate code reuse, improve readability, and enhance maintainability. Modules can contain any code, but typically, their content focuses on a common theme, like forming a JavaScript class, a namespace, or addressing specific functions such as client-server communication or mathematical operations. 1 | What is a Module? A module is a JavaScript...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

¿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...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Modulos modularización reutilización sap.ui.define sap.ui.require carga asincrónica de recursos dependencias asincronicos se ejecutan en paralelo callback controller messagetoast jquery.sap.global.js controlador de eventos controlador de vistas fragmento xml html js desacoplamiento this.getOwnerComponent()

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Modulo Es un archivo JavaScript que se puede cargar y ejecutar en un navegador. No hay reglas o definiciones sobre que codigo pertenece a un modulo y que no La modularizacion consiste en la division del codigo de nuestras aplicaciones en partes mas pequeñas e independientes qie permitan la reutilizacion de ese codigo Para cargar de form asincronica un modulo y sus posibles dependencias tenemos las sentencias: sap.ui.define Los fragmentos Los fragmentos son parte de UI independiebtes, liviana y reutilizables que se pueden usar para modulsrizar la vista de nuestra aplicacion. Son como vistas pero no hay controlado unido a fragmentos Los fragmentos se utilizan ampliamente al diseñar diálogos porque los dialogos generalmente...

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!