✒️SAP BTPFIORI / La creación de controles personalizados Por Jose Baz Suarez

Selector Alummnos / Empresas

SAP BTPFIORI La creación de controles personalizados

SAP BTPFIORI La creación de controles personalizadosLa creación de controles personalizados en SAPUI5
1. Introducción

SAPUI5 permite desarrollar controles personalizados (custom controls) cuando los controles estándar no satisfacen completamente las necesidades de la aplicación.
Estos controles se crean extendiendo las clases base del framework, lo que ofrece una gran flexibilidad para adaptar la interfaz a los requerimientos del negocio sin perder compatibilidad con Fiori.

El objetivo principal de los controles personalizados es reutilizar comportamientos y diseños específicos dentro de una o varias aplicaciones.

2. Concepto de control personalizado

Un control en SAPUI5 es un objeto de la clase base sap.ui.core.Control o alguna de sus subclases (por ejemplo, sap.m.Button, sap.m.Input).
Al crear un control propio, el desarrollador puede definir:

  • Sus propiedades (properties).

  • Sus eventos (events).

  • Su renderizado (cómo se mostrará en pantalla).

  • Su lógica interna (comportamiento interactivo).

Los controles personalizados siguen el patrón MVC, donde la lógica y la representación visual se mantienen separadas.

3. Estructura básica de un control personalizado

Un control personalizado se define con la función sap.ui.define() y extiende una clase base mediante .extend().

Ejemplo:

sap.ui.define(["sap/ui/core/Control"], function(Control) { "use strict"; return Control.extend("mi.proyecto.control.MiControl", { metadata: { properties: { "texto": { type: "string", defaultValue: "" } }, events: { "alPresionar": {} } }, renderer: function(oRM, oControl) { oRM.write("<div"); oRM.writeControlData(oControl); oRM.write(" class='miControlPersonalizado'>"); oRM.writeEscaped(oControl.getTexto()); oRM.write("</div>"); }, onclick: function() { this.fireAlPresionar(); } }); });

Descripción:

  • metadata: define las propiedades y eventos del control.

  • renderer: dibuja el contenido HTML que representará al control.

  • fireAlPresionar(): dispara un evento cuando se hace clic en el control.

4. Integración del control en una vista

Una vez definido, el control puede utilizarse como cualquier otro en una vista XML o JS.

Ejemplo de uso en XML:

<myns:MiControl texto="Presiona aquí" alPresionar="onAccionPersonalizada"/>

Configuración necesaria:

  • Registrar el namespace del control personalizado en el manifest.json o en el encabezado XML:

    xmlns:myns="mi.proyecto.control"
5. Ventajas de usar controles personalizados

  • Permiten extender la funcionalidad estándar sin modificar el framework.

  • Reutilizables en múltiples proyectos.

  • Separan la lógica de negocio del diseño visual.

  • Facilitan el mantenimiento y la escalabilidad del código.

  • Se integran de manera nativa con el sistema de binding de SAPUI5.

6. Buenas prácticas

  • Nombrar los controles usando el namespace del proyecto (mi.app.control.NombreControl).

  • Definir solo las propiedades y eventos necesarios para mantenerlos livianos.

  • Utilizar el objeto RenderManager (oRM) para escribir HTML de forma segura.

  • Implementar un archivo CSS asociado si el control requiere estilos propios.

  • Registrar los controles en el manifest.json para facilitar su uso en vistas XML.

  • Documentar su comportamiento y uso esperado.

7. Ejemplo con estilo CSS asociado

Archivo CSS:

