Flex Hero: nuevos componentes para Desktop(III): Spark Image y BitmapImage

Hero ha mejorado la clase BitmapImage que introdujo Flex 4, un componente ligero, no skinneable que se puede usar para mostrar imágenes, y además añade el nuevo Spark Image, con muchas mejoras respecto a su predecesor MX Image.

Mejoras en el componente BitmapImage

BitmapImage ha sido mejorado para permitir la carga y presentación de imágenes remotas seguras o no (Flash Player aplica restricciones de seguridad en la carga).
Además, BitmapImage introduce un nuevo soporte para escalado. La nueva propiedad “scaleMode” puede rellenar toda la area de display o mostrarse en el tamaño original.
También añade una nueva propiedad “smoothingQuality” para que la imagen use un algoritmo de mejora de calidad cuando la propiedad “smooth” está activa. Por defecto la imagen se escala a la calidad del stage. La propiedad smoothingQuality es útil cuando queremos mostrar miniaturas con una buena calidad de imagen.

Otra mejora en BitmapImage es que introduce una caché de contenido que puede ser configurada para soportar el caching y queuing de imágenes remotas. Esta caché nos permite mostrar la imagen sin que haga flickering en aquellos escenarios en que se muestra y oculta rápidamente, por ejemplo las imágenes dentro de una Spark List. La caché asociada al BitmapImage puede ser modificada para encolar la carga de imágenes según prioridades. Esta es una de las mejoras de rendimiento que Hero incluye en el trato de imágenes.

Spark Image

El nuevo componente skinnable Spark Image se construye sobre el elemento BitmapImage, por lo tanto también usa el sistema de caching y queuing de imágenes. El contrato de skinning que tiene, permite customizar la representación de la imagen en diferentes momentos: cuando empieza a cargarse, cuando se acaba de cargar, cuando es inválida o cuando no se encuentra el recurso, o la imagen está rota:

Las mejoras que aporta el componente Image en Flex 4.5 son:

• 1. Mejora en el soporte de la primitiva BitmapImage:
  Carga de imágenes remotas.
  Carga y presentación de imágenes de fuentes no seguras.
  Escalado respectando el aspect ratio.
  Soporte para escalados de mucha más calidad que la que el que el bitmap nativo proporciona.
  Data caching opcional del bitmap para poder mejorar el rendimiento en la carga de imágenes.
• 2. Proporciona un componente Spark Image skinneable:
  Permitiendo personalizar la presentación de la imagen.
  Podemos personalizar el estado de “loading”.
  Podemos personalizar el estado de “error” (imagen rota).
• 3. Mecanismo extensible de caching y queueing:
  s:Image y s:BitmapImage permiten una cache compartida de la BitmapData.
  El loader caching y queueing por defecto proporciona un tamaño de cacheé configurable, así como opciones de control manual de la misma.

Descripción detallada de ambas clases

BitmapImage

Nuevas propiedades de la clase BitmapImage

• preliminaryHeight, preliminaryWidth: Nos proporcionan un layout más apropiado para la imagen inicial cuando se está calculando las fronteras de ésta (measuredHeight y measuredWidth) y la imagen aún no ha sido cargada totalmente. Esto mejora la experiencia de usuario, sobre todo en el tratamiento de listas virtualizadas con renderers que contienen imágenes. Es una alternativa mejor a usar las propiedades minHeight y minWidth. Si no se especifican, el tamaño de la imagen será 0×0 hasta que se cargue totalmente.
• contentLoader: nos permite la asociación con una instancia de IContentLoader. Cuando se especifica, el BitmapImage usará este IContentLoader para cargar datos remotos de la imagen. Este mecanismo facilita el uso de la caché para la imagen.
• scaleMode: Define la manera de escalar la imagen.
• horizontalAlign, verticalAlign: se tienen en cuenta cuando setteamos el scale mode a BitmapScaleMode.LETTERBOX y así poder situar la imagen como nos convenga.
• smoothingQuality: especifica el algoritmo que se aplicará para conseguir una menor o mayor calidad de imagen. Es ideal para conseguir que los thumbnails se muestren sin pérdida de calidad aparente.
• bytesLoaded, bytesTotal: para tener información del proceso de carga.
• sourceWidth, sourceHeight: proporciona el width y el height no escalados de los datos de la imagen original.
• trustedSource: propiedad solo de lectura que nos notifica cuando el contenido se considera, en los casos de que la fuente tiene una política de seguridad de acceso cross domain. Si es false, las operaciones avanzadas sobre el bitmap como high quality scaling, tiling, etc. no son permitidas.

