Erstmaliges Erstellen einer Flex-AIR-Anwendung für den Desktop in Flash Builder

Mithilfe der folgenden Anleitung können Sie mit Adobe® Flash® Builder die einfache, auf einer SWF-Datei basierende AIR-Anwendung „Hello World“ erstellen und komprimieren. Auf diese Weise bekommen Sie schnell eine Vorstellung von der Funktionsweise von Adobe® AIR®.

Wenn Sie dies noch nicht getan haben, laden Sie Flash Builder herunter und installieren Sie das Programm. Außerdem müssen Sie die neueste Version von Adobe AIR herunterladen und installieren. Sie finden sie hier: www.adobe.com/go/air_de .

Erstellen eines AIR-Projekts

Flash Builder enthält Werkzeuge zum Entwickeln und Komprimieren von AIR-Anwendungen.

Wenn Sie eine AIR-Anwendung in Flash Builder oder Flex Builder erstellen möchten, beginnen Sie genauso wie beim Erstellen von anderen Flex-basierten Anwendungsprojekten: Sie definieren ein neues Projekt.

  1. Öffnen Sie Flash Builder.

  2. Wählen Sie „Datei“ > „Neu“ > „Flex-Projekt“ aus.

  3. Geben Sie „AIRHelloWorld“ als Projektnamen ein.

  4. In Flex werden AIR-Anwendungen als Anwendungstyp betrachtet. Sie haben zwei Optionen für den Typ:

    • eine Webanwendung, die in Adobe® Flash® Player ausgeführt wird

    • eine Desktopanwendung, die in Adobe AIR ausgeführt wird

    Wählen Sie als Anwendungstyp „Desktop“ aus.

  5. Klicken Sie auf „Fertig stellen“, um das Projekt zu erstellen.

AIR-Projekte bestehen anfänglich aus zwei Dateien: der MXML-Hauptdatei und einer XML-Anwendungsdatei (als Anwendungsdeskriptordatei bezeichnet). In der letztgenannten Datei werden die Anwendungseigenschaften angegeben.

Weitere Informationen finden Sie unter Entwickeln von AIR-Anwendungen mit Flash Builder .

Schreiben des AIR-Anwendungscodes

Um den Anwendungscode für „Hello World“ zu schreiben, bearbeiten Sie die MXML-Anwendungsdatei (AIRHelloWorld.mxml), die im Editor geöffnet ist. (Sollte die Datei nicht geöffnet sein, öffnen Sie sie mit dem Projektnavigator.)

Flex-AIR-Anwendungen für den Desktop sind im MXML-Tag „WindowedApplication“ enthalten. Das MXML-Tag „WindowedApplication“ erstellt ein einfaches Fenster, das grundlegende Fenstersteuerungen wie die Titelleiste und die Schließen-Schaltfläche enthält.

  1. Fügen Sie der WindowedApplication-Komponente ein title -Attribut hinzu und weisen Sie ihm den Wert "Hello World" zu:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
    </s:WindowedApplication>
  2. Fügen Sie der Anwendung eine Label-Komponente hinzu (platzieren Sie sie innerhalb des WindowedApplication-Tags). Stellen Sie die text -Eigenschaft der Label-Komponenten auf "Hello AIR" ein und legen Sie die Layoutbeschränkungen fest, um die Zentrierung zu erhalten:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
     
        <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
    </s:WindowedApplication>
  3. Fügen Sie den folgenden Stilblock direkt hinter dem öffnenden WindowedApplication-Tag und vor dem gerade eingegebenen Tag für die Label-Komponenten hinzu:

    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style>

Diese Stileinstellungen gelten für die gesamte Anwendung und stellen den Fensterhintergrund in einem leicht transparenten Grau dar.

Der Anwendungscode sieht nun folgendermaßen aus:

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