.miControlPersonalizado { background-color: #f4f4f4; border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; font-weight: bold; } .miControlPersonalizado:hover { background-color: #e0e0e0; }

Este CSS se puede incluir dentro de la carpeta css/ del proyecto y aplicarse automáticamente al renderizado del control.

8. Conclusión

Los controles personalizados en SAPUI5 ofrecen una poderosa herramienta para crear componentes reutilizables, dinámicos y ajustados a los estándares de diseño Fiori.
Permiten extender las capacidades nativas del framework y optimizar el desarrollo de interfaces más específicas, manteniendo la arquitectura modular y la compatibilidad con el ecosistema SAP.

Preguntas de repaso

  1. ¿Qué clase se utiliza como base para crear un control personalizado?
    ✅ sap.ui.core.Control

  2. ¿Qué propiedad dentro del control define sus parámetros, eventos y agregaciones?
    ✅ metadata

  3. ¿Qué función se utiliza para definir cómo se dibuja un control personalizado?
    ✅ renderer

  4. ¿Qué palabra clave permite registrar un nuevo control dentro de SAPUI5?
    ✅ sap.ui.define

  5. ¿Por qué se recomienda usar el objeto RenderManager (oRM)?
    ✅ Porque permite generar contenido HTML seguro y compatible con el framework.

 

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

🎓Cursando Actualmente: Carrera Consultor SAP MM Nivel Avanzado

🎓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 creación de controles personalizados" de la mano de nuestros alumnos.

SAP SemiSenior

La creación de controles personalizados en SAPUI5 1. Introducción SAPUI5 permite desarrollar controles personalizados (custom controls) cuando los controles estándar no satisfacen completamente las necesidades de la aplicación. Estos controles se crean extendiendo las clases base del framework, lo que ofrece una gran flexibilidad para adaptar la interfaz a los requerimientos del negocio sin perder compatibilidad con Fiori. El objetivo principal de los controles personalizados es reutilizar comportamientos y diseños específicos dentro de una o varias aplicaciones. 2. Concepto de control personalizado Un control en SAPUI5 es un objeto de la clase base sap.ui.core.Control o alguna de sus subclases (por...

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 creacion de controles personalizados: Es crear otros elementos para interactuar en la interfax sap.ui.core.Control: es la clase base para todos los controles de interfaz de usuario en SAPUI5. Es parte del núcleo del framework SAPUI5 y proporciona funcionalidades fundamentales para crear componentes visuales reutilizables como botones, entradas de texto, tablas, etc. sap-m-Image.extend: es una forma de crear una subclase personalizada que hereda del control estándar sap.m.Image (es un control UI estándar de SAPUI5 para mostrar imágenes) en SAPUI5. sap.ui.core.Control.extend: es un método que se usa para crear un nuevo control personalizado en SAPUI5 desde cero, heredando directamente de la clase base sap.ui.core.Control...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

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

1. LOS CONTROLES PERSONALIZADOS Podemos ampliar los controles existente o crear nuevos. Cuando deseamos desarrollar varios controles para reutilizarlos en diferentes aplicaciones, es recomendable crear una biblioteca de controles en lugar de utilizar estos controles individuales. para nombres de ns, esta reservado que comienzen con prefijo sap 2. LA ARQUITECTURA DE CLASE BASE DE SAPUI5 clase base sap.ui.core.Control el metodo extend() esta disponible para todos los conroles 3. LA ESTRUCTURA DE UN CONTROL PERSONALIZADO el control se crea en la carpeta del proyecto, DENTRO DE LA CARPETA CONTROL. el nombre del control es un archivo de tipo JavaScript usar la dependencia estandar sap/ui/core/Control...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

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

SAP Expert


SAP GUI5 viene con una colección de gran cantidad de controles de interfaz de usuario que podemos usar por ejemplo más de 180 para escenario compatibles con dispositivos móviles y de escritorio, aun así, es posible que tarde o temprano tengamos la necesidad de algo que SAP GUI 5 no proporciona de fábrica, aquí es cuando tenemos que crear nuestros propios controles personalizados. El rende rizador implementa el método de rende rizado estático que se llama cuando se agrega un control al DOM para renderizar un control el render manager ejecuta el método render en el render correspondiente del control respectivo y pasa la referencia a sí mismo y al control.

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


1. Custom Controls Custom controls in SAPUI5 allow us to create reusable UI components. When developing a new SAPUI5 application, it’s important to consider how to structure the application and what controls will be needed. Controls can be extended from existing ones or created anew. Namespace Usage: To avoid conflicts, avoid using the sap namespace for anything other than SAP-provided content. 2. Base Class Architecture of SAPUI5 SAPUI5 controls inherit from the base class sap.ui.core.Control, which provides essential features such as event handling, data binding, and rendering. Inheritance Example: // Extending an existing control sap.m.Image.extend("custom.Image", { // custom properties and methods }); // Creating...

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

controles personalizados propiedades eventos agregaciones espacios de nombre sap.ui.core.Control extend() se define la nueva subclase metadatos propiedades eventos agregaciones y asociaciones init render parámetro de oRM getter setter ciclo de vida setvalue _onRate _submit renderización HTML Padding lifecycle RatingIndicator

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

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

SAP Senior

Controles personalizados Para desarrollar controles con SAPU5 en JavaScript, es posible ampliar los controles existentes o crear nuevos controles Cuando deseamos desarrollar varios controles para reutilizarlos en diferentes aplicaciones, es recomendable crear una biblioteca de controles en lugar de utilizar estos controles individuales La Arquitectura de las clase base de SAPUI5 la clase base de SAPUI5 es sap.ui.core.control y obtiene todas las cualidades que podria esperar al construir nuestro propio control a partir de las subclases el metodo extend() esta disponile en todos los controles y es utilizado para definir la nueva subclase La Estructura de un control personalizado El control se crea dentro de la carpeta proyecto, dentro de...

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!