Tworzenie pierwszej aplikacji AIR środowiska Flex w programie Flash Builder

Program Flash Builder zawiera narzędzia służące do projektowania i pakowania aplikacji AIR.

Tworzenie aplikacji AIR w programie Flash Builder lub Flex Builder rozpoczyna się tak samo, jak tworzenie innych projektów aplikacji Flex — od zdefiniowania nowego projektu.

1. Otwórz program Flash Builder.

2. Wybierz opcję Plik > Nowe > Projekt Flex.

3. Wprowadź nazwę projektu: AIRHelloWorld.

4. W środowisku Flex aplikacje AIR są traktowane jako typ aplikacji. Dostępne są dwa typy:

   • Aplikacja internetowa działająca w programie Adobe® Flash® Player

   • Aplikacja komputerowa działająca w środowisku Adobe AIR

   Jako typ aplikacji wybierz: Komputerowa.

5. Aby utworzyć projekt, kliknij przycisk Zakończ.

Projekty AIR początkowo zawierają dwa pliki: główny plik MXML oraz plik XML aplikacji (określany jako plik deskryptora aplikacji). Drugi plik określa właściwości aplikacji.

Więcej informacji zawiera artykuł Programowanie aplikacji AIR za pomocą programu Flash Builder.

W celu napisania kodu aplikacji „Hello World” należy przeprowadzić edycję pliku MXML aplikacji (AIRHelloWorld.mxml), który jest otwarty w edytorze. (Jeśli plik nie jest otwarty, należy użyć nawigatora projektów, aby otworzyć ten plik).

Aplikacje Flex AIR na komputerze stacjonarnym są zawarte w znaczniku MXML WindowedApplication. Znacznik MXML WindowedApplication tworzy zwykłe okno, które zawiera podstawowe elementy sterujące, takie jak pasek tytułu i przycisk zamykania.

1. Dodaj atrybut title do składnika WindowedApplication, a następnie przypisz do niego wartość "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. Dodaj do aplikacji składnik Label (umieść go w znaczniku WindowedApplication). Ustaw właściwość text składnika Label na "Hello AIR" i ustaw ograniczenia układu w taki sposób, aby etykieta znajdowała się na środku:

   <?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. Następujący blok stylu dodaj bezpośrednio po otwarciu znacznika WindowedApplication i przed znacznikiem składnika label, który właśnie został wprowadzony:

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

Ustawienia stylu mają zastosowanie do całej aplikacji i renderują dla tła okna częściowo przepuszczalny szary kolor.

Kod aplikacji wygląda, jak poniżej:

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

Następnie wymagana jest zmiana niektórych ustawień w deskryptorze aplikacji, dzięki czemu aplikacja będzie mogła stać się przezroczysta.

Aby przetestować napisany kod aplikacji, należy uruchomić tryb debugowania.

1. Kliknij przycisk Debuguj na głównym pasku narzędziowym programu

   Można również wybrać polecenia Uruchom > Debuguj > AIRHelloWorld.

   Powstała aplikacja AIR powinna przypominać następujący przykład.

   Powiększ obraz

2. Za pomocą właściwości horizontalCenter i verticalCenter elementu sterującego Label można umieścić tekst na środku okna. Okno można przesuwać i powiększać/zmniejszać tak samo, jak okno każdej innej aplikacji.

Po wykonaniu powyższych czynności można spakować aplikację „Hello World” do pliku AIR w celu dystrybucji. Plik AIR jest plikiem archiwum, który zawiera pliki aplikacji — są to wszystkie pliki zawarte w folderze bin projektu. W tym prostym przykładzie są to pliki SWF oraz pliki XML aplikacji. Pakiet AIR jest dystrybuowany do użytkowników, którzy wykorzystają go w celu zainstalowania aplikacji. Wymaganym etapem tego procesu jest cyfrowe podpisanie pakietu.

1. Upewnij się, że podczas kompilacji nie pojawiają się błędy i że aplikacja działa zgodnie z oczekiwaniami.

2. Wybierz opcje Projekt > Eksportuj kompilację do publikacji.

3. Sprawdź, czy podano wartość AIRHelloWorld jako projekt i wartość AIRHelloWorld.mxml jako aplikację.

4. Wybierz opcję Eksportuj jako podpisany pakiet AIR. Następnie kliknij przycisk Dalej.

5. Jeśli istnieje certyfikat cyfrowy, kliknij przycisk Przeglądaj, aby go odszukać, a następnie wybierz plik.

6. Jeśli wymagane jest utworzenie nowego samopodpisanego certyfikatu cyfrowego, wybierz opcję Utwórz.

7. Wprowadź wymagane informacje i kliknij przycisk OK.

8. Kliknij przycisk Zakończ, aby wygenerować pakiet AIR, który będzie miał nazwę AIRHelloWorld.air.

Po wykonaniu tych czynności aplikację można zainstalować i uruchomić z poziomu nawigatora projektu w programie Flash Builder lub z poziomu systemu plików przez dwukrotne kliknięcie pliku AIR.