Nuevos eventos dispatchados por BitmapImage

• Event.COMPLETE: cuando la carga remota ha finalizado.
• IOErrorEvent.IO_ERROR: Si ocurre un error IO durante la carga.
• HTTPStatusEvent.HTTP_STATUS: cuando se recibe un HTTP status de la imagen que se está cargando.
• ProgressEvent.PROGRESS: cuando los datos de la imagen se cargan de una fuente remota.
• SecurityErrorEvent.SECURITY_ERROR: cuando un error de seguridad ocurre durante la carga de una imagen remota.

Skinnable Image Component

Image se ha adaptado a la nueva arquitectura Spark, porlo que ahora es un skinnable component.
Por defecto deshabilita el estado de loading, pero proporciona el style enablePreload, que puede ser usaro para activar este comportamiento. Esto se debe a que muchas imagines son de tamaño pequeño o medio, por lo que el tiempo de carga es menor y el preloader (estado de loading) se vería muy poco o prácticamente nada, provocando flicks, lo que sería un comportamiento no deseado.

Classes e interfaces relacionadas
La interface IContentLoader representa un data loader custom. Esta interface tiene un método llamado load. load acepta una key única y devuelve una instancia de tipo ContentRequest. El método load tiene un parámetro opcional llamado contentLoaderGrouping, que permite que la petición ser agrupada como parte de otras peticiones.

El objeto ContentRequest viene a ser un wrapper sobre la intancia de LoaderInfo o de otros datos, como BitmapData. ContentRequest notifica de todos los progresos de carga y posibles errores. También nos proporciona un mecanismo de notificación de los eventos de invalidación del contenido del content loader asociado.
Tanto la clase BitmapImage como el componente Image soportan la asociación con un content loader mediante su propiedad contentLoader.

Caching y Queuing del Content Loader
Como hemos dicho, el SDK ahora nos proporciona un sistema de caching para la carga de imágenes que podemos configurar tanto para BitmapImage como para Image.
ContentCache es una instancia de IContentLoader que soporta caching y queuing de imágenes remotas. Esta clase nos proporciona propiedades y métodos para controlarlo.

Parámetros de configuración de ContentCache:

• maxCacheEntries – especifica el limite del número de entradas que pueden guardarse en un determinado momento. Cuando el límite se excede, automáticamente se borran todas las entradas menos recientes.
• enableQueuing – habilita la funcionalidad de queuing.
• enableCaching – habilita la funcionalidad de caching.
• maxActiveRequests – cuando usamos queuing, este valor determina cuantas cargas se pueden hacer de una vez.

Los métodos relacionados con el caching son:

• load() – dándole una key (normalmente una URL o URLRequest), como hemos dicho, este método devuelve una nueva instancia del proxy ContentRequest, que representa el contenido solicitado. Si la propiedad complete de ContentRequest es false, debemos asumir que el recurso aún se está cargando. si complete es true, lo más probable es que el recurso se encuentre en la cache y se devuelva inmediatamente, en este caso el acceso al contenido es imediato.
  Este método intenta ubicar la fuente en un diccionario de entradas de caché. Si se encuentra, los datos se devuelven inmendiatamente. En caso contrario, se hará una petición para el contenido de la nueva fuente.
• removeAllCacheEntries(), removeCacheEntry() – nos permiten borrar una entrada que hace tiempo que no se usa o todo el contenido de la caché.
  getCacheEntry(), addCacheEntry() – nos permiten ver si existe una determinada entrada en la cache o añadir un nuevo valor en ésta. El método addCacheEntry sólo se debe usar manualmente cuando se quiere añadir directamente una entrada en la caché.

Métodos relacionados con el queuing:

• prioritize() – cuando se habilita el comportamiento de queuing, con este método forzamos a todas las peticiones pendientes del contentLoaderGrouping especificado a ser priorizadas.
• removeAllQueueEntries() – cancela todas las peticiones que están el cola.

Para ver más:

especificaciones
video