Flex - Controle de Imagem

Introdução

O controle de imagem permite importar arquivos JPEG, PNG e GIF em tempo de execução. Você também pode incorporar qualquer um desses arquivos em tempo de compilação usando @Embed (source = 'filename').

As imagens incorporadas são carregadas imediatamente, porque são compiladas com o arquivo Flex SWF. No entanto, eles aumentam o tamanho do aplicativo e tornam o processo de inicialização do aplicativo mais lento. As imagens incorporadas também exigem que você recompile seus aplicativos sempre que os arquivos de imagem forem alterados.

Você pode carregar uma imagem do sistema de arquivos local no qual o arquivo SWF é executado ou pode acessar uma imagem remota, normalmente por meio de uma solicitação HTTP em uma rede. Essas imagens são independentes do seu aplicativo Flex, portanto, você pode alterá-las sem causar uma operação de recompilação, desde que os nomes das imagens modificadas permaneçam os mesmos. As imagens referenciadas não adicionam sobrecarga ao tempo de carregamento inicial de um aplicativo.

Declaração de Classe

A seguir está a declaração para spark.components.Image classe -

public class Image 
   extends SkinnableComponent

Propriedades Públicas

Sr. Não Descrição da Propriedade
1

bitmapData : BitmapData

[somente leitura] Retorna uma cópia do objeto BitmapData que representa o conteúdo da imagem carregada atualmente (sem escala).
2

bytesLoaded : Number

[somente leitura] O número de bytes da imagem já carregada.
3

bytesTotal : Number

[somente leitura] Os dados totais da imagem em bytes carregados ou carregamento pendente.
4

clearOnLoad : Boolean

Indica se o conteúdo da imagem anterior deve ou não ser apagado antes de carregar o novo conteúdo.
5

contentLoader : IContentLoader

Carregador de imagem personalizado opcional
6

contentLoaderGrouping : String

Identificador de agrupamento de conteúdo opcional para passar para o método load () de uma instância IContentLoader associada.
7

fillMode : String

Determina como o bitmap preenche as dimensões.
8

horizontalAlign : String

O alinhamento horizontal do conteúdo quando ele não tem uma proporção de aspecto de um para um e scaleMode é definido como mx.graphics.BitmapScaleMode.LETTERBOX.
9

preliminaryHeight : Number

Fornece uma estimativa a ser usada para altura quando os limites "medidos" da imagem são solicitados pelo layout, mas os dados da imagem ainda não foram carregados.
10

preliminaryWidth : Number

Fornece uma estimativa a ser usada para largura quando os limites "medidos" da imagem são solicitados pelo layout, mas os dados da imagem ainda não foram carregados.
11

scaleMode : String

Determina como a imagem é dimensionada quando fillMode é definido como mx.graphics.BitmapFillMode.SCALE.
12

smooth : Boolean

Especifica se deve ser aplicado um algoritmo de suavização à imagem bitmap.
13

source : Object

A origem usada para o preenchimento de bitmap.
14

sourceHeight : Number

[somente leitura] Fornece a altura fora de escala dos dados da imagem original.
15

sourceWidth : Number

[somente leitura] Fornece a largura fora de escala dos dados da imagem original.
16

trustedSource : Boolean

[somente leitura] Um sinalizador somente leitura que indica se o conteúdo carregado atualmente é considerado carregado de uma fonte cuja política de segurança permite o acesso à imagem entre domínios.
17

verticalAlign : String

O alinhamento vertical do conteúdo quando ele não tem uma proporção de um para um e scaleMode é definido como mx.graphics.BitmapScaleMode.LETTERBOX.

Métodos Públicos

Sr. Não Método e Descrição
1

Image()

Construtor.

Eventos

Sr. Não Eventos e Descrição
1

complete

Enviado quando o carregamento do conteúdo é concluído.
2

httpStatus

Enviado quando uma solicitação de rede é feita por HTTP e o Flash Player pode detectar o código de status HTTP.
3

ioError

Enviado quando ocorre um erro de entrada ou saída.
4

progress

Enviado quando o conteúdo está carregando.
5

ready

Enviado quando o carregamento do conteúdo é concluído.
6

securityError

Enviado quando ocorre um erro de segurança.

Métodos herdados

Esta classe herda métodos das seguintes classes -

  • 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

Exemplo de controle de imagem flexível

Vamos seguir as etapas a seguir para verificar o uso do controle de imagem em um aplicativo Flex criando um aplicativo de teste -

Degrau Descrição
1 Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2 Criar um foler ativos em HelloWorld raiz do aplicativo pasta HelloWorld .
3 Baixe uma imagem de amostra flex-mini.png para uma pasta de ativos na pasta HelloWorld.
4 Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
5 Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está o conteúdo do arquivo 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>

Assim que estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com o seu aplicativo, ele produzirá o seguinte resultado: [ ]