Tworzenie pierwszej aplikacji AIR w formacie HTML za pomocą programu AIR SDK

W celu uzyskania szybkich i niezawodnych instrukcji na temat działania Adobe® AIR® można wykorzystać poniższe instrukcje w celu utworzenia i spakowania prostej aplikacji HTML AIR o nazwie „Hello World”.

Przed rozpoczęciem należy zainstalować środowisko wykonawcze i skonfigurować program AIR SDK. Podczas tego kursu będzie używany program AIR Debug Launcher (ADL) oraz narzędzie AIR Developer Tool (ADT). ADL i ADT to programy narzędziowe dostępne z wiersza poleceń, które można znaleźć w katalogu bin pakietu AIR SDK (zobacz Instalowanie AIR SDK). Twórcy niniejszego kursu założyli, że czytelnik zna podstawy uruchamiania programów z wiersza poleceń i wie, w jaki sposób należy skonfigurować wymagane zmienne środowiskowe ścieżki dla systemu operacyjnego.

Uwaga: Użytkownicy programu Adobe® Dreamweaver® powinni zapoznać się z sekcją Tworzenie pierwszej aplikacji AIR opartej na kodzie HTML w programie Dreamweaver.
Uwaga: Aplikacje AIR oparte na języku HTML mogą być programowane wyłącznie na potrzeby profilów komputerowego i rozszerzonego komputerowego. Profile urządzeń przenośnych i telewizyjnych nie są obsługiwane.

    Tworzenie plików projektu

    Każdy projekt HTML AIR musi zawierać następujące dwa pliki: plik deskryptora aplikacji, który określa metadane aplikacji, oraz stronę HTML najwyższego poziomu. Oprócz wymaganych plików projekt zawiera plik kodu JavaScript AIRAliases.js, który definiuje wygodne zmienne alias dla klas API AIR.

    1. Utwórz katalog o nazwie HelloWorld, który będzie zawierał pliki projektu.

    2. Utwórz plik XML o nazwie HelloWorld-app.xml.

    3. Utwórz plik HTML o nazwie HelloWorld.html.

    4. Skopiuj plik AIRAliases.js z folderu struktury programu AIR SDK do katalogu projektu.

    Tworzenie pliku deskryptora dla aplikacji AIR

    Aby rozpocząć tworzenie aplikacji AIR, należy utworzyć plik deskryptora aplikacji XML o następującej strukturze:

    <application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

    1. Otwórz plik HelloWorld-app.xml do edycji.

    2. Dodaj główny element <application> zawierający atrybut przestrzeni nazw AIR:

      <application xmlns="http://ns.adobe.com/air/application/2.6"> Ostatni segment przestrzeni nazw — „2.6” — określa wymaganą wersję środowiska wykonawczego.

    3. Dodaj element <id>:

      <id>examples.html.HelloWorld</id> Identyfikator aplikacji w unikalny sposób identyfikuje aplikację wraz z identyfikatorem wydawcy (pobieranym przez AIR z certyfikatu używanego w celu podpisania pakietu aplikacji). Identyfikator aplikacji jest używany do instalowania aplikacji, uzyskiwania dostępu do prywatnego katalogu pamięci masowej systemu plików aplikacji, uzyskiwania dostępu do prywatnej zaszyfrowanej pamięci masowej, a także na potrzeby komunikacji wewnątrz aplikacji.

    4. Dodaj element <versionNumber>.

      <versionNumber>0.1</versionNumber> Ułatwia użytkownikom określenie, którą wersję aplikacji instalują.

    5. Dodaj element <filename>:

      <filename>HelloWorld</filename> Nazwa używana dla pliku wykonywalnego aplikacji, katalogu instalacyjnego, a także dla innych odwołań do aplikacji w systemie operacyjnym.

    6. Dodaj element <initialWindow> zawierający następujące elementy potomne, w celu określenia właściwości dla początkowego okna aplikacji:

      <content>HelloWorld.html</content> Identyfikuje główny plik HTML, który ładuje środowisko AIR.

      <visible>true</visible> Powoduje natychmiastowe wyświetlenie okna.

      <width>400</width> Ustawia szerokość okna (w pikselach).

      <height>200</height> Ustawia wysokość okna.

    7. Zapisz plik. Zakończony plik deskryptora aplikacji powinien wyglądać, jak poniżej: 

      <?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.6"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</content> 
        <visible>true</visible> 
        <width>400</width> 
        <height>200</height> 
    </initialWindow> 
