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

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.

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:

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:

   Grafik in Originalgröße anzeigen

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.

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.