Adobe AIR - pierwsza (pseudo) aplikacja w xhtml / javascript
Czym jest Adobe AIR?
Adobe ® AIR ™ jest to niezależne od systemu operacyjnego użytkownika środowisko uruchomieniowe (będę wdzięczny za sugestie tłumaczenia zwrotu ‘runtime’), pozwalająca na budowanie aplikacji desktopowych w oparciu o kombinację takich technologii jak:
Flash / Flex / ActionScript
HTML / CSS / JavaScript / AJAX
a następnie dodanie do nich instalatora.
Framework ten łączy zalety aplikacji on-line (niezależność od systemu operacyjnego), oraz tradycyjnych pisanych choćby w C++ (działanie i wygląd jest niezależny od przeglądarki internetowej).
Dzięki temu, aby zbudować aplikację działającą w środowisku użytkownika, nie musisz uczyć się tradycyjnych języków do ich tworzenia takich jak wspomniany już C++.
Zaczynamy:
Poniżej zaprezentuję metodę tworzenia najprostszej aplikacji za pomocą dowolnego edytora tekstu, jednak lepszym wyjściem jest użycie Dreamweavera CS3, do którego jest rozszerzenie wspomagające proces tworzenia, lub darmowej Aptany, także wspierającej AIR. Zaletą powyższych edytorów jest posiadanie przez nie kreatorów, oraz, w przypadku Aptany, dynamiczna pomoc przy tworzeniu kodu.
+ Przygotowanie potrzebnych narzędzi (Installing the AIR SDK)
Aby móc stworzyć cokolwiek, musimy pobrać Adobe AIR Runtime, a następnie je zainstalować. Runtime jest potrzebny każdemu, kto chce uruchamiać aplikacje AIR (podobnie, jak JRE dla aplikacji napisanych w Java).
Pobieramy AIR SDK, które zawiera min. narzędzie do kompilowania (ADL.exe) i tworzenia instalatora (ADT.bat) z linii komend.
Rozpakowujemy archiwum (np. C:\AIRSDK)
Dodajemy do zmiennej systemowej PATH ścieżkę do katalogu bin zawierającego ADL i ADT (C:\AIRSDK\bin)
W innym miejscu tworzymy katalog projektu nazywając go helloAir oraz podkatalogi : lib, icons i assets
Kopiujemy plik AIRAliases.js z katalogu C:\AIRSDK\frameworks do podkatalogu bin w naszym projekcie. W pliku tym zawarte są aliasy ścieżek klas AIR. Dla przykładu, zamiast pisać window.runtime.flash.desktop.NativeApplication, aby odwołać się do klasy NativeApplication , wystarczy, że napiszesz: air.NativeApplication.
+ Utworzenie deskryptora (Creating the AIR application descriptor file)
Uruchamiamy swój edytor, tworzymy nowy plik XML i zapisujemy go w głównym katalogu jako helloWorld-app.xml
Wklej do niego poniższy kod:
<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0.M6″ >
<id>com.tutoriale.helloAir</id>
<version>1.0</version>
<filename>HelloAir</filename>
<initialWindow>
<content>HelloAir.html</content>
<visible>true</visible>
<width>400</width>
<height>400</height>
</initialWindow>
<icon>
<image16×16>icons/smallIcon.png</image16×16>
<image32×32>icons/mediumIcon.png</image32×32>
<image48×48>icons/bigIcon.png</image48×48>
<image128×128>icons/biggestIcon.png</image128×128>
</icon>
</application>
Określone są tu podstawowe parametry wymagane przez kompilator:
-
<application>
Ostatnia wartość parametru xmlns, „1.0.M6”, mówi jaka wersja runtima jest wymagana przez naszą aplikację. <id>
Jest wymagany min. do dostępu do systemu plików użytkownika, oraz komunikacji między aplikacjami . <version>
Wersja aplikacji. <filename>
Nazwa skompilowanego pliku .air. <initialWindow>
Zawarte w nim elementy opisują wygląd okna aplikacji. <content>
Główny plik HTML ładowany przez AIR (odpowiednik index.html). <visible>
Określa, czy główne okno ma być widoczne po uruchomieniu aplikacji. <width>
Szerokość okna. <height>
Wysokość okna. <icon>
Ścieżki do ikony aplikacji, którą tworzą grafiki w czterech rozmiarach
+ “Ciało” aplikacji (Creating the application HTML page)
Następnie tworzymy plik którego nazwę wymieniliśmy w elemencie <content>, czyli HelloAir.html. Jest to zwyczajna strona XHTML z dodatkiem JavaScriptu (można tu użyć np. AJAX-owego frameworka Spry, także spod znaku Adobe).
Kodowanie znaków ustawiamy w znaczniku <meta> na „charset=utf-8″, a poniżej znacznika <title> podajemy ścieżkę do AIRAliases.js:
<script src=”lib/AIRAliases.js” type=”text/javascript”></script>
Poniżej wstawiamy kolejny znacznik <script>, który będzie zawierał kod generujący zawartość aplikacji:
function helloApp()
{
air.trace(”Moja pierwsza aplikacja działa!”);
}
Metoda trace() bez której nie wyobrażam sobie programowania w ActionScript, wyświetla zawartość swojego parametru w wierszu poleceń.
Do trace’a można wstawiać dowolne typy danych (liczby, obiekty, zmienne, ciągi znaków itd). W przypadku AIR, istnieje lepsza metoda na debbugowanie aplikacji, a jest nią plik AIRIntrospector.js, który omówię w innym wpisie.
Do elementu <body> przypisujemy przed chwilą napisaną funkcję helloApp, która wywoływana będzie po uruchomieniu aplikacji:
<body onLoad=”helloApp();”>
<h1>HelloAir!</h1>
</body>
Tutaj możemy już pisać kod tak jak normalną stronę XHTML. Oczywiście nie ma sensu wpisywać statycznej zawartości takiej jak powyższy element <H1>, ponieważ całą treść lepiej generować dynamicznie z javascriptu, dzięki czemu możemy tworzyć zawartość w oparciu o lokalną bazę danych, zwykły plik tekstowy, lub XML.
+ Wygląd aplikacji (CSS)
Tworzymy plik stylów i zapisujemy go w podkatalogu assets jako style.css. Ustawiamy kolor tła aplikacji, oraz kolor tekstu:
body {
color:#E4E4E4;
background:#0085FD;
}
+ Uruchomienie aplikacji
Aby uruchomić aplikację uruchamiamy wiersz poleceń (Uruchom -> cmd) i przechodzimy do katalogu aplikacji (cd C:\helloAir). Następnie wpisujemy adl helloAir-app.xml. W tym momencie powinno nam się pojawić okienko aplikacji, a w wierszu poleceń pod powyższą komendą wyświetli się treść jaką wpisałeś do metody trace .
+ Stworzenie instalatora naszej aplikacji
Gdy stworzyłeś jakąś ciekawą aplikację i chcesz się nią pochwalić innym, musisz utworzyć plik instalacyjny wykorzystując do tego program adt. Schemat polecenia wygląda następująco:
adt –package plik_air app_xml [plik_lub_katalog | -C katalog plik_lub_katalog …] …
Gdzie:
plik_air – Nazwa pliku instalatora, który tworzymy;
app_xml – ścieżka do pliku deskryptora (może być zarówno względna, jak I bezwzględna)
plik_lub_katalog – lista plików i katalogów oddzielanych spacjami, które wykorzystuje aplikacja. Podając katalog, instalator dołączy całą jego zawartość (pliki i foldery, które nie są ukryte)
-C katalog plik_lub_katalog – opcja -C pozwala dołączyć do aplikacji pliki lub katalogi z dowolnego miejsca na dysku.
Czyli w naszym przypadku należy wpisać:
adt -package helloAir.air helloAir-app.xml HelloAir.html assets icons lib
Twoja pierwsza aplikacja jest gotowa do zainstalowania!
