1. Home
2. Developer Center
3. Flex Developer Center
4. Einführung in Flex

Einführung in Flex: Erste Schritte

Inhalt

• Coding with MXML and ActionScript
• Creating your first application
• Handling events
• Positioning and laying out Flex components
• Embedding application assets

---

Anwendungsobjekte einbetten

Sie können die verschiedensten Arten von Objekten in Ihre Adobe® Flex™-Anwendungen einbetten. Eingebettete Objekte werden in die SWF-Datei der Flex-Anwendung kompiliert. Sie werden nicht in Laufzeit geladen und Sie müssen die Originalobjektdateien nicht in Ihre Anwendung implementieren.

Sie können Bilder in den Formaten PNG, JPEG und GIF sowie SWF-Dateien, Sound-Dateien im MP3-Format, SVG-Dateien und Schriftarten einbetten. Nachfolgend wird das Einbetten dieser Objekte beschrieben:

• Bilder (mehrere Instanzen)
• Bild (eine Instanz)
• Bilder mit Scale-9 (Skalierung in 9-teiligem Segmentraster)
• Bilder für den Einsatz mit CSS und Skinning
• SWF-Dateien
• SWF-Bibliotheksobjekte
• Sound-Dateien
• SVG-Dateien
• Schriften

Einbetten von Bildern (mehrere Instanzen)

Sie können ein Bild im Format PNG, JPEG oder GIF in Ihre Flex-Anwendung einbetten und eine oder mehrere Instanzen des Bildes erstellen.

Im Beispiel wird das Bild mit dem [Embed] -Metadaten-Tag in die Anwendung eingebettet und einer bindbaren ActionScript-Klasse zugeordnet. Anschließend bindet es die source -Eigenschaft des Image-Steuerelements an die Logo-Klasse. Sie können die Logo-Klasse an jede Komponenteneigenschaft binden, die ein Bild verwendet, z. B. die icon -Eigenschaft des Button-Steuerelements.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten eines Bildes (eine Instanz)

Mithilfe einer @Embed -Inline-Direktive können Sie ein Bild in Ihre Flex-Anwendung einbinden, das nur einmal angezeigt werden soll.

Im folgenden Beispiel wird einer Anwendung eine Bildkomponente hinzugefügt und die @Embed -Direktive wird in ihrem source -Attribut verwendet. Wenn Sie dieses Bild in einem anderen Image-Steuerelement verwenden möchten, müssen Sie es auch in diese Komponente einbetten. Wenn Sie mehrere Instanzen eines eingebetteten Bildes anzeigen möchten, verwenden Sie stattdessen den [Embed]-Metadaten-Tag.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von Bildern mit Scale-9

Sie können ein Bild in eine Flex-Anwendung einbetten und es mithilfe einer Komponentenskalierung intelligent skalieren. Bei der Scale-9-Skalierung werden die vier Eckpunkte Ihres Bildes gar nicht skaliert. Der waagerechte Rahmen skaliert nur in der Horizontalen, der senkrechte Rahmen skaliert nur in der Senkrechten. Dies ist beispielsweise beim Erstellen von Kästchen mit abgerundeten Ecken oder beim Ändern der Größe von Komponenten hilfreich, wenn der Rahmen beim Skalieren der Komponente unverändert scharf bleiben soll.

Das folgende Beispiel verwendet die Location-Eigenschaften für Datengitter scaleGridTop, scaleGridBottom, scaleGridLeft und scaleGridRight für den Embed -Metadaten-Tag, um ein Scale-9-Gitter zu erstellen.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von Bildern mittels CSS für Skinning

Sie können ein Bild in Ihre Flex-Anwendung einbinden und es zum Skinnen Ihrer Komponenten verwenden.

Sie können einen CSS-Typ-Selektor definieren, um die Skin für alle Komponenten eines bestimmten Typs festzulegen. In diesem Beispiel erstellen Sie einen Typ-Selektor für das Button-Steuerelement. Der Typ-Selektor bestimmt die Bilder, die als Skin-Eigenschaften Ihrer Komponente verwendet werden sollen, mittels Embed. Sie können auch einen Klassen-Selektor festlegen, um eine eigene CSS-Klasse zu erstellen, die Sie als Stil auf bestimmte Komponenten anwenden können.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

