Arquitectura de Componentes en FlexJS™: Strands y Beads

Flex es reconocido por ser la punta de lanza en cuanto a innovación en matéria de arquitectura y tecnología de frameworks de cliente. Apache FlexJS™ no iba a ser menos y aprende de la experiencia generada en la última década por Flex incorporando importantes novedades que se introducen gracias al diseño desde cero. Una vez introducido el nuevo framework en nuestro último artículo, pasemos a descubrir que novedades aporta.

Composición sobre herencia

Una de los puntos clave en FlexJS es su filosofía de composición sobre herencia a lo largo de todo el framework. Esto supone una diferencia significativa con respecto al resto de frameworks de cualquier otra tecnología donde la acumulación de funcionalidad supone una sobrecarga por acumulación importante en sus clases y componentes.

La arquitectura de componentes en FlexJS se basa principalmente en composición sobre herencia, ofreciendo un resultado modular, extensible y ligero.

Es habitual encontrar funcionalidad de bajo uso en los componentes de un framework, la cual incide de forma decisiva en la sobrecarga y peso de los mismos. Además, la herencia es un concepto más cómodo de usar que la composición para la mayoría de desarrolladores, pero suele acumular una sobrecarga importante que podemos evitar si desde el propio corazón del framework cambiamos las reglas de composición iniciales.

Por ejemplo, un TextInput tiene funcionalidad para manejar el password o el “prompt” de usuario, pero el uso de estas funcionalidades satélite en una aplicación suele ser bajo. Por otra parte, hoy en día, con tal diversidad de dispositivos (ordenadores, móviles, tablets,..), es normal que en el navegador de un ordenador tradicional usemos el ratón para interaccionar con la aplicación, mientras que en un movil o tablet usemos el dedo. En estos casos, es normal que no tenga sentido en la versión movil atender los clicks de ratón, y en la de escritorio atender los “toques” del dedo. O por poner un último caso, ¿es necesario tener en un botón una etiqueta y/o un icono cuando podríamos no usar el uno o el otro, o ninguno de los dos?.

Una de los fallos que queremos evitar con este diseño es el tener god classes, como UIComponent, que acumulan funcionalidad y terminan encapsulando cerca de 15000 lineas de código.

Strands & Beads

Para entender como está implementada la composición en FlexJS, tenemos que introducir dos nuevos conceptos: Strand y Bead. Un Strand sería una hebra (o hilo), mientras que un Bead sería una cuenta (o perla). Un Strand puede albergar un conjunto de Beads. El Strand o hilo, sería la zona del componente donde depositamos las distintas funcionalidades (cada funcionalidad es un Bead) por composición.

MVC a nivel de componente

En FlexJS tenemos una clara separación del Modelo-Vista-Controlador ya que cada componente posee de forma básica estas tres piezas. Dichas piezas están implementadas como beads. Por tanto a diferencia de los anteriores SDK de Flex, conseguimos tener un MVC a nivel de componente, lo cual hace a los mismos mucho más versátiles, modificables y extendibles.

Por ejemplo, el TextInput en FlexJS se compone de un modelo (TextModel), una vista (TextInputWithBorderView) y un controlador (EditableTextKeyboardController).

Fig 1: MVC con Strands y Beads

Fig 1: MVC con Strands y Beads

Estas tres beads que juntas conforman el MVC básico del componente son las mínimas necesarias para su funcionamiento. No obstante, luego podemos componer más beads, si fuese necesario, al declararlo en nuestra aplicación o añadiéndolas en tiempo de ejecución.

Fig 2: Añadir Beads opcionales al strand

Fig 2: Añadir Beads opcionales al strand

La declaración de este componente en MXML sería así:

A nivel de los componentes del framework, el engarce de estas piezas se hace a nivel de CSS donde tenemos una declaración como la siguiente:

En este caso tenemos beads adicionales que son parte de la vista. Es decir, cada componente puede tener a su vez su propio strand con sus propias beads.

Ejemplo de implementación de un Bead

Como ejemplo veamos la creación de un Bead del propio framework FlexJS: PasswordInputBead, sacado de la propia wiki de FlexJS. A nivel del framework FlexJS, tenemos que crear la misma pieza en AS3 como en JS. Veamos los pasos:

1Crear la clase PasswordInputBead

Estas clases implementan la interface IBead y usan el strand compartido ya que no poseen zona de representación propia.

En JS creamos la contrapartida a la clase AS3 que debe estar en el mismo paquete. Hay que tener en cuenta que el compilador siempre intentará hacer cross-compiling cuando no exista la versión JS (que es lo que buscará hacer el usuario del framework en sus aplicaciones).

2Implementar el metodo set del strand

y en JS haremos añadiremos al prototype la versión correspondiente:

3Añadir un listener al evento viewChanged

Este Evento se lanza cuando el framework añade la vista al componente y es el momento indicado para añadir listeners (¿recordáis el partAdded en Flex 4?)

No hay versión JS para este paso ya que la vista estará preparada directamente.

4Implementar la funcionalidad del bead

Para ello, tenemos que implementar el handler viewChangeChandler antes mencionado:

Aquí recuperamos la vista mediante el método getBeadByType del strand usando su interface. Seguidamente usaremos el textField asociado para configurarlo en modo password. CSSTextField es un TextField de bajo nivel que hace sencillo el aplicarle estilos CSS y tener una versión JS correspondiente.

En JS tenemos que añadimos la linea que configura el <input> para que se comporte como un campo de contraseña.

En FlexJS los componentes JS tienen una propiedad element que es la base HTML del componente. A menudo element será un

cuando el componente es complejo. Para elementos más básicos como el que nos ocupa element es directamente el <input> que buscamos.

Enlaces

Podéis leer más sobre componentes FlexJS, composición, Strands y Beads, en los siguientes enlaces de la wiki de Apache FlexJS:

Creando Componentes FlexJS
Contribuyendo al framework Apache FlexJS

Desde el proyecto se pide ayuda de la comunidad para avanzar de forma más rápida. El modelo de Apache se basa en voluntariado y por tanto el avance de FlexJS está directamente relacionado con el soporte de toda la comunidad.

Conclusión

La nueva arquitectura de componentes basada en composición sobre herencia mediante strands y beads, es un paso adelante en ingeniería de frameworks cliente para el desarrollo de interfaces ricas, gracias a las posibilidades de flexibilidad y extensibilidad que ofrece. Si a esto unimos el reducido peso de este tipo de soluciones compuestas, junto a la potencia del nuevo Framework FlexJS a la hora de obtener salidas tanto en Flash (SWF) como en HTML(HTML/JS/CSS), estamos ante un framework que sin duda promete ofrecer grandes opciones de futuro totalmente adaptadas al panorama multi-pantalla y multi-dispositivo actual.

Etiquetado en:

5 Comentarios

  1. Carlos Rovira

    Thanks for the interest Adama,

    we are considering to update the site with support for english so we can publish some articles in english, but we need to evaluate the implications and the effort to get this up and running.

    Thanks!

    Carlos

  2. Pingback: Liberado Apache FlexJS™ y Apache Flex FalconJX™ | Creando soluciones RIA con Apache Flex

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase