Archiwum

Archiwum dla ‘Adobe AIR’ Kategoria

Adobe AIR podstaw podstawy

Kwiecień 25th, 2009 reinmar Brak komentarzy

Generalnie, jako bardziej linuksowe wydanie geeka, nie patrzyłem na newsy związane z Adobe AIR zbyt przychylnym okiem. Jakieś zamknięte rozwiązanie, pewnie trzeba mieć adobowskie środowisko za 1k$ od stanowiska i na bank zrobią obsługę na Linuksie za dwa lata, jak zacznie im się tam nudzić. Tak więc skłaniałem się bardziej ku rozwiązaniom pokroju Mozilli Prism, czy Google Gears. Byłem jednak przez Darka Juszczuka namiętnie atakowany linkami o AIRze i kiedyś jeden otworzyłem. Na stronie znalazłem przycisk „install”, po kliknięciu którego, jak zrozumiałem, miała zainstalować mi się jakaś aplikacja.Z uśmiechem politowania na twarzy, bo w końcu nie mam AIRa na swoim Linuksie, więc się musi wysypać, kliknąłem w ów przycisk. No i zonk. Z poziomu wtyczki Flash zainstalował mi się Adobe AIR, po czym zaczął się instalować program, którego stronę przed chwilą oglądałem. Z pewną dozą nieufności podałem swoje hasło „administratora” (jedyny minus – nie wystarczą uprawnienia szarego usera do instalacji softu – na szczęście sam instalator jest zaufany) i gotowe. Aplikacja się odpala, śmiga jak marzenie, ładnie wygląda i w ogóle jakbym się na Windowsa przeniósł. No cóż. To skoro panowie z Adobe się tak postarali pora dać im szansę :).

AIR – was ist das?

Za wikipedią:

Adobe Integrated Runtime, w skrócie AIR (nazwa kodowa Apollo) – wieloplatformowe środowisko wykonawcze dla RIA (ang. Rich Internet Application) zbudowanych za pomocą Flash, Flex, lub HTML i AJAX.

Programy AIR mogą być aplikacjami pulpitu.

Czyli? Środowisko dla efektownych i bogatych aplikacji internetowych. Aplikacje te mogą być odpalane jak normalne desktopowe programy. A co to w praktyce? Jeszcze nie do końca wiem, bo w zasadzie, to na bieżąco się uczę pisząc ten artykuł (dla tego proszę o poprawianie jak bym jakoś naginał czasoprzestrzeń), ale na pewno integracja z systemem plików, lokalna baza danych, kontrolki jakie oferuje Flex (o nim pewnie w przyszłości), itd.

Co ważne dla geeków ortodoksów. AIR != Flash. Aplikacje Flashowe mogą używać AIRa by powiększać swe możliwości. Ale Flasha w aplikacji AIRowej może w ogóle nie być. Zamiast niego można z powodzeniem użyć XHTMLa+JS, czy Fleksa+Actionscripta (który to kompiluje się już do obiektu SWF, ale za to ma wolne SDK i nie potrzeba do niego żadnych płatnych narzędzi).

Co trochę znamienne dla strony Adobe – miałem przed chwilą spory problem z podlinkowaniem SDK Fleksa. Niestety nie potrafię się poruszać płynnie po ich stronie i w ogóle nie znalazłem podstrony samego SDK. Ale spokojnie – może trochę dziwnie i niespójnie połączone, ale na stronie(nach) znajduje się cała potrzebna dokumentacja, którą do tej pory oceniam raczej dobrze.

Aha – Flex, jeśli dobrze rozumiem, jest open source’owy :O

Moja pierwsza aplikacja AIR oparta o HTML

Czego potrzebujemy? Na pewno przyda nam się AIR SDK. Co prawda można skorzystać także z darmowej Aptany, albo płatnego Adobe Dreamweaver CS3/CS4 z Adobe AIR Extension for Dreamweaver, ale my skupimy się na najniższym poziomowo rozwiązaniu, czyli AIR SDK (który rzecz jasna należy pobrać). Do tego na pewno będzie nam potrzebna zainstalowana biblioteka uruchomieniowa (czyt. plugin) Adobe AIR. No i na koniec zwykły edytor tekstu (najlepiej gvim :).

