Flex - Controllo dell'immagine

introduzione

Il controllo Immagine consente di importare file JPEG, PNG e GIF in fase di esecuzione. Puoi anche incorporare uno qualsiasi di questi file in fase di compilazione usando @Embed (source = 'filename').

Le immagini incorporate vengono caricate immediatamente, poiché vengono compilate con il file Flex SWF. Tuttavia, aumentano le dimensioni dell'applicazione e rallentano il processo di inizializzazione dell'applicazione. Le immagini incorporate richiedono anche di ricompilare le applicazioni ogni volta che i file di immagine cambiano.

È possibile caricare un'immagine dal file system locale in cui viene eseguito il file SWF oppure accedere a un'immagine remota, in genere tramite una richiesta HTTP su una rete. Queste immagini sono indipendenti dalla tua applicazione Flex, quindi puoi modificarle senza causare un'operazione di ricompilazione purché i nomi delle immagini modificate rimangano gli stessi. Le immagini di riferimento non aggiungono alcun sovraccarico aggiuntivo al tempo di caricamento iniziale di un'applicazione.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per spark.components.Image classe -

public class Image 
   extends SkinnableComponent

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	bitmapData : BitmapData [sola lettura] Restituisce una copia dell'oggetto BitmapData che rappresenta il contenuto dell'immagine attualmente caricata (non in scala).
2	bytesLoaded : Number [sola lettura] Il numero di byte dell'immagine già caricata.
3	bytesTotal : Number [sola lettura] I dati totali dell'immagine in byte caricati o in attesa di caricamento.
4	clearOnLoad : Boolean Indica se cancellare o meno il contenuto dell'immagine precedente prima di caricare il nuovo contenuto.
5	contentLoader : IContentLoader Caricatore di immagini personalizzato opzionale
6	contentLoaderGrouping : String Identificatore di raggruppamento del contenuto facoltativo da passare al metodo load () di un'istanza IContentLoader associata.
7	fillMode : String Determina come la bitmap riempie le dimensioni.
8	horizontalAlign : String L'allineamento orizzontale del contenuto quando non ha proporzioni uno a uno e scaleMode è impostato su mx.graphics.BitmapScaleMode.LETTERBOX.
9	preliminaryHeight : Number Fornisce una stima da utilizzare per l'altezza quando i limiti "misurati" dell'immagine sono richiesti dal layout, ma i dati dell'immagine devono ancora completare il caricamento.
10	preliminaryWidth : Number Fornisce una stima da utilizzare per la larghezza quando i limiti "misurati" dell'immagine sono richiesti dal layout, ma i dati dell'immagine devono ancora completare il caricamento.
11	scaleMode : String Determina il modo in cui l'immagine viene ridimensionata quando fillMode è impostato su mx.graphics.BitmapFillMode.SCALE.
12	smooth : Boolean Specifica se applicare un algoritmo di smussatura all'immagine bitmap.
13	source : Object La sorgente utilizzata per il riempimento bitmap.
14	sourceHeight : Number [sola lettura] Fornisce l'altezza non graduata dei dati dell'immagine originale.
15	sourceWidth : Number [sola lettura] Fornisce la larghezza non graduata dei dati dell'immagine originale.
16	trustedSource : Boolean [sola lettura] Un flag di sola lettura che indica se il contenuto attualmente caricato è considerato caricato da una fonte la cui politica di sicurezza consente l'accesso a immagini di domini incrociati.
17	verticalAlign : String L'allineamento verticale del contenuto quando non ha un rapporto di aspetto uno a uno e scaleMode è impostato su mx.graphics.BitmapScaleMode.LETTERBOX.

Metodi pubblici

Suor n	Metodo e descrizione
1	Image() Costruttore.

Eventi

Suor n	Eventi e descrizione
1	complete Inviato quando il caricamento del contenuto è completo.
2	httpStatus Inviato quando viene effettuata una richiesta di rete tramite HTTP e Flash Player può rilevare il codice di stato HTTP.
3	ioError Inviato quando si verifica un errore di input o output.
4	progress Inviato durante il caricamento del contenuto.
5	ready Inviato quando il caricamento del contenuto è completo.
6	securityError Inviato quando si verifica un errore di sicurezza.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo immagine Flex

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo dell'immagine in un'applicazione Flex creando un'applicazione di prova:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Crea un asset foler nella cartella principale dell'applicazione HelloWorld HelloWorld .
3	Scarica un'immagine di esempio flex-mini.png in una cartella assets nella cartella HelloWorld.
4	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
5	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page