Tutorial Adobe AIR. Wprowadzenie i pierwsza aplikacja.

Adobe AIR

Poziom średnio-zaawansowany

Wprowadzenie to technologii Adobe AIR

W niniejszym artykule chcę zapewnić zainteresowanym szybki start z technologią Adobe AIR. Naszym zdaniem jest jedno z tych zastosowań JavaScript, dla których warto coraz bardziej doskonalić znajomość tego języka (i powiązanych z nim technologii).

Adobe AIR (Adobe Integrated Runtime) to środowisko wykonawcze dla aplikacji RIA, które mogą być tworzone Flex / Flash lub HTML, CSS, JavaScript / AJAX.

Jest to narzędzie wielo-platformowe. Dzięki niemu możemy tworzyć przenośne aplikacje typu desktop, działające (obecnie) pod kontrolą systemów Microsoft Windows, Linux, Mac OS a nawet mobilnych systemów operacyjnych (Android, iOS, BlackBerry Tablet OS).

Same aplikacje AIR posiadają szereg możliwości, między innymi: dostęp do lokalnego systemu plików, obsługa lokalnej bazy danych SQLite, komunikacja z serwerem przy pomocy gniazd, obsługa dźwięku i schowka i wiele, wiele innych.

Wszystkie te funkcjonalności są dostępne z poziomu języka JavaScript, który razem z HTML i CSS wystarczy nam do tworzenia pełnoprawnych aplikacji desktop’owych.

Użycie podejścia z wykorzystaniem Action Script daje jeszcze więcej możliwości, szczególnie jeśli chodzi o GUI. My póki co skupimy się jednak na JavaScript.

Do dzieła – Adobe AIR w praktyce

Na wstępie musimy wykonać dwie czynności.

1. Pobieramy i instalujemy środowisko wykonawcze (runtime environment) dla naszego systemu:

http://get.adobe.com/air/

Po instalacji możemy już uruchamiać aplikacje AIR. Jako programiści chcemy coś napisać, zatem:

2. Pobieramy i instalujemy SDK:

http://www.adobe.com

Kolejną rzeczą – nie wymaganą, ponieważ możemy pisać używając dowolnego edytora i konsoli – jest IDE. Celem wygodnego, szybkiego programowania zdecydowanie polecam tu środowisko Aptana.

To IDE jest darmowe, po zainstalowaniu kilku wtyczek (o tym za chwilę) jest gotowe do programowania aplikacji Adobe AIR.

Można także skorzystać z rozszerzenia programu Dreamweaver. My skoncentrujemy się na programowaniu z użyciem Aptany.

Środowisko Aptany dla Adobe AIR

Pobieramy Aptana Studio i tutaj uwaga: pobieramy wersję 2.x. a nie 3.x. ponieważ jak dotąd nie ma wsparcia Adobe AIR w wersji 3.x. Niemniej nic nie stoi na przeszkodzie, aby mieć w systemie obie wersje tego IDE. Na własnym przykładzie: używam Aptana 3 do projektów korzystających z HTML5, ale na potrzeby tego tutoriala mam też zainstalowaną Aptanę 2.0.5.

http://aptana.com/products/studio2/download

Możliwe jest pobranie jako standalone, lub jako wtyczki do eclipse. Jeśli chodzi o AIR my wybraliśmy wersję standalone.

Po uruchomieniu ukaże się główna zakładka Aptany. Klikamy w plugins i jeśli jest to świeża instalacja Aptany, musimy zainstalować rozszerzenie do obsługi AIR. Powinno znajdować się już ono na liście, np.: Adobe AIR 1.5 w zakładce Featured.

Klikamy Get it i wykonujemy proces instalacji.

Aptana Adobe AIR

Aptana

Po restarcie IDE możemy zacząć programować.

Ustawienia i certyfikaty podstawowe

W Window -> Preferences -> Aptana -> AIR SDKs możemy podać ścieżkę do konkretnego SDK i wskazać je jako domyślne.

