1. Accueil
2. Pôle de développement
3. Pôle de développement Flex
4. Flex en un clin d'œil

Flex en un clin d'œil : Prise en main

Sommaire

• Programmation avec MXML et ActionScript
• Création d'une première application
• Gestion des événements
• Positionnement et disposition de composants Flex
• Incorporation de ressources applicatives

---

Incorporation de ressources applicatives

Vous pouvez incorporer différents types de ressources dans vos applications Adobe® Flex™. Les ressources incorporées sont compilées dans le fichier SWF de votre application Flex. Elles ne sont pas chargées lors de l'exécution et il est inutile de déployer les fichiers de ressources originaux avec votre application.

Vous pouvez incorporer des images aux formats PNG, JPEG et GIF, des fichiers SWF, des fichiers audio au format MP3, des fichiers SVG et des polices. Les rubriques ci-après expliquent comment incorporer les ressources suivantes :

• Images (plusieurs instances)
• Image (une seule instance)
• Images se mettant à l'échelle 9
• Incorporation d'images à l'aide de feuilles de style CSS pour l'habillage
• Fichiers SWF
• Ressources de la bibliothèque SWF
• Fichiers audio
• Fichiers SVG
• Polices

Incorporation d'images (plusieurs instances)

Vous pouvez incorporer une image au format PNG, JPEG ou GIF dans votre application Flex et en créer une ou plusieurs instances.

Cet exemple utilise la balise de métadonnées [Embed] pour incorporer l'image dans votre application et l'associer à une classe ActionScript pouvant être liée. Il lie ensuite la propriété source du contrôle Image à la classe Logo. Vous pouvez lier la classe Logo à n'importe quelle propriété de composant acceptant une image, par exemple la propriété icon du contrôle Button.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImages/index.html"
    layout="horizontal" width="350" height="250"