SWF-Dateien einbetten

Das Einbetten einer SWF-Datei ist mit dem Einbetten von Bildern nahezu identisch. Allerdings werden Instanzen eingebetteter SWF-Dateien als Instanzen der MovieClip-Klasse behandelt. (Eigentlich handelt es sich um Unterklassen der MovieClipAsset-Klasse, die wiederum eine Unterklasse der MovieClip-Klasse ist.)

Hinweis: Die Eigenschaften oder Methoden eingebetteter SWF-Dateien lassen sich nicht direkt aufrufen. Mit LocalConnection ermöglichen Sie ihnen jedoch eine Kommunikation.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von SWF-Bibliotheksobjekten

Sie können bestimmte Symbole aus einer bestehenden SWF-Bibliothek in Ihre Anwendung einbetten. Flash definiert drei Symboltypen: Button, MovieClip und Graphic. Button- und MovieClip-Symbole lassen sich in eine Flex-Anwendung einbetten. Bei Graphic-Symbolen ist hingegen keine Einbettung möglich, da sie nicht für ActionScript exportiert werden können.

Im folgenden Beispiel wird mithilfe der source -Eigenschaften des [Embed] -Metadaten-Tags die SWF-Datei festgelegt, die Ihre Bibliothek enthält. Desweiteren wird mit der symbol -Eigenschaften des [Embed] -Metadaten-Tags die Verknüpfungs-ID des Symbols in der Bibliothek festgelegt, das Sie einbetten möchten.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von Sound-Dateien

Sie können eine MP3-Datei mithilfe des [Embed] -Metadaten-Tags in Ihre Flex-Anwendung einbetten und wiedergeben lassen.

Hinweis: Beachten Sie, dass eingebettete Sound-Dateien Teil Ihrer Anwendung werden (die endgültige SWF-Datei). Da MP3-Dateien recht groß sein können, vergrößern sie auch Ihre Anwendung und wirken sich negativ auf deren Download-Geschwindigkeit aus.

Im folgenden Beispiel sehen Sie die Erstellung einer neue Instanz einer MP3-Datei als SoundAsset. Mit der play() -Methode der SoundAsset -Klasse wird die Instanz der MP3-Datei wiedergegeben und das zurückgegebene SoundChannel -Objekt gespeichert. So können Sie die stop() -Methode des SoundChannel -Objekts zu einem späteren Zeitpunkt aufrufen, um die Wiedergabe zu beenden.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von SVG-Dateien

Auch SVG-Dateien lassen sich in Flex-Anwendungen einbetten.

Das Einbetten einer SVG-Datei ist mit dem Einbetten von Bildern nahezu identisch. Allerdings werden Instanzen eingebetteter SVG-Dateien als Instanzen der Sprite-Klasse behandelt. (Eigentlich handelt es sich um Unterklassen der SpriteAsset-Klasse, die wiederum eine Unterklasse der Sprite-Klasse ist.) Eingebettete SVG-Dateien behalten auch ihre Vektoreigenschaften bei, desweiteren kommt es beim Skalieren oder Transformieren nicht zu Pixelierungen.

Hinweis: Sie können SVG-Dateien nicht zur Laufzeit importieren, sondern lediglich zur Kompilierzeit in Ihre Flex-Anwendung einbetten.

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Einbetten von Schriftarten

Sie möchten eine Schriftart in Ihre Flex-Anwendung einbetten und als Stil für textbasierte Komponenten verwenden.

Im nachfolgenden Beispiel wird ein Klassen-Selektor erstellt, der den font-family -Namen der eingebetteten Schriftart referenziert. Anschließend wird ein Text-Steuerelement erstellt und dessen Stil auf den Klassen-Selektor gesetzt.

Im Detail: Weitere Informationen zum Arbeiten mit Schriftarten finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide im Abschnitt "Using Fonts" (Schriftarten).

Beispiel

<?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>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Schriftart Copacetix TrueType mit freundlicher Genehmigung von Copacetix.com. Lizenziert unter der Creative Commons Attribution-ShareAlike 2.0-Lizenz.

Zurück zum Anfang

---

Weitere Informationen

Weitere Informationen zum Einbetten von Objekten finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide im Abschnitt "Embedding Assets" (Objekte einbetten).

Die Autoren