Zalecamy także ustawić podstawowe opcje certyfikatów aplikacji.

Certyfikat tworzymy w podmenu AIR Certificates: Window -> Preferences -> Aptana -> AIR -> AIR Certificates.

Klikamy przycisk Add, pojawi się nowe okno, gdzie podajemy nazwę certyfikatu, dalej wybieramy opcję Create new certificate i uzupełniamy dalsze pola.

Jest to tylko ‚przymiarka’, ponieważ prawdziwy certyfikat uzyskamy z odpowiedniego urzędu (za opłatą). Na potrzeby tutoriala ograniczymy się do certyfikatu podstawowego.

Tworzenie projektu

W tym celu wybieramy: File -> New project -> Web -> Adobe AIR Project

Dalej podajemy nazwę projektu, np. HelloAIR, zostawiamy także domyślnie zaznaczoną opcję Application Sandbox (podział na sandbox czyli „bezpieczna piaskownica” i non-sandbox istnieje właśnie ze względu na poziomy bezpieczeństwa).

Kolejny krok to Application XML Properties, które użytkownik dostosuje po swojemu, lub może zostawić te ustawione przez IDE.

Następnym krokiem jest Additional Application XML Properties (dodatkowe własności aplikacji), gdzie możemy skonfigurować wygląd, zachowanie i rozmiary okna naszej aplikacji AIR.

Kolejny krok to Import AIR frameworks. Na potrzeby naszego przykładu zaznaczymy AIRAliases i AIR HTML Introspector.

Adobe AIR Introspector jest to przyjazna konsola wspomagająca testowanie i rozwój aplikacji AIR. Narzędzie to umożliwia nam inspekcję aplikacji, w tym podgląd źródła czy też wywołań XMLHTTPRequest (XHR).

Jeśli w powyższym kroku załączymy framework AIR HTML Introspector, będzie on dostępny w naszej aplikacji na żądanie (wciśnięcie klawisza F12).

W ostatnim kroku możemy wybrać dodatkowe biblioteki, np. jQuery.

Projekt gotowy do uruchomienia

Zdefiniujmy jakiś testowy content dla aplikacji. W sekcji body, w pliku HelloAir.html dopiszmy na przykład:

<div style="padding: 10px"><strong>Hello AIR!</strong></div>

Uruchamiamy aplikację:

Run -> Run As -> AIR Application

Hello Adobe AIR

Hello Adobe AIR

I oto jest gotowa pierwsza aplikacja typu desktop napisana z użyciem JavaScript i HTML.

W sekcji head możemy dodać jakiś kod JavaScript. Programowanie aplikacji AIR odbywa się identycznie jak tworzenie strony WWW, pisząc HTML, CSS i JavaScript. Możemy także bezproblemowo korzystać ze wszystkich dobrodziejstw znanych nam bibliotek JavaScript, takich jak Prototype JS, jQuery, itd.

Deskryptor

W plikach naszego projektu znajduje się także deskryptor – plik application.xml.

W tym pliku XML znajdziemy ustawienia konfiguracyjne naszej aplikacji. Jeśli chcemy na przykład zmienić rozmiar okna, zrobimy to bezboleśnie właśnie w tym miejscu.

Eksport aplikacji

W pasku narzędzi znajduje się ikonka Export Adobe AIR Package. Dzięki tej opcji wygenerujemy końcowy produkt – plik z rozszerzeniem .air, będący plikiem instalacyjnym naszej aplikacji dla każdego systemu, w którym zainstalowano środowisko wykonawcze AIR.

Podsumowanie

Na tym kończymy omawianie podstaw technologii Adobe AIR. Są to wystarczające informacje do rozpoczęcia efektywnej pracy z tym środowiskiem, używając znanych nam HTML, CSS i JavaScript, a wszystko wspomagane przez Aptana IDE.

Polecam dokumentacje:

http://www.adobe.com/devnet/air/

http://www.adobe.com/support/documentation/en/air/

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.