</application>

    W tym przykładzie przedstawiono ustawianie tylko kilku możliwych właściwości aplikacji. Opis wszystkich właściwości aplikacji, które umożliwiają ustawianie takich elementów, jak karnacja okna, wielkość okna, przezroczystość, domyślny katalog instalacyjny, skojarzone typy plików oraz ikony aplikacji, zawiera sekcja Pliki deskryptora aplikacji AIR.

    Tworzenie strony HTML aplikacji

    Kolejnym etapem jest utworzenie prostej strony HTML, która będzie pełniła rolę pliku głównego dla aplikacji AIR.

    1. Otwórz plik HelloWorld.html do edycji. Dodaj następujący kod HTML: 

      <html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

    2. W sekcji <head> pliku HTML zaimportuj plik AIRAliases.js:

      <script src="AIRAliases.js" type="text/javascript"></script>

      AIR definiuje właściwość o nazwie runtime w obiekcie okna HTML. Właściwość runtime zapewnia dostęp do wbudowanych klas AIR za pomocą pełnej nazwy pakietu klasy. Na przykład: w celu utworzenia obiektu pliku AIR można dodać następującą instrukcję w kodzie JavaScript: 

      var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

      Plik AIRAliases.js definiuje wygodne aliasy dla większości użytecznych interfejsów API AIR. Za pomocą pliku AIRAliases.js można skrócić odwołanie do klasy File w następujący sposób:

      var textFile = new air.File("app:/textfile.txt");

    3. Poniżej znacznika script w pliku AIRAliases dodaj kolejny znacznik script zawierający funkcję JavaScript przeznaczoną do obsługi zdarzenia onLoad: 

      <script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>

      Funkcja appLoad() wywołuje funkcję air.trace(). Komunikat trace zostanie wyświetlony w konsoli poleceń po uruchomieniu aplikacji za pomocą ADL. Instrukcje trace mogą być bardzo użyteczne podczas debugowania.

    4. Zapisz plik.

    Plik HelloWorld.html powinien wyglądać w następujący sposób: 

    <html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

    Testowanie aplikacji

    W celu uruchomienia i przetestowania aplikacji z wiersza poleceń należy użyć programu narzędziowego ADL (AIR Debug Launcher). Plik wykonywalny programu ADL można znaleźć w katalogu bin programu AIR SDK. Jeśli pakiet AIR SDK nie został jeszcze skonfigurowany, zobacz Instalowanie AIR SDK.

    1. Otwórz konsolę lub powłokę poleceń. Przejdź do katalogu, który został utworzony dla danego projektu.

    2. Uruchom następujące polecenie: 

      adl HelloWorld-app.xml

      Zostanie otwarte okno AIR zawierające aplikację. Zostanie również wyświetlone okno konsoli zawierające komunikat wynikający z wywołania metody air.trace().

      Więcej informacji zawiera sekcja Pliki deskryptora aplikacji AIR.

    Tworzenie pliku instalacyjnego AIR

    Jeśli aplikacja działa pomyślnie, można użyć programu narzędziowego ADL w celu spakowania aplikacji do pliku instalacyjnego AIR. Plik instalacyjny AIR jest plikiem archiwum, który zawiera wszystkie pliki aplikacji, które można rozpowszechniać wśród użytkowników. Przed zainstalowaniem spakowanego pliku AIR należy zainstalować środowisko Adobe AIR.

    Aby zapewnić bezpieczeństwo aplikacji, wszystkie pliki instalacyjne AIR muszą być podpisane cyfrowo. Programiści mogą generować podstawowe, samopodpisane certyfikaty za pomocą ADT lub innego narzędzia do generowania certyfikatów. Można również zakupić dostępny w sprzedaży certyfikat podpisujący kod z ośrodka certyfikacji, takiego jak VeriSign lub Thawte. Gdy użytkownicy instalują samopodpisany plik AIR, podczas procesu instalowania wydawca jest określony jako „unknown”. Jest to spowodowane tym, że certyfikat samopodpisany gwarantuje tylko, że plik AIR nie został zmodyfikowany od czasu utworzenia. Jednak nic nie gwarantuje, że ktoś nie utworzył fałszywego samopodpisanego pliku AIR, który został przedstawiony jako aplikacja innego użytkownika. W przypadku rozpowszechnianych publicznie plików AIR zalecane jest stosowanie możliwego do sprawdzenia certyfikatu komercyjnego. Przegląd zagadnień związanych z zabezpieczeniami AIR zawiera sekcja Bezpieczeństwo w AIR (dla programistów ActionScript) oraz sekcja Bezpieczeństwo w AIR (dla programistów HTML).

    Generowanie pary: certyfikat samopodpisany i klucz

     Do wiersza poleceń wprowadź następujące polecenie (plik wykonywalny ADT znajduje się w katalogu bin programu AIR SDK): 
    adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

    ADT wygeneruje plik kluczy o nazwie sampleCert.pfx, który będzie zawierał certyfikat i powiązany z nim klucz prywatny.

    W tym przykładzie wykorzystano minimalną liczbę atrybutów, jakie można ustawić dla certyfikatu. Dla parametrów zapisanych czcionką pochyłą można stosować dowolne wartości. Typem klucza musi być 1024-RSA lub 2048-RSA (zobacz Podpisywanie aplikacji AIR).

    Tworzenie pliku instalacyjnego AIR

     Do wiersza poleceń wprowadź następujące polecenie (w jednej linii). 
    adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

    Zostanie wyświetlona zachęta do wprowadzenia hasła pliku kluczy.

    Argument HelloWorld.air to plik AIR wygenerowany przez ADT. HelloWorld-app.xml to plik deskryptora aplikacji. Kolejne argumenty to pliki używane przez aplikację. W tym przykładzie wykorzystano tylko dwa pliki, ale można dołączyć dowolną liczbę plików i katalogów. Narzędzie ADT sprawdza, czy w pakiecie znajduje się główny plik z zawartością, HelloWorld.html. Jeśli nie zostanie dołączony plik AIRAliases.js, wówczas aplikacja po prostu nie będzie działać.

    Po utworzeniu pakietu AIR można zainstalować i uruchomić aplikację poprzez dwukrotne kliknięcie pliku pakietu. Nazwę pliku AIR można również wpisać jako polecenie do powłoki lub okna poleceń.

    Kolejne czynności

    W środowisku AIR kody HTML i JavaScript zwykle działają tak samo, jak w typowej przeglądarce sieci Web. (Środowisko AIR wykorzystuje ten sam mechanizm renderowania WebKit, z którego korzysta przeglądarka Safari). Jednak istnieją pewne różnice, które należy poznać przed przystąpieniem do programowania aplikacji HTML w środowisku AIR. Więcej informacji na temat tych różnic i inne ważne tematy zawiera sekcja Programowanie w HTML i JavaScript.