Flex - Contrôle d'image

introduction

Le contrôle Image vous permet d'importer des fichiers JPEG, PNG et GIF au moment de l'exécution. Vous pouvez également intégrer l'un de ces fichiers au moment de la compilation en utilisant @Embed (source = 'filename').

Les images intégrées se chargent immédiatement, car elles sont compilées avec le fichier Flex SWF. Cependant, ils augmentent la taille de l'application et ralentissent le processus d'initialisation de l'application. Les images intégrées vous obligent également à recompiler vos applications chaque fois que vos fichiers image changent.

Vous pouvez charger une image à partir du système de fichiers local dans lequel le fichier SWF s'exécute, ou vous pouvez accéder à une image distante, généralement via une requête HTTP sur un réseau. Ces images sont indépendantes de votre application Flex, vous pouvez donc les modifier sans provoquer d'opération de recompilation tant que les noms des images modifiées restent les mêmes. Les images référencées n'ajoutent aucune surcharge supplémentaire au temps de chargement initial d'une application.

Déclaration de classe

Voici la déclaration pour spark.components.Image classe -

public class Image 
   extends SkinnableComponent

Propriétés publiques

Sr.Non	Propriété et description
1	bitmapData : BitmapData [lecture seule] Renvoie une copie de l'objet BitmapData représentant le contenu de l'image actuellement chargé (non mis à l'échelle).
2	bytesLoaded : Number [lecture seule] Le nombre d'octets de l'image déjà chargée.
3	bytesTotal : Number [lecture seule] Le total des données d'image en octets chargés ou en attente de chargement.
4	clearOnLoad : Boolean Indique s'il faut ou non effacer le contenu de l'image précédente avant de charger le nouveau contenu.
5	contentLoader : IContentLoader Chargeur d'images personnalisé en option
6	contentLoaderGrouping : String Identificateur de regroupement de contenu facultatif à transmettre à la méthode load () d'une instance IContentLoader associée.
sept	fillMode : String Détermine comment le bitmap remplit les dimensions.
8	horizontalAlign : String L'alignement horizontal du contenu lorsqu'il n'a pas de rapport hauteur / largeur un-à-un et que scaleMode est défini sur mx.graphics.BitmapScaleMode.LETTERBOX.
9	preliminaryHeight : Number Fournit une estimation à utiliser pour la hauteur lorsque les limites «mesurées» de l'image sont demandées par la mise en page, mais que les données d'image n'ont pas encore terminé le chargement.
dix	preliminaryWidth : Number Fournit une estimation à utiliser pour la largeur lorsque les limites «mesurées» de l'image sont demandées par la mise en page, mais que les données d'image n'ont pas encore terminé le chargement.
11	scaleMode : String Détermine la mise à l'échelle de l'image lorsque fillMode est défini sur mx.graphics.BitmapFillMode.SCALE.
12	smooth : Boolean Spécifie s'il faut appliquer un algorithme de lissage à l'image bitmap.
13	source : Object La source utilisée pour le remplissage bitmap.
14	sourceHeight : Number [lecture seule] Fournit la hauteur non mise à l'échelle des données d'image d'origine.
15	sourceWidth : Number [lecture seule] Fournit la largeur non mise à l'échelle des données d'image d'origine.
16	trustedSource : Boolean [lecture seule] Indicateur en lecture seule indiquant si le contenu actuellement chargé est considéré comme chargé à partir d'une source dont la politique de sécurité permet l'accès aux images entre domaines.
17	verticalAlign : String L'alignement vertical du contenu lorsqu'il n'a pas de rapport hauteur / largeur un-à-un et que scaleMode est défini sur mx.graphics.BitmapScaleMode.LETTERBOX.

Méthodes publiques

Sr.Non	Méthode et description
1	Image() Constructeur.

Événements

Sr.Non	Événements et description
1	complete Envoyé lorsque le chargement du contenu est terminé.
2	httpStatus Envoyé lorsqu'une requête réseau est effectuée via HTTP et que Flash Player peut détecter le code d'état HTTP.
3	ioError Distribué lorsqu'une erreur d'entrée ou de sortie se produit.
4	progress Envoyé lors du chargement du contenu.
5	ready Envoyé lorsque le chargement du contenu est terminé.
6	securityError Envoyé lorsqu'une erreur de sécurité se produit.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de contrôle d'image Flex

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle d'image dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Créez des actifs de foler dans le dossier racine de l'application HelloWorld HelloWorld .
3	Téléchargez un exemple d'image flex-mini.png dans un dossier assets sous le dossier HelloWorld.
4	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
5	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]

↰ Previous page