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.

[ftf w=”500″ h=”300″]



[/ftf]

Estilos

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

[ftf w=”500″ h=”200″]
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace renderers “renderers.*”;

renderers|UILabel
{
fontSize: 20;
color: #000000;
font-family: “_sans”;
min-height: 50;
padding-left: 10;
}
[/ftf]

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.

[ftf w=”500″ h=”300″]
package renderers
{
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;
import mx.core.IDataRenderer;
import mx.core.UIComponent;

public class UILabel extends UIComponent implements IDataRenderer
{
//Protected properties
protected var labelField:TextField;

// Public Setters and Getters
protected var _data:Object;
public function set data( value:Object ):void
{
_data = value;
// if the textfield has been created we set the text
if( labelField )
{
labelField.text = Font( data ).fontName;
}
}
public function get data( ):Object
{
return _data;
}

// Contructor
public function UILabel()
{
percentWidth = 100;
}

// Override Protected Methods
override protected function measure():void
{
measuredHeight = measuredMinHeight = getStyle( “minHeight” );
}
//————————————————————————–
override protected function createChildren():void
{
labelField = new TextField();
labelField.defaultTextFormat = new TextFormat( getStyle( “fontFamily” ), getStyle( “fontSize” ) );
labelField.autoSize = “left”;
addChild( labelField );
// if the data is not null we set the text
if( data )
labelField.text = Font( data ).fontName;
}
//————————————————————————–
override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
// position the field
labelField.x = getStyle( “paddingLeft” );
labelField.y = (unscaledHeight – labelField.textHeight ) / 2;
// we draw a separator line between each item
var lineY:int = unscaledHeight -1;
graphics.clear();
graphics.lineStyle( 1 );
graphics.moveTo( 0, lineY );
graphics.lineTo( unscaledWidth, lineY );
}
}
}
[/ftf]

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.

Etiquetado en:

Deja un comentario

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

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