Als Nächstes ändern Sie einige Einstellungen im Anwendungsdeskriptor, damit die Anwendung transparent sein kann:

  1. Suchen Sie im Flex Navigator nach der Anwendungsdeskriptordatei im Quellverzeichnis des Projekts. Wenn Sie Ihr Projekt AIRHelloWorld genannt haben, heißt diese Datei „AIRHelloWorld-app.xml“.

  2. Doppelklicken Sie auf die Anwendungsdeskriptordatei, um sie in Flash Builder zu bearbeiten.

  3. Suchen Sie im XML-Code die kommentierte Zeile für die Eigenschaften systemChrome und transparent (der initialWindow -Eigenschaft). Entfernen Sie die Kommentierung. (Entfernen Sie die Kommentartrennzeichen "<!--" und "-->" .)

  4. Stellen Sie den Textwert der systemChrome -Eigenschaft auf none , wie im Folgenden:

    <systemChrome>none</systemChrome>
  5. Stellen Sie den Textwert der transparent -Eigenschaft auf true , wie im Folgenden:

    <transparent>true</transparent>
  6. Speichern Sie die Datei.

Testen der AIR-Anwendung

Um den Anwendungscode, den Sie geschrieben haben, zu testen, führen Sie ihn im Debugmodus aus.

  1. Klicken Sie in der Hauptsymbolleiste auf die Schaltfläche „Debuggen“ .

    Sie können auch den Befehl „Ausführen“ > „Debuggen“ > „AIRHelloWorld“ wählen.

    Die resultierende AIR-Anwendung sollte wie im folgenden Beispiel aussehen:

  2. Mithilfe der horizontalCenter - und verticalCenter -Eigenschaften der Label-Steuerung wird der Text in der Mitte des Fensters platziert. Sie können die Größe und die Position des Fensters verändern wie bei jeder anderen Desktopanwendung.

Hinweis: Wenn die Anwendung nicht kompiliert wird, korrigieren Sie die Syntax- oder Tippfehler, die Sie versehentlich in den Code geschrieben haben. Fehler und Warnungen werden in der Ansicht „Probleme“ von Flash Builder angezeigt.

Komprimieren, Signieren und Ausführen von AIR-Anwendungen

Jetzt ist alles bereit, um die Anwendung „Hello World“ in eine AIR-Datei zu komprimieren, damit Sie sie verteilen können. Eine AIR-Datei ist eine Archivdatei, die die Anwendungsdateien enthält. Dazu gehören alle Dateien im Ordner „bin“ des Projekts. In diesem einfachen Beispiel sind dies die SWF- und die XML-Anwendungsdateien. Sie verteilen das AIR-Paket an die Benutzer, die es zum Installieren der Anwendung verwenden. Ein erforderlicher Schritt in diesem Prozess ist das digitale Signieren.

  1. Vergewissern Sie sich, dass die Anwendung keine Kompilierungsfehler aufweist und wie erwartet ausgeführt werden kann.

  2. Wählen Sie „Projekt“ > „Releasebuild exportieren“ aus.

  3. Überprüfen Sie, ob das Projekt „AIRHelloWorld“ und die Anwendung „AIRHelloWorld.mxml“ für Projekt bzw. Anwendung aufgeführt sind.

  4. Wählen Sie die Option „Exportieren als signiertes AIR-Paket“. Klicken Sie anschließend auf „Weiter“.

  5. Wenn Sie ein digitales Zertifikat haben, klicken Sie auf „Durchsuchen“ und wählen Sie es aus.

  6. Wenn Sie ein neues selbstsigniertes Zertifikat erstellen müssen, klicken Sie auf „Erstellen“.

  7. Geben Sie die erforderlichen Informationen ein und klicken Sie auf „OK“.

  8. Klicken Sie auf „Fertig stellen“, um das AIR-Paket zu generieren. Es heißt „AIRHelloWorld.air“.

Sie können die Anwendung jetzt im Projektnavigator in Flash Builder oder im Dateisystem installieren und ausführen, indem Sie auf die AIR-Datei doppelklicken.