Skapa ditt första Flex AIR-skrivbordsprogram med Flash Builder

I Flash Builder finns verktyg för att utveckla och paketera AIR-program.

Du börjar med att skapa AIR-program i Flash Builder eller Flex Builder på samma sätt som du skapar andra Flex-baserade programprojekt, alltså genom att definiera ett nytt projekt.

1. Öppna Flash Builder.

2. Välj Arkiv > Nytt > Flex-projekt.

3. Ange att projektnamnet ska vara AIRHelloWorld.

4. I Flex tolkas AIR-program som en programtyp. Det finns två alternativ:

   • ett webbprogram som körs i Adobe® Flash® Player

   • ett skrivbordsprogram som körs i Adobe AIR

   Markera Datorprogram som programtyp.

5. Klicka på Slutför för att skapa projektet.

AIR-projekt består av två filer: MXML-huvudfilen och XML-programfilen (kallad programbeskrivningsfilen). Den senare filen anger programegenskaper.

Du hittar mer information i Developing AIR applications with Flash Builder .

Du skriver koden för "Hello World"-programmet genom att redigera programmets MXML-fil (AIRHelloWorld.mxml), som har öppnats i redigeraren. (Om filen inte är öppen använder du projektnavigeraren för att öppna den.)

Flex AIR-program på skrivbordet finns inuti MXML-taggen WindowedApplication. Med MXML WindowedApplication-taggen skapas ett fönster med enkla fönsterkontroller som exempelvis en namnlist och en stängningsknapp.

1. Lägg till attributet title i WindowedApplication-komponenten och tilldela det värdet "Hello World" :

   <?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. Komplettera med en Label-komponent i programmet (placera den i WindowedApplication-taggen). Ange att text -egenskapen för Label-komponenten ska vara "Hello AIR" och ange att den ska vara centrerad i enlighet med exemplet här:

   <?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. Lägg till följande formateringsblock omedelbart efter den inledande WindowedApplication-taggen och före taggen för label-komponenten som du angav ovan:

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

Dessa formateringsinställningar gäller för hela programmet och skapar en fönsterbakgrund som är något grå och genomskinlig.

Programkoden ska nu ha följande utseende:

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

Därefter ska du ändra några inställningar i programbeskrivningen för att göra programmet genomskinligt:

Du kan testa programkoden som du skrev genom att köra den i felsökningsläge.

1. Klicka på knappen Felsökning i verktygsfältet.

   Du kan även välja Kör > Felsökning > AIRHelloWorld.

   Det slutliga AIR-programmet bör se ut som i följande exempel:

   

2. Med hjälp av egenskaperna horizontalCenter och verticalCenter i Label-kontrollen placeras texten mitt i fönstret. Flytta eller ändra storlek på fönstret på samma sätt som du arbetar med andra datorprogram.

Det är nu dags att börja paketera "Hello World"-programmet i en AIR-fil så att det kan distribueras. En AIR-fil är en arkivfil som innehåller de programfiler som finns i projektets bin-mapp. I detta exempel består dessa filer av SWF-filer och program-XML-filer. Du distribuerar AIR-paketet till användarna som sedan använder det för att installera programmet. En nödvändig åtgärd i sammanhanget är att digitalt signera det.

1. Kontrollera att programmet inte har några kompileringsfel och körs som förväntat.

2. Välj Project (Projekt) > Export Release Build (Exportera färdig version).

3. Kontrollera att AIRHelloWorld-projektet och programmet AIRHelloWorld.mxml listas som projekt och program.

4. Markera alternativet Exportera som signerat AIR-paket. Klicka sedan på Nästa.

5. Om du har ett befintligt digitalt certifikat klickar du på Browse (Bläddra) för att leta reda på och markera det.

6. Markera Skapa om du måste skapa ett nytt självsignerat digitalt certifikat.

7. Ange den obligatoriska informationen och klicka på OK.

8. Klicka på Slutför för att skapa AIR-paketet vilket kommer att få namnet AIRHelloWorld.air.

Du kan nu installera och köra programmet från projektnavigeraren i Flash Builder eller från filsystemet genom att dubbelklicka på AIR-filen.