Extender control estándar

Algunas veces no nos sirve con la funcionalidad que nos ofrecen los controles de las librerías SAPUI5 para implementar nuestros requerimientos, pero sí queremos utilizar toda la funcionalidad que ya nos aporta el estándar, para estos casos haremos un nuevo control como extensión de uno ya existente.

Un control SAPUI5 está formado por:

  1. Definición, que indica las propiedades, eventos, métodos, y a veces, asociaciones y agregaciones.
  2. Renderización, responsable de indicar el código HTML que define la estructura del control.
  3. Comportamiento, sería el código JavaScript que indica cómo se comporta el control frente a la interacción con el usuario, al lanzarse los eventos, …
  4. Estilo, define la forma visual del control.

Para extender un control estándar, lo primero que tenemos que hacer es definir un módulo para el nuevo control extendido que tenga como dependencia el módulo con la definición del control estándar, tal y como explicamos en el post Modularización en SAPUI5 apps.

Con los metadatos del control podemos definir:

  • Nuevas Propiedades: indicando el nombre, el tipo y opcionalmente un valor por defecto.
  • Nuevos Eventos: indicando únicamente el nombre.
  • Nuevas Agregaciones (relación entre dos controles de tipo padre a hijo): indicando el nombre y el objeto de configuración con su tipo (clase del objeto hijo), multiplicidad (0..1 o 0..n) y su nombre singular.
  • Nuevas Asociaciones (relación entre dos controles sin ser de tipo padre a hijo): indicando lo mismo que en las agregaciones.

Hay que tener en cuenta que para cada una de las propiedades y agregaciones nuevas se generan por defecto los típicos métodos vinculados como get, set, indexOf, insert, add, remove. Además para los eventos se generan los métodos para registrar, des-registrar o lanzar dichos eventos (attach, detach, fire).

Como hemos indicado anteriormente, también podemos modificar el comportamiento del control estándar implementando nuevos método o sobrescribiendo métodos de los que ya dispusiera dicho control. Para ello podemos indicar la implementación de dichos métodos a continuación de los metadatos teniendo cuidado con el nombre que le damos a estos métodos, ya que si nombramos de la misma manera que métodos existentes serán sobrescritos.

Y por último tenemos la capacidad de generar un renderizador para darle la estructura HTML al control utilizando instrucciones write, writeControlData, writeClasses, o llamadas a los getters y setters del control. En caso de dejar vacío el renderizador se ejecutaría el de la clase extendida.

Ya únicamente nos quedaría indicar cómo utilizar este nuevo control en nuestra aplicación, para ello definiríamos un nuevo espacio de nombres de la vista indicando el fichero en el que se encuentra el archivo que define los nuevos controles y luego instanciaríamos ese control haciendo referencia a ese espacio de nombres junto con el nombre que le dimos a dicho control.

Espero que os sea útil el post, cualquier comentario no dudéis en escribir y hasta el próximo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .

Blog de WordPress.com.

Subir ↑

A %d blogueros les gusta esto: