Pongo esta entrada porque me han pedido desde el grupo de Madeinflex más información de como mostrar una imágen desde un servicio XML.
La idea es que tenemos una imágen almacenada en un servidor tal cual o embebida en una base de datos. Programamos un servicio que devuelva dicha imágen en formato Base64. No voy a entrar en como desarrollar este servicio, ya que dependerá de la tecnología utilizada: Rails, ASP.NET, PHP, Coldfusion, etc. Pero la idea es que dicho servicio cargue la foto desde la base de datos o desde el fichero físico y la codifique en Base64 para enviarla dentro de un XML al cliente Flex. Si os sirve de ayuda, nosotros lo hacemos así porque almacenamos la foto, tal cual en formato Base64, en un campo de tipo Text dentro de la base de datos. Este servicio, devolverá un XML similar al siguiente que, como se puede ver, es fácil diseñarlo para poder enviar varias fotos de golpe:
<fotos> <foto> /9j/4RWrRXh..... .....AAAAAAAAAAAAA== </foto> </fotos>
En Flex, tendremos un Command (programamos utilizando Cairngorm), que, apoyándose en un Bussiness Delgate, se descarga el XML en un objeto del ModelLocator accesible por la aplicación.
En el formulario de visualización de la foto, ponemos un campo imágen:
<mx:Image id="imagen" top="5" height="100%" width="100%" horizontalCenter="0" scaleContent="true" horizontalAlign="center" verticalAlign="middle"/>
Y luego un script que permita interpretar el objeto XML descargado anteriormente para asignárselo al source de la imágen:
private function loadImage(o : Object) : void
{
// Se ha descargado alguna foto?
if (foto != null) {
// Creo un objeto donde voy cargando la foto
var loader : Loader = new Loader();
var decoder:Base64Decoder = new Base64Decoder();
var bytes:ByteArray;
// Cogo la primera foto del XML descargado antes
var foto_xml : XML = model.fotos.foto[0];
var rawdata : String = null;
if (foto_xml != null) {
rawdata = foto_xml.foto;
// Convierto la foto a binario
decoder.decode(rawdata);
bytes = decoder.drain();
}
if (bytes.length > 0) {
loader.loadBytes(bytes);
loader.contentLoaderInfo.addEventListener(flash.events.IOErrorEvent.IO_ERROR, imgError);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
}
else
imagen.source = null;
}
else
if (imagen != null) imagen.source = null;
}
// Si se produce un error durante la carga
public function imgError(e:Event):void {
imagen.source = null;
}
// Si se carga correctamente, asignamos la foto a la imagen-
public function imgLoaded(e:Event):void {
var info:LoaderInfo = e.target as LoaderInfo;
imagen.source = info.loader;
}
Resumiendo:
- Cargamos en un XML los datos del servicio.
- Llamamos a la funcion: loadImage, para que lea dicho XML y se lo asigne a un control de tipo: Image.
He desarrollado un proyecto que contiene un ejemplo completo de lo aquí expuesto: LoadImage.rar. Es importante leer el fichero README.TXT
Enviar un comentario nuevo