Mało odkrywczo zaczniemy od przywitania się ze światem. Nie pokazuje to ani trochę możliwości AIRa, ale w tym wpisie już nic więcej nie zmieszczę – za długi się robi :). Stwórzmy więc sobie katalog HelloWorld, w którym będziemy potrzebowali kilku plików.

HelloWorld.html
plik obowiązkowy – główna strona naszej aplikacji,
HelloWorld-app.xml
również obowiązkowy – konfiguracja aplikacji (z ang. descriptor) w którym między innymi można ustawić ścieżkę instalacji, nazwę, ikony, ustawienia okna, czy ścieżkę do głównego pliku HTML,
AIRAliases.js
plik przydatny – tworzy proste aliasy do JSowych obiektów dostępnych dzięki AIR. Np. zamiast window.runtime.flash.filesystem.File otrzymujemy air.File. Plik ten przekopiowujemy z sciezka_do_AdobeAIRSDK/frameworks/libs/air/.

Na początek HelloWorld.html. Zakładam, że składnię HTMLa znasz i nie muszę nic tłumaczyć. Jakby ktoś chciał więcej szczegółów odnośnie zawartości plików, to odsyłam do źródła skąd cały ten przykład zaczerpnąłem.

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

Jak widać – żadnych rewolucji. Pora na HelloWorld-app.xml:

<?xml version="1.0" encoding="UTF-8"?> 

<application xmlns="http://ns.adobe.com/air/application/1.5">
    <id>examples.html.HelloWorld</id>
    <version>0.1</version>
    <filename>HelloWorld</filename>
    <initialWindow>
        <content>HelloWorld.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>200</height>
    </initialWindow> 

</application>

Wydaje mi się, że wszystko powinno być jasne. Jedynie wartość elementu <filename> była dla mnie niejasna, więc tłumaczę – jest to nazwa aplikacji w systemie (czyli po zainstalowaniu). Wchodzi w to: katalog instalacyjny, plik wykonywalny oraz nazwa w menu systemowym (każdą z tych rzeczy można jeszcze ustawić osobno).

Testowanie aplikacji

Do testowego uruchamiania (i debugowania) stworzonej aplikacji służy odpalany z wiersza poleceń AIR Debug Launcher (ADL). Znajduje się on w sciezka_do_AdobeAIRSDK/bin/. Włączamy więc konsolę, przechodzimy do katalogu HelloWorld i startujemy:

p@d:/air/HelloWorld$ /air/AdobeAIRSDK/bin/adl HelloWorld-app.xml
Jakis trace
p@d:/air/HelloWorld$

Powinniśmy obejrzeć takie o to, piękne okienko:

Wynik działania programu HelloWorld

Jak widać program wydrukował nam też na konsoli „Jakis trace” co jest wynikiem działania air.trace("Jakis trace").

Tworzenie pliku instalacyjnego .air

Pora teraz spakować do jednego pliku instalacyjnego (paczka zip) naszą aplikację dzięki której zapanujemy nad światem. Służy do tego narzędzie ADT.

Pierwsze co trzeba wiedzieć, to że wszystkie AIRowskie aplikacje są cyfrowo podpisane. Temat ten jest mi kompletnie obcy i za pierwszym razem męczyłem się 3h żeby wygenerować jakiś swój klucz. Otóż poszedłem w stronę javowego keytoola, co było dla mnie ślepą uliczką ;). Co prawda nauczyłem się generować wszystkie typy kluczy, ale żaden nie działał :D. Na szczęście jest o wiele prostsza (i przede wszystkim działająca) ścieżka, którą przegapiłem. O niej za chwilę, a teraz cytat ze strony Adobe o bezpieczeństwie:

To ensure application security, all AIR installation files must be digitally signed. For development purposes, you can generate a basic, self-signed certificate with ADT or another certificate generation tool. You can also buy a commercial code-signing certificate from a commercial certificate authority such as VeriSign or Thawte. When users install a self-signed AIR file, the publisher is displayed as “unknown” during the installation process. This is because a self-signed certificate only guarantees that the AIR file has not been changed since it was created. There is nothing to prevent someone from self-signing a masquerade AIR file and presenting it as your application. For publicly released AIR files, a verifiable, commercial certificate is strongly recommended. For an overview of AIR security issues, see AIR security.

