Flex - Control de imagen

Introducción

El control de imagen le permite importar archivos JPEG, PNG y GIF en tiempo de ejecución. También puede incrustar cualquiera de estos archivos en tiempo de compilación usando @Embed (source = 'filename').

Las imágenes incrustadas se cargan de inmediato, ya que se compilan con el archivo SWF de Flex. Sin embargo, aumentan el tamaño de la aplicación y ralentizan el proceso de inicialización de la aplicación. Las imágenes incrustadas también requieren que recompile sus aplicaciones cada vez que cambien sus archivos de imagen.

Puede cargar una imagen desde el sistema de archivos local en el que se ejecuta el archivo SWF, o puede acceder a una imagen remota, normalmente a través de una solicitud HTTP a través de una red. Estas imágenes son independientes de su aplicación Flex, por lo que puede cambiarlas sin provocar una operación de recompilación siempre que los nombres de las imágenes modificadas sigan siendo los mismos. Las imágenes a las que se hace referencia no agregan una sobrecarga adicional al tiempo de carga inicial de una aplicación.

Declaración de clase

A continuación se muestra la declaración de spark.components.Image clase -

public class Image 
   extends SkinnableComponent

Propiedades publicas

No Señor	Descripción de propiedad
1	bitmapData : BitmapData [solo lectura] Devuelve una copia del objeto BitmapData que representa el contenido de la imagen cargada actualmente (sin escala).
2	bytesLoaded : Number [solo lectura] El número de bytes de la imagen ya cargada.
3	bytesTotal : Number [solo lectura] Los datos de imagen totales en bytes cargados o carga pendiente.
4	clearOnLoad : Boolean Indica si se borra o no el contenido de la imagen anterior antes de cargar contenido nuevo.
5	contentLoader : IContentLoader Cargador de imágenes personalizadas opcional
6	contentLoaderGrouping : String Identificador de agrupación de contenido opcional para pasar al método load () de una instancia IContentLoader asociada.
7	fillMode : String Determina cómo el mapa de bits rellena las dimensiones.
8	horizontalAlign : String La alineación horizontal del contenido cuando no tiene una relación de aspecto de uno a uno y scaleMode se establece en mx.graphics.BitmapScaleMode.LETTERBOX.
9	preliminaryHeight : Number Proporciona una estimación para utilizar la altura cuando el diseño solicita los límites "medidos" de la imagen, pero los datos de la imagen aún no se han completado.
10	preliminaryWidth : Number Proporciona una estimación para utilizar el ancho cuando el diseño solicita los límites "medidos" de la imagen, pero los datos de la imagen aún no se han completado.
11	scaleMode : String Determina cómo se escala la imagen cuando fillMode se establece en mx.graphics.BitmapFillMode.SCALE.
12	smooth : Boolean Especifica si se aplica un algoritmo de suavizado a la imagen de mapa de bits.
13	source : Object La fuente utilizada para el relleno del mapa de bits.
14	sourceHeight : Number [solo lectura] Proporciona la altura sin escala de los datos de la imagen original.
15	sourceWidth : Number [solo lectura] Proporciona el ancho sin escala de los datos de la imagen original.
dieciséis	trustedSource : Boolean [solo lectura] Un indicador de solo lectura que indica si el contenido cargado actualmente se considera cargado de una fuente cuya política de seguridad permite el acceso a imágenes entre dominios.
17	verticalAlign : String La alineación vertical del contenido cuando no tiene una relación de aspecto de uno a uno y scaleMode se establece en mx.graphics.BitmapScaleMode.LETTERBOX.

Métodos públicos

No Señor	Método y descripción
1	Image() Constructor.

Eventos

No Señor	Eventos y descripción
1	complete Se envía cuando se completa la carga de contenido.
2	httpStatus Se envía cuando se realiza una solicitud de red a través de HTTP y Flash Player puede detectar el código de estado HTTP.
3	ioError Se envía cuando se produce un error de entrada o salida.
4	progress Se envía cuando se carga el contenido.
5	ready Se envía cuando se completa la carga de contenido.
6	securityError Se envía cuando se produce un error de seguridad.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control de imagen flexible

Sigamos los siguientes pasos para verificar el uso del control de imagen en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Cree activos foler en la carpeta raíz de la aplicación HelloWorld HelloWorld .
3	Descargue una imagen de muestra flex-mini.png en una carpeta de activos en la carpeta HelloWorld.
4	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
5	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   applicationComplete = "init(event)" >	
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         [Bindable]
         [Embed(source = "assets/flex-mini.jpg")] 
         private var flexImage:Class; 
         protected function init(event:FlexEvent):void {
            dynamicImage.source = 
               "http://www.tutorialspoint.com/images/flex-mini.png";
         }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "600" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Basic Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel title = "Using Embeded Image" width = "420" height = "200" >
            <s:Image source = "{flexImage}" />			
         </s:Panel>			
         <s:Panel title = "Using Image from URL" width = "420" height = "200" >
            <s:Image id = "dynamicImage" />
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ ]

↰ Previous page