Para ver una muestra de ello, la siguiente imagen muestra una lista con un icono a la izquierda, dependiendo del estado del item:
Como puede apreciarse, aunque sea un ejemplo sencillo, da alas a multitud de posibilidades, tanto de visualización como de edición.
El poder de ItemRenderer es poder incrustar en lugar de un item un componente. Esto es, en lugar de una fila en una lista, o de una columna en un DataGrid.
Planteamiento
El planteamiento de este componente o, mejor dicho, su utilidad, es poder realizar una lista que nos permita seleccionar un elemento, pero que, dependiendo de su estado, se pueda interactuar de una manera u otra.
Por ejemplo, imaginemos una lista de frutas asociadas a un pedido. Puede haber frutas que han sido ya entregadas (estado false o no disponibles) y otras que aún no han sido entregadas (estado true o disponibles). De esa lista, es posible quitar frutas para que no sean servidas. Obviamente, aquellas que ya han sido entregadas no podrán quitarse del pedido, y sí aquellas aún no han sido entregadas. Además del dato de estado, una ayuda visual se agradece, indicando con un pequeño icono o algún estilo de texto cuáles están disponibles y cuáles no.
Componente de contenido
El componente de contenido será aquel que será renderizado en el item. En nuestro caso será un simple HBox, que contendrá una imagen de 20x20 (en formato png, por las transparencias), y una etiqueta con el texto a visualizar.
El código de este componente es el siguiente:
Es importante señalar que en una lista la interacción de los datos ha de coordinarse, pues al hacer clic sobre el item, éste también debe retornar la información. Si no fuera así, sólamente sería un elemento decorativo y no se podría seleccionar. Es por ello que se haya sobreescrito (override) los método set data y get data. Cuando la lista comienza a dibujar (render) cada item, utiliza este componente que hemos utilizado, y le pasa (set) los datos. Internamente, cuando recibe los datos, llama al método refresh para pintarlos adecuadamente. Por otro lado, cuando el usuario hace clic sobre el item, éste debe devolverle (get) a la lista los datos para que pueda seleccionarse e interactuar con el código.
Otra cosa importante a señalar es el uso de la función loadImage:
// This function loads the image
private function loadImage(imgURL:String):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
function (e:Event):void {
itImage.source=e.currentTarget.content; });
loader.load(new URLRequest(encodeURI(imgURL)));
}
Se le llama con la ruta donde se alojan las imágenes (puede ser en disco duro, o una URL externa, o una referencia desde el directorio raíz). En el ejemplo, se ha creado un directorio "resources" dentro del raíz del código Flex, y por ello se indica en la ruta como "resources/imagen". Esta función es más recomendable que usar simplemente la propiedad source de la imagen, pues además permite recoger la información correspondiente a la imagen si queremos hacer uso de ella.
LISTA
En el ejemplo, se visualizará la lista correspondiente a partir de unos datos almacenados en un ArrayCollection. Estos datos están incrustados en el código, pero podrían ser leídos de un HTTPService o de un servicio Web.
Los campos de información son los siguientes:
- label: etiqueta o texto a visualizar en la lista
- data: código numérico del producto (no se visualiza)
- state: true/false. Indica la disponibilidad del item
El código es el siguiente:
El punto de inflexión está en la propiedad itemRenderer de la lista, en donde se indica qué componente va a dibujarse en el item de la lista.
El resultado será, además del visual, el que cuando un usuario seleccione un item de la lista, se mostrará una alerta con los datos del item seleccionado, tal y como muestra la siguiente imagen:
