Mobile ItemRenderer en ActionScript (Parte 1)

Recientemente un viejo conocido de la comunidad Flex hispana (Nahuel Foronda) ha publicado una serie de interesantes posts sobre Optimización de Flex para Móviles que iremos posteando traducidos al español, previa autorización

Si estás comenzando a hacer desarrollo móvil y estás acostumbrado a crear todos los ItemRenderers en MXML, habrás notado que pequeños dispositivos como teléfonos y tabletas no tienen un desempeño tan bueno como en escritorio y necesitarás buscar diferentes maneras de optimizar tu aplicación.

Una de las formas de optimizar tu aplicación móvil es crear tus ItemRenderers con ActionScript. Narciso Jaramillo escribió un buen artículo para Devnet con buenos tips para el desarrollo móvil y uno de los puntos es precisamente eso, mantener tus ItemRenderers en puro ActionScript.

Narciso menciona que el Framework de Flex viene con dos ItemRenderers uno es LabelItemRenderer que extiende a UIComponent y el otro es IconItemRenderer que extiende a LabelItemRenderer. Esas clases son buenas, pero a veces tenemos un diferente caso de uso que necesita una serie diferente de clases. así que en los ejemplos, no utilizaré esos rendereres. En su lugar, extenderemos directamente desde UIComponent o desde SpriteVisualElement para tener inclusive una clase más ligera que UIComponent.

Para el propósito de este tutorial, estoy planeando una serie de entradas explicando las bases y pasar a renderers con mayor dificultad.

Ejemplo Básico

Comencemos con el renderer más simple, un TextField que muestre algún texto. Para hacerlo sencillo, extenderemos desde UIComponent e implementaremos la interfaz IDataRenderer requerida por List.

Pero antes de hablar sobre el renderer, hablemos de otros elementos.

Application

Necesitas crear un proyecto tipo Mobile. En este ejemplo, usaré el más simple de los contenedores raíz, ese es un Application, no las subclases TabbedApplication o ViewBasedApplication. Agregaremos un List que se expanda al 100% como único elemento.

Estilos

Agregué una hoja de estilos externa donde tenemos todos los estilos para el ItemRenderer:

ItemRenderer

Tenemos una clase simple que extiende a UIComponet que nos da algunos métodos útiles y la habilidad de participar en el framework de CSS.

Estos 3 métodos de UIComponent que utilizaremos son los siguientes:

measure donde nosotros leemos el tamaño mínimo del renderer desde la hoja de estilos. Esto se vuelve útil porque dispositivos con diferentes resoluciones dpi necesitan diferentes medidas.

createChildren donde nosotros creamos el TextField, establecemos los estilos y si hay datos disponibles, configuramos el texto en el TextField a ser mostrado.

updateDisplayList donde posicionamos los elementos y dibujamos cada línea separadora para cada ItemRenderer.

Adicionalmente a estos métodos, tenemos la propiedad data, que es la implementación de la iterfaz IDataRenderer. Esa interfaz es el contrato con List y es la forma en la que los datos son empujados hacia el ItemRenderer. Si el TextField existe al momento de configurar los datos, entonces configuramos el texto dentro del TextField, de otra manera, lo guardamos para después.

Como pueden ver escribir un ItemRenderer en ActionScript no es tan difícil como suena.

Estoy planeando mostrar otros ejemplos en el futuro con múltiples elementos, fondos, estados, manipulación de texto, columnas múltiples y más.

El código fuente esta disponible para descargar.

Nota: Este artículo está traducido en MadeInFlex con autorización previa del autor, si quieren consultar la fuente original aquí tienen el enlace.