>
    
    <mx:Script>
        <![CDATA[
            [Embed(source="assets/logo.png")]
            [Bindable]

            public var Logo:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="myLogo" source="{Logo}"/>

    <mx:Image id="myLogo2" source="{Logo}"/>

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation d'une image (une seule instance)

Vous pouvez utiliser une directive @Embed insérée pour incorporer dans votre application Flex une image à n'afficher qu'une seule fois.

Cet exemple ajoute un composant Image à une application et utilise la directive @Embed dans son attribut source . Pour utiliser cette même image dans un autre contrôle Image, vous devez également l'incorporer dans ce composant. Si vous souhaitez afficher plusieurs instances d'une image incorporée, utilisez plutôt la balise de métadonnées [Embed].

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingAnImage/index.html"
    width="200" height="240"
>
    <mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation d'images se mettant à l'échelle 9

Vous pouvez incorporer dans votre application Flex un fichier d'image qui se met à l'échelle de manière intelligente, à la manière d'un composant. Lorsque vous utilisez la fonction de mise à l'échelle 9, les quatre angles de l'image ne se mettent pas à l'échelle, la bordure horizontale se met uniquement à l'échelle dans la direction horizontale et la bordure verticale se met uniquement à l'échelle dans la direction verticale. Cette fonction est très utile pour créer des boîtes aux angles arrondis ou pour redimensionner un style de composant et conserver une bordure nette lorsque le composant est mis à l'échelle.

Cet exemple utilise les propriétés d'emplacement de ligne de grille scaleGridTop, scaleGridBottom, scaleGridLeft et scaleGridRight pour la balise de métadonnées Embed afin de créer votre grille à l'échelle 9.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesScale9/index.html"
    layout="vertical" width="400" height="480"

>

    <mx:Script>
        <![CDATA[
            [Embed(
                source="assets/fancy_border.png", 
                scaleGridTop="55", scaleGridBottom="137", 
                scaleGridLeft="57", scaleGridRight="266"

            )]
            
            [Bindable]
            public var FancyBorderImage:Class;
        ]]>

    </mx:Script>

    <mx:Image source="{FancyBorderImage}" width="146" height="82"/>

    <mx:Image source="{FancyBorderImage}" width="266" height="150"/>
    <mx:Image source="{FancyBorderImage}" width="325" height="183"/>

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation d'images à l'aide de feuilles de style CSS pour l'habillage

Vous pouvez incorporer une image dans votre application Flex et l'utiliser pour habiller vos composants.

Vous pouvez définir un sélecteur de type CSS pour déterminer l'habillage de tous les composants d'un type donné. Dans cet exemple, vous créez un sélecteur de type pour le contrôle Button. Le sélecteur de type spécifie les images à utiliser comme propriétés d'habillage pour votre composant en utilisant Embed. Vous pouvez également définir un sélecteur de classe pour créer une classe CSS personnalisée applicable en tant que style à des composants spécifiques.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesCSS/index.html"
    layout="horizontal" width="270" height="100"
    horizontalAlign="center" verticalAlign="middle" 

>

    <mx:Style>
        Button 
        {
            upSkin: Embed("assets/box_closed.png");

            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");

        }
    </mx:Style>
    
    <mx:Button/>
    
    <mx:Text text="Roll over and click the box!"/>

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation de fichiers SWF

Un fichier SWF s'incorpore quasiment de la même manière qu'une image. La différence est que vous pouvez traiter des instances de fichiers SWF incorporés comme des instances de la classe MovieClip. Il s'agit en fait de sous-classes de la classe MovieClipAsset, qui est elle-même une sous-classe de la classe MovieClip.

Remarque : Vous ne pouvez pas accéder directement aux propriétés ou aux méthodes des fichiers SWF incorporés. Vous pouvez cependant utiliser LocalConnection pour leur permettre de communiquer.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/EmbeddingSwfFiles/index.html"
    layout="horizontal" width="290" height="290"
    horizontalAlign="center" verticalAlign="middle"
 >

    <mx:Script>
    <![CDATA[
            [Embed(source="assets/hourglass.swf")]

            [Bindable]
            public var Hourglass:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="hourglass" source="{Hourglass}"/>
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation de ressources de la bibliothèque SWF

Vous pouvez incorporer certains symboles de la bibliothèque d'un fichier SWF dans votre application. Flash définit trois types de symboles : Button, MovieClip et Graphic. Vous pouvez incorporer des symboles Button et MovieClip dans une application Flex mais vous ne pouvez pas incorporer le symbole Graphic car il n'est pas exportable pour ActionScript.

Cet exemple utilise la propriété source de la balise de métadonnées [Embed] pour spécifier le fichier SWF qui contient votre bibliothèque, et la propriété symbol de la balise de métadonnées [Embed] pour spécifier l'ID de liaison du symbole de bibliothèque à incorporer.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"
    layout="horizontal" width="450" height="240"
    horizontalAlign="center" verticalAlign="bottom"     

>
  
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/library.swf", symbol="BadApple")]

            [Bindable]
            public var BadApple:Class;
            
            [Embed(source="assets/library.swf", symbol="Pumpkin")]

            [Bindable]
            public var Pumpkin:Class;
                        
        ]]>
    </mx:Script>

    <mx:Image id="badApple" source="{BadApple}" width="150" height="151.8"/>

    <mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>
    

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation de fichiers audio

Vous pouvez incorporer un fichier MP3 dans votre application Flex à l'aide de la balise de métadonnées [Embed] et le lire.

Remarque : N'oubliez pas que les fichiers audio incorporés font partie intégrante de votre application (le fichier SWF final) et que les fichiers MP3 peuvent être relativement volumineux, ce qui augmente la taille de votre application et ralentit sa vitesse de téléchargement.

Cet exemple crée une nouvelle instance du fichier MP3 en tant que SoundAsset. Il utilise la méthode play() de la classe SoundAsset pour lire l'instance du fichier MP3 et stocke l'objet SoundChannel renvoyé, ce qui vous permet d'appeler ultérieurement la méthode stop() de l'objet SoundChannel pour mettre fin à la lecture.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/index.html">

    <mx:Script>
        <![CDATA[
            import mx.core.SoundAsset;
            import flash.media.*;

            [Embed(source="assets/pie-yan-knee.mp3")]

            [Bindable]
            public var Song:Class;

            public var mySong:SoundAsset = new Song() as SoundAsset;
            public var channel:SoundChannel;
            
            public function playSound():void 
            {

                // Make sure we don't get multiple songs playing at the same time
                stopSound();
                
                // Play the song on the channel
                channel = mySong.play();
            }
            
            public function stopSound():void 
            {

                // Stop the channel, but only if it exists
                if ( channel != null ) channel.stop();
            }

        ]]>
    </mx:Script>
    
    <mx:HBox>
        <mx:Button label="play" click="playSound();"/>

        <mx:Button label="stop" click="stopSound();"/>        
    </mx:HBox>
    
    <mx:Text width="348" textAlign="center" color="#ffffff">

        <mx:htmlText>
            <![CDATA[<a href="http://derekaudette.ottawaarts.com/music.php">Pie-Yan-Knee Written and Performed by: Derek R. Audette © 2004 (Creative Commons Attribution License)</a>]]>
        </mx:htmlText>
    </mx:Text> 
    
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation de fichiers SVG

Vous pouvez incorporer des fichiers SVG dans votre application Flex.

Un fichier SVG s'incorpore quasiment de la même manière qu'une image. La différence est que vous pouvez traiter des instances de fichiers SVG incorporés comme des instances de la classe Sprite (il s'agit en fait d'instances de la classe SpriteAsset, qui est elle-même une sous-classe de la classe Sprite). Les fichiers SVG incorporés conservent également leurs propriétés vectorielles et ne produisent pas d'effets de pixellisation lorsqu'ils sont mis à l'échelle ou transformés.

Remarque : Vous ne pouvez pas importer de fichiers SVG lors de l'exécution. Vous pouvez les incorporer dans votre application Flex lors de la compilation uniquement.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    viewSourceURL="srcEmbeddingSvgFiles/index.html"
    width="600" height="470"

>
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/frog.svg")]

            [Bindable]
            public var SvgFrog:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>

    <mx:Image id="largeFrog" source="{SvgFrog}"/>
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Incorporation de polices

Vous pouvez incorporer une police dans votre application Flex et l'utiliser comme style pour les composants textuels.

L'exemple ci-après crée un sélecteur de classe qui référence le nom font-family de la police incorporée. Il crée ensuite un contrôle Text et lui applique le style correspondant au sélecteur de classe.

En détail : Pour plus d'informations sur la gestion des polices, reportez-vous à la section "Using Fonts" du document Flex 2 Developer's Guide*.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    horizontalAlign="center" 
    verticalAlign="center" 
    viewSourceURL="src/EmbeddingFonts/index.html"

>

    <mx:Style>
        @font-face 
        {
            font-family: Copacetix;

            src: url("assets/copacetix.ttf");
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */

                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E; /* Punctuation and Symbols */

        }

        .MyTextStyle 
        { 
            font-family: Copacetix; 
            font-size: 24pt;    
        }

    </mx:Style>

    <mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>
    

</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Sous licence de Creative Commons Attribution-ShareAlike 2.0*.

Retour au début

---

Pour plus d'informations

Pour plus d'informations sur l'incorporation des ressources, reportez-vous à la section "Embedding Assets" du document Flex 2 Developer's Guide*.

À propos de l'auteur