Uw eerste Flex-AIR-bureaubladtoepassing in Flash Builder maken

Flash Builder bevat hulpprogramma's waarmee u AIR-toepassingen kunt ontwikkelen en in een pakket plaatsen.

Wanneer u een AIR-toepassing maakt in Flash Builder of Flex Builder begint u op dezelfde manier als bij andere Flex-toepassingen: u definieert eerst een nieuw project.

1. Open Flash Builder.

2. Selecteer Bestand > Nieuw > Flex-project

3. Voer de projectnaam AIRHelloWorld in.

4. In Flex worden AIR-toepassingen als een toepassingstype beschouwd. Er zijn twee opties voor het type:

   • een webtoepassing die wordt uitgevoerd in Adobe® Flash® Player

   • een bureaubladtoepassing die wordt uitgevoerd in Adobe AIR

   Selecteer Desktop als toepassingstype.

5. Klik op Voltooien om het project te maken.

AIR-projecten bestaan aanvankelijk uit twee bestanden: het MXML-hoofdbestand en het XML-toepassingsbestand (dit wordt het descriptorbestand van de toepassing genoemd). In dit laatste bestand zijn de eigenschappen van de toepassing opgegeven.

Zie voor meer informatie Developing AIR applications with Flash Builder .

Om de toepassingscode voor ''Hello World'' te schrijven, moet u het MXML-bestand van de toepassing (AIRHelloWorld.mxml) bewerken. Dit bestand is geopend in de editor. (Als dat niet het geval is, opent u het bestand via de projectnavigator.)

Flex-AIR-toepassingen op het bureaublad zijn opgenomen in de MXML WindowedApplication-tag. Met de tag MXML WindowedApplication wordt een eenvoudig venster gemaakt met daarin basisbesturingselementen voor vensters, zoals een titelbalk en een knop Sluiten.

1. Voeg een kenmerk title aan de component WindowedApplication toe en wijs hieraan de waarde "Hello World" toe:

   <?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. Voeg een Label-component toe aan de toepassing (plaats deze in de tag WindowedApplication). Stel de eigenschap text van de Label-component in op "Hello AIR" en pas de lay-out aan zodat de tekst wordt gecentreerd, zoals hier aangegeven:

   <?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. Voeg meteen na de openingstag WindowedApplication en vóór de component Label die u zojuist hebt toegevoegd het volgende stijlblok toe:

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

Deze stijlinstellingen zijn van toepassing op de gehele toepassing en geven de achtergrond van het venster een enigszins transparante grijze kleur.

De toepassingscode ziet er nu als volgt uit:

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

Vervolgens wijzigt u een aantal instellingen in het descriptorbestand van de toepassing, zodat de toepassing transparant wordt:

U test de toepassingscode die u hebt geschreven door deze in de foutopsporingsmodus uit te voeren.

1. Klik op de knop Foutopsporing op de hoofdwerkbalk.

   U kunt ook de opdracht Uitvoeren > Foutopsporing > AIRHelloWorld gebruiken.

   De resulterende AIR-toepassing zou op het volgende voorbeeld moeten lijken:

   

2. Met de eigenschappen horizontalCenter en verticalCenter of het besturingselement Label wordt de tekst midden in het venster geplaatst. U kunt het venster verplaatsen en groter of kleiner maken, net zoals bij andere bureaubladtoepassingen.

U kunt de toepassing 'Hello World' nu in een AIR-bestand plaatsen dat gedistribueerd kan worden. Een AIR-bestand is een archiefbestand dat de toepassingsbestanden bevat. Deze bestanden staan allemaal in de map bin van het project. In dit eenvoudige voorbeeld zijn dat de SFW- en de XML-toepassingsbestanden. Het AIR-pakket verzendt u aan gebruikers die dit gebruiken om de toepassing te installeren. Een vereiste stap in dit proces is het digitaal ondertekenen van het pakket.

1. Controleer of de toepassing geen compilatiefouten bevat en goed wordt uitgevoerd.

2. Selecteer Project > Exportversie.

3. Controleer of het AIRHelloWorld-project en de AIRHelloWorld.mxml-toepassing voor het project en de toepassing worden vermeld.

4. Selecteer de optie Exporteren als ondertekend AIR-pakket. Klik daarna op Volgende.

5. Als u over een bestaand digitaal certificaat beschikt, klikt u op Bladeren om dit te selecteren.

6. Als u een nieuw, niet-geautoriseerd digitaal certificaat moet maken, klikt u op Maken.

7. Voer de gegevens in en klik op OK.

8. Klik op Voltooien om het AIR-pakket te genereren. Dit pakket krijgt te naam AIRHelloWorld.air.

Dubbelklik op het AIR-bestand om de toepassing te installeren en uit te voeren vanuit de Flash Builder-projectnavigator of vanuit het bestandssysteem.