Oczywiście przegapiłem zaznaczony fragment i cały akapit poniżej :) A w zasadzie to mam wrażenie, że go tam wcześniej nie było. Ale koniec płaczu nad straconym czasem. Generujemy własny klucz:

p@d:/air/HelloWorld$ /air/AdobeAIRSDK/bin/adt -certificate -cn AIRBegginer 1024-RSA my_key_file dupa.8

W ten o to sposób wygenerowaliśmy klucz na nazwę podmiotu (company name) AIRBegginer, zabezpieczony hasłem dupa.8, który został zapisany do pliku my_key_file. Można go podejrzeć javowym narzędziem keytool:

p@d:/air/HelloWorld$ keytool -list -v -keystore my_key_file -storetype pkcs12
Enter keystore password:  

Keystore type: PKCS12
Keystore provider: SunJSSE

Your keystore contains 1 entry

Alias name: 1
Creation date: 2009-04-25
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=AIRBegginer
Issuer: CN=AIRBegginer
Serial number: 36373061626165333a31323064646264383133663a2d38303030
Valid from: Sat Apr 25 16:46:05 CEST 2009 until: Fri Apr 25 16:46:05 CEST 2014
(...)

Tak utworzonym kluczem możemy teraz podpisać naszą aplikację:

p@d:/air/HelloWorld$ /air/AdobeAIRSDK/bin/adt -package -storetype pkcs12 -keystore my_key_file HelloWorld.air HelloWorld-app.xml HelloWorld.html AIRAliases.js

Zostaniemy poproszeni o hasło i jeśli nic nie skopaliśmy, to ADT stworzy nam plik HelloWorld.air, który jest naszą pierwszą spakowaną i gotową do instalacji aplikacją AIR.

Instalacja

Najprostszy sposób jeśli mamy w systemie zmapowane rozszerzenie .air z instalatorem Adobe AIR (ja standardowo tak miałem) to instalacja jak na Windowsie – przez podwójnego klika w HelloWorld.air. Jeśli nie to wpisujemy:

p@d:/air/HelloWorld$ /opt/Adobe AIR/Versions/1.0/airappinstaller ./HelloWorld.air
unexpected error: ArgumentError: Error #2004
p@d:/air/HelloWorld$ /opt/Adobe AIR/Versions/1.0/airappinstaller /air/HelloWorld/HelloWorld.air

Jak widać skrypt jest zbyt „głupi” żeby sobie poradzić ze ścieżką względną i trzeba podać absolutną. Chwila czekania i zium:

Instalowanie aplikacji AIR

Znów hasło roota i wszystko działa.

Zarządzanie zainstalowanymi aplikacjami na Linuksie

Programy niestety na moim Ubuntu pojawiają się w menu systemowym w sekcji „Akcesoria”. Zainstalowałem już kilka na próbę i zaczął mi się tam robić bałagan. Ustawienie w pliku konfiguracyjnym aplikacji pola <programMenuFolder> zdaje się działać tylko na Windowsach.

Przed chwilą znalazłem także informację o tym jak można zarządzać już zainstalowanymi programami. Otóż są one instalowane jak paczki odpowiednio deb albo rpm. Dzięki temu np. w moim Ubuntu mogłem odinstalować programy z poziomu Synaptica. Nazwa programu składa się z z pola applicationId (np. examples.html.helloworld) oraz publisherID.

Program AIR w Synapticu

Uwaga dla każdego, kto nie znalazł swojej aplikacji – ja musiałem zrestartować system żeby Synaptic się odświeżył.

Koniec

To by było na tyle. Miałem jeszcze w tym artykule (ależ to ładnie brzmi ;P) pokazać jakiś ciekawszy przykład aplikacji, ale wydaje mi się, że byłby to już zbyt długi wpis. Postaram się więc dość szybko zmajstrować następną notkę. I będzie ona albo przedstawiała możliwości jakie daje AIR, albo skrobnę coś o Fleksie. A najpewniej i jedno, i drugie w krótkim czasie :).

Jeśli chodzi o ten wpis, to wszelkie sugestie, uwagi, czy pytania mile widziane. Jak zaznaczyłem gdzieś po drodze – moja wiedza na temat Adobe AIR jest nikła i mogłem popełnić sporo błędów.

Źródło i inne przydatne linki

Artykuł ten ukazał się równolegle na moim prywatnym blogu.

Kategorie:Adobe AIR, HTML + CSS Tagi: