W poprzednim artykule poświęconym Adobe AIR, pokazałem co i jak zainstalować, by móc  korzystać z Adobe AIR. Dzisiaj przedstawię krok po kroku proces tworzenia aplikacji.

Zanim jednak przejdziemy do istoty problemu, muszę nieco ponudzić na temat samej technologii.

Co to jest i dlaczego jest takie fajne?

Do tworzenia aplikacji Adobe AIR w zupełności wystarczy znajomość tego samego HTML-a, CSS i Javascript, co w przypadku stron WWW. Znika konieczność tworzenia okrętek na różne przeglądarki, a na dodatek można się cieszyć dobrodziejstwami CSS3. Ta prostota pozwala skupić się na logice aplikacji, a nie na jej działaniu w różnych środowiskach. Tutaj jest tylko WebKit.

Jako przykład udanej aplikacji napisanej w technologii Adobe AIR, można przedstawić e-Deklaracje, wydane przez Ministerstwo Finansów. Jest to aplikacja, która obliczy za nas, a następnie wyśle do urzędu skarbowego PIT-a – a to wszystko w trybie online.

Inną ciekawostką, która na pewno niektórych ucieszy, jest fakt, iż Adobe AIR obsługuje canvas.

Teorii ciąg dalszy

Zanim przejdziemy dalej, muszę wspomnieć nieco o samym środowisku w jakim nasze aplikacje będą uruchamiane.

Na pierwszy ogień pójdzie piaskownica (sandbox). Są dwa rodzaje piaskownicy – aplikacyjna i nieaplikacyjna. Podział ten został wymuszony względami bezpieczeństwa. Piaskownica aplikacyjna pozwala na wywołania funkcji API AIR oraz uniemożliwia wykonywanie ciągu znaków jako kodu – innymi słowy nie zadziała funkcja eval(), która została całkowicie wyłączona. Ponadto wywołania ajaxowe mogą łączyć się do różnych domen – nie obowiązuje reguła tego samego pochodzenia. Z kolei piaskownica nieaplikacyjna zachowuje się tak samo jak przeglądarka internetowa i ma takie same ograniczenia. Z poziomu piaskownicy nieaplikacyjnej nie ma dostępu do funkcji API AIR. Wyjątkiem od tej reguły jest Sanbox Bridge. Jak nazwa wskazuje, jest to most, który umożliwia na użycie tych danych, które programista bezpośrednio wskazał jako dostępne.

Deskryptor

Deskryptor jest plikiem konfiguracyjnym zapisanym w postaci XML. Zawiera on informacje na temat okna, w którym aplikacja jest uruchomiona, ikon, jakie symbolizują aplikację, w jakich katalogach aplikacja będzie instalowana, itp.

Pracę z tym plikiem w znacznej mierze ułatwia Aptana, ponieważ każda z opcji jest opisana w komentarzu. Najważniejszymi elementami deskryptora są:

  • id – unikalny identyfikator aplikacji. Jest to identyfikator, po którym rozpoznawane są poszczególne aplikacje Adobe AIR.
  • filename – nazwa pliku aplikacji
  • name – nazwa aplikacji jaka będzie widoczna w systemie operacyjnym
  • version – wersja aplikacji

Następnym ważnym elementem jest initialWindow, na który składają się:

  • content – nazwa głównego pliku html, który zostanie wczytany po uruchomieniu aplikacji
  • title – tytuł okna aplikacji. Jeśli w kodzie HTML zostanie użyty znacznik title, wówczas przesłoni on ustawienia deskryptora
  • systemChrome – systemowy styl, z jakiego ma korzystać aplikacja
  • transparent – określa, czy okno aplikacji ma być przeźroczyste. Działa w połączeniu z systemChrome = none. Jeśli okno zostanie ustawione na przeźroczyste, a co za tym idzie, zrezygnujemy z okna systemowego, musimy zapewnić obsługę wszystkich standardowych zachowań okna – zamykanie, minimalizację, maksymalizację i przeciąganie.
  • visible – określa, czy okno aplikacji ma być widoczne. Opcja ta jest przydana w przypadku aplikacji, które muszą wykonać dużą ilość operacji podczas uruchamiania się.
  • minimizable – określa, czy okno aplikacji można minimalizować
  • maximizable – określa, czy okno aplikacji można maksymalizować
  • resizable – określa, czy można zmieniać rozmiar okna aplikacji
  • width – początkowa szerokość okna aplikacji
  • height – początkowa wysokość okna aplikacji
  • x – początkowe położenie okna aplikacji w poziomie. Wielkość podana w pikselach od lewej krawędzi ekranu
  • y – początkowe położenie okna aplikacji w pionie. Wielkość podana w pikselach od górnej krawędzi ekranu
  • minSize – minimalna wielkość okna aplikacji, poniżej której nie można go zmniejszyć. Przyjmuje wartości: “szerokość wysokość”, np. 800 600.
  • maxSize – maksymalna wielkość okna aplikacji, powyżej której nie można go zwiększyć. Przyjmuje wartości: “szerokość wysokość”, np. 800 600.

Dodatkowymi elementami, które można wykorzystać w deskryptorze są:

  • icon – ścieżki do ikon
  • description – opis aplikacji
  • copyright – informacje o prawach autorskich
  • installFolder – ścieżka, w której zostanie zainstalowana aplikacja. Nadrzędnym elementem dla tej ścieżki jest domyślny folder instalacji
  • programMenuFolder – ścieżka w menu start, w której zostanie dodany element uruchamiający aplikację
  • allowBrowserInvocation – określa, czy aplikacja może zostać uruchomiona z poziomu przeglądarki internetowej
  • customUpdateUI – obsługa aktualizacji aplikacji
  • fileTypes – lista typów plików, jakie aplikacja może zarejestrować

Niestety nie miałem okazji korzystać z dwóch ostatnich ustawień i wiele na ich temat w chwili obecnej nie jestem w stanie powiedzieć.

Koniec gadania, czas na zabawę.

Naukę Adobe AIR zaczniemy od prostego projektu, który wyświetli “Hello World!”.

Na początek należy utworzyć nowy projekt. W tym celu używamy skrótu klawiaturowego CTRL + N i wybieramy z listy Adobe AIR Project. W polu Project name wpisujemy HelloWorld i klikamy Next. W chwili obecnej nie interesują nas dodatkowe ustawienia, więc możemy spokojnie je pominąć. Po dojściu do ostatniego ekranu, klikamy Finish. Projekt z przykładową treścią został stworzony.

Domyślnie Aptana tworzy całkiem sporą ilość plików i katalogów. Nas interesują jedynie dwa pliki: application.xml i HelloWorld.html oraz katalog lib. Reszta w chwili obecnej jest zbędna. Jeśli spojrzymy do wymienionych wyżej plików, zauważymy, że znajduje się w nich przykładowa treść, którą możemy bez obaw usunąć. Ostatecznie pliki powinny wyglądać w następujący sposób.

application.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
	<id>com.adobe.example.HelloWorld</id>
	<filename>HelloWorld</filename>
	<name>HelloWorld</name>
	<version>1.0</version>
	<initialWindow>
		<content>HelloWorld.html</content>
		<title>Hello World Application</title>
		<systemChrome>standard</systemChrome>
		<transparent>false</transparent>
		<visible>true</visible>
		<minimizable>true</minimizable>
		<maximizable>true</maximizable>
		<resizable>true</resizable>
		<width>1024</width>
		<height>768</height>
		<x>200</x>
		<y>200</y>
	</initialWindow>
</application>

HelloWorld.html

<html>
	<head>
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
	</head>

    <body>
    	Hello World!
    </body>
</html>

W powyższym przykładzie dodany został skrypt AIRAliases.js. Skrypt ten ma za zadanie ułatwić wywoływanie metod z API AIR. Zastępuje on bardzo długie wywołania metod, prostszym i co najważniejsze krótszym aliasem.

Tak przygotowaną aplikację możemy przetestować. W tym celu używamy skrótu CTRL + F11 lub F11 (jeśli chcemy korzystać z debugera). Oczywiście aplikacja nie zrobi nic poza wyświetleniem tekstu “Hello World!”.

Ostatnim etapem tworzenia aplikacji jest spakowanie jej do formatu air, który będzie można zainstalować w systemie operacyjnym. W tym celu należy klinkąć na ikonę Export Adobe AIR Package, znajdującą się w górnym pasku narzędziowym. Kliknięcie spowoduje wyświetlenie okna, w którym musimy wybrać projekt do spakowania, deskryptor aplikacji oraz SDK, jakie zostanie użyte podczas pakowania aplikacji. W drugim kroku musimy wybrać certyfikat oraz podać jego hasło. Na koniec wybieramy pliki, które mają się znaleźć w spakowanej paczce. Po zakończeniu pakowania w drzewie projektu pojawi się paczka, którą można zainstalować w systemie operacyjnym.

Co dalej?

W kolejnej odsłonie Adobe AIR dla programistów javascript przedstawię w jaki sposób można debugować aplikacje AIR oraz jak bardzo pomocna jest w tym Aptana.