SPIS TREŚCI

Kilka słów od pomysłodawców tego wydania 06 Opis DVD

Krystian Rajski
Mają Państwo przed sobą prawdziwy hit. Kilka słów o tym co znajduje się na płycie,
Powodem powstania tego magazynu były: brak drukowanych czyli o Flex SDK 3 i Flex Builder.
publikacji w języku polskim na temat Flex, prawie nieograniczo-
ne możliwości tego środowiska, o którym powinni dowiedzieć 10 Aktualności
się i z niego korzystać wszyscy programiści pragnący tworzyć Nowinki ze świata Flex.
interaktywne i multimedialne projekty dla Internetu i na de-
sktop, duże zainteresowanie tematyką (o czym świadczyć mo- 12 Pierwsza aplikacja we Flex
że chociażby ilość osób biorących udział w warszawskiej edy- Krystian Rajski
cji onAIR), nasza chęć rozpowszechniania wiedzy o technolo- Krystian uczy jak tworzyć aplikację wyświetlającą dane z pliku XML,
giach przyszłości. mówi jak korzystać z klasy HttpService i komponenetu Datagird.
Do współpracy przy SDJ Extra Flex zaprosiliśmy pasjonatów – Poznacie podstawowe informacje o technologii Flex i środowisku
osoby, które tworzą i rozwijają społeczność Flex, Flash i AIR, pi- Flex Builder 3.
szą blogi, udzielają rad na forach tematycznych oraz zawodow-
ców, którzy codziennie w pracy korzystają z programistycznych 15 Od formularza do RIA – Adobe Form Guides
rozwiązań Adobe. Tomek Lichota
Tematy wybraliśmy w konsultacji z polską społecznością Flex, Tomek opowiada o tym jak przy pomocy narzędzia Adobe LiveCycle
Tadeuszem Chełkowskim - Dyrektorem Technicznym z Adobe, Designer ES szybko stworzyć formularz PDF, aby zebrać dane i jak na
beatatestermi wśród, których znajdują się programiści WWW, podstawie przygotowanego formularza utworzyć Form Guide.
webdesignerzy, deweloperzy. Za pomoc wszystkim zaanga-
żowanym w ten projekt serdecznie dziękujemy i wierzymy, że 18 Flex i AIR
dzięki ich wsparciu oddajemy w Państwa ręce wartościowy me- Wojciech Siudziński
rytorycznie magazyn. Wojtek opisuje jak zacząć pracę w Adobe AIR, prezentuje możli-
W numerze tym zetkniecie się Państwo z przekrojem tematów wości tego środowiska i przykładowe użycie np. Technikę przecią-
powiązanych z Flex. Znajdziecie tu przepis na stworzenie pierw- gnij i upuść, zaokrąglone rogi w CSS3 i kilka innych pożytecznych
szej fleksowej aplikacji, oraz dowiecie się jak zabezpieczyć i te- zastosowań.
stować oprogramowanie. Poznacie technikę pracy na frame-
worku MVC dla Flex – Cairngormie. Poza tym przeczytacie arty- 22 Adobe AIR – Powrót na desktop
kuł o tworzeniu interaktywnych map Yahoo i o innowacyjnych Szymon Kosydor
formularzach Form Guides. Dowiecie się też o powiązaniach Artykuł Szymona traktuje o tym jak łatwo i przyjemnie jest two-
Flex z Java, PHP, AIR. Wszystko zostało opisane na konkretnych rzyć aplikacje okienkowe wykorzytując Flex Builder i Adobe AIR.
przykładach, a kody źródłowe, które mogą się przydać do ćwi- Szymon m.in. podaje przepis na aplikację wykorzystującą dane w
czeń udostępniamy na www.sdjournal.org. Na DVD zamieścili- formacie RSS.
śmy projekty opisywane w artykułach oraz Flex Builder 3 i Flex
SDK przydatne do programowania.
Numer ten oczywiście nie wyczerpuje tematu. Niniejszy egzem-
plarz to pierwszy numer z serii SDJ Extra w całości poświęcony
Adobe Flex. Podczas pracy nad magazynem dochodziły do nas Le périodique
Magazyn SDJ hakin9 est wydawany
Extra jest publié par przez Software-Wydawnictwo Sp. z o.o.
sygnały, że są Państwo bardzo zainteresowani tą technologią, zSoftware-Wydawnictwo
siedzibą w Warszawie,Sp. z o.o.ul. Bokserska 1.
02-682,
Bokserska, 02-682 Varsovie, Pologne
że szukacie materiałów, że chcecie się uczyć i pracować w RIA. Tél. +48 22
Dyrektor 887 10 10, Fax.
wydawniczy: +48Małecka
Sylwia 22 887 10 11
Myślimy więc nad wydaniem regularnego, odrębnego tytułu www.phpsolmag.org
w języku polskim o Flex, Flash i AIR. Do tego czasu tematykę Redaktor prowadzący: Anna Adamczyk anna.adamczyk@software.com.pl
Directeur de la publication : Jarosław Szumski
Rich Internet Applications będziemy kontynuować w miesięcz- Kierownik produkcji: Marta Kurpiewska marta.kurpiewska@software.com.pl
niku Software Developer’s Journal. Imprimerie, photogravure : 101 Studio, Firma Tęgi
Skład i łamanie:
Ekonomiczna Tomasz
30/36, 93-426Kostro
Łódźtomasz.kostro@software.com.pl
Imprimé en Pologne/Printed in Poland
Życzymy przyjemnej lektury, Projekt okładki: Agnieszka Marchocka
Abonnement (France métropolitaine, DOM/TOM) : 1 an
Korekta: Mateusz
(soit 6 numéros) 38Lipiński
€
Anna Adamczyk
Software-Wydawnictwo Wyróżniony
Dépôt légal : àbetatester:
parution Leszek Sewastanowicz
Rafał Maciejewicz ISSN : 1731-7037
Adobe Systems Distribution : MLP
Dział reklamy: de
Parc d’activités adv@software.com.pl
Chesnes, 55 bd de la Noirée
Prenumerata:
BP 59 F - 38291 Marzena Dmowska pren@software.com.pl,
SAINT-QUENTIN-FALLAVIER CEDEX
tel. +48 22 427 36 tous
(c) 2005 Software-Wydawnictwo, 79; +48 22 427réservés
les droits 36 53

4
 www.sdjournal.org

32 Aplikacje wykorzystujące mapy w Adobe Flex 64 Dostęp do danych z apli-

Wojciech Ptak kacji Flex – Adobe LiveCycle
Wojtek opisuje jakiego typu aplikacje możemy stworzyć za pomo- Data Services w praktyce
cą technologii Flex, jakich biblio- Bartłomiej Soin
tek możemy używać wraz z tą plat- Bartek uczy jak przy pomocy języka
formą i jak stworzyć przykładowe PHP tworzyć usługi internetowe oraz
elementy projektu opartego o Flex jak w języku ActionScript tworzyć
i Yahoo Maps. aplikacje wykorzystujące usługi SOAP
i Flash Remoting.
38 Flex na Javie
Roger Zacharczyk 67 Flex i PHP – wykorzystanie technologii
Roger przedstawia w jaki sposób Web Services i Flash Remoting do komunikacji
tworzyć aplikacje RIA na przykła- klient – serwer
dzie forum internetowego, wyko- Jakub Węgrzyn
rzystując różne technologie internetowe, a w szczególności Javę Jakub w artykule przedstawia możliwości wykorzystania technolo-
oraz SQL, JSP, no i oczywiście Flex. gii PHP. Opisuje dwie metody pozwalające na komunikację aplikacji
Flex z serwerem PHP – Web Services i Flash Remoting.
44 Flex.Security.allowSecureCommunication('*');
Łukasz Zmywaczyk, Jakub Matuszewski 72 Podstawowe wzorce projektowe oraz idiomy ko-
Łukasz i Jakub opisują sposoby wymiany informacji pomiędzy ser- dowania w języku ActionScript 3.0
werem a użytkownikiem, dostępne dla języka ActionScript 3.0 Jakub Węgrzyn
z dodatkowym wykorzystaniem gotowych komponentów środo- Jakub opisuje w jaki sposób implementować podstawowe wzor-
wiska Flex 3. Ponad to opowiadają o systemie zabezpieczeń języka ce projektowe w ActionScript 3 i jak radzić sobie z ograniczeniami
ActionScript 3.0, zabezpieczeniach komunikacji, nowych crossdo- w tym języku.
mains oraz mówią dlaczego warto używać Flash Media Server.
76 TIPS & TRICKS
50 Test Driven Development – Testuj kod zanim go Wojciech Siudziński
napiszesz Wojtek pokazuje kilka sztuczek dla przyszłych specjalistów RIA.
Paweł Cichoń, Tomasz Kulczycki
Paweł i Tomasz tłumaczą co to jest TDD, dlaczego i kiedy warto ko- 78 Micke Chambers dla SDJ Extra – wywiad
rzystać z tej techniki i jak używać biblioteki FlexUnit. rozmowa przeprowadzona podczas konferencji onAIR w Warszawie.

56 Adobe Cairngorm – Framework architektoniczny

dla Adobe Flex
Wojciech Ptak
Wojtek w artykule skupia się na najpoularniejszym frameworku
MVC dla Adobe Flex – Cairngormie, opisuje zasadę jego działania
oraz pokazuje jak wykonać prosty projekt podręcznej biblioteczki.

Rédacteur
Nakład: en chef
6 000 egz.: Marek Bettman marekb@software.com.pl La rédaction
Osoby fait tout son współpracą
zainteresowane possible pourprosimy
s’assurero que les logiciels sont à
kontakt:
Rédacteurs : Aneta Cejmańska anetta@software.com.pl jour, pourtant elle décline toute responsabilité pour leur utilisation. Elle ne
cooperation@software.com.pl
Ewa Dudzic ewal@software.com.pl fournit pas de support technique lié à l’installation ou l’utilisation des logiciels
Préparation
Dołączoną do dumagazynu
CD : Auroxpłytę
CoreCDTeam
przetestowano programem AntiVirenKit firmy enregistrés sur le CD-ROM. Tous les logos et marques déposés sont la
Maquette : Anna Osiecka
G DATA Software Sp. z o.o.annao@software.com.pl propriété
Druk: 101de leurs propriétaires
Studio, respectifs.
Drukarnia Tęgi
Couverture : Agnieszka Marchocka ul. Ekonomiczna 30/36
Traduction : Iwona Czarnota, Aneta Lasota, Marie-Laure Perrotey, La rédaction
91-426 Łódź utilise le système PAO
Grazyna Wełna
Redakcja dokłada wszelkich starań, by publikowane w piśmie i na towarzyszących mu Pour créer les diagrammes on a utilisé le programme
Bêta-testeurs
nośnikach : Thomas
informacje Bores, były
i programy Tonypoprawne,
Boucheau, Pascalnie
jednakże Foulon,
bierzePascal Miquet,
odpowiedzialności
Romain
za efektyLévy, Augustin Pascual,
wykorzystania Julien Poulalion,
ich; nie gwarantuje Alain Ribault
także poprawnego działania programów Wysokość
Le CD-ROMnakładujoint auobejmuje
magazinerównież dodruki.
a été testé Redakcja nie
avec AntiVirenKit deudziela pomocy
la société G
shareware, freeware i public domain. technicznej
Data Software w instalowaniu
Sp. z o.o i użytkowaniu programów zamieszczonych na płycie
Les personnes intéressées par la coopération sont priées de nous contacter : CD-ROM dostarczonej razem z pismem.
cooperation@software.com.pl AVERTISSEMENT
Uszkodzone podczas wysyłki płyty wymienia redakcja. Les techniques présentées dans les articles ne peuvent être utilisées qu'au
Abonnement : abonnement@software.com.pl Sprzedaż aktualnych
sein des réseaux lub archiwalnych numerów pisma po innej cenie niż
internes.
Fabrication : Marta Kurpiewska marta@software.com.pl wydrukowana
La rédaction duna okładcen'est
magazine – bez
paszgody wydawcy
responsable de –l'utilisation
jest działaniem na des
incorrecte jego
Diffusion
Wszystkie: Monika Godlewska
znaki firmowe monikag@software.com.pl
zawarte w piśmie są własności odpowiednich firm zostały szkodę
techniquesi skutkuje odpowiedzialnością sądową.
présentées.
Publicité
użyte : publicite@software.com.pl
wyłącznie w celach informacyjnych. L'utilisation des techniques présentées peut provoquer la perte des données !

Si vous êtes intéressé par l’achat de licence de publication de revues merci de

contacter :używa
Redakcja Monika Godlewska
systemu monikag@software.com.pl
automatycznego składu , tél : +48 (22) 887 12
66 fax : +48 (22) 887 10 11

5
 Opis DVD

N
a dołączonej do SDJ extra płycie DVD czytelnicy znaj-
dą znakomity tandem dla Adobe Flex 3 - pełną dar-
mową wersje Flex Software Developement Kit w wer-
sji 3 oraz ograniczoną czasowo, 60-cio dniową wersję Flex Buil-
der 3, a także projekty i pliki pomocnicze do artykułów: Pierw-
sza aplikacja we Flex, Aplikacje wykorzystujące mapy w Adobe
Flex, Adobe Cairngorm – Framework architektoniczny dla Ado-
be Flex, Adobe AIR – Powrót na desktop, Test Driven Develop-
ment – Testuj kod zanim go napiszesz.

Flex SDK 3
Flex SDK jest w pełni darmowym, dystrybuowanym na zasa-
dach open sorce kompleksowym rozwiązaniem przeznaczonym
do budowy zaawansowanych aplikacji webowych. Historia śro-
dowiska została zapoczątkowana w 2002 roku wraz z wprowa-
dzeniem przez firmę Macromedia terminu Rich Internet Appli-
cation (RIA).
W skład środowiska wchodzi m.in. Flex framework znany rów-
nież jako Flex class library, kompilator Flex dostępny z linii pole-
ceń, debugger Flex oraz ASDoc utility.
Flex SDK 3 to środowisko przeznaczone do programowa- Wśród najistotniejszych zmian w stosunku do wersji 2 nale-
nia, kompilowania oraz rozszerzania aplikacji Flex w połącze- ży wymienić dodanie natywnego wsparcia dla Adobe Integra-
niu z takimi technologiami jak XML i web serwisy SOAP. Roz- ted Runtime (AIR), znanego wcześniej jako Adobe Apollo, któ-
wiązanie umożliwia wykorzystanie różnych technologiami ser- ry stał się integralną częścią Flex 3. Nowa wersja rozszerza funk-
werowych takich jak PHP, ColdFusion, Java i .NET z użyciem cjonalność środowiska o możliwość tworzenia aplikacji deskto-
np. BlazeDS. Dostarcza języka i narzędzi umożliwiających de- powych. Programiści korzystając z gotowych komponentów i na-
veloperom maksymalizację efektywności podczas tworzenia za- rzędzi wspierających Adobe AIR, mogą tworzyć oprogramowanie
awansowanych aplikacji Internetowych. Obecnie dostępna jest web działające zarówno w przeglądarce jak i bezpośrednio na sta-
3-cia wersja SDK, którego oficjalna premiera odbyła się 15 lu- cjach roboczych.
tego 2008 roku. Trwają prace nad wersją 4. której nazwa kodo- Flex 3 SDK został wyposażony w nowy komponent Advan-
wa brzmi Gumbo. ced DataGrid, który rozszerzył możliwości komponentu Data-

6 FLEX
 Opis CD

Jeśli nie możesz odczytać zawartości

płyty DVD, a nie jest ona uszkodzona
mechanicznie, sprawdź ją na co
najmniej dwóch napędach DVD. W razie
problemów z płytą, prosimy pisać pod
adres: cd@software.com.pl

Redakcja nie udziela pomocy technicznej

w instalowaniu i użytkowaniu
programów zamieszczonych na płytach
DVD-ROM dostarczonych razem
z pismem.

www.sdjournal.org
 Opis DVD
Grid m.in. o tworzenie hierarchicznej prezentacji danych i tabe-
le przestawne.
OLAP DatatGrid jest nowym komponentem, dostępny jedynie
z Flex Builder Professional, pozwalającym na agregowanie i prezen-
tację danych w wielowymiarowej strukturze analitycznej.
Flex Component Kit for Flash CS3 umożliwia łatwą integrację po-
między aplikacjami Flex, a projektami wykonanymi we Flash CS3.
Developerów JavaScript ucieszy funkcjonalność biblioteki Flex
Ajax Bridge umożliwiającej wykorzystanie klas ActionScript w Ja-
vaScript.
Wraz z wersją trzecią Flex został przekształcony w projekt open
source, wiec zainteresowani developerzy mogą uzyskać dostęp do
kodu źródłowego framework'a, kompilatora i debugger'a.
Flex SDK 3 jest dostępny na wszystkie najpopularniejsze platfor-
my - platformę Windows, Linux oraz Macintosh.
Flex Builder 3
Wraz z trzecią wersją Flex SDK firma Adobe zaprezentowała nową
wersję znanego narzędzia programistycznego Flex Builder 3.
Adobe Flex Builder 3 jest nowoczesnym i wydajnym rozwią-
zaniem opartym o Eclipse, umożliwiającym intuicyjne tworze-
nie aplikacji we Flex. Stanowi potężne narzędzie developerskie
wspomagające programistę w tworzeniu kodu źródłowego, debu-
gowaniu w trybie krok po kroku oraz wizualnym projektowaniu
aplikacji RIA z wykorzystaniem bogatej palety gotowych kompo-
nentów.
Flex Builder dostępny jest w dwóch wersjach - Standard oraz Pro-
fessional edition.
Wśród najważniejszych komponentów wymienić należy intu-
icyjny edytor kodu dla języków MXML, ActionScript oraz CSS
wyposażony w funkcję kolorowania i wyróżniania kodu, podpo-
wiadanie składni. W wersji 3 rozszerzono bibliotekę wbudowa-
8 FLEX
nych komponentów graficznych umożliwiających budowanie
layout'u aplikacji, a także umożliwiono korzystania z kompo-
nentów wchodzących w skład Advanced Datagrid.
Warty uwagi jest wizualny edytor CSS, dzięki któremu w ła-
twy sposób możemy zaprojektować arkusz stylów definiujący
wygląd komponentów graficznych. Podczas pracy na bieżąco mo-
żemy śledzić efekt naszych modyfikacji bez konieczności ponow-
nej kompilacji projektu.
Nowy Builder oferuje możliwość pełnej integracji z Adobe Cre-
ative Suit 3 pozwalając na łatwy import elementów wykonanych
we Flashu, Fireworks, Photoshop czy Illustartorze.
Programistów ucieszy funkcjonalność refactoringu kodu, która
jest istotnym udogodnieniem w stosunku do wersji poprzedniej.
Dzięki natywnemu wsparciu dla Adobe AIR, Flex Builder 3 wy-
posażony został w narzędzia umożliwiające tworzenie również tra-
dycyjnych aplikacji desktopowych.
W wersji Professional aplikacja posiada narzędzie testujące,
które pozwala poprawić wydajność tworzonych aplikacji za po-
mocą bieżącego monitorowania i analizowania zużycia pamięci
i procesora. Builder pozwala również wykorzystywać zewnętrz-
ne programy przeznaczone do automatycznego testowania opro-
gramowania.
Wykorzystując Flex Builder 3 programista może tworzyć apli-
kację zarówno w oparciu o Flex SDK 3 jak również w wersji Flex
SDK 2.
Dzięki zastosowaniu nowego kreatora, ułatwiono również in-
tegracje tworzonych aplikacji z technologiami serwerowymi jak
PHP, ColdFusion czy Java. Nowa wersja środowiska dostępna jest
też w darmowej wersji edukacyjnej przeznaczonej dla uczniów
oraz studentów po wypełnieniu i wysłaniu odpowiedniego formu-
larza rejestracyjnego, który znajduje się na specjalnej stronie pro-
ducenta http://www.flexregistration.com/.
 Aktualności
Interaktywne
aktualności z firmy Janmedia
Janmedia Interactive zacieśnia współpracę
z Adobe. Kooperacja obu firm służy popu-
laryzacji technologii Flex i AIR jako atrak-
cyjnego narzędzia budowania skutecznych
i efektownych aplikacji biznesowych.
To strategiczne partnerstwo umożliwia
nam dostęp do najnowszych technologii
związanych z obiegiem dokumentów, podpi-
sem cyfrowym, zaawansowanym streamin-
giem video oraz budową aplikacji Flash, Flex
oraz AIR – mówi Monika Mikowska, Dyrek-
tor Sprzedaży i Marketingu Janmedia.
Janmedia to firma, która kompetencjami
i wielkim entuzjazmem dla technologii Adobe
zdobyła renomę wśród polskich i zagranicz-
nych klientów – komentuje Tadeusz Chełkow-
ski, Dyrektor Techniczny Adobe. W ramach
współpracy powstają pierwsze wdrożenia
korporacyjne w technologiach Flex i AIR dla
klientów Janmedia z Europy i USA. Janmedia
pracuje nad aplikacją RIA dla wydawcy ame-
rykańskiej prasy codziennej oraz Flexowym
systemem transakcyjnym dla polskiej insty-
tucji finansowej – szczegóły współpracy do
momentu zakończenia prac projektowych są
objęte klauzulami poufności.
Janmedia Interactive jest agencją interak-
tywną założoną w 2002 roku i ukierunkowa-
ną na obsługę klientów międzynarodowych.
Obecnie Janmedia posiada dwa oddziały
w USA (Waszyngton i Richmond) oraz jeden
w Polsce (Wrocław). Janmedia specjalizu-
je się w zarządzaniu projektami interaktyw-
nymi, technologiami Java i innymi techno-
logiami sieciowymi, projektowaniu zgodnie
z wytycznymi W3C, użyteczności i dostęp-
ności serwisów WWW.
www.janmedia.pl
Adobe otworzy Flasha
Adobe poinformował o rozpoczęciu prac
nad stworzeniem, w ramach projektu Open
Screen Project, spójnego środowiska dla
gamy urządzeń elektronicznych. W tym
celu korporacja ma udostępnić specyfika-
cję formatu Flash, zarówno .swf, jak i .flv/.f4v
oraz usunąć wszystkie restrykcje licencyjne.
W przyszłości taki sam los ma też spotkać AIR.
Warto zaznaczyć, że Adobe już jakiś czas temu
umożliwił deweloperom tworzenie narzędzi
zapisujących we Flashu. Do ich odtworzenia
konieczne było jednak posiadanie Flash Play-
era. Teraz mają być one dostępne na każdym
urządzeniu. Poza specyfikacją samego Flasha,
Adobe planuje otwarcie specyfikacji proto-
kołów Adobe Flash Cast i Action Message
Format oraz API niezbędnego do wdrażania
Flash Playera na różnych platformach. Otwar-
cie specyfikacji Flasha wydaje się wyzwaniem
rzuconym w stronę platformy Microsoftu do
wyświetlania i tworzenia bogatych graficznie
multimedialnych treści internetowych Silver-
light. Adobe ma nadzieję, że przyczyni się to
do jego popularyzacji na miarę wydanego
w 1993 roku PDF, który w krótkim czasie stał
się otwartym standardem zapisu dokumen-
tów elektronicznych, a także wkrótce standar-
dem ISO 32000.
www.readwriteweb.com
10
Beta Dreamweaver,
Fireworks i Soundbooth
F
irma Adobe zaprezentowała przedpre-
mierową wersję trzech aplikacji z na-
stępnej edycji pakietu Adobe Creati-
ve Suite, zestawu programów do projektowa-
nia graficznego, tworzenia serwisów interne-
towych i edycji wideo. Firma udostępniła do
bezpłatnego pobrania z serwisu Adobe Labs
publiczne wersje beta nowych edycji progra-
mów Adobe Dreamweaver, Adobe Fireworks
i Adobe Soundbooth.
Właśnie udostępnione wersje beta ob-
razują kierunek dalszego rozwoju pakietu
Adobe Creative Suite. Zastosowane w nim
nowe funkcje i technologie mają uprościć
i usprawnić projektowanie oraz przepływ
pracy z wykorzystaniem rówżnych narzę-
dzi. Jak zwykle firma Adobe liczy też na kry-
tyczne uwagi i sugestie przyszłych uzytkow-
ników dotyczące dalszego rozwoju oprogra-
mowania. Wersja beta nowego Dreamwe-
avera zawiera pasek narzędzi Related Files
oraz funkcję Code Navigator, które pozwa-
lają użytkownikom wnikać głęboko w złożo-
ne strony zawierające pliki HTML, łącza do
dokumentów JavaScript i zintegrowane da-
ne XML. Użytkownicy mogą przeglądać pli-
ki powiązane widoczne w pasku narzędzi Re-
lated Files i za pomocą funkcji Code Naviga-
tor wprowadzać zmiany w kodzie, które uka-
zują się w różnych częściach dokumentu po
jednokrotnym naciśnięciu przycisku aktu-
alizacji. Zaktualizowana wersja oprogramo-
wania Dreamweaver jest również wyposażo-
na w nowy tryb Live View, oparty na modu-
le renderingu typu open source pod nazwą We-
bkit. Tryb ten pozwala użytkownikom prze-
glądać na bieżąco treści umieszczone w śro-
dowisku rzeczywistym bez potrzeby wycho-
dzenia z programu Dreamweaver w celu
obejrzenia tych treści z poziomu przeglądar-
ki. Funkcja ta umożliwia również użytkow-
nikom zamrażanie kodu w języku JavaScript
w celu debugowania stron interaktywnych,
a także przeglądanie treści we Flash'u i inte-
rakcje z nimi. Nowości w wersji beta progra-
mu Fireworks obejmują nowy interfejs użyt-
kownika, który jest obecnie zgodny z inny-
mi aplikacjami wchodzącymi w skład pakie-
tu Creative Suite. Ułatwia to użytkownikom
przełączanie się między aplikacjami, które
mają teraz taki sam wygląd i sposób obsłu-
gi. Ponadto wersja beta programu Fireworks
pozwala użytkownikom eksportować zapro-
jektowane kompozycje w postaci zapewnia-
jących dużą wierność obrazu, interaktyw-
nych i bezpiecznych dokumentów w forma-
cie Adobe PDF. Najważniejszą cechą nowej
wersji Fireworks jest pełna zgodność ze śro-
dowiskiem Adobe AIR, technologią HTML
i Adobe Flash oraz oprogramowaniem Ado-
be Flex Builder, dzięki czemu użytkownicy
mogą tworzyć uniwersalne projekty i wdra-
żać je na dowolnej platformie. Z kolei wersja
beta oprogramowania Soundbooth zawiera
szereg nowych funkcji umożliwiających
twórcom efektywniejszą realizację zadań
związanych z produkcją dźwięku, w tym no-
wą funkcję obsługi wielu ścieżek, która po-
zwala użytkownikom edytować wiele klipów
dźwiękowych na różnych ścieżkach, a tak-
że nową możliwość dostosowywania przez
użytkowników poziomów głośności plików
dźwiękowych. Wersja umożliwia również
przeglądanie ustawień kompresji plików
MP3 przed ich zapisaniem. Zawiera tak-
że nową technologię rozpoznawania mowy,
która pozwala użytkownikom szybko two-
rzyć transkrypcje ścieżek dialogowych oraz
przeszukiwać je na ścieżce czasu pod kątem
występowania określonych słów i fraz.
Dostępność i wymagania systemowe
Po załadowaniu i uruchomieniu wersje be-
ta oprogramowania Dreamweaver,Fireworks
i Soundbooth będą aktywne przez 48 godzin.
Po tym czasie dostęp do nich będą mieli tyl-
ko klienci posiadający pakiet CS3. Będą oni
mogli, korzystając z numerów seryjnych swo-
ich pakietów CS3, odblokować wersje beta
i bezpłatnie ich używać do chwili udostęp-
nienia następnej wersji pakietu Creative Su-
ite. Dostęp do wersji beta pozwoli użytkow-
nikom przekazywać za pośrednictwem ser-
wisu Adobe Labs ich sugestie dotyczące
przyszłego rozwoju produktu. Wersje beta
programów Dreamweaver i Fireworks działa-
ją pod kontrolą różnych systemów operacyj-
nych, w tym systemu Microsoft Windows XP
z pakietem Service Pack 2, systemu Windows
Vista i systemu Mac OS X w wersji 10.4.11
lub nowszej zainstalowanego na kompute-
rach Macintosh z procesorami PowerPC G5
lub Intel. Wersja beta programu Soundbo-
oth działa pod kontrolą wszystkich wymie-
nionych systemów poza systemami zainsta-
lowanymi na komputerach Macintosh z pro-
cesorami PowerPC. Wersje beta można już
pobrać z serwisu Adobe Labs pod adresem
www.labs.adobe.com.
FLEX

3dflash.pl
tworzy adobe.com.pl
P
omysł na projekt systemu społeczno-
ściowego dla użytkowników progra-
mów z rodziny Adobe, powstał już rok
temu, gdy uzyskaliśmy domenę adobe.com.pl.
Przez ten okres pracownicy naszej agencji
tworzyli wzór największego systemu pod
technologią Flex. Ze względu na ilość modu-
łów jakie będzie serwis posiadał, agencja mu-
siała rozwiązać szereg problemów technicz-
nych, związanych z połączeniami modułów
ze sobą, a także połączeniami z bazami da-
nych. W pewnym momencie cały projekt sta-
nął pod znakiem zapytania ze względu na re-
alizacje serwisu Flextech firmy Janmedia, ale
zorientowaliśmy się, że nie będzie on tak roz-
budowany jak nasz projekt, dlatego nie za-
trzymaliśmy prac nad adobe.com.pl.
Co serwis będzie oferował
Przede wszystkim dzięki implementacji naj-
nowszych technologii Flex użytkownicy bę-
dą mogli dodawać swoje video i videotuto-
riale w jakości dotąd niespotykanej, nawet
do 480i (720x480), czyli dwukrotnie więcej
niż obecne na Youtube. Ale to nie wszystko.
Ze względu na to, że najnowszy Flash Player
9.0.124.0 ma możliwość odtwarzania plików
MOV kodowanych kodekiem h264 i dźwię-
ku kodekiem AAC+, wilekość pliku będzie
porównywalna z wielkością plików na Youtu-
be. Kolejnym modułem będzie personaliza-
cja profilów o swoje prace, ciekawe informa-
cje, linki do stron, własny avatar, ponadto
wszystkie elmenety zdjęciowe będzie można
obrabiać poprzez wbudowany edytor plików
zdjęciowych. Za pomocą edytora będzie moż-
na skalować, obcinać ,zmieniać kolorystykę,
czy też dodawać np. loga do swoich zdjęć.
Ponadto, system będzie posiadał forum, ser-
wis ze zleceniami gdzie freelancerzy będą mo-
gli zabiegać o pozyskanie projektów, a praco-
dawcy będą mogli umieszczać zlecenia. Ko-
lejnym modułem będzie miejsce, gdzie bę-
dzie można oferować stałą prace.Będzie moż-
liwość tworzenia grup Adobe i dopisywania
się kolejnych osób do już stworzonych. Bę-
dzie też mozliwość komunikacji pomiędzy
osobami w danej grupie, a także umieszcza-
nie przez użytkowników informacji o spotka-
niach i seminariach. Sklepom sprzedających
oprogramowanie Adobe będziemy oferowali
system typu Ceneo. Będziemy też zamiesz-
czać pełne opisy technologiczne tych progra-
mów. Planujemy także powiązanie tego mo-
dułu z sklepami Allegro, aby osoby odpowie-
dzialne za administracje nie musiały osob-
www.sdjournal.org
no dodawać produktów do systemu Allegro
i naszego. Oczywiście nie zabraknie tutoriali
z zakresu użytkowania produktów Adobe.
Poza tym dobrą informacją dla użytkowni-
ków powinna być możliwość umieszczania
w galerii plików JPG z własnymi pracami,
podobnie jak w serwisie digart. Ponadto roz-
szerzyliśmy funkcjonalność do plików SWF
i PDF. Jeszcze jedną funkcjonalnością będzie
moduł odpowiedzialny za odczyt nowych
wiadomości i informacji z serwisów flab.pl
oraz magazynu 3DFX (www.3dfxmag.pl).
Jedną z głównych zalet tego modułu będzie
dodawanie własnych źródeł np. z serwisów
wp.pl czy Onet.pl.
Trochę o technologiach
Cały system będzie bazował zarówno na narzę-
dziach komercyjnych, jak i Open Source. Naj-
ważniejsze to:
Całość video-konwersji oraz wyświetla-
nia będzie realizowane przez Adobe Flash
Media Server 3. Połączenia z bazą będą re-
alizowane poprzez darmowy amfphp i we-
borb. Ze względu na to że moduł animiacji
we Flex 3 nie jest dla nas najlepszy, dodta-
kowym silnikiem napędowym będzie także
darmowy Tweener. Pozostałe elementy stwo-
rzone zostały we Flex w połączeniu z plika-
mi PHP, które są silnikiem pozyskiwania in-
formacji z róznych serwisów poprzez meto-
dy parsowania.
Dla kogo jest adobe.com.pl?
Serwis będzie prosty i zrozumiały dla wszyst-
kich. Miejsce dla siebie znajdą tam zaawan-
sowani użytkownicy programów Adobe oraz
początkujący. Ważną rolę w tym aspekcie od-
grywa layout tworzony przez naszego grafi-
ka Monikę Onsowicz. Połączenie zaawan-
sowanych funkcji z intuicyjną i przyjemną
w odbiorze dla użytkowników aplikacją by-
ło dużym wyzwaniem dla grafików i progra-
mistów.
Termin zakończenia prac
Wersji finalnej na pewno jeszcze jakiś czas
nie będzie, ale wersja testowa jest już od 7
lipca.
W dniu zamknięcia magazynu SDJ Extra
skończone było 90% serwisu. Licząc z wszyst-
kimi silnikami i kodami napisaliśmy około
trzech milonów linii kodu. Zapraszamy do od-
wiedzenia serwisu adobe.com.pl.
Aktualności
onAIR w Warszawie
6 czerwca w Centrum Olimpijskim w War-
szawie, odbyła się konferencja onAIR. Jest
to cykl wykładów w języku angielskim,
dotyczących technologii Adobe AIR. W
tym roku impreza odbywa się w 11 krajach
Europy (Warszawa była 8 z kolei).
Na tym trwającym cały dzień, dostępnym
nieodpłatnie dla wszystkich wydarzeniu,
można było posłuchać znakomitych ewan-
gelistów oraz specjalistów z Adobe takich
jak: Mike Chambers, Serge Jespers, Kevin
Hoyt, czy Daniel Dura. Poza zdobyciem
ogromu wiedzy przekazanej na wykładach,
można było w czasie przerwy porozmawiać
z prelegentami, zadać nurtujące pytania i
wymienić się wiedzą. Można było też odpo-
cząć przy kawie, przekąskach, a nawet XBo-
x’ach, które dostarczył organizator. Dodat-
kową atrakcją było losowanie nagród w
postaci oprogramowania Adobe. Ilość
uczestników, którzy wzięli udział w warsz-
tatach świadczy o dużym zainteresowaniu
technologią AIR w Polsce.
Więcej o onAIR na http://onair.adobe.com/
FlexChallenge – let’s flex
what’s possibile
Jesteś programistą Flex? A może właśnie
zacząłeś swoją przygodę z AIR? Bez względu
na płeć, wiek, doświadczenie czy wykonywa-
ny zawód zapraszamy do wzięcia udziału we
FlexChallenge. Jeżeli chcesz pokazać światu
swoje prace, podejmij wyzwanie! Adobe
Flex oraz Adobe AIR to nowoczesne techno-
logie pozwalające tworzyć bogate wizual-
nie aplikacje (RIA), które są zorientowanie na
środowisko internetowe oraz desktopowe.
FlexChallenge to cykl ogólnopolskich zawo-
dów w wytwarzaniu aplikacji RIA, umożli-
wiających rywalizację z najlepszymi, zapre-
zentowanie i doskonalenie swoich umiejęt-
ności, a tym samym promocję utalentowa-
nych osób tworzących w technologiach Flex
i AIR. Konkurs wystartował 6 czerwca br., a
kończy się jesienią. Skład sędziowski ocenia-
jący zgłoszone prace stanowią doświadczo-
ne osoby związane bezpośrednio z wytwa-
rzaniem aplikacji RIA oraz uznani na świe-
cie ewangeliści oraz inżynierowie technolo-
gii Adobe. Nagrody rzeczowe, które można
wygrać w konkursie są bardzo atrakcyjne
– komputery MacBook, iPody, oprogramo-
wanie Adobe oraz niespodzianki od sponso-
rów i patronów medialnych. Głównym spon-
sorem oraz patronem zawodów jest polski
oddział firmy Adobe Systems. Organizato-
rem zawodów jest polska grupa użytkow-
ników technologii Flex oraz AIR – FlexTech,
której sponsorem głównym jest międzyna-
rodowa firma informatyczna Janmedia Inte-
ractive. Zawody trwają! Zajrzyj na oficjalną
stronę konkursu i zgłoś swój udział!
http://www.flexchallenge.com
11
 ADOBE FLEX

Pierwsza
aplikacja we Flex
Przełom w budowie dynamicznych witryn WWW to wprowadzenie technologii
Flash, która zniosła wiele ograniczeń i pozwoliła na rozwój prawdziwych
multimedialnych projektów Internetowych. Po jednorazowym załadowaniu
wykonanej witryny, użytkownik korzystał z pełni funkcjonalnego GUI
niewymagającego ponawiania zapytań do serwera i wysyłania odpowiedzi.
Wprowadzenie
Dowiesz się... Powinieneś wiedzieć... do technologii Flex
• O technologii Flex i środowisku Flex Builder 3; • Wymagana jest podstawowa wiedza z zakresu Obszarem zastosowania Flex jest wspomaganie
• Nauczysz się korzystać z klasy HttpService programowania oraz języka XML. budowy aplikacji w zakresie tworzenia warstwy
oraz komponentu Datagrid. • Wiedza na temat aplikacji internetowych. prezentacji. Flex skoncentrowany jest na dostar-
• Samodzielnie wykonasz program wyświetlają- czaniu rozwiązań wspierających budowę graficz-
cy dane z pliku XML. nego interfejsu użytkownika. Pisząc o Flexie sto-
suję pewne uogólnienie dla kompleksowego roz-
wiązania, w skład którego wchodzi Flex Software
wych, wykorzystujących dynamicznie generowany Development Kit (Flex SDK) oraz zaawansowa-
jednoekranowy interfejs użytkownika. Debiut pro- ne środowisko developerskie Flex Builder. SDK to
Poziom trudności duktu został poprzedzony wprowadzeniem nowe- rozwiązanie darmowe, oferujące m.in. kompilator
go terminu dla projektów Internetowych – RIA działający z linii poleceń. Siłą SDK jest wykorzy-
(Rich Internet Application), co w dosłownym tłu- stanie tandemu: języka MXML wraz z obiektowo
maczeniu brzmi bogata aplikacja internetowa. Po- zorientowanym językiem ActionScript 3, dobrze

O
bszar zastosowań Flash zaskoczył sa- jęcie oznacza nowoczesne dynamiczne aplikacje in- znanym wszystkim użytkownikom Flash.
mych producentów. Narzędzie prze- ternetowe, w których wyeliminowano uciążliwość MXML jest opartym o XML językiem cha-
znaczone do tworzenia multimedial- standardowych technologii opartych o HTML. rakteryzującym się stosunkowo prostą składnią.
nej animacji opartej na wektorach stało się jednym Aplikacje wykonane w oparciu o założenia RIA Znacznikowa budowa szczególnie przypadnie do
z wiodących rozwiązań wykorzystywanych do charakteryzują się jednoekranową prezentacją da- gustu tradycyjnym webmasterom oraz początku-
projektowania witryn internetowych. nych (znaną z rozwiązań desktopowych), brakiem jącym programistom. MXML umożliwia łatwe
Model budowy projektów w oparciu o listwę konieczności przeładowywania zawartości ekranu generowanie i zarządzanie komponentami wizu-
czasową i sceny, stworzony z myślą o animacji, zo- podczas pracy oraz przyjaznym, zawierającym ele- alnymi, które można następnie wywoływać, zmie-
stał zaadaptowany na potrzeby WWW. Często- menty multimedialne interfejsem. niać właściwości i dodawać efekty.
kroć budowa witryny wykonanej we Flash skła-
dała się ze scen umieszczonych na listwie czaso-
wej, po których użytkownik przesuwał się nawi-
gując po menu. W późniejszych wersjach Flash
wykorzystywano kilka niezależnych dokumen-
tów SWF ładowanych dynamicznie do główne-
go pliku SWF.
Tworzenie bardziej zaawansowanych aplikacji
w środowisku przeznaczonym pierwotnie do two-
rzenia animacji zaczęło być coraz trudniejsze i co-
raz mniej wydajne. Problem dostrzegli projektan-
ci z firmy Marcomedia (obecnie Adobe) i posta-
nowili, że należy postawić jasną granicę pomię-
dzy rozwiązaniami wspomagającymi tworzenie
dynamicznych aplikacji WWW, a rozwiązaniami
wspomagającymi pracę grafików. Owocem tej de-
cyzji stał się Flex.
Czy Flex jest następcą Flash? Odpowiedź brzmi:
nie. Jest to osobny produkt z rodziny Adobe, umoż-
liwiający budowę nowoczesnych projektów webo- Rysunek 1. Zrzut ekranu po uruchomieniu Flex Builder 3

12 FLEX
 Język znacznikowy ma jednak pewne ograniczenia np. brak możliwo-
ści przetwarzania wprowadzonych danych, zapętlania, stosowania instruk-
cji warunkowych. Wszystkie wymienione braki wypełnia ActionScript, któ-
ry umożliwia stosowane dynamicznych interakcji pomiędzy komponenta-

Listing 1. Dzięki klasie HTTPService otrzymujemy dane z pliku XML

w postaci odpowiedzi HTTP

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
ayout="absolute">
<mx:HTTPService id="adresyDane" url=”adresy.xml” />
</mx:Application>

Listing 2. Wywołanie przez creatioComplete funkcji send()

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="adr
esyDane.send()">
<mx:HTTPService id="adresyDane" url="adresy.xml"/>
</mx:Application>

Listing 3. Kompontent DataGrid wyświetla dane znajdujące się

w obiekcie w tabeli
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="adr
esyDane.send()">
<mx:HTTPService id="adresy" url="adresy.xml" />
<mx:DataGrid x=”50” y=”50” width=”850”/>
</mx:Applicat ion>

Listing 4. Aby wyświetlić dane, musimy odwołać się do obiektu

lastResult
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml”
layout="absolute" creationComplete="adr
esyDane.send()">
<mx:HTTPService id="adresyDane" url="adresy.xml" />
<mx:DataGrid x=”50” y=”50” width=”850” "{adresyDane.lastRes
ult.adresy.stock}" />
</mx:Application>

Listing 5. Dodajemy nagłówki w kolumnach

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="adr
esyDane.send()">
<mx:HTTPService id="adresyDane" url=" adresy.xml"/>
<mx:DataGrid x="21" y="10" width="850” dataProvider="{adresy
Dane.lastResult.adresy.osoba}">
<mx:columns>
<mx:DataGridColumn dataField="imie"
headerText="Imię"/>
<mx:DataGridColumn dataField="nazwisko"
headerText="Nazwisko"/>
<mx:DataGridColumn dataField="adres"
headerText="Adres zamieszkania"/>
<mx:DataGridColumn dataField="tel"
headerText="Telefon kontaktowy"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

www.sdjournal.org
 ADOBE FLEX
mi, np. możemy przetworzyć dane wprowadzo-
ne przez użytkownika w polach tekstowych, wy-
konać obliczenia itd. Budowa Flex pozwala na bar-
dzo intuicyjne łączenie obu języków, dlatego praca
z dokumentem jest łatwa, a budowa projektu spój-
na. Kod źródłowy aplikacji wykonanych we Flex
przetwarzany jest do postaci kodu ActionScript,
a następnie kompilowany do postaci pliku SWF.
W skład SDK wchodzą również: biblioteka goto-
wych klas - Flex Class Library oraz Flex Data
Service umożliwiający łączenie warstwy prezen-
tacji z warstwą biznesową.
Flex Data Sevice nie umożliwia bezpośred-
niego dostępu do baz danych. Pełni rolę pośredni-
ka umożliwiającego np. wywołanie na serwerze
kodu Java, .Net, PHP, ASP czy ColdFusion, powo-
dującego pobranie danych z bazy, a następnie ich
przekazanie do warstwy prezentacji.
Wraz z pojawieniem się technologii Flex, Adobe
zaoferowało dedykowane rozwiązanie wspomaga-
jące pracę developerów - Flex Builder. Produkt jest
zaawansowanym graficznym środowiskiem typu
RAD opartym o dobrze znany programistom Ja-
va - Eclipse.
Oprócz znanych z Eclipse narzędzi wspoma-
gających tworzenie aplikacji, Flex Builder oferu-
je graficzny edytor pozwalający na wizualną kre-
ację projektu. Wszystkie niezbędne komponenty
jak przyciski, pola tekstowe, elementy menu, moż-
na w prosty sposób przeciągnąć myszką i umieścić
w oknie projektu. Celowo pomijam opis samego
środowiska Flex Builder oraz opis procesu insta-
lacji. W poniższym opisie wykorzystałem najnow-
szą, trzecią odsłonę Flex Buildera. Do dzieła! Za-
czynamy przygodę z Flex!
Rysunek 2. Widok panelu Flex Navigator
Rysunek 3. Widok gotowego projektu
14
Pierwszy projekt
Wspólnie wykonamy projekt prostej aplikacji, któ-
ra w przystępny sposób wyświetli nam zawartość
pliku adresy.xml. Celem wykonania projektu jest
zaprezentowanie składni języka MXML oraz pro-
stoty tworzenia aplikacji we Flex.
Aby utworzyć aplikację, musimy stworzyć no-
wy projekt, w którym Flex utworzy niezbędną
strukturę katalogów i plików. W tym celu wybie-
ramy menu File>New>Flex Project. W polu Pro-
jectname wpisujemy nazwę naszego projektu np.
PierwszaAplikacjaFlex. Inne opcje pozostawiamy
z domyślnymi wartościami i klikamy przycisk Fi-
nish. Po chwili nasz projekt zostanie załadowa-
ny. Jak widać na Rysunku 1. w panelu Flex Na-
vigator, stworzona została odpowiednia struktu-
ra. W głównym oknie projektu znajdują się dwie
zakładki: Source, w której możemy edytować kod
źródłowy naszej aplikacji oraz Design, z której do-
stęp mamy do edytora graficznego. Skupimy się na
edycji kodu źródłowego, dlatego przejdźmy do za-
kładki Source.
Jak widać, po stworzeniu projektu, utworzony
został szkielet dokumentu z otwierającym i zamy-
kającym znacznikiem Application.
Istnieje kilka możliwości uzyskana dostępu
do zawartości pliku XML. Wykorzystamy kla-
sę HTTPService, dzięki której Flex otrzyma da-
ne z pliku XML w postaci odpowiedzi HTTP.
W tym miejscu warto przypomnieć, że progra-
mowanie we Flex jest zorientowane obiektowo
i każdemu zdarzeniu przyporządkowana jest
odpowiednia akcja. Zdarzeniem może być np.
załadowanie aplikacji, kliknięcie przycisku lub
wpisanie tekstu.
Pomiędzy głównymi znacznikami aplikacji
wprowadzamy znacznik <HTTPService> opa-
trzony wymaganym atrybutem id, przyjmij-
my id=”adresy”. Kolejny atrybut URL definiu-
je ścieżkę dostępu do pliku oraz jego nazwę, po-
dajmy ścieżkę do katalogu gdzie umieściliśmy
nasz plik adresy.xml. Nasz kod powinien wyglą-
dać jak na Listingu 1.
Jak wspomniałem wcześniej, aby nastąpi-
ła akcja, musi wystąpić zdarzenie, które ją wy-
woła. Samo użycie klasy HTTPService do po-
łączenia z plikiem XML nie jest rozpoznawa-
ne jako zdarzenie, dlatego musimy zdefinio-
wać inne zdarzenie. Użycie creatioComplete
w głównym znaczniku Application spowo-
duje, że fakt ukończenia ładowania aplikacji
zwrócony zostanie jako zdarzenie mogące wy-
wołać odpowiednią funkcję. W naszym przy-
padku użyjemy funkcji send(), która zosta-
nie wywołana w momencie załadowania apli-
kacji. Brzmi to nieco zawile, ale w istocie jest
bardzo proste i logiczne. Uzupełniamy nasz
kod źródłowy tak jak na Listingu 2. Wywołanie
funkcji send() przekazuje dane z pliku XML
do Flex w postaci obiektu, który zostaje ob-
służony przez klasę HTTPService. Po otrzyma-
niu danych HTTPService umieszcza je w obiek-
cie lastResult. Za każdym razem, kiedy dane
zostaną zmienione obiekt lastResult zostanie
zaktualizowany.
Nadszedł czas, aby wyświetlić pobrane da-
ne. W tym miejscu skorzystamy z komponen-
tu DataGrid, który wyświetla dane znajdują-
ce się w obiekcie w tabeli. Uzupełnijmy zatem
nasz kod, dodając komponent wraz z atrybuta-
mi definiującymi szerokość pola (width) oraz
pozycje w poziomie (x) i pionie (y) (Listing 3.).
Następnie musimy przekazać dane, które zo-
stały przechwycone przez HTTPService do pola
DataGrid, w tym przypadku HTTPService peł-
ni rolę dostawcy danych, które chcemy wyświe-
tlić. Aby wyświetlić dane, musimy odwołać się
do obiektu lastResult (Listing 4.).
W zasadzie nasza aplikacja jest już gotowa,
dodajmy jednak przyjazne użytkownikowi na-
główki poszczególnych kolumn w tabeli wg Li-
stingu 5.
Nasz projekt jest gotowy. Pozostaje jedynie
skompilować i uruchomić program. W tym ce-
lu z menu wybieramy Run>Run PierwszaApli-
kacjaFlex lub wciskamy skrót klawiszowy [Ctrl]
+ [F11]. Po chwili w oknie domyślnej przeglą-
darki ukaże się nasz program wyświetlający da-
ne adresowe z pliku adresy.xml (na DVD).
Podsumowanie
Tworzenie aplikacji we Flex nie jest trudne. Jak
łatwo zauważyć, ilość linii kodu potrzebnych
do wyświetlenia pliku XML jest minimalna.
Poznaliśmy składnię języka MXML, a samo-
dzielne wykonanie projektu przybliżyło moż-
liwości klasy HTTPService oraz komponent
DataGrid.
Mam nadzieję, że ten artykuł stanie się dla
Was początkiem dalszej przygody z Flex, tech-
nologią, która zmienia oblicze Internetu.
Propozycja dalszej literatury
Niestety brakuje polskojęzycznych podręczni-
ków do nauki Flex, dlatego konieczne jest sko-
rzystanie z anglojęzycznej literatury. Szczegól-
nie dwie pozycje warte są polecenia:
• Flex 3: A Beginner's Guide By Michele E. Da-
vis, Jon A. Phillips;
• The Essential Guide to Flex 3 By Charles E
Brown.
KRYSTIAN RAJSKI
Autor na co dzień pracuje jako Software Test Engi-
neer w firmie ADVA Optical Networking.
Prywatnie interesuje się programowaniem aplikacji
webowych. Związany z grupą ProgInn.
Kontakt: krajski@p-innovations.com
FLEX

Od formularza do RIA
Adobe Form Guides
Budowa aplikacji w technologii Flex niekoniecznie musi odbywać się
w narzędziu Flex Builder. Dla pewnego typu aplikacji łatwiejsze może być
użycie narzędzia Adobe Guide Builder.
Dowiesz się...
• Jak przy pomocy narzędzia Adobe LiveCycle
Designer ES szybko stworzyć formularz PDF
aby zebrać dane;
• Jak na podstawie przygotowanego formularza
utworzyć Form Guide.
Poziom trudności
W
poniższym artykule postaram
się przedstawić, jak prosto stwo-
rzyć elektroniczny formularz, po-
mocny w zbieraniu danych, który następnie
można równie łatwo zamienić w interfejs bę-
dący bogatą aplikacją internetową w forma-
cie SWF.
Narzędzie
tworzenia formularzy
Zapewne większość z czytelników miała do
czynienia z oprogramowaniem Adobe Acro-
bat i formatem dokumentów PDF oraz dar-
mowym czytnikiem Adobe Reader. Możli-
we, że wielu czytelników tworzyło już wła-
sne interaktywne formularze PDF w progra-
mie Acrobat.
Jednakże Acrobat nie jest głównym narzę-
dziem do projektowania formularzy. W tym
artykule przedstawię sposób tworzenia inte-
raktywnych formularzy w narzędziu specjal-
nie do tego celu przeznaczonym i w pełni ten
proces wspierającym – Adobe LiveCycle De-
signer ES.
Adobe LiveCycle Designer ES to narzędzie
z rodziny rozwiązań serwerowych Adobe Li-
veCycle Enterprise Suite opartych o platfor-
mę J2EE, łączących obsługę formularzy elek-
tronicznych, zarządzanie procesami bizneso-
www.sdjournal.org
Powinieneś wiedzieć...
• Czym jest plik dokumentu PDF i do czego słu-
ży program Adobe Acrobat;
• Czym są formularze elektroniczne.
wymi, bezpieczeństwem dokumentów oraz
ich automatycznym generowaniem. Adobe
tworząc Designera, postanowiło wyjść na-
przeciw oczekiwaniom różnych grup pro-
jektantów.
Zwykli użytkownicy, którzy potrzebują w
prosty i szybki sposób zebrać potrzebne infor-
macje, pracę z Designerem mogą rozpocząć od
wyboru jednego z kilku gotowych, prekonfi-
gurowanych szablonów formularzy, a następ-
nie za pomocą Asystenta Tworzenia Formula-
rzy odpowiednio je przystosować do własnych
potrzeb.
Graficy i webdesignerzy, którzy tworzą zop-
tymalizowane interfejsy formularzy w celu uła-
twienia użytkownikom wprowadzania danych,
pracę z Designerem mogą rozpocząć od projek-
towania układu strony lub zaimportowania ist-
niejących już projektów z programów InDesign
lub Illustrator.
Programistów oraz projektantów baz da-
nych, którzy szczególnie skupiają swoją uwagę
na właściwej organizacji i strukturze danych
ucieszy zapewne fakt, że Designer umożliwia
zaimportowanie pliku w postaci XML lub pli-
ku schematu XSD, aby na ich podstawie au-
tomatycznie wygenerować odpowiednie po-
la formularza.
Każda z grup projektantów może rozpocząć
pracę z Designerem w odpowiedni dla siebie
sposób, zgodny z upodobaniami.
Wersja testowa programu Adobe LiveCyc-
le Designer ES jest dostępna pod adresem:
http://www.adobe.com/go/trylivecycle_desi-
gner.
Od formularza do RIA
Pierwszy formularz
Na początku stworzymy prosty formularz
kontaktowy na podstawie jednego z goto-
wych szablonów Designera. W tym celu uru-
chom zainstalowany program Adobe Live-
Cycle Designer ES i wykonaj poniższe pole-
cenia:
• Z menu górnego File wybierz opcję New;
• W oknie Asystenta New Form Assistant
na pierwszej stronie Getting Started wy-
bierz opcję Based on a Template i naciśnij
przycisk Next;
• Na stronie drugiej Document Setup z listy
Select a template wybierz szablon pod na-
zwą Contact Information i naciśnij przy-
cisk Next;
• Wpisz nazwę firmy lub pozostaw przy-
kładową, a następnie kliknij przycisk
Next;
• Wskaż ścieżkę do pliku graficznego logo,
które będzie zamieszczone w prawym,
górnym rogu formularza lub pozostaw
standardowe i naciśnij przycisk Next;
• Wprowadź dane teleadresowe na kolej-
nych podstronach (Address, Contact), za-
twierdzając je przyciskiem Next;
• Na ostatniej stronie Form Return Setup
wpisz swój adres e–mail i naciśnij przy-
cisk Finish;
• Zapisz stworzony formularz jako plik
PDF (menu File) i wybierz opcję Save.
Właśnie udało Ci się stworzyć formularz słu-
żący zbieraniu informacji kontaktowych od
użytkowników.
Możesz podejrzeć jego działanie, wybierając
zakładkę Preview PDF (Rysunek 1.).
Zbieranie danych
za pomocą formularza
Przygotowany w Designerze formularz możesz
dystrybuować do użytkowników, by przy jego
pomocy kolekcjonować dane. Użytkownicy wy-
15
 ADOBE FLEX

pełniają formularz danymi w programie Adobe
Acrobat lub darmowym Adobe Reader i po je-
go wypełnieniu, za pomocą przycisku Submit
by Email, odsyłają formularz z powrotem do
Ciebie. Warto wspomnieć, że odsyłany jest je-
dynie kawałek dokumentu PDF – reprezenta-
cja zebranych danych w pliku XML. Zawartość
pliku może przedstawiać się jak na Listingu 1.
Formularze RIA – nowa technolo-
gia Adobe o nazwie Form Guides
To kolejna generacja w ewolucji interaktyw-
nych interfejsów formularzy elektronicznych.
Listing 1. Zawartość pliku Xml z formularza wypełnionego danymi, który jest odsyłany przez
klienta
<form1>
<Date>2008–05–23</Date>
<EmployeeName>Tomasz Lichota</EmployeeName>
<Address>ul. Prusa 2</Address>
<StateProv>mazowieckie</StateProv>
<ZipCode>00–493</ZipCode>
<SSNumber>00000001</SSNumber>
<HomePhone>1234556677</HomePhone>
<CellPhone>999100100</CellPhone>
<Comments>brak</Comments>
</form1>
Można je tworzyć poprzez narzędzie LiveCyc-
le Designer ES, a do zbierania danych i prezen-
tacji on-line wymagana jest usługa renderowa-
nia formularzy modułu serwerowego LiveCyc-
le Forms ES.
Jedyne narzędzie, którego potrzebuje użyt-
kownik końcowy formularza to przeglądar-
ka internetowa z zainstalowanym Flash Play-
erem.
Form Guides to połączenie siły technolo-
gii LiveCycle z technologią RIA, zaawanso-
wanych interfejsów użytkownika dostępną w
Adobe Flex, a także animacji wykorzystują-
cej popularną technologię Flash. Ma to na ce-
lu, z punktu widzenia użytkownika, jeszcze
łatwiejsze wprowadzanie danych do formu-
larzy, bogatszych wizualnie i o większej uży-
teczności.
Nowa technologia Adobe Form Guides dia-
metralnie zmienia sposób dostarczania i odbie-
rania informacji.
Form Guides mogą być alternatywnym spo-
sobem na wprowadzanie danych do istnieją-
cych już formularzy PDF. Użytkownik wy-
pełniając formularz w technologii Form Gu-
ides nie widzi całej struktury formularza, a je-
dynie prowadzony jest przez interaktywny in-
terfejs z szeregiem pytań i użyteczną pomo-
cą, podczas gdy zbierane w tle dane wpisy-
wane są do formularza PDF. Podsumowując,
Form Guide jest rodzajem asystenta wypełnia-
nia formularzy.
Tworzenie Form Guide
Każdy z Form Guide jest renderowany przez
moduł serwerowy LiveCycle Forms ES. W
tym celu należy zainstalować Adobe LiveCyc-
le Enterprise Suite.
Wersja próbna dostępna jest pod adresem:
http://www.adobe.com/go/trylivecycle, a infor-
macje dotyczące instalacji znaleźć można pod
adresem: http://www.adobe.com/go/learn_lc_in-
stall.
Zajmijmy się teraz procesem tworzenia i
personalizowania wyglądu Form Guide dla
stworzonego wcześniej formularza kontakto-
wego. Aby utworzyć Form Guide, wykorzy-
stując przygotowany do tego wcześniej for-
mularz kontaktowy, postępuj według poniż-
szych kroków:

• W programie LiveCycle Designer ES

otwórz zapisany wcześniej plik PDF for-
mularza kontaktowego;
• Z menu górnego Tools wybierz opcję Cre-
ate or Edit Form Guide;
• W oknie narzędzia tworzenia i edycji
Form Guide o nazwie Guide Builder, w za-
kładce Edit Guide i w oknie po lewej stro-
nie, kliknij prawym przyciskiem myszy i z
menu wybierz opcję Add Panel;
• W tej samej zakładce Edit Guide, wybierz
opcję Add or Bind Fields (Rysunek 2.);
• Z części okna po prawej stronie o na-
zwie Form Objects, przytrzymując kla-
Rysunek 1. Okno programu LiveCycle Designer ES z nowo utworzonym formularzem kontaktowym wisz [Shift], zaznacz i przeciągnij my-

W Sieci
• Wersja próbna narzędzia Adobe LiveCycle Designer ES dostępna jest pod adresem:
http://www.adobe.com/go/trylivecycle_designer;
• Wersja próbna programu Adobe Acrobat 8 Professional dostępna jest pod adresem:
http://www.adobe.com/go/acrobatpro_trial;
• Wersja próbna rozwiązania serwerowego Adobe LiveCycle Enterprise Suite dostępna jet pod
adresem: http://www.adobe.com/go/trylivecycle;
• Strona produktu – Adobe LiveCycle Enterprise Suite znajduje się pod adresem:
http://www.adobe.com/products/livecycle/. Rysunek 2. Okno Guide Buildera z widoczną opcją
Add or Bind Fields wiązania pól formularza

16 FLEX
 Od formularza do RIA

szą wszystkie obiekty z sekcji #subform

– Header do górnego panelu o nazwie
New Panel po lewej stronie oraz z Body
do nowo dodanego panelu New Panel
części okna po lewej. Obiekty z tych
sekcji powinny teraz znajdować się tak-
że w okienku po lewej stronie i być po-
wiązane z panelami Form Guide, co sy-
gnalizuje ikonka łańcucha przy każdym
z nich.
Nazwy paneli, nazwy sekcji oraz Form
Guide można zmienić według uznania
(Rysunek 3.);
• W zakładce Customize Appearance mo-
żesz spersonalizować wygląd Form Guide,
ustawiając m.in. takie parametry jak kolor
tła paneli, kolor i wygląd czcionek, wygląd
przycisków, itp.
Możesz dowolnie eksperymentować z
opcjami w celu uzyskania zadowalającego
efektu;
• Aby podejrzeć utworzony Form Guide,
kliknij zakładkę Preview, która spowoduje
Rysunek 3. Okno narzędzia Guide Builder z widocznymi powiązaniami pól formularza i tworzonego Form Guide otwarcie przeglądarki internetowej i wy-
świetlenie pliku HTML z osadzonym we-
wnątrz plikiem Flash (Rysunek 4.);
• W celu zatwierdzenia wszystkich wpro-
wadzonych ustawień kliknij przycisk Ap-
ply, a następnie zamknij narzędzie Guide
Builder przyciskiem Close;
• Zapisz wprowadzone w formularzu zmia-
ny.

Co dalej?
Tak stworzony oraz spersonalizowany formu-
larz kontaktowy z interfejsem Form Guide go-
towy jest do zamieszczenia na serwerze i wyko-
rzystania w procesie renderowania modułu Li-
veCycle Forms ES.
Posłuży on nam do zbierania danych od użyt-
kowników, którzy dysponując jedynie przeglą-
darką z zainstalowanym Flash Playerem, będą
mogli wypełniać przygotowany przez nas inte-
raktywny formularz w prosty i przyjazny użyt-
kownikowi sposób.
Więcej informacji na temat Form Guides
znaleźć można pod adresem:
http://www.adobe.com/go/learn_lc_fgGetStart.

TOMASZ LICHOTA
Zajmuję się wsparciem klientów wykorzystujących
Rysunek 4. Przykładowy wygląd Form Guide stworzonego w programie LiveCycle Designer ES w technologie formularzy elektronicznych.
narzędziu Guide Builder na podstawie pliku PDF formularza kontaktowego http://www.adobe.pl

Tabela 1. Programy do tworzenia formularzy Form Guides

Program: Zastosowanie:
Adobe Acrobat 8 Professional z programem LiveCycle Desi- Tworzenie, konwersja i edycja elektronicznych dokumentów w formacie PDF, tworzenie
gner 8.0 interaktywnych formularzy PDF opartych na XML i wspierających specyfikację XFA 2.5
Adobe LiveCycle Designer ES (8.1) Tworzenie interaktywnych formularzy PDF opartych na XML, możliwość tworzenia
wzbogaconych formularzy RIA bazujących na technologii Adobe Flex i Flash o nazwie
Form Guides. Designer 8.1 wspiera specyfikację XFA w wersji 2.6

www.sdjournal.org 17
 ADOBE FLEX

Flex i AIR
Tworzenie aplikacji w oparciu o środowisko Adobe AIR
z wykorzystaniem Adobe Flex.
Z AIR korzystają obecnie takie firmy jak AOL czy eBay, a po niedawno
ogłoszonym przez Adobe Open Screen Project, możemy się go spodziewać
także na urządzeniach przenośnych jak np. telefony komórkowe, PDA i MID
(ang. Mobile Internet Device).

śniejszym zainstalowaniu AIR update for Flash

Dowiesz się... Powinieneś wiedzieć...
• Jakie funkcje oferuje Adobe AIR. • Powinieneś znać podstawy ActionScript i Flex.
da także większy dostęp do naszego systemu,
w porównaniu do aplikacji Flash/Flex. Może-
Poziom trudności my manipulować schowkiem, ustawiać ikony
w tray'u (Windows) lub docku (MacOS X), za-
rządzać DRM, przeglądać i edytować zawartość
dysku czy uzyskać dostęp do lokalnej bazy da-
CS3 Professional) lub ściągnąć samo AIR SDK
(lub Flex 3 SDK) i tworzyć aplikację za pomocą
edytora tekstowego (lub IDE np. FlashDevelop).
Opiszę jednak najprostszą, i jak dla mnie najwy-
godniejszą, metodę – czyli Flex Builder 3.
Po ściągnięciu i zainstalowaniu Flex Builder
3, powinien nam się ukazać widok podobny do
tego na Rysunku 1.
Nasze środowisko podzielone jest na trzy ko-
lumny, które można dowolnie reorganizować.

F
lex i AIR ze swoją multimedialnością, ła-
twością w tworzeniu i dostępnością mo-
że być prawdziwą konkurencją dla Ja-
vy. Oparcie o otwarte standardy daje nam nie-
zliczoną ilość narzędzi i dodatków, tworzo-
nych przez niezależnych programistów z całe-
go świata. Należy tutaj dodać, że standardowe
IDE dla Flex/AIR, to nic innego jak zmodyfi-
kowane, tworzone i używane przez wielką spo-
łeczność Eclipse.
Co daje AIR?
Aplikacje AIR możemy uruchamiać na pra-
wie dowolnym systemie operacyjnym. Aktual-
nie stabilne wersje tego środowiska są dostęp-
ne dla systemów Windows i MacOS X (wer-
sja dla Linux jest jeszcze w fazie beta). Instala-
cję naszego produktu możemy uprościć do mi-
nimum, wykorzystując małą wklejkę we Flash,
która dzięki częściowej integracji Flash Play-
er’a z systemem, ogranicza użytkownika do wy-
konania 3–4 kroków. Jedną z głównych części
AIR jest silnik renderujący WebKit (będący ser-
cem przeglądarek Safari i KHTML oraz jest uży-
ty w telefonach S60 Nokii i Apple iPhone) ce-
chujący się wysoką kompatybilnością ze stan-
dardami (m.in. CSS 3) oraz wydajnością w po-
równaniu z innymi silnikami (np. Mozilla Gec-
ko). To dzięki niemu możemy użyć naszej zna-
jomości HTML i JavaScript do tworzenia apli-
kacji czy integrować usługi typu Google Maps
lub biblioteki takie jak jQuery, Prototype.js,
Dojo. Aplikacja uruchomiona w AIR posia-
nych SQLite. Możemy więc połączyć estetykę Po lewej znajduje się Flex Navigator, służący do
i multimedialność Flash z możliwościami apli- zarządzania plikami w naszym projekcie, oraz
kacji desktopowej. Outline, pokazujący drzewko elementów aktyw-
nego pliku w edytorze, który znajduje się w środ-
Jak zacząć? kowej kolumnie. Pod edytorem widzimy zakład-
Aby stworzyć naszą aplikację AIR, możemy użyć kę Problems, która informuje o ostrzeżeniach
jednego z wielu narzędzi (zarówno autorstwa i błędach w projekcie. W prawej kolumnie znaj-
Adobe, jak i osób trzecich). Wydaje się, że naj- duje się pomoc kontekstowa. Klikając kompo-
prostszym wyjściem jest zainstalowanie testo- nent czy obiekt w edytorze i naciskając [F1], zo-
wej (60–dniowej) wersji Flex Builder 3 (samo- baczymy tematy pomocy adekwatne do zazna-
dzielnej paczki lub wtyczki do Eclipse). Oczy- czenia. Kolejną zakładką jest Konsola, w której
wiście możemy użyć Adobe Flash CS3 (po wcze- widzimy błędy, ostrzeżenia oraz wyjście funkcji
Listing 1. Dostęp do schowka
import flash.desktop.*;
public function copy(text:String):void {
// Wyczyszczenie aktualnego schowka
Clipboard.generalClipboard.clear();
// Ustawienie naszych danych
Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, text);
}
public function paste():String{
// Odczytujemy tylko tekstowy schowek
if(Clipboard.generalClipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) {
// Zwracamy zawartość rzutowaną jako String
return String(Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT));
} else {
return null;
}
}

18 FLEX
 Flex i AIR

trace() podczas sesji debugowania. Ostatnia za- my na menu File>New>Flex Project. Ukaże nam talogów. Katalog bin–debug zawierać będzie na-
kładka to Debugger, który w tym widoku (wido- się okno dialogowe New Flex Project, w którym szą zbudowaną aplikację w wersji do debugowa-
ki zmieniamy klikając przycisk w prawym gór- wpisujemy nazwę projektu, lokalizację, w której nia, wewnątrz katalogu libs umieszczamy do-
nym rogu) jest ograniczony do minimum. będziemy przechowywać nasze pliki oraz zazna- datkowe biblioteki (jeśli z nich korzystamy). Ka-
czamy Desktop application w Application type. Na talog src zawiera teraz dwa pliki dla nas najbar-
Pierwsza aplikacja razie nie potrzebujemy zmieniać żadnych do- dziej istotne. Są to: <nazwa_aplikacji>–app.xml
Gdy już oswoimy się ze środowiskiem, może- datkowych opcji, więc klikamy Finish. Po chwi- opisujący nazwę, identyfikator czy wersję naszej
my stworzyć nasz pierwszy projekt AIR. Klika- li zostanie wygenerowane kilka plików oraz ka- aplikacji, jak i wygląd początkowego okna oraz
skojarzenia z plikami (jeśli np. aplikacja posia-
da własny format pliku). Drugim ważnym pli-
Przedrostki ścieżek do pliku kiem jest <nazwa_aplikacji>.mxml, zawierający
nasze główne okno. Należy zwrócić uwagę na je-
• app:/ dla plików umieszczonych w folderze aplikacji;
• app–storage:/ dla plików w wydzielonym folderze danych aplikacji; go format. Jest to specjalny XML opisujący wy-
• file:/// dla plików rozmieszczonych w dowolnym miejscu na dysku. gląd oraz zachowanie naszej aplikacji, który mo-
że zawierać wewnątrz funkcje ActionScript,
style CSS czy osadzone w aplikacji zasoby ty-
Listing 2. Przeciągnij i upuść pu grafika czy animacja. Pliki MXML możemy
edytować tekstowo lub graficznie. Przełączamy
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" się pomiędzy tymi trybami za pomocą przyci-
nativeDragEnter="onDragIn(event)" nativeDragDrop="onDrag(event)"> sków Source i Design, znajdującymi się na górze
<mx:Script> edytora. W graficznym trybie edycji dochodzi
<![CDATA[ nam kilka paneli. Components (przełączany na
import flash.desktop.*; zmianę z Outline) to paleta dostępnych kom-
ponentów, które dodajemy do projektu, prze-
public function onDragIn(event:NativeDragEvent):void{ ciągając na okno edycji. Po prawej stronie po-
// Zaakceptowanie dowolnego obiektu jawia się kolumna zawierająca panel States, za-
NativeDragManager.acceptDragDrop(this); wierający zdefiniowane stany aplikacji oraz pa-
} nel Flex Properties, pozwalający łatwo zmieniać
parametry zaznaczonego komponentu. W tym
public function onDrag(event:NativeDragEvent):void { momencie możemy uruchomić naszą podsta-
// Ustawienie domyslnej akcji wową aplikację naciskając [Ctrl]+[F11] (lub sa-
NativeDragManager.dropAction = NativeDragActions.COPY; mo [F11], jeśli chcemy otworzyć sesję debugo-
// Zakładamy że przeciągnięto plik wania). Gdy zamierzamy udostępnić naszą apli-
var dropfiles:Array = event.clipboard.getData( ClipboardFormats.FILE_LIST_FORMAT) as kację, musimy najpierw stworzyć paczkę AIR.
Array; Aby tego dokonać, wybieramy z menu Project>
// Wyliczamy wszystkie przeciągnięte pliki Export Release Build. W pierwszym oknie mo-
for each (var file:File in dropfiles){ żemy zmienić nazwę pliku paczki lub umożli-
trace(file.nativePath); wić podgląd źródła. Po kliknięciu Next wybiera-
} my opcję Export and sign an AIR file with a di-
} gital certificate, tworzymy nowy certyfikat (je-
]]> śli jeszcze takowego nie stworzyliśmy), klikając
</mx:Script> Create. Następnie wybieramy utworzony certy-
fikat i podajemy do niego hasło, po czym klika-
Listing 3. Obsługa plików my Finish. Utworzony plik *.air możemy swo-
// Funkcja obsługująca zakończenie operacji bodnie rozprowadzać.
public function onComplete(event:Event):void {
trace('Plik usunięty'); Podstawowa
} integracja z systemem
Podczas codziennej pracy przy komputerze
// Funkcja obsługująca błąd wejścia/wyjścia przyzwyczailiśmy się do kopiowania, wklejania
public function onIoerror(event:IOErrorEvent):void { pomiędzy aplikacjami czy technologii przecią-
trace('Błąd wejścia/wyjścia podczas usuwania pliku'); gnij i upuść. Aplikacje pracujące w przeglądar-
} ce nie posiadają takich możliwości lub są one

public function delFile():void {

// Stworzenie tymczasowego pliku
var file:File = File.createTempFile();
// Ustawienie funkcji obsługujących zdarzenia
file.addEventListener(Event.COMPLETE, onComplete);
file.addEventListener(IOErrorEvent.IO_ERROR, onIoerror);
// Asynchroniczne usunięcie pliku
file.deleteFileAsync();
}
Rysunek 1. Flex Builder 3 po uruchomieniu

www.sdjournal.org 19
 ADOBE FLEX
ograniczone. AIR zdejmuje z nas te ogranicze-
nia. Obsługi schowka dokonujemy za pomocą
klasy Clipboard (automatycznie inicjowanej)
oraz statycznych stałych w ClipboardFormats
i ClipboardTransferMode. Najczęściej stosowa-
nymi metodami są getData() oraz setData(),
ich przykładowe użycie mamy na Listingu 1.
Kolejną techniką jest przeciągnij i upuść. Jej ob-
sługa jest wykonywana poprzez kilka zdarzeń:
nativeDragEnter, nativeDragDrop,
nativeDragStart, nativeDragUpdate,
nativeDragOver, nativeDragExit i
nativeDragComplete.
Najważniejsze są dwa pierwsze. Najpierw
definiujemy funkcje obsługujące te zdarzenia
w naszej aplikacji, a następnie piszemy funkcje
obsługujące (Listing 2.).
Zależnie od typu przeciąganego obiektu mo-
żemy zezwalać lub zabraniać upuszczania we-
wnątrz funkcji onDragIn(). Tak przeciągnięty
plik możemy odczytać z systemu plików.
Lokalny system plików
Jedną z najważniejszych funkcji aplikacji są od-
czyt, zapis oraz modyfikacja plików znajdują-
cych się na dysku. Oprócz tych podstawowych
metod AIR oferuje zaawansowane komponen-
ty do wyświetlania zawartości folderu w róż-
nych stylach. Może to być siatka ikon, drzew-
ko, szczegółowa lista czy lista rozwijana. Dostęp
do pliku uzyskujemy za pomocą klasy File oraz
odpowiednio sformatowanej ścieżki. W zależ-
ności gdzie znajduje się plik, mamy trzy przed-
rostki do wyboru (przedrostki ścieżek do pliku
opisane są w ramce).
Rozdzielenie katalogów uzyskujemy ukośni-
kiem [/]. W systemach rodziny Windows moż-
na także użyć backslasha [\]. Dostęp do plików
może być synchroniczny lub asynchroniczny.
Przy trybie synchronicznym, aplikacja zatrzy-
ma swoje działanie do czasu zakończenia ope-
racji na pliku. Jest to dosyć klasyczne podejście,
jednak przy większych operacjach może być
irytujące dla użytkownika. Dlatego lepiej uży-
wać trybu asynchronicznego i dodając funkcje
obsługi zdarzeń complete oraz ioError kontro-
lować postęp jak na Listingu 3.
Strumieniowy odczyt i zapis do pliku wyko-
nujemy za pomocą klasy FileStream. Możemy
odczytywać/zapisywać dane w różnych forma-
tach (bardzo przydatne przy plikach binarnych)
jak bajt, słowo, liczba całkowita, obiekt zseriali-
zowany w formacie AMF czy ciąg znaków. Ma-
Przydatne adresy
• http://www.adobe.com/products/air/
strona domowa Adobe AIR
• http://livedocs.adobe.com/flex/3/langref/
index.html – pełna dokumentacja Flex
wraz z AIR
• http://www.onflex.org/ – blog Teda Pa-
tricka, jednego z najlepszych specjali-
stów Flex
20
my do dyspozycji także zdarzenia informujące dze. Wystarczy podać folder początkowy
o postępie operacji w trybie asynchronicznym. w atrybucie directory i obsługiwać zdarzenia
Są to outputProgress (postęp danych zapisy- directoryChange i fileChoose.
wanych) oraz progress (postęp odczytu pliku).
Przykład zastosowania mamy na Listingu 4. Kontrolka HTML
Komponenty wyświetlające zawartość na- Osadzony w AIR silnik WebKit daje nam
szego dysku także są bardzo proste w obsłu- nie tylko możliwość wyświetlania zawarto-
Listing 4. Asynchroniczny zapis do pliku
public function writeToFile():void {
var file:File = File.createTempFile();
var fileStream:FileStream = new FileStream();
// Otwarcie strumienia pliku asynchronicznie
fileStream.openAsync(file, FileMode.WRITE);
fileStream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onOutputProgress);
// Zapisanie 1024kB losowych danych
for (var i:int = 0; i < 1024*1024; i++) {
fileStream.writeByte(Math.round(Math.random()*255));
}
}
public function onOutputProgress(event:ProgressEvent):void {
trace('Pozostało '+event.target.bytesPending+' bajtów');
}
Listing 5. Operacje na DOM
<mx:Script>
<![CDATA[
public function navigate():void {
// Ustawienie wartości input-a z zapytaniem
html.domWindow.document.getElementsByName('q')[0].value = 'adobe air';
// Wysłanie formularza
html.domWindow.document.getElementsByName('f')[0].submit();
}
]]>
</mx:Script>
<mx:Button x="10" y="10" label="Button" click="navigate()"/>
<mx:HTML location="http://www.google.pl" left="10" right="10" top="40" bottom="10"
id="html"/>
Listing 6. Przekazywanie zdarzeń DOM do aplikacji
<mx:Script>
<![CDATA[
public function setupListeners():void {
// Znalezienie wszystkich odnośników
var linki = html.domWindow.document.getElementsByTagName('a');
for(var i:int = 0; i < linki.length; i++) {
// Ustawienie własnej funkcji reagującej na kliknięcie
linki[i].addEventListener("click", onClick);
}
}
public function onClick(event:Object) {
// Wyświetlenie adresu docelowego
trace('Kliknięto link do '+event.target.href);
// Anulowanie domyślnej akcji (przejście do adresu)
event.preventDefault();
}
]]>
</mx:Script>
<mx:HTML location="http://www.google.pl" left="10" right="10" top="40" bottom="10"
id="html" complete="setupListeners()"/>
FLEX
 Flex i AIR

ści serwisów WWW, ale także integrację Ac- staniem tej kontrolki są np. historie rozmów my od manipulacji DOM oraz wywoływania
tionScript z DOM i JavaScript. Nasza aplika- w komunikatorach czy różnego rodzaju logi, metod JavaScript (Listing 5.).
cja może reagować na zdarzenia pochodzące gdzie pisanie własnego ItemRenderera wy- Obiekt domWindow jest odpowiednikiem
z DOM lub wyświetlana strona może wywo- magałoby za dużo pracy. Oczywiście idąc da- obiektu window w JavaScript. Posiada wszystkie
ływać funkcje i modyfikować zmienne zawar- lej możemy integrować usługi typu Google funkcje oraz własności obsługiwane przez We-
te w naszej aplikacji. Najprostszym wykorzy- Maps, ale to już wyższa szkoła jazdy. Zacznij- bKit. Idąc w drugą stronę, możemy przekazać
logikę otwartej strony do naszej aplikacji tak,
Listing 7. Zaokrąglone rogi w CSS3 jak na Listingu 6.
Oprócz znakomitego silnika JavaScript (na-
<mx:HTML left="10" right="10" top="40" bottom="10" id="html"> zwanego JavaScriptCore) mamy także do dys-
<mx:htmlText> pozycji częściową obsługę CSS3, np. zaokrąglo-
<![CDATA[ ne rogi (Listing 7.).
<div style="width: 100px; height: 50px; background: #FFBF02; -webkit-border- Przenosząc usługę z sieci na desktop, może-
radius: 5;">Test</div> my to robić stopniowo, na początku integru-
]]> jąc ją w naszej aplikacji. Ze względu na swo-
</mx:htmlText> je możliwości dobrze jest pamiętać o istnie-
</mx:HTML> niu tego komponentu przy tworzeniu kolej-
nych projektów.
Listing 8. Obsługa bazy SQLite
<mx:Script> Baza danych SQLite
<![CDATA[ Zazwyczaj każda aplikacja zapisuje i odczy-
var connection:SQLConnection = new SQLConnection(); tuje pewne dane na dysku. Możemy to ro-
var query:SQLStatement = new SQLStatement(); bić poprzez wcześniej opisaną klasę File
i FileStream lub znanym z Flash SharedObject.
public function connect():void { Gdy operujemy jednak na danych tabelarycz-
// Ustawienie obsługi zdarzeń nych z pewnymi relacjami, najlepiej składować
connection.addEventListener(SQLEvent.OPEN, onOpen); je w bazie danych. Adobe AIR zawiera osadzo-
query.addEventListener(SQLEvent.RESULT, onResult); ną bazę danych SQLite, która zyskała uznanie
// Przypisanie połączenia do zapytania w wielu aplikacjach ze względu na swoje ma-
query.sqlConnection = connection; łe rozmiary oraz wydajność. Baza jest transak-
cyjna (obsługuje rozpoczynanie, zatwierdza-
// Stworzenie tymczasowego pliku nie oraz cofanie transakcji) i odpytujemy ją
var dbFile:File = File.createTempFile(); za pomocą języka SQL. Obsługa bazy danych
// Otwarcie bazy danych jest asynchroniczna, nie blokuje więc naszej
connection.open(dbFile); aplikacji nawet przy większych zapytaniach.
} Podstawowymi klasami są SQLConnection,
SQLStatement oraz SQLResult. Przykład użycia
public function execute():void { mamy na Listingu 8.
query.text = taQuery.text; Zwrócony wynik może zostać zbindowany
query.execute(); jako dataSource np. do DataGrid czy List. Do-
} datkowo możemy zarządzać schematami tabel
czy wyzwalaczami, ale to bardziej zaawansowa-
public function onOpen(event:SQLEvent):void { ne funkcje.
btnExecute.enabled = true;
} Na koniec
Jak widzimy, AIR jest naprawdę potężne
public function onResult(event:SQLEvent):void { i w moim odczuciu przyjemniejsze w pro-
// Pobranie wyniku gramowaniu niż Java. Poruszyłem tylko ma-
var result:SQLResult = query.getResult(); łą część możliwości tego środowiska. Dobrym
if (result != null) { źródłem wiedzy jest Internet, który jest pełen
var numRows:int = result.data.length; blogów oraz forów na temat AIR. Także Ado-
for (var i:int = 0; i < numRows; i++) { be w swoim Developer Center zbiera wielką
var row:Object = result.data[i]; bazę wiedzy dotyczącej Flex czy AIR. Pole-
// Manipulacja danymi z rekordu cam zainteresowanie się tą technologią, zwa-
} żywszy jej bardzo szybki rozwój i rosnącą po-
} pularność.
}
]]> WOJTEK SIUDZIŃSKI
</mx:Script> Autor jest programistą w firmie Kreativ sp. z o.o.
<mx:Button x="10" y="10" label="Połącz" click="connect()"/> Programuje w PHP, JavaScript oraz Adobe Flex
<mx:TextArea x="10" y="40" width="635" height="123" id="taQuery"/> z wykorzystaniem AIR. W czasie wolnym programu-
<mx:Button x="10" y="171" label="Wykonaj" id="btnExecute" click="execute()" je dla własnej przyjemności. Prowadzi blog tech-
enabled="false"/> niczny http://blog.suda.pl
Kontakt z autorem: admin@suda.pl

www.sdjournal.org 21
 ADOBE FLEX

Adobe AIR
Powrót na desktop

Do niedawna flashowe aplikacje działające na pulpicie były rzadkością.

Było to spowodowane w głównej mierze problemami z instalowaniem
i dostarczaniem aplikacji w formie gotowej do uruchomienia na komputerze
klienta. Adobe stworzyło narzędzie, które umożliwia produkcję przyjemnie
wyglądających aplikacji okienkowych. Tak z projektu Apollo powstał AIR.
Dowiesz się: Powinieneś wiedzieć:
• Jak szybko, łatwo i przyjemnie tworzyć apli- • Powinieneś znać podstawy posługiwania się
kacje okienkowe wykorzystując Flex Buildera programem Flex Builder, podstawy języka opi-
i Adobe AIR. su danych MXML oraz programowania w Ac-
tionScript 3.0.
dardowych, odtwarzanych w oknie naszej prze-
glądarki. Głębszą eksplorację AIR najlepiej za-
Poziom trudności cząć od zapoznania się z dokumentacją załączo-
ną do tych klas (tabela z listą klas znajduje się na
płycie dołączonej do magazynu).
Wiele klas dostępnych z poziomu SWF'ów
lepiej zacząć od programu typu Hello World.
Otwieramy FlexBuildera, z menu wybieramy
File>New>Flex Project. Nazywamy projekt np.:
helloAir. W panelu Application type wybieramy
opcję Desktop application (runs in Adobe AIR).
Klikamy przycisk Finish i gotowe. Jak widać,
w okienku Flex Navigatora pojawił się nowy
projekt z ikonką folderu i logo AIR. Struktura
stworzonych katalogów jest niemal identycz-
na jak w przypadku standardowego projektu
Flexowego, jedynie brakuje katalogu html-tem-
plate, za to pojawił się dodatkowy plik helloAir-
app.xml. Jest to plik odpowiedzialny za opcje
systemowe docelowego projektu, takie jak ikon-

A
dobe AIR to nie tylko narzędzie umoż-
liwiające produkcję aplikacji okienko-
wych wykorzystujące Flexa, z powodze-
niem można w nim tworzyć wykorzystując tech-
nologie Flash, HTML, JavaScript czy Ajax. AIR to
skrót od Adobe Integrated Runtime i wywodzi się
z projektu o kodowej nazwie Apollo. AIR działa
nie tylko na Windowsie, ale także na Mac OS X,
czy Linuxie. Przeniesienie na pulpit FlashPlayera
to niejedyna zaleta AIR (bo to już było możliwe,
używając projektorów FlashPlayera), rozbudowa-
nie funkcji dostępnych w AIR jest nieporówny-
walnie większe od FP działającego w przeglądarce,
do najważniejszych zalet należą: tworzenie okie-
nek wykorzystujących API systemowe, wsparcie
dla plików PDF, dostęp do schowka systemowego,
operacje drag&drop, operacje wejścia/wyjścia na
plikach, SQLite, wsparcie dla XSLT, możliwość
umieszczenia aplikacji w tray'u systemowym, au-
tostart aplikacji z systemem oraz wiele, wiele in-
nych, których ilość znacznie przekracza ramy te-
go artykułu. Właśnie ze względu na stopień roz-
budowania AIR ograniczymy się tylko do kilku
ciekawszych cech tego środowiska.
Nowa funkcjonalność w AIR
Aby mieć pełny przegląd możliwości AIR, na-
leży przyjrzeć się nowym klasom, jakie wraz
z nim udostępnia nam Adobe, i które odróżnia-
ją aplikacje tworzone w tej technologii od stan-
w przeglądarce zyskało na nowej funkcjonalno-
ści. Z AIR’em do Flexa doszło także kilka no-
wych komponentów takich jak:
• FileSystemEnumerationMode ,
• FileEvent ,
• FileSystemComboBox ,
• FileSystemDataGrid ,
• FileSystemEnumerationMode ,
• FileSystemHistoryButton ,
• FileSystemList ,
• FileSystemDisplayMode ,
• FileSystemTree ,
• HTML ,
• Window, WindowedApplication .
Do dzieła
Instalacja
Aby zacząć bawić się AIR’em we Flexie, na-
leży ściągnąć i zainstalować środowisko uru-
chomieniowe AIR dostępne pod adresem
http://www.adobe.com/go/getair.
Instalacja nie powinna nastręczać kłopotów
i każdy powinien sobie z nią poradzić bez pro-
blemów.
Hello World
Jak chyba każdy początek przygody z nowym
środowiskiem, językiem programowania naj-
ka aplikacji, tytuł głównego okienka, opis pro-
gramu w instalatorze itd. Opcje konfiguracyjne
posiadają w tym samym pliku komentarze, któ-
re pomagają zidentyfikować, do czego dany pa-
rametr jest wykorzystywany.
Gdy otworzymy plik helloAir.mxml – główny
plik źródła aplikacji zobaczymy, że różni się on
od standardowego pliku projektu Flex tym, że
główny tag xml-owy to nie <mx:Application>
tylko <mx:WindowedApplication>. Aby prze-
testować, czy projekt został prawidłowo wy-
generowany, klikamy zieloną ikonkę Run hel-
loAir i voila. Otworzy nam się zwykła aplika-
cja desktopowa z tytułem okienka helloAir (to
między innymi właśnie ten tytuł okna moż-
na zmienić w pliku helloAir-app.xml). Właśnie
stworzyliśmy pierwszą aplikację desktopową
w AIR. Jeśli chcemy przenieść wcześniejszą Fle-
xowo-webową aplikację do AIR, to wystarczy
skopiować wszystko, co zawiera się wewnątrz
taga <mx:Application> i wkleić do nowego
projektu. Oczywiście, jeśli korzystaliśmy z ja-
kichkolwiek klas, bibliotek czy plików to także
należy je dołączyć do projektu AIR’owego.
Od ogółu do szczegółu
Detekcja połączenia z Internetem
Pomimo tego, że AIR służy do budowania apli-
kacji desktopowych, to dalej mają to być Rich In-

22 FLEX

ternet Applications. Właśnie cała potęga AIR to
możliwość łatwego połączenia aplikacji deskto-
powych z Internetem. Aby przeprowadzić jaką-
kolwiek interakcję aplikacji z siecią przydałoby
się najpierw dowiedzieć, czy istnieje taka moż-
liwość. Najprostszym sposobem na wykonanie
tego jest sprawdzenie połączenia z witryną, np.:
http://www.google.com. Wykorzystamy do tego
klasę URLMonitor z paczki air.net monitoru-
jącą status połączenia z Internetem.
Jak widzimy na Listingu 1. zaraz po zaini-
cjowaniu aplikacji wywoływana jest funk-
cja init(). Tworzymy tam instancję klasy
URLMonitor, która jako parametr przyjmuje
obiekt URLRequest, to on jest wykorzystywa-
ny do przesyłania zapytań do domeny www.go-
ogle.com. Dodaliśmy także funkcję nasłuchu-
jącą zdarzeń zmiany statusu w obiekcie mo-
nitor. Zaraz po uruchomieniu aplikacji wi-
dzimy (o ile mamy połączenie z Internetem),
że tekst komponentu label o identyfikatorze
stat zmienił się na Status połączenia z interne-
tem : true. W celu przetestowania, czy wszyst-
ko działa jak należy, można wyłączyć na chwilę
kartę sieciową lub fizycznie odłączyć kabel sie-
ciowy od komputera i obserwować tekst w apli-
kacji. Właściwość available (a razem z nią tekst
na ekranie) powinna się zmieniać z true na fal-
se i odwrotnie. Do monitorowania połączenia
można wykorzystać połączenia nie tylko na
standardowym porcie WWW (80) i protokole
HTTP, ale także wykorzystując gniazda i klasę
SocketMonitor.
Operacje na katalogach i plikach
To, czego naprawdę brakowało np. w Projekto-
rach SWF'a to dostęp do systemu plików. Co
ciekawsze, mamy dostęp nie tylko do katalo-
gu aplikacji, ale także do standardowego kata-
logu danych aplikacji desktopowych, do plików
na pulpicie, do plików dokumentów, itp. Więk-
szość operacji na plikach umożliwiają klasy
z paczki flash.filesystem (File, FileMode,
FileStream). Najpierw spróbujmy wylistować
wszystkie elementy pulpitu i wykonać kopię
jednego z katalogów.
Do zainicjowania operacji wylistowania
i kopiowania użyliśmy przycisku wywołujące-
go funkcję dirOpen. Klasa File posiada właści-
wości, które pozwalają dostać się do kilku zna-
czących miejsc w systemowej strukturze kata-
logów:
• katalogu aplikacji – applicationDirectory ;
• katalogu danych aplikacji – applicationS
torageDirectory ;
• katalogu dokumentów –
documentsDirectory ;
• pulpitu – desktopDirectory ;
• katalogu domowego użytkownika –
userDirectory.
W tym przykładzie (Listing 2.) użyliśmy wła-
ściwości desktopDirectory, aby uzyskać do-
www.sdjournal.org
stęp do katalogu z obiektami na pulpicie. Me-
toda getDirectoryListing zwraca tablicę ele-
mentów w danym katalogu, w tym przypad-
ku znajdujących się na pulpicie. W pętli ite-
racyjnej sprawdzamy, czy obiekt nie jest lini-
kiem symbolicznym i jeśli tak to listujemy go
do okna konsoli Flex Buildera (pod warun-
kiem, że testujemy aplikacje debugerem – od-
powiednik okienka output znanego doskona-
le Flash developerom). Równie dobrze istnie-
je możliwość połączenia tej listy z komponen-
tem TextArea . Zmienną len reprezentują-
cą długość tablicy elementów w tego typu pę-
tlach iteracyjnych można by pominąć, ale dla-
tego, że wartość ta jest obliczana przy każdym
kroku pętli, ze względów wydajnościowych,
dobrze jest zachować tą wartość w zmiennej.
Założyłem, że chcemy wykonać kopię katalo-
gu test (i że taki katalog istnieje) pod nazwą test
kopia. Metoda resolvePath zwraca ścieżkę do
nowo tworzonego katalogu na pulpicie i wyko-
nujemy operację kopiowania aktualnego ele-
mentu właśnie do tego nowego katalogu.
Innym przykładem użytecznych opera-
cji jest zapis i odczyt pliku. Na Listingu 3.
przedstawiony jest najprostszy przykład za-
pisu i odczytu do pliku tekstowego. Stworzy-
liśmy dwa pola tekstowe: jedno do edycji da-
nych do zapisania (writeTxt) i drugie do wy-
świetlania danych pobranych z pliku (read-
Txt). Po uruchomieniu aplikacji wywoływana
jest metoda init(), gdzie inicjujemy uchwyt
do pliku i strumień do wysyłania i odbiera-
nia danych. Katalog danych aplikacji w syste-
mie Windows XP dostępny jest pod ścieżką
C:\Documents and Settings\{UŻYTKOWNIK}\
Dane aplikacji\{NAZWA APLIKACJI}\Local
Store\ gdzie w miejscu {UŻYTKOWNIK} jest
aktualnie zalogowany do systemu użytkownik,
a w miejscu {NAZWA APLIKACJI} jest nazwa
Rysunek 1. Natywne okna
Adobe AIR
aplikacji, sytuacja jest analogiczna dla pozosta-
łych systemów. Przykładem takiej ścieżki zapi-
sywanego i odczytywanego pliku może być
np.: C:\Documents and Settings\Szymek\Dane
aplikacji\fileIOAsync\Local Store\test.txt. Do-
stęp do katalogu danych aplikacji można także
uzyskać za pomocą prefixu ścieżki app-storage:
/ podobnie app:/ dla katalogu aplikacji, czy file:
/// dla pełnej ścieżki pliku. Linię:
f = File.applicationStorageDirectory.re
solvePath(fileName);
można więc z powodzeniem zastąpić zapisem
(zakomentowany kod):
f = new File();
f.url = 'app-storage:/'+fileName;
i działanie aplikacji nie zmieniłoby się, jest
to inny zapis tego samego działania. Po klik-
nięciu przycisku Zapis wywoływana jest
funkcja saveFile . Dla sprawdzenia i wy-
krycia ewentualnych wyjątków i błędów ca-
ła operacja zapisu jest zamknięta w bloku
try … catch … finally. Blok try ... catch
… finally jest przykładem bardzo dobrej
praktyki przy wykrywaniu błędów i wyjąt-
ków (nie tylko w języku ActionScript , ale
w większości języków programowania).
Dzięki stosowaniu tej techniki mamy du-
żo większą kontrolę nad wykonywanym ko-
dem i obsługujemy błędy, które niekoniecz-
nie muszą spowodować zawieszenie apli-
kacji, ale mogą umożliwić dalsze wykony-
wanie programu pomimo tego, że niektó-
re operacje nie zostały zakończone sukce-
sem. Jeśli nie przygotujemy naszej aplika-
cji na ewentualne błędy, to przeciętny użyt-
kownik naszej aplikacji w momencie wystą-
23
 ADOBE FLEX
pienia pierwszego z nich najczęściej porzu-
ci jej użytkowanie i nigdy więcej jej nie uru-
chomi. Wykorzystaliśmy także klasę Alert
do wizualizacji błędów, tak przy zapisie, jak
i odczycie pliku. Operacja zapisu, a tak-
że odczytu jest banalnie prosta, otwiera-
my strumień, wybierając przy tym tryb do-
stępu do pliku (z dostępnych predefinio-
wanych stałych klasy FileMode - READ /
WRITE / APPEND / UPDATE), zapisujemy/
odczytujemy dane, zamykamy strumień do
pliku. Możliwe są też operacje asynchro-
niczne przy dostępie do plików (takie moż-
liwości daje klasa FileStream – meto-
da openAsync ), wtedy należy jednak usta-
wić funkcje nasłuchujące na odpowiednich
zdarzeniach wysyłanych przez obiekt (me-
todą addEventListener). Jak widać na Li-
stingu 3. proces odczytu pliku został wy-
konany właśnie asynchronicznie. Dzię-
ki ustawieniu nasłuchiwaczy zdarzeń
(Event.COMPLETE , ProgressEvent.PROGRESS ,
IOErrorEvent.IO _ ERROR ) wiemy dokładnie
co się dzieje podczas wykonywania aplika-
cji. Do wyświetlania informacji o aktualnie
wykonywanych operacjach wykorzystali-
śmy globalną funkcję trace(). Listę wszyst-
kich zdarzeń wysyłanych przez obiekt
przy operacjach asynchronicznych moż-
na znaleźć w manualu klasy FileStream .
Dzięki ustawieniu wyzwalacza na zdarze-
niu IOErrorEvent.IO _ ERROR dla funkcji
onError wiemy, kiedy wystąpił błąd odczy-
tu (jest to kolejna metoda obsługi wyjąt-
ków w języku ActionScript). Jeśli z katalo-
gu danych aplikacji usuniemy plik (lub przy
pierwszym uruchomieniu zanim zapiszemy
plik, spróbujemy go odczytać) dostaniemy
informację (w konsoli Flex Buildera) podob-
ną do poniższej:
Błąd odczytu: kod błędu: 3003, treść błędu:
Error #3003: File or directory does not
exist. file: C:\Documents and Settings\
Szymek\Dane aplikacji\fileIOAsync\Local
Store\test.txt
Oczywiście w docelowej aplikacji, w której
wykorzystujemy zapis/odczyt do plików nale-
ży poinformować użytkownika o wystąpieniu
błędu (na przykład przy pomocy klasy Alert)
wykorzystując kod błędu (event.errorID)
oraz instrukcję warunkową switch … case
lub w jakikolwiek inny sposób. Jednym ze spo-
sobów informowania użytkownika o napotka-
nych błędach, czy innych zdarzeniach celem
podjęcia kolejnych działań, są okienka.
Okienka
Możliwość dynamicznego tworzenia okien to
kolejna wielka zaleta AIR. Najprostszym przy-
kładem dynamicznego tworzenia okienek, jest
stworzenie nowego komponentu bazującego na
komponencie Window oraz utworzenie instan-
24
cji tego okna z poziomu ActionScript. Z me- komponentu tworzymy instancję komponentu
nu File> New wybieramy opcję MXML Compo- Label o nazwie infoText (Listing 4.).
nent. W polu Filename wpisujemy nazwę kom- Na listingu 5. przedstawiono kod aplikacji wy-
ponentu, który chcemy stworzyć (ja nazwałem korzystującej wcześniej stworzony komponent.
komponent BeautyWindow), a w ComboBoxie Naciśnięcie przycisku uruchamia funkcję
Based on wybieramy klasę Window. W kodzie createNewWindow(), która tworzy nowy kom-
Listing 1. Detekcja połączenia z Internetem
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="init()">
<mx:Script>
<![CDATA[
import air.net.URLMonitor;
import flash.net.URLRequest;
import flash.events.StatusEvent;
private var monitor:URLMonitor;
private function init():void {
monitor = new URLMonitor(new URLRequest('http://www.google.com'));
monitor.addEventListener(StatusEvent.STATUS, onStatusChanged);
monitor.start();
}
private function onStatusChanged(e:StatusEvent):void {
stat.text = "Status połączenia z internetem : " + monitor.available;
}
]]>
</mx:Script>
<mx:Label horizontalCenter="0" verticalCenter="0" id="stat"/>
</mx:WindowedApplication>
Listing 2. Wylistowanie i kopiowanie katalogów na pulpicie
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="376" height="327">
<mx:Script>
<![CDATA[
import flash.filesystem.File;
private function dirOpen():void {
var elems:Array = File.desktopDirectory.getDirectoryListing();
var f:File;
var len:uint = elems.length;
for ( var i:uint = 0; i < len; i++ ){
var n:String = elems[i].name;
if (!elems[i].isSymbolicLink) {
trace( n );
}
if( n == 'test' ) {
f = File.desktopDirectory.resolvePath( n+' kopia');
elems[i].copyTo( f );
}
}
}
]]>
</mx:Script>
<mx:Button label="Button" horizontalCenter="0" verticalCenter="0"
click="dirOpen()"/>
</mx:WindowedApplication>
FLEX
 Adobe AIR

ponent typu BeautyWindow i otwiera okno.

Listing 3. Zapis i odczyt pliku Ustawiamy tytuł okna i przypisujemy do pola
<?xml version="1.0" encoding="utf-8"?> infoText tekst identyfikujący okienko. Zmien-
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" ną nr typu uint (typu oznaczającego całkowi-
width="680" height="445" initialize="init()"> tą liczbę bez znaku) wykorzystaliśmy do nume-
<mx:Script> rowania okien – dlatego po stworzeniu nowe-
<![CDATA[ go okna inkrementujemy (zwiększamy o 1) je-
import flash.filesystem.File; go wartość dla uzyskania numerów kolejnych
import flash.filesystem.FileMode; okien. Należy pamiętać, że właściwość title
import flash.filesystem.FileStream; należy do bazowych właściwości klasy Window,
import mx.controls.Alert; dlatego moglibyśmy ją przypisać przed otwo-
rzeniem okna, ale już komponent infoText na-
private var fileName:String = "test.txt"; leży do interfejsu samego okienka. W związ-
private var f:File; ku z tym, jeśli przesuniemy otwarcie okienka
private var fs:FileStream; dwie linijki w dół, po przypisaniu tekstu do po-
private function init():void { la infoText to wystąpi błąd wykonywania nu-
f = File.applicationStorageDirectory.resolvePath(fileName); mer 1009 (nie można się dostać do właściwo-
//f = new File(); ści lub metody obiektu typu null). Pomimo
//f.url = 'app-storage:/'+fileName; tego, że przy wyświetlaniu zmiennej nr moż-
fs = new FileStream(); na by pominąć wywołanie metody toString()
} wykonującej rzutowanie zmiennej numerycz-
private function saveFile():void { nej na typ String – tekst (rzutowanie by by-
try { ło wykonywane automatycznie), to bardzo do-
fs.open(f, FileMode.WRITE); brym nawykiem jest pamiętanie o kontroli ty-
fs.writeUTFBytes(writeTxt.text); pów w językach programowania. Wielu po-
} catch (e:Error) { czątkujących programistów (niezależnie od ję-
Alert.show('Błąd nr ' + e.errorID + "\nTreść błędu:\n" + e.message, zyka programowania) bardzo często zapomi-
'Błąd'); na o typach zmiennych, których używa i przez
} finally { to sama komplikuje sobie przygodę z progra-
fs.close(); mowaniem poprzez błędy z tego wynikają-
} ce, dlatego należy się pilnować i zwracać na
} to uwagę. Jak widać po uruchomieniu apli-
kacji, podczas kolejnego naciskania przycisku
private function readFile():void { tworzone są nowe okna z kolejnymi numera-
fs.addEventListener(Event.COMPLETE, onComplete); mi. Jeśli do kodu Listingu 4. dodamy do taga
fs.addEventListener(ProgressEvent.PROGRESS, onProgress); Window właściwości transparent="true" oraz
fs.addEventListener(IOErrorEvent.IO_ERROR, onError); systemChrome="none" to otrzymamy okien-
fs.openAsync(f, FileMode.READ); ko o przezroczystych rogach. Zmiana właści-
} wości systemChrome ze standard (wartość do-
myślna) na none jest konieczna, ponieważ stan-
private function onError(event:IOErrorEvent):void { dardowe okienka nie zakładają posiadania prze-
trace( 'Błąd odczytu: kod błędu: '+event.errorID+', treść błędu: zroczystości.
'+event.text ); Jednak to nie wszystko, co można wycią-
} gnąć z AIR odnośnie okien. Są dwa podej-
ścia do tworzenia okien, jedna – bazująca na
private function onProgress(event:ProgressEvent):void { komponentach została już przedstawiona po-
trace( 'czytam plik: przeczytano ' + event.bytesLoaded+' z wyżej. Nic nie stoi oczywiście na przeszko-
'+event.bytesTotal + ' bajtów' ); dzie, aby tworzyć kodem języka ActionScript
} obiekty np.: TextArea i dołączać je do okien,
ale jest to sposób moim zdaniem mniej intu-
private function onComplete(event:Event):void { icyjny przy tym podejściu komponentowym.
trace( 'zakończono' ); Jest jeszcze jedna metoda bazująca całkowicie
readTxt.text = fs.readUTFBytes(f.size); na ActionScripcie, a konkretniej na klasach
fs.close(); NativeWindow i NativeWindowInitOptions. Ba-
} zując na przykładzie z Listingu 5. dodajmy no-
]]> wy przycisk do głównego okna naszej aplikacji:
</mx:Script>
<mx:TextArea id="writeTxt" x="29" y="83" width="291" height="263" text="Ala ma <mx:Button label="Nowe natywne okno"
kota"/> horizontalCenter="0" verticalCenter="30"
<mx:TextArea id="readTxt" x="361" y="83" width="291" height="263"/> click="createNewActionscriptWindow()"/>
<mx:Button x="264" y="381" label="Zapis" click="saveFile()"/>
<mx:Button x="361" y="381" label="Odczyt" click="readFile()"/> oraz funkcję tworzącą nowe okno (Listing 6.).
</mx:WindowedApplication> Jest to metoda trochę bardziej zaawansowa-
na od strony programistycznej, ale dająca du-

www.sdjournal.org 25
 ADOBE FLEX
żo więcej możliwości. Uruchamiając aplikację
i klikając przycisk Nowe natywne okno powinno
pojawić się okno jak na Rysunku 1.
Pomimo tego, że to co stworzyliśmy wcale
nie wygląda jak standardowe okno, to jest to
w rzeczywistości pełnowartościowe okno apli-
kacji. W związku z tym, że konstruktor klasy
Window przyjmuje jeden wymagany parametr
(typu NativeWindowInitOptions) odpowiada-
jący za parametry inicjujące okno trzeba naj-
pierw stworzyć instancję tej klasy – zmienną
options. Dla uzyskania przezroczystości nale-
żało, podobnie jak przy modelu komponento-
wym, ustawić właściwości systemChrome na no-
ne oraz transparent na true. Gdybyśmy uży-
wali standardowych okien, moglibyśmy usta-
wić także takie właściwości jak, maximizable,
minimizable, resizable itp., ale skoro wszyst-
ko rysujemy kodem to o takie elementy jak mak-
symalizacja czy minimalizacja okna także trze-
ba się zatroszczyć samodzielnie. W systemach
z rodziny OS X, w których operacja maksymali-
zacja okien jest tożsama z operacją zmiany roz-
miaru, aby zapobiec maksymalizacji okna obie
właściwości (maximizable i resizable) trzeba
ustawić na false. Proponuję przetestować apli-
kację, zmieniając różne właściwości obiektu
options. Jedną z ciekawszych z nich jest wła-
ściwość type, która jak sama nazwa wskazuje
pozwalająca na uzyskanie różnych typów okien
często spotykanych w systemie, i tak wartości
tego parametru mogą być wybrane z predefi-
niowanych stałych klasy NativeWindowType:
• NativeWindowType.NORMAL – Najczęściej
spotykane okna – pokazujące się na pasku
zadań w systemie Windows a w systemie
OS X w menu okien;
• NativeWindowType.LIGHTWEIGHT – Lekkie
okienko – przy tej opcji nie można korzy-
stać z systemowego chromu okien (sys-
temChrome = „none”);
• NativeWindowType.UTILITY – Okien-
ko narzędziowe – jest to trochę bardziej
okrojona wersja okna typu NativeWindow
Type.NORMAL .
W momencie, gdy mamy już przygotowa-
ne opcje inicjacyjne, tworzymy okno, a ja-
ko parametr konstruktora podajemy właśnie
zmienną options. Ustawiamy tytuł okna,
wymiary oraz dodajemy do okna kilka za-
okrąglonych prostokątów. W przeciwień-
stwie do sytuacji, w której skorzystalibyśmy
z systemowego chromu okien, musimy tak-
że dodać obsługę przesuwania okna i zamy-
kania go – przesuwanie po kliknięciu mysz-
ką i zamykanie po naciśnięciu przycisku na
klawiaturze. Przedstawiony sposób jest tro-
chę bardziej zwięzłą wersją przypisywania
wyzwalaczy na zdarzeniach w stosunku do
poprzednich przykładów. Jako funkcję na-
słuchującą na zdarzeniu nie przypisujemy
uchwytu do funkcji (patrz Listing 3., funk-
26
cja readFile ), ale bezpośrednio ciało funk- Na początku należy zaopatrzyć się w stosowną
cji. Takie przypisywanie funkcji niczym się ikonkę zależnie od zastosowania w rozmiarze
praktycznie nie różni w działaniu, ma jed- 16x16 lub 128x128 pikseli, w przykładzie z Li-
nak jedną poważną wadę w przypadku, gdy- stingu 7. są to pliki AIRApp_16.png i AIRApp_
byśmy chcieli ponownie wywołać tę funkcję 128.png umieszczone w katalogu icons.
w innym miejscu kodu. Musielibyśmy po- Jak widać na listingu, w tagu Windowed
nownie pisać ciało funkcji, a nie tylko przy- Application mamy ustawione wyzwalacze na-
pisać uchwyt do niej. Sposób, którego użyli- słuchujące na dwóch zdarzeniach, na moment
śmy, można więc używać pod warunkiem, inicjalizacji aplikacji (initialize – funk-
że nie chcemy nigdzie indziej wykorzysty- cja init) i na chwilę przed zamknięciem apli-
wać danej funkcji. Ze względu na przejrzy- kacji (closing – funkcja hideApp). Założy-
stość kodu dobrze też jest, jeśli nie ma go za łem, że chcemy wrzucić aplikację do tray’a za-
dużo (jedna do dwóch operacji). raz po uruchomieniu, ale nic nie stoi na prze-
szkodzie, żeby to zrobić dopiero w momen-
Tray systemowy i menu cie kliknięcia przycisku zamykającego, czy
AIR umożliwia także budowanie aplikacji dzia- w dowolnym innym momencie działania apli-
łających w tle. Można umieścić aplikację w za- kacji. Na początku tworzymy obiekt Loader,
sobniku systemowym (w Windowsie – ikonki umożliwiający w dalszej części załadowanie
aplikacji obok zegarka systemowego) jednocze- pliku ikonki do zasobnika systemowego. Na-
śnie usuwając aplikację z paska zadań, ale przy- stępnym krokiem jest stworzenie menu do-
kład z Listingu 6. będzie działał także pod syste- stępnego pod prawym przyciskiem myszy nad
mem typu OS X – opis jednak będzie dotyczył ikonką w tray'u – klasą odpowiednią do tego
tylko systemu z rodziny Windows. jest NativeMenu. Dodaliśmy tam dwa elemen-
Przykład jest trochę dłuższy od poprzed- ty, jeden do ponownego otwarcia okna aplika-
nich, ale tylko z pozoru jest bardziej skompli- cji i drugi do całkowitego zamknięcia aplika-
kowany. Budując tego typu aplikację, mamy cji, funkcje wykonujące odpowiednio showApp
do rozwiązania trzy problemy: i closeApp. Klasa NativeApplication umoż-
liwia sprawdzenie, czy system pozwala na
• przechwycenie zdarzenia zamykania apli- umieszczenie aplikacji w tray'u za pomocą
kacji (kliknięcie standardowego przycisku właściwości supportsSystemTrayIcon, dlate-
zamykającego okienko); go wszystkie operacje dotyczące tray'a zostały
• ukrycie aplikacji w trayu (w tym załadowa- wykonane pod warunkiem, że jest taka moż-
nie ikonki); liwość (analogicznie dla supportsDockIcon).
• dodanie menu umożliwiającego ponowne Gdybyśmy nie sprawdzili tego, a system nie
otworzenie aplikacji. miałby takiej możliwości, to podczas wyko-
Listing 4. Nowy komponent okienkowy – BeautyWindow
<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400"
height="300">
<mx:Label horizontalCenter="0" verticalCenter="0" id="infoText"/>
</mx:Window>
Listing 5. Dynamiczne tworzenie okienek z użyciem komponentów
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private var nr:uint = 1;
private function createNewWindow():void {
var newWindow:BeautyWindow = new BeautyWindow();
newWindow.open(true);
newWindow.title = "Moje okienko nr " + nr.toString();
newWindow.infoText.text = "To jest nowo stworzone okienko numer " +
nr.toString();
nr++;
}
]]>
</mx:Script>
<mx:Button label="Nowe okno" verticalCenter="0" horizontalCenter="0" click="create
NewWindow()"/>
</mx:WindowedApplication>
FLEX
 Adobe AIR

nywania operacji wystąpiłby błąd wykonywa- my ją do właściwej aplikacji (iconLoadComple- my samo okno aplikacji z paska zadań (instan-
nia. Właściwość klasy NativeApplication te). Zmienna systray odpowiada już za właści- cja nativeApplication dalej będzie urucho-
o nazwie nativeApplication to instancja kla- wą ikonkę umieszczoną w tray'u, przypisuje- miona w systemie). W momencie wybrania
sy NativeApplication w modelu Singletona my do niej dymek pokazujący się po najecha- z menu aplikacji opcji Otwórz (funkcja showApp)
i właśnie do niej należy się odwoływać, jeśli niu na tę ikonkę i wcześniej stworzone menu. ponownie pokazujemy okno programu. Metoda
chcemy uzyskać uchwyt do aktualnie urucho- Sposób postępowania w przypadku DockIcon activate() uaktywnia okienko – ustawia na
mionej aplikacji. Aby zapobiec automatyczne- jest analogiczny jak przy SystemTrayIcon. Po- nim focus. Właściwe kończenie działania apli-
mu zamykaniu aplikacji w momencie zamyka- został jeszcze jeden problem do rozwiązania, kacji wykonamy w funkcji closeApp wywoła-
nia wszystkich okien aplikacji (domyślnie tak pokazywanie i ukrywanie aplikacji. Funkcja nej po kliknięciu wcześniej stworzonego menu
się właśnie dzieje) należy zmienić właściwość hideApp jest wywoływana na chwilę przed za- (opcja Zamknij), gdzie usuwamy ikonkę aplika-
autoExit instancji klasy NativeApplication mknięciem aplikacji, zazwyczaj używa się tego cji i kończymy jej działanie.
na false. W tym konkretnym przykładzie jest zdarzenia (closing) do posprzątania po sobie,
to działanie na wyrost, ponieważ zapobiegnie- czyli zapisanie zmian przed zamknięciem itp. Coś większego
my automatycznemu zamykaniu aplikacji Zapobiegniemy jednak zamykaniu programu Znając już kilka elementów składowych środo-
w trochę inny sposób. Wywołujemy załadowa- ,używając do tego metody preventDefault() wiska AIR, spróbujmy stworzyć trochę bardziej
nie obrazu ikonki i po załadowaniu przypisuje- zdarzenia wywołującego funkcję, tylko ukryje- skomplikowaną aplikację. W związku z natło-
kiem niechcianej informacji w Internecie co-
Listing 6. Dynamiczne tworzenie okienek z użyciem kodu ActionScript raz większą popularność zyskują czytniki RSS,
na potrzeby tego artykułu napiszemy aplikację
private function createNewActionscriptWindow():void { wykorzystującą dane w formacie RSS z witry-
//tworzymy opcje uruchomieniowe okna ny http://foto.moon.pl, czyli coś dla miłośników
var options:NativeWindowInitOptions = new NativeWindowInitOptions(); fotografii. Kanał RSS podaje informacje o naj-
options.transparent = true; nowszych zdjęciach w serwisie. W skład źró-
options.systemChrome = "none"; dła aplikacji wchodzą dwa pliki: główny plik
projektu – FotoMoonRss.mxml oraz plik kom-
//tworzymy okienko ponentu okna powiadamiającego – NoticeWin-
var newWindow:NativeWindow = new NativeWindow(options); dow.mxml. Kodu jest oczywiście zdecydowanie
newWindow.title = "Tytuł okna"; więcej w stosunku do poprzednich aplikacji,
newWindow.width = 300; ale większość to właśnie przykład wykorzysta-
newWindow.height = 300; nia wcześniej przedstawionych elementów.
Wykorzystane zostały także dwa pliki
//dodajemy do okna elementy graficzne: images/icon_128.png oraz images/
var client:Sprite = new Sprite(); icon_128_red.png jako ikonki w zasobniku
var rectSize:int = 40; systemowym. Plik icon_128.png odpowiada
var rectSpace:int = 4; za pomyślne połączenie z witryną oraz icon_
with(client.graphics){ 128_red.png jest tą samą ikonką tylko w kolo-
lineStyle(1,0,1); rze czerwonym – reprezentuje ona brak po-
beginFill(0xff0000,.5); łączenia z serwisem. Celowo nie wykorzysta-
for(var i:int = 0; i <= 5; i++){ łem w ogóle layoutu głównego pliku aplikacji,
for (var j:int = 0; j <= 5; j++){ aby pokazać jak można wykorzystać kompo-
drawRoundRect(i*(rectSize+rectSpace),j*(rectSize+rectSpace),rectS nent mx:Window do wyświetlania danych i po-
ize,rectSize,10,10); wiadomień. Działanie elementów, które były
} wykorzystane we wcześniejszych przykładach
} nie będzie ponownie tłumaczone. Analizę ko-
endFill(); du zacznijmy od początku – jak w większości
} przykładów aplikacja rozpoczyna swoją pracę
// dodajemy do okna grafikę od funkcji init(). Tworzymy instancję kla-
newWindow.stage.addChild(client); sy URLMonitor o nazwie monitor do sprawdza-
/* nia połączenia z witryną http://foto.moon.pl/
(z tej witryny będziemy pobierać dane, dla-
jeśli nie używamy systemowego wyglądu okien (systemChrome="none") tego ta domena jest bardziej odpowiednia w
to dodajemy zdarzenia pozwalające zamknąć i przesuwać okno odróżnieniu od http://www.google.com, jak to
*/ miało miejsce na Listingu 1.). Do cykliczne-
if(options.systemChrome == NativeWindowSystemChrome.NONE){ go sprawdzania czy są nowe zdjęcia w serwi-
newWindow.stage.addEventListener(KeyboardEvent.KEY_DOWN, function(e:Event): sie, została wykorzystana klasa Timer, spraw-
void{e.target.stage.nativeWindow.close();}); dzająca co 10 sekund dane w kanale RSS,
newWindow.stage.addEventListener(MouseEvent.MOUSE_DOWN, wywołując funkcję loadData(). Ładujemy
function(e:Event):void{e.target.stage.nativeWindow.startMove();}) obie ikonki – po załadowaniu zmieniając
} właściwości odpowiednio iconLoaded oraz
//pokazujemy nowe okno errorIconLoaded na true, oraz dodajemy wy-
newWindow.activate(); zwalacz zdarzeń dla obiektu httpRequest
} (obiekt wykorzystywany do wysyłaniu za-
pytań i odbierający dane z RSS-a), zmienia-
jąc jednocześnie ikonkę przy błędzie połą-

www.sdjournal.org 27
 ADOBE FLEX
czenia. Następnie minimalizujemy aplikację
do zasobnika systemowego i tworzymy no-
we okienko powiadamiające (nowo stworzo-
nego typu NoticeWindow). Tonacja całego ser-
wisu jest w szarych kolorach, dlatego za naj-
odpowiedniejszy typ tworzonego okna uzna-
łem NativeWindowType.UTILITY pozbawiony
chromu systemowego i z przezroczystością.
Pokazywane okno będzie zawsze na wierz-
chu (alwaysInFront = true) oraz nie moż-
na będzie zmieniać jego rozmiarów. Zaraz po
otworzeniu okna przesuwamy je do prawego
dolnego rogu pulpitu oraz ukrywamy głów-
ne okno aplikacji (które tak naprawdę oprócz
kodu aplikacji żadnych elementów interfejsu
użytkownika nie zawiera). Jak już wspomnia-
no wcześniej, obiekt którego używamy do
transmisji danych jest httpRequest, który jest
instancją klasy HTTPService. Dane, które do
nas przyjdą po wysłaniu zapytania HTTP zosta-
ną zrzutowane na obiekt (resultFormat="o-
bject"), a metoda, która zostanie wykonana
po odebraniu danych to onDataLoaded (re-
sult="onDataLoaded(event)"). Przyjrzyjmy
się funkcji onDataLoaded, jako parametr
przyjmuje ona zdarzenie wywołujące
(event), jest to uchwyt właśnie do kompo-
nentu httpRequest. Dzięki temu, że da-
ne zostały zrzutowane na obiekty możemy
się odwoływać do tych danych (event.re-
sult) tak, jakby to były właściwości obiektu
httpRequest. Kolejne tagi i atrybuty xml-owe
z drzewa RSS są rzutowane na kolejne podo-
biekty, dla przykładu odpowiednikiem <rss
…><channel><title> jest event.result.rss
.channel.title i dla pozostałych elementów
sytuacja jest analogiczna. Silnik do obsługi
XML w ActionScripcie 3 został napisany cał-
kowicie od nowa, dzięki temu nie ma już pro-
blemów (co się zdarzało we wcześniejszych
wersjach Flasha) z parsowaniem kilku mega-
bajtowych plików XML.
Przejdźmy teraz do Listingu 9. Zastosowali-
śmy tutaj trochę bardziej zaawansowany kod.
Jak widać wszystkie właściwości komponen-
tu są ustawione jako prywatne – np.: private
var _alphaTimer:Timer; itd. Aby móc się
dostać do tych właściwości z zewnątrz (np.:
z głównego okna aplikacji) zostały dodane
tzw. settery i gettery – funkcje przypisujące
i pobierające wartości właściwości prywat-
nych – to takie pewnego rodzaju bramki bez-
pieczeństwa, jest to bardzo ważne, jeśli chce-
my programować zgodnie z ogólnie przyjęty-
mi kanonami sztuki programowania obiek-
towego. Takie bramki dają nam dużo więk-
szą stabilność i kontrolę nad kodem aplikacji
(możemy na przykład w tym miejscu spraw-
dzić, czy właściwość jest przypisana w spo-
sób prawidłowy). Jeśli przypisujemy do cze-
goś liczbę sekund, to czy jest ona zawarta
w przedziale od 0 do 60 i jeśli wykracza po-
za zakres to ustawić wartość maksymalną do-
stępną – 60 lub minimalną dostępną – 0).
28
Listing 7. Umieszczanie aplikacji w zasobniku systemowym
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="init()" closing="hideApp(event)">
<mx:Script>
<![CDATA[
private function init():void {
var icon:Loader = new Loader();
var iconMenu:NativeMenu = new NativeMenu();
var showCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Otw
órz"));
var exitCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Zam
knij"));
exitCommand.addEventListener(Event.SELECT, closeApp);
showCommand.addEventListener(Event.SELECT, showApp);
NativeApplication.nativeApplication.autoExit = false;
if (NativeApplication.supportsSystemTrayIcon) { // Windows
icon.contentLoaderInfo.addEventListener(Event.COMPLETE,
iconLoadComplete);
icon.load(new URLRequest("icons/AIRApp_16.png"));
var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon
as SystemTrayIcon;
systray.tooltip = "Ukryta aplikacja";
systray.menu = iconMenu;
}
if (NativeApplication.supportsDockIcon){ // OS X
icon.contentLoaderInfo.addEventListener(Event.COMPLETE,iconLoadComple
te);
icon.load(new URLRequest("icons/AIRApp_128.png"));
var dock:DockIcon = NativeApplication.nativeApplication.icon as
DockIcon;
dock.menu = iconMenu;
}
}
private function closeApp(event:Event):void {
NativeApplication.nativeApplication.icon.bitmaps = [];
NativeApplication.nativeApplication.exit();
}
private function hideApp(event:Event):void {
nativeWindow.visible = false;
event.preventDefault();
}
private function showApp(event:Event):void {
nativeWindow.visible = true;
nativeWindow.activate();
}
private function iconLoadComplete(event:Event):void {
NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.
bitmapData];
}
]]>
</mx:Script>
</mx:WindowedApplication>
FLEX
 Adobe AIR

Listing 8a. Kod aplikacji RSS – okno główne – plik FotoMoonRss.mxml

<?xml version="1.0" encoding="utf-8"?> createWindow();

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/ }
2006/mxml" layout="absolute" private function hideAppInTray():void {
initialize="init()"> var iconMenu:NativeMenu = new NativeMenu();
var showCommand:NativeMenuItem =
<mx:Script> iconMenu.addItem(new NativeMenuItem("O
<![CDATA[ twórz"));
import mx.controls.Image; var exitCommand:NativeMenuItem =
import air.net.URLMonitor; iconMenu.addItem(new NativeMenuItem("Za
import flash.display.Loader; mknij"));
import flash.display.NativeMenu; exitCommand.addEventListener(Event.SELECT,
import flash.display.NativeMenuItem; closeApp);
import flash.display.NativeWindow; showCommand.addEventListener(Event.SELECT,
import flash.display.NativeWindowInitOptions; showApp);
import flash.display.NativeWindowType; if (NativeApplication.supportsSystemTrayIcon) {
import flash.events.StatusEvent; var systray:SystemTrayIcon = NativeAppli
import flash.net.URLRequest; cation.nativeApplication.icon as
import flash.utils.Timer; SystemTrayIcon;
import mx.rpc.events.FaultEvent; systray.tooltip = "Foto moon pl - RSS";
import mx.rpc.events.ResultEvent; systray.menu = iconMenu;
import mx.rpc.soap.LoadEvent; }
if (NativeApplication.supportsDockIcon){
private var lastID:String = ''; var dock:DockIcon = NativeApplication.nativeApp
private var actID:String = ''; lication.icon as DockIcon;
private var monitor:URLMonitor; dock.menu = iconMenu;
private var timer:Timer; }
private var nw:NoticeWindow; }
private var win:NativeWindow; private function createWindow():void {
private var errorIconLoader:Loader; nw = new NoticeWindow();
private var errorIconLoaded:Boolean = false; nw.type = NativeWindowType.UTILITY;
private var iconLoader:Loader; nw.alwaysInFront = true;
private var iconLoaded:Boolean = false; nw.maximizable = false;
nw.resizable = false;
private function init():void { nw.minimizable = false;
monitor = new URLMonitor(new URLRequest('http: nw.open();
//foto.moon.pl')); nw.move(Screen.mainScreen.bounds.width - nw.wid
monitor.addEventListener(StatusEvent.STATUS, th,Screen.mainScreen.bounds.height -
netStatusChanged); nw.height - 100);
monitor.start(); nativeWindow.close(); // zamykamy główne okno
timer = new Timer(10000); aplikacji
timer.addEventListener(TimerEvent.TIMER }
, function(event:TimerEvent): private function closeApp(event:Event):void {
void{loadData();}); NativeApplication.nativeApplication.icon.bitmaps
timer.start(); = [];
iconLoader = new Loader(); NativeApplication.nativeApplication.exit();
iconLoader.contentLoaderInfo.addEventListener(Eve }
nt.COMPLETE, function(event:Event):void private function showApp(event:Event):void {
{iconLoaded = true;}); nw.visible = true;
iconLoader.load(new URLRequest("images/icon_ }
128.png")); private function netStatusChanged(event:StatusEvent):
errorIconLoader = new Loader(); void {
errorIconLoader.contentLoaderInfo.addEventListener changeIcon();
(Event.COMPLETE, function(event:Event): if( monitor.available ) {
void {errorIconLoaded = true;}); loadData();
errorIconLoader.load(new URLRequest("images/icon_ }
128_red.png")); }
httpRequest.addEventListener(FaultEvent.FA private function changeIcon():void {
ULT, function(event:Event):void if( monitor.available && iconLoaded ) {
{changeIcon();}); NativeApplication.nativeApplication.icon.bitmaps =
hideAppInTray(); [iconLoader.content];

www.sdjournal.org 29
 ADOBE FLEX

Listing 8b. Kod aplikacji RSS – okno główne – plik FotoMoonRss.mxml

} else if( !monitor.available && errorIconLoaded if( nw.lastID != rss.channel.item[0].guid ) { //

) { sprawdzenie czy zostało dodane nowe
NativeApplication.nativeApplication.icon.bitmaps = zdjecie
[errorIconLoader.content]; nw.lastID = rss.channel.item[0].guid.toString
} ();
} nw.items = rss.channel.item;
private function loadData():void { }
if( monitor.available ) { }
httpRequest.send();
} ]]>
}
private function onDataLoaded(event:ResultEvent): </mx:Script>
void { <mx:HTTPService id="httpRequest" resultFormat="object"
var rss:Object = event.result.rss; result="onDataLoaded(event)"
if( nw.logotype.source == null ) { // pierwsze showBusyCursor="false" url="http://
załadowanie foto.moon.pl/rss/zdjecia"/>
nw.logotype.source = rss.channel.image.url; </mx:WindowedApplication>
}

Listing 9a. Kod aplikacji RSS – okno powiadamiające – plik NoticeWindow.mxml

<?xml version="1.0" encoding="utf-8"?> _currentIndex--;

<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" loadPhoto();
layout="absolute" width="198" checkButtons();
height="262" backgroundColor="#FFFFFF" }
systemChrome="none" transparent="true" }
closing="beforeClose(event)"> private function showPrev():void {
<mx:Script> if( _currentIndex != _lastIndex ) {
<![CDATA[ _currentIndex++;
loadPhoto();
import mx.collections.ArrayCollection; checkButtons();
}
private var _alphaTimer:Timer; }
private var _closeTimer:Timer; private function loadPhoto():void {
private var _lastID:String = ''; if( !visible ) {
private var _currentIndex:uint = 0; visible = true;
private var _lastIndex:uint = 0; }
private var _items:ArrayCollection; var item:Object = _items[_currentIndex];
box.toolTip = (item.title != null ) ? "Tytuł: \n"
public function set items(items:ArrayCollection): + item.title : '';
void { image.source = item.thumbnail.url;
_items = items; image.addEventListener(MouseEvent.CLICK,onPhotoC
_lastIndex = _items.length - 1; lick);
_currentIndex = 0; autor.text = "Autor: " + item.author;
checkButtons(); opis.text = (_currentIndex + 1).toString()+'/'+(_
loadPhoto(); lastIndex+1).toString();
} }
public function set lastID(ID:String):void { private function onPhotoClick(event:MouseEvent):void
_lastID = ID; {
} navigateToURL(new URLRequest(_items[_
public function get lastID():String { currentIndex].link));
return _lastID; }
} private function checkButtons():void {
private function beforeClose(event:Event):void { nextBtn.enabled = ( _currentIndex == 0 ) ? false
visible = false; : true;
event.preventDefault(); prevBtn.enabled = ( _lastIndex == _currentIndex )
} ? false : true;
private function showNext():void { }
if( _currentIndex != 0 ) { override public function set visible(value:Boolean):

30 FLEX
 Adobe AIR

Listing 9b. Kod aplikacji RSS – okno powiadamiające – plik NoticeWindow.mxml

void { }
if( _alphaTimer == null ) { }
_alphaTimer = new Timer(10); private function showAlpha(e:TimerEvent):void {
_alphaTimer.addEventListener(TimerEvent.TIMER, if( alpha < .99 ) {
showAlpha); alpha += .01;
_closeTimer = new Timer(10); _alphaTimer.start();
_closeTimer.addEventListener(TimerEvent.TIMER, } else {
hideAlpha); alpha = 1;
} _alphaTimer.stop();
if( value && alpha != 1 ) { }
super.visible = true; }
_alphaTimer.start(); ]]>
_closeTimer.stop(); </mx:Script>
} else if( !value && alpha != 0 ){ <mx:Image horizontalCenter="0" top="10" id="logotype"/>
_closeTimer.start(); <mx:Button label="»" width="41" click="showPrev()"
_alphaTimer.stop(); id="prevBtn" right="10" bottom="10"/>
} <mx:Button label="«" width="41" click="showNext()"
} id="nextBtn" bottom="10" left="10"/>
private function hideAlpha(e:TimerEvent):void { <mx:VBox horizontalAlign="center" verticalAlign="middle"
if( alpha > .05 ) { id="box" top="67" bottom="40" left="10"
alpha -= .05; right="10" >
_closeTimer.start(); <mx:Image id="image"/>
} else { </mx:VBox>
_closeTimer.stop(); <mx:Label bottom="8" horizontalCenter="0" id="opis"/>
alpha = 0; <mx:Label horizontalCenter="0" top="41" id="autor"/>
super.visible = false; </mx:Window>

Najprostszym przykładem wykorzystania właściwego wywołania ukrycia okna użyliśmy Podsumowanie

tych pośredniczących funkcji jest ustawienie
właściwości _lastID poprzez funkcje get/
set lastID() – jest to zmienna wykorzysta-
na do identyfikacji ostatnio dodanego zdjęcia.
Dla właściwości _items jest przypisany tylko
setter, więc z zewnątrz (poza kodem kompo-
nentu) nie można jej odczytać, można ją tyl-
ko przypisać. Ciekawym przykładem wyko-
rzystania takiego settera jest pokazywanie
i ukrywanie okna z danymi aplikacji – usta-
wienie właściwości visible. Zamiast standar-
dowego momentalnego pokazania i ukrycia
aplikacji dodaliśmy przejście, które płynnie
zmienia widoczność okienka. Wykorzystali-
śmy do tego właściwość alpha, odpowiada-
jącą za przezroczystość okna, którą zmienia-
my w przedziale od 0 do 1, pokazując lub od
1 do 0 ukrywając okno. Mamy tutaj kolejny
przykład wykorzystania klasy Timer powodu-
jący zmianę właściwości alpha okna co jakiś
odstęp czasu. Wnikliwsi czytelnicy z pewno-
ścią zauważyli dodatkowy parametr override
w deklaracji funkcji przypisującej. Użyliśmy
tego słowa dlatego, że zmieniamy standardo-
wą funkcję przypisującą, która należy do ba-
zowych właściwości klasy Window (po której
dziedziczymy tworząc aktualny komponent).
Nie jest właściwością należącą do tego pokole-
nia obiektu (do komponentu NoticeWindow)
tylko do bazowej klasy Window. Bez tego sło-
wa kluczowego override aplikacja nie skom-
pilowała by się poprawnie. W funkcji tej, dla
słowa kluczowego super odnoszącego się wła-
śnie do tzw. superklasy – klasy rodzica, po któ-
rej dziedziczymy (w tym przypadku Window).
Nawigacja po kolejnych elementach kanału
(poprzednich i następnych zdjęciach) została
zrealizowana w sposób wykorzystujący index
aktualnego elementu (_currentIndex) kolek-
cji tablicy _items. Jak pamiętamy z Listingu
8. w momencie załadowania nowych danych
do kolekcji _items, przypisane zostają dane
z kanału RSS. Zaraz po przypisaniu ustawiamy
aktualny index na 0, sprawdzamy czy możli-
wa jest nawigacja po elementach (poprzednie,
następne zdjęcie) oraz ładujemy najnowsze
z nich. W funkcji loadPhoto na samym po-
czątku sprawdzamy, czy okienko interfejsu
aplikacji jest aktualnie widoczne – dzięki te-
mu użytkownik zostanie automatycznie po-
wiadomiony (poprzez pokazanie się okien-
ka aplikacji) o nowo dodanym zdjęciu do ser-
wisu, bez konieczności ręcznego otwierania
okienka aplikacji. Dodaliśmy także obsługę
zdarzenia wywołanego przez kliknięcie zdję-
cia (onPhotoClick) – powodującego przej-
ście do witryny z pełną wersją aktualnie wi-
docznego elementu (zdjęcia). W kodzie apli-
kacji nie przewidzieliśmy sytuacji, w której
najnowsze zdjęcie zostanie usunięte z serwi-
su – w takim przypadku poprzednie zdjęcie
zostanie wyświetlone jako pierwsze, ale roz-
wiązanie tego problemu pozostawiam czytel-
nikowi jako formę treningu.
Eksplorując zasoby sieci, czy dokumentację
AIR, często zadawałem sobie pytanie: ciekawe,
czy jest to możliwe w AIR. Z czasem, odnajdując
kolejne odpowiedzi, okazało się, że w większo-
ści przypadków odpowiedź na tego typu pyta-
nia jest twierdząca. Dlatego odnoszę wraże-
nie, że to dopiero początek wielkiej przygo-
dy z AIR’em (biorąc pod uwagę fakt, że AIR
jest aktualnie w wersji 1.0.1, a prace nad Fle-
xem 4 trwają).
SZYMON KOSYDOR
Chief Technology Officer Internet Designers
(www.id.pl)
Geek technologiczny w pełnym wymiarze. Absol-
went Politechniki Wrocławskiej na kierunku Fizyki
Technicznej specjalność Fotonika.
Od 2001 roku związany z Internet Designers
(www.id.pl). Obecnie zajmuje stanowisko szefa
sekcji wdrożeń i rozwoju technologicznego (Chief
Technology Officer).
„Moje zainteresowania technologiczne to przede
wszystkim flash, php i łączenie różnych technologii.
Od kilku lat programuję praktycznie tylko obiek-
towo głównie we Flashu, PHP, a także w technolo-
gii Flex. Napisałem własnego cms’a w PHP5 + AJAX
z całkiem pokaźną na dziś listą wdrożeń. Po godzi-
nach: wspinaczka, rower, fotografia.”
Kontakt z autorem: szymon.kosydor@id.pl

www.sdjournal.org 31
 ADOBE FLEX

Aplikacje wykorzystujące
mapy w Adobe Flex
Popularność serwisów wykorzystujących mapy jako jeden z głównych
elementów interfejsu użytkownika ciągle wzrasta. Od pierwszej wersji API
map Google powstało wiele doskonałych aplikacji opartych o tego typu
rozwiązania. Z punktu widzenia programisty, tematyka ta staje się coraz
bardziej atrakcyjna, a używane technologie są coraz doskonalsze.
zwalające na mierzenie odległości pomię-
Dowiesz się... Powinieneś wiedzieć... dzy kolejnymi punktami przez nas wyzna-
• Jakiego typu aplikacje możemy stworzyć za • Wymagane są: podstawowa wiedza z zakre- czonymi. Odległości pomiędzy punktami
pomocą tego typu rozwiązań; su użycia Web Services oraz tworzenia aplika- przedstawione są jako kolejne elementy
• Jakich bibliotek możemy użyć wraz z platfor- cji opartych o zewnętrzne dane (mashups), jak wykresu;
mą Adobe Flex; i podstawowa umiejętność pracy ze środowi- • HomeLocator jest przykładem aplikacji po-
• Jak stworzyć przykładowe elementy projektu skiem Flex. zwalającej na zestawienie w ciekawy spo-
opartego o Flex i Yahoo Maps. sób informacji o sprzedawanych domach,
jak i ich lokalizacji geograficznej. Aby za-
poznać się z tym przykładem, należy od-
oraz środowisku Flex. Spektrum zastosowań wiedzić stronę http://www.asfusion.com/
biznesowych tego typu rozwiązań może być apps/homelocator/. Całość została zaopa-
Poziom trudności bardzo szerokie. Jeżeli puścimy wodze fanta- trzona w intuicyjny i przyjazny interfejs;
zji projektując aplikację, a dodatkowo skorzy- • TrailTracer to aplikacja służąca do tworze-
stamy z usług agregujących dane gromadzone nia i współdzielenia spersonalizowanych
we wszelkiego rodzaju serwisach, aby pobrać map. Znajdziemy ją pod adresem http://

M
amy możliwość korzystania z kil-
ku środowisk klienckich (AJAX,
Flash, Flex lub w przyszłości Silver-
light), jak i interfejsów aplikacji (API). Głów-
nymi dostarczycielami technologii są Google
Maps, Yahoo Maps oraz Microsoft Live Search
Maps.Dlaczego warto połączyć te technologie
z platformą Adobe Flex? Odpowiedź na to py-
tanie można podzielić na kilka punktów. Po
pierwsze – łatwiejsza komunikacja z API do-
starczycieli map. Z reguły odbywa się ona za
pomocą Web Services SOAP lub REST, które
z kolei są mocno osadzone w środowisku Flex.
Po drugie – możemy stworzyć rozbudowany
interfejs korzystający z dużego modelu danych.
Często przy wykorzystaniu technologi AJAX
musimy wybrać, ze względu na optymalizację,
jedno lub drugie. Korzystając zaś z Flexa – nie
musimy rezygnować z ciekawych rozwiązań,
wręcz przeciwnie – możemy często dopieścić
nawet bardzo skomplikowaną aplikację cieka-
wym i nietuzinkowym interfejsem. Po trzecie
– Flex będąc zbudowanym na Flashu, jest z na-
tury środowiskiem graficznym. Oznacza to, że
możemy w łatwy sposób łączyć elementy wizu-
alne z wybraną technologią map.
Istnieje już kilka ciekawych projektów apli-
kacji internetowych RIA opartych na mapach
dodatkowe dane, możemy zbudować aplikację
realizującą dowolne zadania. Ciekawymi reali-
zacjami są np.:
• Aplikacja do mierzenia własnego postępu
podczas biegania lub jeżdżenia na rowe-
rze. Gotowe rozwiązanie możemy znaleźć
pod adresem http://www.traxmeet.com/
traxmeet/TraxmeetPlayer.html?performan-
ceid=12726591&josso_ assertion_id=1E-
32082B39AA1FA4. Pozwala nam na re-
gularne mierzenie poczynanych przez nas
postępów poprzez integrację z danymi po-
bieranymi z GPS, a następnie dokładną ich
analizę;
• Aplikacja, która umożliwia naniesienie na
mapę zdjęć oraz danych geolokalizacyj-
nych odczytanych z urządzeń zapisują-
cych pozycję GPS. Całość pozwala np. na
odtworzenie odbytej przez nas wycieczki,
dodatkowo nanosząc wprowadzone przez
nas dane. Następnie możemy rozesłać
tak przygotowaną mapę do znajomych.
Projekt znajdziemy pod adresem http://
mapmypix.com/;
• Prosty, ale ciekawy przykład znajdziemy
również pod na stronie http://www.earth-
measurements.com/. Jest to rozwiązanie po-
www.trailtracer.com/;
• Oobgolf Course Finder jest narzędziem do
przeglądania informacji o wprowadzonych
do bazy serwisu polach golfowych. Serwis
można pochwalić za jakość wykonania
aplikacji, jak i ilość oraz dokładne poło-
żenie przeglądanych miejsc. Znajdziemy
go pod adresem http://www.oobgolf.com/
courses/finder/;
• Często stosowanym rozwiązaniem jest
geolokalizacja punktów sprzedaży danej
sieci, tak aby klienci mogli znaleźć najle-
piej im odpowiadający. Przykładowe roz-
wiązanie zastosowała firma Rolex. Roz-
wiązanie znajdziemy pod adresem http:
//www.rolex.com /en/inside–rolex /sales–
service/find–a–rolex–dealer/index.jsp.
Osobiście jako konsultant i programista Ado-
be Flex wykonałem kilka ciekawych projek-
tów wykorzystując mechanizm map. Najbar-
dziej interesującym z nich jest aplikacja po-
zwalająca na śledzenie w czasie rzeczywi-
stym oraz przeglądanie danych historycznych
o włamaniach. Jest to ciągle rozwijany projekt,
jednak udowodnił on, że Flex jest doskonale
sprawdzającym się narzędziem do takich za-
stosowań. Aplikacja opiera się na danych kil-

32 FLEX

kuset do kilkunastu tysięcy obiektów, a do
tego obserwacja zgłoszonych zdarzeń w za-
bezpieczanych budynkach może odbywać się
w czasie rzeczywistym. Całość została zaopa-
trzona w ciekawy i przyjemny dla użytkow-
nika interfejs. Pozwala on na zmianę parame-
trów aktualnie przeglądanych wydarzeń oraz
ich filtrowanie. Projekt jest wykonywany na
zlecenie firmy ochroniarskiej pragnącej narzę-
dzia pozwalającego na szybkie i przejrzyste za-
poznanie się i analizowanie danych o przestęp-
stwach (Rysunek 1.).
Bardzo ciekawe możliwości daje połączenie
platformy Flex, map oraz technologii zdalne-
go dostępu i wymiany wiadomości BlazeDS
lub LiveCycle DS (technologie umożliwiają-
ce budowę aplikacji korzystających z logiki
biznesowej serwerów Java w czasie rzeczywi-
stym). Możliwości biznesowe takich rozwią-
zań są bardzo obiecujące. Przykładowo, po-
zwalają one na współdzielenie w czasie rze-
czywistym map przez kilku użytkowników,
np. podczas telekonferencji. Tak wykonaną
prostą aplikację wraz ze źródłem oraz instruk-
cjami wykonania znajdziemy pod adresem
http://coenraets.org/blog/2008/04/yahoo–maps–
collaboration–using–flex–and–blazeds/. Zain-
teresowanych tematyką koniecznie odsyłam
do zapoznania się z przedstawionym rozwią-
zaniem.
Flex i API gotowych bibliotek
Jak wspomnieliśmy we wstępie podczas projek-
towania i wykonywania aplikacji do dyspozycji
mamy kilka rozwiązań, jak i gotowych do uży-
cia bibliotek. Podczas pracy z platformą Flex
najlepiej jest skorzystać z:
• Yahoo Maps (http://developer.yahoo.com/
maps/). Rozwiązanie jest wygodne, do-
starczone zostało API dla ActionScript
w wersjach 2 oraz 3, AJAX i Simple API
(usługa niewymagająca umiejętności pro-
gramowania). Całość jest dobrze udoku-
mentowana, posiada wiele przykłado-
wych zastosowań, jak i instrukcji krok po
kroku. Projekt jest również bardzo czyn-
nie wspierany przez środowisko. Wszela-
kie pytania możemy zadawać na oficjal-
nym forum http://tech.groups.yahoo.com/
group/yws–maps/;
• UMap firmy Advanced Flash Compo-
nents (http://www.afcomponents.com/
components/umap_as3/). Dostarczone
API dla ActionScript 3.0 oferuje wie-
le ciekawych funkcji. Rozwiązaniu te-
mu warto jest się przyjrzeć bliżej, pro-
ducent oferuje kilka instrukcji wprowa-
dzających do swojego produktu. Ten pro-
jekt również posiada mocne wsparcie śro-
dowiska, forum znajdziemy pod adre-
sem http://www.afcomponents.com/forum/
viewforum.php?f=20. Standardowo użyte
mapy mają trochę niższą jakość niż wy-
www.sdjournal.org
Tworzenie aplikacji wykorzystujących mapy w Adobe Flex
Listing 1. Zastosowanie biblioteki Yahoo Map
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import com.yahoo.maps.api.YahooMap;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.core.location.Address;
import com.yahoo.maps.webservices.geocoder.GeocoderResult;
import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;
private var _yahooMap:YahooMap;
private var _address:Address;
private function onCreationComplete():void
{
var appid:String = Application.application.parameters.appid;
_yahooMap = new YahooMap();
_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE,
handleMapInitialize);
_yahooMap.init(appid,mapContainer.width,mapContainer.height);
mapContainer.addChild(_yahooMap);
mapContainer.addEventListener(ResizeEvent.RESIZE, onMapContainerResize);
_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();
_yahooMap.addScaleBar();
}
private function handleMapInitialize(event:YahooMapEvent):void {
// Tu dodajemy isntrukcje wykonywane po zainicjalizowaniu mapy,
// np. wyszukiwanie i dodawanie punktów na mapie
_address = new Address("warszawa");
_address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS,
onGeocodeSuccess);
_address.geocode();
}
private function onGeocodeSuccess(event:GeocoderEvent):void
{
var result:GeocoderResult = _address.geocoderResultSet.firstResult;
_yahooMap.zoomLevel = result.zoomLevel;
_yahooMap.centerLatLon = result.latlon;
}
private function onMapContainerResize(event:ResizeEvent):void {
_yahooMap.setSize(mapContainer.width,mapContainer.height);
}
]]>
</mx:Script>
<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
</mx:Application>
33
 ADOBE FLEX

mienione powyżej Yahoo Maps, ich głów-
nym dostarczycielem jest serwis http://
openstreetmap.com/ (możemy go jednak
zamienić np. na Google Maps);
• Modest Maps
(http://www.modestmaps.com/). Zespół pro-
gramistów tworzy rozwiązanie w opar-
ciu o licencję BSD, dając nam do dyspozy-
cji API ActionScriptowe w wersji 2 oraz 3,
jak i dla języka Python. Do wyboru mamy
kilku dostarczycieli map, możemy skorzy-
stać z zasobów Open Street Map, NASA,
Blue Marble, Google, Yahoo oraz Micro-
softu. Projekt nie jest rozwijany tak pręż-
nie jak wcześniejsze i nie posiada tak silne-
go wsparcia jak one.
Najlepszym rozwiązaniem z naszego punk-
tu widzenia są Yahoo Maps. Poza obsługą sa-
mych map bezpośrednio z poziomu Action-
Script 3.0 mamy do dyspozycji wiele przydat-
nych Web Services, m.in.:
• Yahoo! Weather (http://developer.yahoo.com/
weather/). Umożliwia on połączenie map
z danymi pogodowymi dla zadanej lo-
kacji. Przykładowo prognoza pogody
dla Krakowa znajduje się pod adresem
http://weather.yahooapis.com/forecastrss?p
=PLXX0012;
• Yahoo! Traffic (http://developer.yahoo.com/
traffic/). REST API daje nam możliwość
dostępu do bieżących danych o natężeniu
ruchu ulicznego w żądanej lokalizacji;
• Yahoo! HotJobs
(http://developer.yahoo.com/hotjobs/). Dzię-
ki faktowi, że ogłoszenia pracy w serwi-
sie Yahoo możemy przeglądać wyszu-
kując m.in. po nazwach miast, możliwe
jest stworzenie aplikacji łączącej tę usłu-
gę wraz z mapami. Rezultat może być na-
prawdę ciekawy;
• Yahoo! Travel (http://developer.yahoo.com/
travel/). REST API pozwala nam na dostęp
do danych zawierających informacje o wy-
cieczkach, ciekawych miejscach, możli-
wych połączeniach lotniczych czy miej-
scach hotelowych. Aplikacja stworzona
w oparciu o takie rozwiązanie może udo-
stępnić użytkownikom nowe, przyjazne
podejście do tej tematyki.
Możemy również użyć gotowych biblio-
tek stworzonych pod ActionScript 3.0 uła-
twiających korzystanie z udostępnionych
przez Yahoo serwisów. Biblioteka ta to
Yahoo! Astra Web Library. Aby się z nią
zapoznać, należy odwiedzić stronę http://
developer.yahoo.com/flash/astra–webapis/. Dzię-
ki niej mamy uproszczony dostęp np. do
Yahoo! Weather.

Yahoo Maps ActionScript 3.0 API

Stronę projektu znajdziemy pod adresem http:
//developer.yahoo.com/flash/maps/index.html.
Jak już wcześniej wspomnieliśmy, znajdzie-
my tu dostęp do bardzo dobrej dokumenta-
cji API (http://developer.yahoo.com/flash/maps/
classreference/index.html), wprowadzenie do bi-
blioteki (http://developer.yahoo.com/flash/maps/
using.html) oraz liczne przykłady użycia jej róż-
nych elementów (http://developer.yahoo.com/
flash/maps/examples.html).
Aby móc skorzystać z biblioteki, instalu-
jemy środowisko Flex (do pobrania z http:
//www.adobe.com/products/flex lub z płyty
dołączonej do magazynu). Ze strony http://
developer.yahoo.com/flash/maps/index.html po-
bieramy aktualną wersję komponentu Yahoo
Maps for ActionScript 3.0. W pliku .zip znaj-
dziemy m.in. skompilowaną bibliotekę Yaho-
oMap.swc (w katalogu Build). Plik ten umiesz-
Rysunek 1. Przykład własnej aplikacji – mapa z danymi o włamaniach do budynków czamy w katalogu libs tworzonych we Flex Bu-
ilderze aplikacji. Aby móc w pełni korzystać
Listing 2. Modyfikacja funkcji onGeocodeSuccess() z serwisu Yahoo Maps, będziemy potrzebo-
wać jeszcze swój klucz API, potrzebny pod-
private function onGeocodeSuccess(event:GeocoderEvent):void czas inicjalizacji mapy. Aby go otrzymać, re-
{ jestrujemy naszą aplikację pod adresem http:
var result:GeocoderResult = _address.geocoderResultSet.firstResult; //developer.yahoo.com/wsregapp/index.php.
Przejdźmy teraz do najprostszego przykładu
_yahooMap.zoomLevel = result.zoomLevel; zastosowania komponentu (Listing 1.). Aby
_yahooMap.centerLatLon = result.latlon; móc umieścić obiekt mapy w naszym projek-
cie, musimy umieścić go jako element kompo-
for (var i:int = 0; i < 10; i++)
{
var latlon:LatLon = new LatLon(result.latlon.lat + Math.random() * 0.1,
result.latlon.lon + Math.random() * 0.1);
var marker:SimpleMarker = new SimpleMarker();
marker.latlon = latlon;

_yahooMap.markerManager.addMarker(marker);
}
} Rysunek 2. Wskaźnik graficzny stworzony w
programie Flash

34 FLEX
 Tworzenie aplikacji wykorzystujących mapy w Adobe Flex

nentu UIComponent. Dzieje się tak, ponieważ
dostarczone przez Yahoo rozwiązanie dzie-
dziczy bezpośrednio po Sprite. Przeanali-
zujmy przykład z Listingu 1. Po zakończeniu
tworzenia aplikacji wywoływana jest funkcja
onCreationComplete(). W niej przechwytu-
jemy parametr przekazany do Flexa zawiera-
jący nasz klucz API:
var appid:String = Application.application.
parameters.appid;
Następnie tworzymy obiekt YahooMap, doda-
jemy jako odbiorcę zdarzenia zakończenia ini-
cjalizacji tego komponentu funkcję handleMap
Initialize()oraz wywołujemy metodę inicja-
lizującą mapę, przekazując jej nasz klucz oraz
rozmiar okna, w którym jest wyświetlana:
_ yahooMap = new YahooMap();
_yahooMap.addEventListener(YahooMapEvent
.MAP_INITIALIZE, handleMapInitialize);
_yahooMap.init(appid,mapContainer.width,
mapContainer.height);
Kolejne linijki to: dodanie obiektu do wspo-
mnianego UIComponent oraz nasłuchiwanie
zdarzenia zmiany rozmiarów komponen-
tu kontenera mapy oraz, w wypadku wystą-
pienia zdarzenia, wywołanie odpowiedniej
funkcji:
mapContainer.addChild( _ yahooMap);
mapContainer.addEventListener(ResizeEvent
.RESIZE, onMapContainerResize);
Następne linijki umożliwiają dodanie do
obiektu mapy odpowiednich elementów uła-
twiających korzystanie z mapy, są to m.in.:
Pan Control – element umożliwiający prze-
ciąganie mapy, Type Control – przełącza-
nie pomiędzy typami widoków, Scale Bar
– wyświetla aktualną skalę mapy oraz Zoom
Widget – pozwala na zmianę przybliżenia:
_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();
_yahooMap.addScaleBar();
Po zakończeniu inicjalizacji mapy możemy
wykonać dodawanie do niej elementów, np.
wskaźników na mapie (Marker) czy usta-
lić punkt centralny, na który ustawi się no-
wo załadowana mapa. W naszym prostym
przykładzie wykorzystaliśmy bardzo przy-
datny element biblioteki Yahoo Map, ja-
ką jest mechanizm dekodujący zapytanie
(w postaci obiektu Adress) do konkretnej lo-
kalizacji geograficznej zawierającej dokład-
ne współrzędne oraz zalecany poziom zbli-
żenia. Zwracany w wyniku zapytania obiekt
(GeocoderResult) zawiera również inne da-

Listing 3. Tworzenie CustomMarker.as

package this.adress = customAdress;

{ this.imageURL = customImageURL;
import com.yahoo.maps.api.markers.Marker;
this.marker = new FlashMarker();
import flash.display.Loader; this.marker.filters = [this.dropShadowFilter];
import flash.display.MovieClip; this.addChild(this.marker);
import flash.events.MouseEvent;
import flash.filters.BitmapFilterQuality; this.toolTip = this.drawToolTip();
import flash.filters.DropShadowFilter; this.addChild(this.toolTip);
import flash.net.URLRequest; }
import flash.text.TextField;
import flash.text.TextFormat; private function onMouseOver(event:MouseEvent):void
{
public class CustomMarker extends Marker this.promoteToTop();
{
private var dropShadowFilter:DropShadowFilter = new if(this.toolTip) this.toolTip.visible = true;
DropShadowFilter(0, 0, 0, 1, 12, 12, }
1.5, 3);
private function onMouseOut(event:MouseEvent):void
private var marker:MovieClip; {
private var toolTip:MovieClip; if(this.toolTip) this.toolTip.visible = false;
}
private var adress:String;
private var imageURL:String; private function drawToolTip():MovieClip
{
public function CustomMarker(customName:String, var toolTipMC:MovieClip = new MovieClip();
customAdress:String, customImageURL: toolTipMC.graphics.beginFill(0x3c3c3c, 0.66);
String) toolTipMC.graphics.drawRoundRect(–80, –155, 160, 125,
{ 10, 10);
super(); toolTipMC.graphics.endFill();
toolTipMC.visible = false;
this.addEventListener(MouseEvent.MOUSE_OVER,
this.onMouseOver); var name:TextField = new TextField();
this.addEventListener(MouseEvent.MOUSE_OUT, name.width = 160;
this.onMouseOut); name.height = 20;
this.addEventListener(MouseEvent.ROLL_OUT, name.x = –80;
this.onMouseOut); name.y = –150;
name.text = this.name;
this.name = customName;

www.sdjournal.org 35
 ADOBE FLEX
ne, np. nazwę państwa, miasta, hrabstwa
(w Polsce – powiatu), kod kraju, kod pocz-
towy itp. Możemy oczywiście wykonać za-
pytanie o wiele elementów naraz. Pamiętaj-
my jednak, wykonywane są one asynchro-
nicznie, co wymusza na nas kontrolę odbie-
ranych danych. Przyjrzyjmy się zawartości
funkcji handleMapInitialize():
_address = new Address("warszawa");
_address.addEventListener(GeocoderEvent.
GEOCODER_SUCCESS,
onGeocodeSuccess);
_address.geocode();
Tworzymy obiekt Adress, przekazując do nie-
go treść zapytania. Następnie, jako odbiorcę
zdarzenia powodzenia zapytania, ustalamy
funkcję onGeocodeSuccess(). Kolejna linijka
wykonuje zapytanie. Przejdźmy więc do funk-
cji odbierającej wymienione zdarzenie. Po ode-
braniu rezultatu w postaci zdarzenia, na jego
podstawie ustalamy poziom zbliżenia mapy
oraz jest punkt centralny (obiekt LatLon):
var result:GeocoderResult = _ address.geoco
derResultSet.firstResult;
_yahooMap.zoomLevel = result.zoomLevel;
_yahooMap.centerLatLon = result.latlon;
Ostatnią funkcją jest onMapContainerResize().
Jak już wcześniej wspomnieliśmy, wywoływa-
na ona jest automatycznie po zmianie rozmia-
ru komponentu zawierającego mapę. Aby za-
pewnić poprawne wyświetlanie mapy, musimy
upewnić się, że nowe wartości zostaną przeka-
zane jej obiektowi1. Spowoduje to przerysowanie
elementów składowych (mapa, wskaźniki, ele-
menty interfejsu mapy). W naszym przykładzie
sytuacja ta wystąpi w momencie zmiany rozmia-
rów okna przeglądarki. Zadanie to jest realizowa-
ne wywołaniem odpowiedniej metody:
_yahooMap.setSize(mapContainer.width,mapCon
tainer.height);
Listing 4. Załączenie pliku swf
package
{ (event:GeocoderEvent):void
import flash.display.MovieClip;
[Embed("Marker.swf", symbol="MarkerRed")]
public class FlashMarker extends
MovieClip
{
public function FlashMarker()
{ new CustomMarker
super();
} customMarker.latlon = result.latlon;
} _yahooMap.markerManager.addMarker(customMarker);
} }
36
Jak widzimy zastosowanie komponentu
YahooMap jest bardzo proste, a jego stosowanie
logiczne.
Dodanie wskaźników do mapy
Wizualizacja danych w aplikacjach wykorzy-
stujących mapy odbywa się poprzez zastoso-
wanie wskaźników (Markers), które zosta-
ją umieszczone w odpowiadających im po-
zycjach. W dalszej części omówimy umiesz-
czanie prostych wskaźników, jak i stworzenie
własnych oparte na stworzonych przez nas ele-
mentach graficznych.
Zarządzaniem wskaźnikami zajmuje się
klasa MarkerManager. Przy użyciu kompo-
nentu YahooMap, używając standardowej kla-
sy map, biblioteka sama stworzy dla nas odpo-
wiedni obiekt. Następnie będziemy mogli do
niego dodawać wskaźniki, upewniając się, tyl-
ko aby miały one poprawne dane geograficzne.
Jako wskaźników użyjemy prostych obiektów
SimpleMarker. Są one wbudowane w omawia-
ną bibliotekę. Rozszerzmy więc poprzedni
przykład. Dodamy wokół punktu centralne-
go kilka losowo umieszczonych wskaźników.
Aby to zrobić, musimy najpierw mieć zwró-
coną treść zapytania GeoCoderResult. Mody-
fikujemy funkcję onGeocodeSuccess().
Jest to maksymalnie uproszczony przykład,
mający zobrazować zasadę działania tego me-
chanizmu. Aby stworzyć własny wskaźnik, roz-
szerzamy klasę Marker. Klasa ta posiada już kil-
ka przydatnych dla nas właściwości, jak np. ad-
res, własne dane geograficzne, referencję do
obiektu mapy, na której jest umieszczony, naj-
większy i najmniejszy poziom zbliżenia, przy
którym wskaźnik jest widoczny, a także cha-
rakterystyczny identyfikator grupy wskaźni-
ków. Jeżeli chcemy przyporządkować wskaź-
niki do takiej grupy, będziemy mogli pobierać
tablicę zawierającą referencję do wszystkich jej
elementów z poziomu obiektu MarkerManager.
Przyda się to np. w sytuacji, gdy chcemy szyb-
ko ustawić danej grupie pewne właściwości, np.
ich widoczność.
Listing 5. Modyfikacja funkcji onGeocodeSuccess
private function onGeocodeSuccess
{
var result:GeocoderResult = _address.geocoderResultSet.firstResult;
_yahooMap.zoomLevel = result.zoomLevel;
_yahooMap.centerLatLon = result.latlon;
var customMarker:CustomMarker =
("Przyklad", "Warszawa, Centrum", "icon.jpg");
Załóżmy, że na potrzeby projektu musimy
stworzyć wskaźniki graficzne według projektu
graficznego, który nam dostarczono. Najprost-
szy sposób, w jakim możemy tego dokonać to
wykonać odpowiednie grafiki w programie
Flash, wyeksportować je do plików SWF, które
to z kolei możemy wprowadzić do naszej aplika-
cji. Zacznijmy więc od początku – tworząc grafi-
kę. Przykład zamieszczony jest na Rysunku 2.
Wygodne jest stworzenie wskaźników w
aplikacji Flash, bo tworzonym elementom
możemy automatycznie przyporządkować
punkt odniesienia. Jest to o tyle ważne, że
nie musimy później pamiętać o przesunięciu
wskaźników. Sytuacja taka zdarzyłaby się przy
użyciu np. grafik .png, które są pozycjonowa-
ne w swoim górnym lewym rogu. Aby tego
uniknąć, musimy korzystać ze specjalnej kla-
sy, CustomImageMarker.
Mając przygotowany wskaźnik w posta-
ci pliku .swf, przygotujemy klasę dziedziczą-
cą po Movie Clip, który będzie go zawierać.
Obrany tu przeze mnie sposób dobrze ilustru-
je, jak możemy szybko osiągnąć pożądany re-
zultat. Przy użyciu wielu różnych wskaźni-
ków najlepiej jest stworzyć we Flashu odpo-
wiedni plik zawierający, który je zawiera, i na-
pisać metody, które będą zwracały nam od-
powiednie obiekty. Całość eksportujemy do
Flexa za pomocą narzędzia Flex Component
Kit for Flash (http://www.adobe.com/go/flex3_
cs3_swfkit). Wracając do omawianego przy-
kładu, napiszmy klasę Movie Clip zawierający
plik Flash (Listing 4.). Mając gotowy do uży-
cia symbol graficzny, możemy stworzyć wła-
sny wskaźnik. Załóżmy, że chcemy wykorzy-
stać przygotowaną grafikę, a klient dodatko-
wo żąda od nas wyświetlenia dymku z infor-
macją o danej lokalizacji, zawierającego dodat-
kowo pewną ikonkę. Tworzymy plik Custom-
Marker.as (Listing 3.).
Omówmy ten przykład. Do konstruktora
wskaźnika przekazujemy jego nazwę, pewien
adres (pojawi się on w dymku), oraz adres URL
obrazka, który chcemy załadować. Nasłuchiwa-
FLEX

nie zdarzeń związanych z ruchem myszki po-
zwoli na pokazanie lub ukrycie podpowiedzi.
Stworzony wcześniej FlashMarker dodajemy
do naszego wskaźnika poprzez (dodajemy do
niego również cień):
this.marker = new FlashMarker();
this.marker.filters =
[this.dropShadowFilter];
this.addChild(this.marker);
Funkcja drawToolTip() powinna być dosko-
nale zrozumiała dla osób na co dzień korzy-
stających z aplikacji Flash i języka Action-
Script. Ręcznie rysujemy w niej dymek, do-
dajemy i formatujemy tekst, który ma się
w nim ukazać a także ładujemy i wyświetla-
my żądany obrazek. Powróćmy do głównego
pliku naszej aplikacji i zmodyfikujmy funkcję
onGeocodeSuccess() (Listing 5.). Wynik na-
szej pracy możemy zobaczyć na Rysunku 3.
Rysunek 3. Wskaźnik na mapie
Rysunek 4. Aplikacja Flex z ASTRA Web Services
www.sdjournal.org
Tworzenie aplikacji wykorzystujących mapy w Adobe Flex
Możliwości bilioteki
Yahoo Maps Actionscript 3.0 API
Większość elementów biblioteki zosta-
ła doskonale omówiona na stronie http:
//developer.yahoo.com/flash/maps/examples.html.
Przedstawione tam przykłady zawierają pod-
gląd źródła, możemy więc zapoznać się krok po
kroku z kolejnymi funkcjami tego API. Wstęp-
nie zapoznaliśmy się z możliwością zadawania
zapytań o adres, pozycjonowaniem wskaźni-
ków, a także z tworzeniem własnych obiektów
służących do wyświetlania danych. Przejrze-
nie przykładów ze wspomnianej strony pozwo-
li nam na zrozumienie zasad:
• Obsługi kolejnych zdarzeń komponentu
YahooMap ;
• Rysowania polilinii w przedstawianych
mapach (jest to o tyle łatwe, że kolejne
wierzchołki możemy definiować za pomo-
cą współrzędnych geograficznych);
• Rysowania tzw. Geodesic Polyline, są to spe-
cyficzne krzywe, często wykorzystywane
przy aplikacjach wykorzystujących mapy;
• Rysowania na mapach własnych kształ-
tów, są one przechowywane w specjalnej
warstwie;
• Korzystania z serwisu Yahoo! Local Se-
arch. Umożliwia on znajdowanie obiek-
tów zainteresowań w bazie serwisu Yahoo!
i umieszczania ich na prezentowanej ma-
pie;
• Zbudowania serwisu w oparciu o biblio-
tekę Yahoo Maps oraz ASTRA Web API –
korzystającej z danych meteorologicz-
nych.
Zakończenie
Podczas wykonywania tego typu aplikacji pa-
miętajmy o pewnych ograniczeniach technicz-
nych – spotkamy się z nimi na pewno w apli-
kacji opierającej się o setki lub tysiące punktów
na mapach. Tworzenie zapytań o ich współ-
rzędne geograficzne przy każdym urucho-
mieniu aplikacji jest dalece niepraktyczne. Za-
miast tego upewnijmy się, że dane o punktach
przechowywane przez nas w bazie będą miały
również współrzędne. Możemy tego dokonać,
zapisując każdy punkt w bazie, wywoławszy
wcześniej odpowiedni Web Service, np. Geo-
coding API udostępnione przez Yahoo (http://
developer.yahoo.com/maps/rest/V1/geocode.html).
Co ważne – posiada on limit 5000 zapytań
na dobę.
Zapoznaliśmy się z możliwościami użycia bi-
blioteki Yahoo Maps Actioncript 3.0 API.
Wykorzystując ją (lub inne wcześniej wspo-
mniane), możemy budować bardzo ciekawe
serwisy, których funkcjonalności były wcze-
śniej trudne do osiągnięcia klasycznymi tech-
nikami. Platforma Flex umożliwia nam bar-
dzo łatwą komunikację z dziesiątkami Web Se-
rvices na świecie, przy wykorzystaniu serwisów
typu Yahoo! Pipes (urzeczywistnienia zasady
Web As Platform). Nawet trywialne przykłady
zastosowania przy użyciu tej technologii, mo-
gą być ciekawie przedstawione – np. ile hoteli
znajduje się w promieniu pięć minut jazdy tak-
sówką od centralnego punktu odwiedzanych
przeze mnie miast?
WOJCIECH PTAK
Od 2 lat konsultant i programista Adobe Flex oraz
Adobe Integrated Runtime (AIR) (przez rok obejmo-
wał to stanowisko w norweskiej firmie Making Wa-
ves). Wykonał w całości m.in. aplikację Kalkulator
Energetyczny Vattenfall, która została wyróżnio-
na w międzynarodowym konkursie Webby Awards
2008. Aktualnie pracuje dla takich klientów jak Adi-
das, Heineken, Coca–Cola, Schweppes czy British
Telecom, dostarczając kompleksowe aplikacje B2B
oparte o Adobe Flex oraz AIR.
37
 ADOBE FLEX

Flex na Javie
Historia Adobe Flex sięga marca 2004 roku, kiedy pojawiło się pierwsze wydanie
tego zbioru technik wytwarzania tzw. bogatych aplikacji internetowych (Rich
Internet Application – RIA). Bazuje on na platformie Flash. Pierwsze wydanie
(Macromedia) zawierało SDK, IDE oraz aplikację Flex Data Services zbudowaną
za pomocą J2EE. W 2005 roku firma Macromedia została przejęta przez Adobe
i Flex Data Services przemianowano na LiveCycle Data Services.

rego możemy pobrać ze strony domowej pro-

Dowiesz się...
• W jaki sposób tworzyć aplikacje RIA, na przy-
kładzie forum, wykorzystując różne technolo-
gie Internetowe, a w szczególności Javę, a tak-
że SQL, JSP oraz Flex.
Poziom trudności
Powinieneś wiedzieć...
• W jaki sposób korzystać z SQL (także z pozio-
mu Javy). Znać podstawy JSP, RIA, Flex.
(znane użytkownikom Flasha) oraz odpowied-
nie pliki .html, w których osadzone będą pliki
.swf. Po uruchomieniu strony w przeglądarce,
zostanie załadowany odtwarzacz Flasha, który
można uruchomić bez włączania strony, a włą-
czając jedynie plik .swf. I voila! Możemy cieszyć
jektu Adobe Flex lub z płyty DVD. Dostępna
jest wersja 60-dniowa, którą możemy wyko-
rzystywać do celów niekomercyjnych. Przygo-
towano także specjalną edycję dla studentów.
W przypadku użytkowników Linuksa, poja-
wiło się światełko w tunelu – wydana zosta-
ła wersja alfa Flex Buildera, którą można po-
brać i zainstalować jako wtyczkę do Eclipse.
Flex Builder nie jest niezbędny, jednak przy-
daje się, jeśli chcemy nasze aplikacje budować
w sposób graficzny. Jeśli nie, wystarczy zwy-
kły notatnik, bo kompilację i tak przerzucimy
na nasz serwer, o którym za chwilę.

W
lutym 2008 roku ukazała się trze- się naszą aplikacją. Instalacja przebiega bezproblemowo. Kli-
cia wersja Flex SDK wydana na O Flexie można by dużo mówić. Nie będę kamy jedynie przycisk Dalej, w odpowiednim
Mozilla Public License. Jednak na jednak dłużej owijał w bawełnę i powiem krót- miejscu akceptujemy licencję i czekamy na za-
licencji ogólnej wciąż prawa pozostają Adobe ko – stwórzmy coś! kończenie kopiowania plików. Po zakończonej
Flash Player, który pozwala uruchamiać apli- instalacji, w menu Start czeka na nas Flex Buil-
kacje flashowe oraz flexowe i Flex Builder, czy- Instalujemy i konfigurujemy der. Uruchamiamy go i naszym oczom ukazu-
li IDE (używane do budowania aplikacji flexo- Przygotujmy sobie środowisko pracy. Co ro- je się GUI znane z Eclipse, zatem osoby, któ-
wych) oparte o Eclipse. bimy? Programujemy we Fleksie. Do tego ce- re miały już wcześniej do czynienia z tym śro-
We Flexie wykorzystano MXML, czyli lu będziemy potrzebowali Flex Buildera, któ- dowiskiem, bez problemu się w nim odnajdą.
XML’owy język służący do opisu interfejsu
użytkownika, XMLHttpRequest, czyli obiekt
służący do wykonywania zapytań do serwe-
rów, ActionScript, czyli język programowania
bazujący na specyfikacji ECMAScript.
Alternatywnymi technologiami są: Open-
Laszlo, AJAX, XUL, JavaFX, Silverlight.
Ogólny schemat wytwarzania i działania
aplikacji flexowych jest bardzo prosty. Tworząc
nowy projekt, przygotowujemy pliki .mxml,
w których opisujemy cały interfejs użytkowni-
ka, zaczynając od tego, jakie obiekty będą na
nim widoczne, poprzez obsługę zdarzeń, a koń-
cząc na skryptach, pozwalających dynamicznie
zmieniać stany tejże aplikacji. Następnie mo-
żemy dorzucić jakieś pliki, w których zakodu-
jemy kilka klas za pomocą ActionScriptu, czy
Javy lub pliki .xml, które będą przechowywać
różne dane. Po zakończeniu prac programi-
stycznych, przychodzi czas na kompilację. IDE
wygeneruje nam plik lub zestaw plików .swf Rysunek 1. Okno rejestracji

38 FLEX

Jeśli jednak masz pewne problemy, to nie oba-
wiaj się – poprowadzę Cię za rękę.
W artykule wykorzystamy także język Java,
zatem warto doinstalować wtyczkę pozwala-
jącą na programowanie w tymże języku za po-
mocą Flex Buildera. Aby to zrobić, klikamy
kolejno Help>Software Updates>Find and In-
stall. W oknie, które się pojawi, zaznaczamy
opcję Search for new features to install, klikamy
przycisk Next i na liście zaznaczamy pozycję
The Eclipse Project Updates. Gdy otrzymamy li-
stę pakietów, które możemy zainstalować, od-
szukujemy najnowszą wersję Eclipse Java De-
velopment Tools i przystępujemy do jej insta-
lacji. Zaopatrzmy się także w specjalnie przy-
gotowany i skonfigurowany serwer FDS-Tom-
cat, który pobrać można z Internetu (link
w ramce). Rozpakujmy go najlepiej na dysk C,
po czym (korzystając z konsoli), przejdźmy
do folderu C:\fds-tomcat\bin i wpiszmy pole-
cenie catalina run. Musimy pamiętać o tym,
że potrzebna jest zdefiniowana zmienna śro-
dowiskowa JAVA_HOME. Można ją zdefiniować
albo za pomocą narzędzi systemowych, albo
zdefiniować ją tymczasowo, nieco modyfi-
kując polecenie: JAVA_HOME=dysk:\sciezka\
do\javy\ catalina run. Okno konsoli mo-
żemy zminimalizować, ale nie należy go za-
mykać. FDS-Tomcat bez problemu działa tak-
że na Linuksie (na moim laptopie czas startu
serwera pod Linuksem był blisko dwukrotnie
krótszy!), a uruchamiany jest analogicznie jak
na innych platformach, pamiętając o zmien-
nej JAVA_HOME – JAVA_HOME=/sciezka/do/
javy/ ./catalina.sh run, uprzednio na-
dając prawa wykonania pliku poprzez po-
lecenie chmod +x catalina.sh. W syste-
mie Windows, Java znajduje się domyślnie
w C:\Program Files\Java\jre-numer-wersji\,
natomiast w moim Linuksie (Ubuntu) pod
ścieżką /usr/share/java-numer-wersji/. Może-
my także skorzystać z ręcznie postawionego
Tomcata oraz jakiejś bazy danych SQL (np.
MySQL) zamiast z FDS-Tomcata, który nie
jest dość stabilny i bezpieczny do codzienne-
go użytku, natomiast do celów edukacyjnych
nadaje się znakomicie. Instalację i konfigura-
cję pozostawiam drogi czytelniku Tobie – wy-
starczy zajrzeć do dokumentacji wyżej wy-
mienionych projektów. Uwaga dla tych, któ-
rzy zdecydują się samodzielnie ustawić ser-
wer: domyślnie skonfigurowany Tomcat nie
skompiluje plików .mxml, a FDS-Tomcat tak.
W artykule proces kompilacji został pominię-
ty i przerzucony właśnie na FDS-Tomcat, tak-
że w przypadku korzystania z czystego Tom-
cata należy go albo przekonfigurować, albo
we Flex Builderze skompilować plik .mxml do
pliku .swf i umieścić go w odpowiednim kata-
logu, do którego Tomcat sięgnie wyświetlając
strony internetowe.
To tyle, jeśli chodzi o przygotowania. Śro-
dowisko jest podzielone na trzy główne czę-
ści – w środkowej piszemy kod, po bokach ma-
www.sdjournal.org
Flex na Javie
my przydatne narzędzia, na dole konsolę in- db\flexdemodb.script, który zawiera komplet-
formująca o błędach itp. Jeśli natomiast cho- ny opis bazy danych. Wszystkie operacje na
dzi o FDS-Tomcat, najważniejsze, co musimy tej bazie danych w trakcie działania serwera
wiedzieć jest to, że przy uruchomieniu ser- wykonywane są w pamięci, a dopiero podczas
wera wczytywany jest m.in. plik fds-tomca\ poprawnego zamknięcia serwera, zmodyfiko-
Listing 1. Pierwsza aplikacja
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ApplicationControlBar x="239" y="36" dock="true" height="60">
<mx:Label text="FlexForum" fontSize=”25”/>
</mx:ApplicationControlBar>
</mx:Application>
Listing 2. Dodajemy stopkę
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ApplicationControlBar x="239" y="36" dock="true" height="60">
<mx:Label text="FlexForum" fontSize=”25”/>
</mx:ApplicationControlBar>
<mx:Label text="(C) 2008" horizontalCenter="0" bottom="0"/>
</mx:Application>
Listing 3. FlexForum.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="logged">
<mx:RemoveChild target="{lpBox}"/>
<mx:RemoveChild target="{registerButton}"/>
<mx:RemoveChild target="{loginButton}"/>
<mx:AddChild relativeTo="{lrBox}" position="lastChild">
<mx:LinkButton id="logoutButton" label="Logout" click="logout()"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script source="as/FlexForum.as"/>
<mx:ApplicationControlBar x="0" y="0" dock="true" height="65">
<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPo
licy="off">
<mx:Image source="logo.png" scaleContent="true" width="100%" height="100%"/>
<mx:VBox verticalCenter="0" right="0">
<mx:HBox id="lpBox" width="100%" height="100%">
<mx:Label text="Login"/>
<mx:TextInput id="loginTextInput" width="80"/>
<mx:Label text="Password"/>
<mx:TextInput id="passwordTextInput" width="80"/>
</mx:HBox>
<mx:HBox id="lrBox" width="100%" height="100%">
<mx:Spacer width="100%"/>
<mx:LinkButton id="loginButton" label="Login" click="login()"/>
<mx:LinkButton id="registerButton" label="Register" click="showRegisterPopUp()"/>
<mx:Spacer width="100%"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:Label text="(C) 2008" horizontalCenter="0" bottom="0"/>
<mx:HTTPService id="srv" url="http://localhost:8600/FlexForum/Login.jsp"
method="POST" result="srvResult(event)"/>
</mx:Application>
39
 ADOBE FLEX
wane dane zapisywane są ponownie w tym
samym pliku. Baza ta nie jest w żaden spo-
sób szyfrowana, jest to plik napisany w czy-
stym SQL.
Pora zabrać się do pracy. Zaczynamy od
stworzenia nowego projektu. W tym ce-
lu klikamy File>New>Flex Project. Nazwijmy
go FlexForum. Możemy teraz zmienić ścież-
kę, pod którą przechowywane będą pliki źró-
dłowe (i wynikowe). Wprowadźmy więc:
C:\fds-tomcat\webapps\ROOT\FlexForum.
Mamy także możliwość wyboru typu aplikacji
– webowa, oparta na Flash Player albo deskto-
powa, oparta na Adobe Air. W naszym przy-
padku decydujemy się na aplikację webową
i klikamy Next. Następnie wybieramy miejsce,
w którym przechowywane będą skompilowa-
ne pliki. Zostawmy to pole puste, tak aby pli-
ki te pojawiały się w katalogu głównym naszej
aplikacji. Idąc dalej, wybieramy folder dla ko-
dów źródłowych, które także powinny znajdo-
wać się w katalogu głównym, więc zostawmy
także to pole puste. Klikamy Finish. Wyłącz-
my automatyczne budowanie projektu (gdyż
zadba o to serwer FDS-Tomcat), odznaczając
opcję Project>Build Automatically.
Kodujemy
Zauważmy, że w głównej części okna pojawia
się niebieski obszar, a nad nim przyciski Sour-
ce oraz Design, dzięki czemu możemy swobod-
nie przełączać się między trybami programo-
wania a projektowania. Będąc w trybie pro-
jektowania, po lewej stronie znajduje się za-
kładka Components, z której możemy przecią-
gać kontrolki do naszej aplikacji oraz zmieniać
ich właściwości za pomocą elementów znajdu-
jących się na zakładce Flex Proporties po pra-
wej stronie.
Dodajmy więc do naszej aplikacji kontro-
lkę ApplicationControlBar (znajduje się ona
w sekcji Layout) i ustawmy jej właściwość Dock
na true, a Height na 60. Teraz do Application-
ControlBar dodajmy komponent Label (sek-
cja Controls), a właściwość Text ustawiamy na
FlexForum. Przełączmy się teraz do trybu So-
urce (patrz Listing 1.). Jego pierwsza nagłów-
kowa linia pozostaje bez zmian, gdyż jest do
dokument typu XML. Ciekawsze natomiast
W Sieci
• http://www.adobe.com – Strona domo-
wa firmy Adobe
• http://www.adobe.com/products/flex/
Flex Builder
• http://www.flex.org – Strona społeczno-
ści Flexa
• http://www.riadocs.com – Artykuły i do-
kumenty na temat RIA
• http://livedocs.adobe.com/flex/3/html/
index.html – Pomoc do Adobe Flex 3
• http://coenraets.org/download/fds-tom-
cat.zip – FDS-Tomcat
40
Listing 4. Register.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
title="Register" close="PopUpManager.removePopUp(this)"
showCloseButton="true" x="{this.parentApplication.width/
2 - this.width/2}" y="{this.parentApplication.height/2 -
this.height/2}">
<mx:Script source="../as/Register.as"/>
<mx:Form width="100%" height="100%">
<mx:FormItem label="Login">
<mx:TextInput id="login"/>
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput id="password" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem label="E-Mail">
<mx:TextInput id="email"/>
</mx:FormItem>
<mx:FormItem label="Gender">
<mx:HBox width="100%" height="100%">
<mx:RadioButtonGroup/>
<mx:RadioButton id="male" label="Male" groupName="" selected="true"/>
<mx:RadioButton id="female" label="Female" groupName=""/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem>
<mx:HBox width="100%" height="100%">
<mx:Button label="Register" click="register()"/>
<mx:Button label="Cancel" click="hideRegisterPopUp()"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
<mx:HTTPService id="srv" url="http://localhost:8600/FlexForum/Register.jsp"
method="POST" result="srvResult(event)"/>
</mx:TitleWindow>
Listing 5. FlexForum.as
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
import views.Register;
public function login() : void {
var p : Object = new Object();
p.login = loginTextInput.text;
p.password = passwordTextInput.text;
srv.send(p);
}
public function logout() : void {
this.currentState='';
}
public function showRegisterPopUp() : void {
PopUpManager.createPopUp(this, views.Register, true);
}
public function srvResult(event : ResultEvent) : void {
var tmp : String = event.result.login;
if (tmp == "Success")
this.currentState = 'logged';
else if (tmp == "Failure")
PopUpManager.createPopUp(this, views.LoginFail, true);
}
FLEX

są kolejne linie. Najpierw tworzymy obiekt
typu <mx:Application>, a w nim dwa kolej-
ne obiekty – <mx:ApplicationControlBar>,
które zawierają w sobie <mx:Label>. Za-
uważmy, że wszystkie te obiekty znajdują
się w klasie mx. Każdy obiekt opisywany jest
przez pewne parametry. Pamiętamy, że usta-
wiliśmy wartość dock naszego Application-
ControlBar na true i jest to widoczne w ko-
dzie źródłowym aplikacji. Możemy teraz za-
pisać projekt oraz uruchomić go wpisując
w przeglądarce adres: http://localhost:8600/
FlexForum/FlexForum.mxml. Pamiętajmy, że
wielkość liter ma znaczenie. Pierwsze załado-
wanie (po każdej modyfikacji kodu źródłowe-
go lub restarcie serwera) potrwa odrobinę dłu-
żej ze względu na konieczność rekompilacji.
W tym momencie serwer sam skompiluje plik
uwzględniając wszystkie wcześniej przygoto-
wane opcje konfiguracyjne.
Teraz, w trybie Source, poniżej Applica-
tionControlBar dodajmy kolejny Label, tak
by nasz kod prezentował się jak na Listingu
2., a poprzedni Label wzbogaćmy o parametr
fontSize=”25”. Ustalamy, jaki tekst ma zo-
stać wyświetlony, w jakiej odległości od hory-
zontalnego środka oraz w jakiej odległości od
dołu. Ostatnie dwa parametry pozwalają na
dynamiczne (w zależności od rozmiaru okna)
ustalenie się położenia etykiety (ang. label). Po
zapisaniu pliku przełączamy się do trybu De-
sign i zauważamy, że u dołu aplikacji pojawiła
się nasza stopka. Efekt dynamicznego dostoso-
wania położenia można uzyskać także w tym
trybie poprzez zaznaczenie interesującego nas
obiektu i ustaleniu odpowiednich właściwości
w sekcji Layout na zakładce Flex Proporties. Za-
pisujemy projekt i w przeglądarce odświeża-
my stronę.
Jak widzimy, mamy do dyspozycji dwa tryby
tworzenia aplikacji. W zależności od potrzeb,
jeden z nich będzie wygodniejszy, od drugiego.
Przejdźmy do konkretów. Klikając prawym
przyciskiem na projekt, utwórzmy dwa folde-
ry – views i as. W pierwszym z nich utwórz-
my nowy MXML Component o nazwie Regi-
ster.mxml, (pola width i height zostawiamy
puste, natomiast w polu Based on wybiera-
my TitleWindow), a w drugim nowy Action-
Script File o nazwie FlexForum.as i o nazwie
Register.as. Otoczmy wszystko, co znajdu-
je się w ApplicationControlBar, za pomocą
<mx:Canvas> i dodajmy kilka dodatkowych
elementów jak skrypt, kontenery czy spacery.
Kod powinien prezentować się tak, jak na Li-
stingu 3. Proponuję zająć się tym w trybie So-
urce, gdyż ze względu na ilość kontenerów,
ciężko będzie nam wszystko odpowiednio
poukładać. Jeżeli jednak zdecydujesz się mo-
dyfikować tę aplikację w trybie Design, aby
wiedzieć, w którym kontenerze umieszczasz
obiekt, wygodnie jest włączyć opcję Show
Surrounding Containers za pomocą klawisza
[F4] lub klikając na drugą ikonkę na prawo
www.sdjournal.org
Flex na Javie
od przycisku Design. W pliku Register.mxml ActionScript
przygotowujemy kontrolki pozwalające na Plik FlexForum.as będzie zawierał odpowied-
rejestracje – Listing 4. Efekt widoczny jest nie skrypty. Na razie umieścimy w nim funk-
na Rysunku 1. cje, zawarte na Listingu 5.
Obiekt HTTPService pozwala na wysyłanie W funkcji login przygotowujemy parame-
zapytań do zdalnego serwera (w naszym przy- try, które przekażemy metodą POST do na-
padku jest to localhost). Odwołujemy się tu- szego pliku Java Server Page. Parametry two-
taj do Register.jsp, który pobierając odpowied- rzymy poprzez przygotowanie obiektu ty-
nie parametry przekazane metodą POST, po- pu Object, a następnie odwołujemy się do
zwoli na rejestrację korzystając z przygotowa- niego przy pomocy odpowiedniej referencji
nych przez nas w Javie klas. (w naszym przypadku r), podając po kropce
Rysunek 3. Efekt po zalogowaniu.
Listing 6. Register.as
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
public function hideRegisterPopUp() : void {
PopUpManager.removePopUp(this)
}
public function register() : void {
var params : Object = new Object();
params.login = login.text;
params.password = password.text;
params.email = email.text;
params.gender = (male.selected ? "male" : "female");
srv.send(params);
}
public function srvResult(event : ResultEvent) : void {
var tmp : String = event.result.registration;
if (tmp == "Success") {
hideRegisterPopUp();
this.parentApplication.currentState = 'logged';
} else if (tmp == "Failure")
PopUpManager.createPopUp(this, views.RegisterFail, true);
}
Listing 7. Uwidaczniamy naszą klasę
<destination id="forum">
<properties>
<source>flex.Forum.Forum</source>
</properties>
</destination>
41
 ADOBE FLEX

nazwę parametru. Nazwę tę ustalamy sobie sa- cja otrzyma zwrotne dane po wysłaniu zapy- to wszystko, co znajduje się pomiędzy znacz-
mi. W pliku FlexForum.mxml przy tworzeniu tania do zdalnego serwera. W event.result nikami <login> i </login>. W zależności od
obiektu HTTPService, ustaliliśmy, iż parametr znajduje się cały dokument XML utworzony tego jaka wartość tam wystąpi, zostaną wywo-
result wskazuje na funkcję srvResult(event za pomocą kodu zawartego w pliku Login.jsp. łane odpowiednie instrukcje.
: ResultEvent) : void, zatem musimy ją Dokument ten będzie wyglądał przy udanym Ostatni plik – Register.as – ma wyglądać
także umieścić w naszym skrypcie. Funkcja logowaniu tak: <login>Success</login>. Po- tak, jak na Listingu 6.
ta jest wywoływana zawsze, gdy nasza aplika- przez odwołanie event.result.login zyskujemy Podobnie w przypadku plików Register.as
i Register.mxml mamy funkcję, która przygo-
Listing 8. Forum.java towuje parametry do zapytania wysyłanego
do zdalnego serwera oraz funkcję, która prze-
package flex.Forum; twarza dane otrzymane z tegoż serwera. Dzia-
import java.sql.Connection; ła ona na podobnej zasadzie jak w poprzednim
import java.sql.PreparedStatement; przypadku.
import javax.servlet.http.HttpServlet;
public class Forum extends HttpServlet { Java
public boolean login(String login, String password) { Zajmijmy się teraz Javą. Klikamy: File>New>
// TODO Other i wybieramy Java Project. Nazwijmy go
return true; Forum, wybierzmy przycisk Next, w kolejnym
} oknie dialogowym zmieniamy domyślny fol-
public boolean logout(String login) { der dla plików wynikowych, klikając przycisk
//TODO Browse. W oknie dialogowym wybieramy z li-
return true; sty nazwę projektu (Forum), klikamy Create
} New Folder..., gdzie zaznaczamy opcję Link
public boolean register(String login, String password, String email, String gender) to folder in the file system, po rozwinięciu sek-
{ cji Advanced. W pole, które się pojawiło, wpi-
Connection c = null; sujemy ścieżkę na C:\fds-tomcat\webapps\
PreparedStatement ps = null; ROOT\WEB-INF\classes. Ok, Ok, Finish.
try { Folder C:\fds-tomcat\webapps\ROOT\WEB-
c = ConnectionHelper.getConnection(); INF\classes\flex\Forum musi istnieć.
ps = c.prepareStatement("INSERT INTO user (login, password, email, gender, type) Od razu utwórzmy w naszym nowym pro-
VALUES (?, ?, ?, ?, ?)"); jekcie klasę o nazwie Forum, podając dla niej
ps.setString(1, login); nazwę pakietu flex.Forum. Zostaliśmy także
ps.setString(2, password); przełączeni do perspektywy Java. Możemy
ps.setString(3, email); łatwo przełączać się między perspektywami,
ps.setString(4, gender); korzystając z przycisków w menu, w prawym
ps.setString(5, "user"); górnym rogu okna Flex Buildera. Domyślna
ps.executeUpdate(); perspektywa dla projektów flexowych to Flex
} catch (Exception e) { Development.
e.printStackTrace(); Musimy teraz edytować plik C:\fds-tomcat\
} finally { webapps\ROOT\WEB-INF\flex\remoting-con-
ConnectionHelper.close(c); fig.xml, tak aby serwer wiedział, do której kla-
} sy będziemy się odwoływać. Wewnątrz sek-
return true; cji <service> (najlepiej przed jej zakończe-
} niem) musimy umiescić kod zamieszczony
} na Listingu 7.
Restartujemy serwer i wracamy do progra-
Listing 9. Register.jsp mowania. W pliku Forum.java umieszczamy
<%@ page import="flex.Forum.Forum" contentType="text/html"%> taki kod jak na Listingu 8.
<?xml version="1.0" encoding="utf-8"?> Tutaj przyda się odrobina wiedzy z zakresu
<% wykorzystania SQL z poziomu Javy. Zauważ-
Forum f = new Forum(); my, że funkcje zwracają wartości true/false.
if (f.register(request.getParameter("login"), request.getParameter("password"), Pozostaje nam jeszcze utworzyć dwa pli-
request.getParameter("email"), request.getParameter("gender")) ki w katalogu głównym naszej aplikacji inter-
== true) { netowej, czyli tam, gdzie umieszczone są pli-
%> ki .mxml. Tworzymy więc plik Register.jsp oraz
<registration>Success</registration> Login.jsp. Zawartość tych plików przedstawio-
<% no odpowiednio na Listingach 9. i 10.
} else { Aby zrozumieć o co tutaj chodzi, trze-
%> ba znać podstawy JSP. Wytłumaczę jednak
<registration>Failure</registration> wszystko w miarę zwięźle. Odwołując się do
<% serwera poprzez adres http://localhost:8600/
} FlexForum/Login.jsp serwer Tomcat zacznie
%> wykonywać instrukcje zawarte w tym pli-
ku. Pomiędzy symbolami <% i %> mamy Ja-

42 FLEX

vę, natomiast poza nimi jest XML. W pierw-
szej linii umieszczamy informację o impor-
towanych klasach. Zaznaczamy, że będzie-
my korzystać z klasy Forum, która znajduje się
w pakiecie flex.Forum. Następnie definiuje-
my typ dokumentu XML, a później przecho-
dzimy już do właściwego kodu. Zaczynamy
od utworzenia obiektu klasy Forum, po czym
na rzecz tego obiektu wywołujemy funkcję
login() z odpowiednimi parametrami. Pa-
rametry te to obiekty klasy String, wydoby-
te z obiektu request. Obiekt request posia-
da wszystkie potrzebne informacje dotyczące
klienta, który wysyła zapytanie. Możemy wy-
dobyć z niego takie dane jak adres IP, typ prze-
glądarki itp., ale w tym przypadku interesu-
ją nas jedynie parametry, które zostały prze-
kazane przez użytkownika. Piszemy więc np.
request.getParameter("login"), gdzie login,
to parametr utworzony w pliku FlexForum.as
w funkcji login() poprzez instrukcję p.login
= loginTextInput.text;.
Sprawdzamy także, jaki wynik da nam wy-
wołanie tej funkcji. Jeśli uda się zalogować,
z pewnością będzie to true. Warunkowo więc
kończymy kod, zapisując w naszym doku-
mencie XML znacznik <login>Success</
login>, po czym znów otwieramy blok kodu,
a następnie wykonujemy blok else gdzie, je-
śli coś poszło źle, znów zakończymy kod Javy
i zapiszemy w dokumencie <login>Failure</
login>.
Listing 10. login.jsp
<%@ page import="flex.Forum.Forum" contentType="text/html"%>
<?xml version="1.0" encoding="utf-8"?>
<%
Forum f = new Forum();
if (f.login(request.getParameter("login"), request.getParameter("password")) ==
false) {
%>
<login>Success</login>
<%
} else {
%>
<login>Failure</login>
<%
} tora, uwydatnienie języka, komponenty
%>
Listing 11. flexdemodb.script
CREATE SCHEMA PUBLIC AUTHORIZATION DBA
CREATE MEMORY TABLE USER(ID INTEGER GENERATED BY DEFAULT AS IDENTITY(START WITH 0) NOT
NULL PRIMARY KEY,LOGIN VARCHAR(40),PASSWORD VARCHAR(128),EMAIL
VARCHAR(65),GENDER VARCHAR(6),TYPE VARCHAR(9),LOGGED BOOLEAN,IP
VARCHAR(15))
ALTER TABLE USER ALTER COLUMN ID RESTART WITH 12
CREATE USER SA PASSWORD ""
GRANT DBA TO SA
SET WRITE_DELAY 20
SET SCHEMA PUBLIC
www.sdjournal.org
SQL
Ostatnią rzeczą, jaką musimy przygotować, to
tabele w bazie danych. W katalogu głównym
FDS-Tomcat, jest folder db, który zawiera plik
flexdemodb.script. Plik ten powinien mieć za-
wartość jak na Listingu 11.
Zostawiam Cię
Odpowiednie funkcje w plikach .java będą od-
woływać się do utworzonej tutaj tabeli, doda-
jąc do niej rekordy, modyfikując je, usuwając
itp. Aplikacja utworzona w ramach tego ar-
tykułu nie pozwala na wszystkie te operacje,
jednak możesz na własną rękę w odpowied-
ni sposób ją później rozwinąć. W przypad-
ku logowania, rekord zostanie zmodyfikowa-
ny w taki sposób, że pole LOGGED przybie-
rze wartość true, a w polu IP zapisany zosta-
nie adres IP klienta. Jest to bardzo proste za-
bezpieczenie pozwalające na pozostanie za-
logowanym przez jakiś czas, ale które uchro-
ni nas częściowo przed tym, że ktoś inny pod-
szyje się pod innego zalogowanego użytkowni-
ka. Jeżeli chcemy zrobić to profesjonalnie, na-
leży skorzystać z zarządzania sesjami z pozio-
mu JSP. Podobnie wygląda to w przypadku
aplikacji PHP.
Końcowy efekt (uwzględniając logowanie)
widzimy na Rysunku 3. Brakuje jedynie wy-
świetlania postów.
Pozostawiam Ci także, Czytelniku, przy-
gotowanie tabeli, która będzie przechowy-
Flex na Javie
wać posty użytkowników. Na pewno warto
umieścić tam (oprócz treści postu) datę je-
go umieszczenia na forum, nazwę autora itp.
Wymaga to umieszczenia dodatkowych funk-
cji w klasie Forum oraz przygotowania odpo-
wiednich plików .jsp, a także plików .mxml,
które będą opisywały np. okno edycji posta.
Następnie powinieneś zrobić pobieranie
tematów/postów z bazy danych i wyświetlanie
ich w swojej aplikacji. Tutaj wystarczy również
nowa funkcja w klasie Forum oraz dodatkowy
plik .jsp, który będzie zawierał dokument XML
z odpowiednimi informacjami. Plik ten zosta-
nie przeanalizowany w naszej fleksowej aplika-
cji podobnie, jak analizowane są pliki Register.jsp
i Login.jsp. Tematy i posty wydobyte z tegoż pli-
ku można umieścić np. w komponencie <mx:
Tree> lub napisać własny komponent wyświe-
tlający te informacje według własnego uznania,
tzw. renderer. To wszystko pozostawiam jednak
Tobie jako pracę domową. Pokazałem Ci jak za-
cząć, a Ty dokończ to tak, jak zechcesz. Sposo-
bów jest naprawdę wiele. Do dzieła!
Jutro
Tworząc naszą aplikację, nie wykorzystaliśmy
w pełni wszystkich możliwości Flexa, gdyż moż-
liwości te są nieograniczone, a objętość tego arty-
kułu nie jest duża. Jeżeli chcesz poszerzyć swo-
ją wiedzę w tym zakresie, koniecznie odwiedź
strony, których adresy znajdziesz w tabelce.
Co przyniesie przyszłość? Adobe poinfor-
mowała, że Flex 4.0 (znany pod nazwą kodową
Gumbo) ukaże się w roku 2009. W chwili pi-
sania tego tekstu nie są znane jeszcze dokładne
plany, ale pojawiło się już kilka ogólników. I tak
oto w kolejnej wersji Flexa mają pojawić się ta-
kie elementy jak:
• Design in Mind (projektuj w myślach)
– framework pozwalający na poszerza-
nie współpracy pomiędzy developerami
a designerami;
• Accelerated Development (przyspieszone
rozwijanie) – pozwoli przejść od koncep-
cji do realiów bardzo szybko;
• Horizontal Platform Improvements (ulep-
szenia platformy) – wydajność kompila-
BiDi, uwydatnienie tekstu;
• Broadening Horizons (poszerzanie hory-
zontów) – znalezienie sposobów na uczy-
nienie frameworka lżejszym, poprawa ob-
sługi MXML.
Pierwsza beta ukaże się z końcem 2008 roku,
a wersja finalna w 2009 roku.
ROGER ZACHARCZYK
Autor jest stałym współpracownikiem Software-
Wydawnictwo. Interesuje się głównie programowa-
niem (C/C++, Java, PHP, AJAX). Jest zwolennikiem
ruchu Open Source.
Kontakt z autorem: roger.zacharczyk@gmail.com
43
 ADOBE FLEX
Flex.Security.allowSecure
Communication('*');
Na początku chcielibyśmy krótko opisać możliwe sposoby wymiany
informacji pomiędzy serwerem, a użytkownikiem, dostępne dla języka
ActionScript 3.0 z dodatkowym wykorzystaniem gotowych komponentów
środowiska Flex 3.
Dowiesz się..
• O systemie zabezpieczeń języka ActionScript 3;
• zabezpieczeniach komunikacji;
• nowych crossdomains;
• oraz dlaczego warto używać Flash Media Se-
rver.
Poziom trudności
P
o krótce scharakteryzujemy dostępne
metody – ich zalety i wady – jak rów-
nież porównamy wydajność wymie-
nionych rozwiązań, takich jak: flashvars,
<mx:WebService>, <mx:RemoteObject>, <mx:
HTTPService>, URLLoader. Zastanowimy się
też nad różnymi formatami danych.
Dalszą część artykułu poświęcimy bezpie-
czeństwu w obrębie flash playera (sandboxy
i crossdomain) oraz sposobom ochrony przesy-
łanych informacji. Opisywane przez nas me-
tody zabezpieczenia komunikacji poparte są
wieloma projektami i doświadczeniem au-
torów z zakresu architektury środowisk bac-
kendowych, frontendowych i co najważniejsze
– ich integracji. Poruszymy tak oczywiste roz-
wiązania, jak sesja po stronie serwera, znaczni-
ki czasu, sumy kontrolne zapytań oraz ciekaw-
sze podejście do tematu jak choćby wykorzy-
stanie FMS 3, czy generowanie dynamicznych
plików SWF po stronie serwera zawierających
klucze czasowe.
Zbliżając się do końca artykułu, w ostatnich
paragrafach postaramy się przybliżyć i opisać
najczęstsze sposoby łamania zabezpieczeń dla
plików SWF i ich komunikacji ze światem ze-
wnętrznym. Poczynając od wtyczki DataTam-
per dla Firefox, przez komercyjne sniffery oraz
dekompilery.
44
Powinieneś wiedzieć...
• Wymagana jest podstawowa wiedza z zakresu
wymiany danych backend–frontend.
Podsumowując wcześniejsze zagadnienia,
wspomnimy również o możliwości kradzie-
ży własności intelektualnej, mechanizmach
DRM, zaprezentujemy za i przeciw zabezpie-
czaniu plików SWF oraz przyjrzymy się kilku
prostym metodom śledzenia prób fałszowania
komunikacji klient–serwer.
Różne źródła danych
Podczas projektowania nawet najprostszych
aplikacji działających po stronie klienta, szyb-
ko nadchodzi potrzeba parametryzowania
aplikacji, dostarczania jej dynamicznych źró-
deł danych, uzyskania obustronnej komunika-
cji. Runtime Flash udostępnia nam kilka możli-
wości, by zrealizować te potrzeby.
Pierwszą i najprostszą metodą na dostar-
czenie do naszej aplikacji (pisanej na przy-
kład we Flexie) zmiennych jest posłużenie się
obiektem flashvars. Do osadzenia projektu
na stronie HTML użyję biblioteki JavaScript
SWFObject2 (http://code.google.com/p/swfobject)
– patrz Listing 1.
Już ten prosty sposób daje nam możliwość
dynamicznego generowania zmiennych wraz
z wartościami, które na Listingu 2. zostaną od-
czytane z poziomu Flexa:
Podobnym jednostronnym sposobem ko-
munikacji jest sczytywanie parametrów prze-
kazanych w URL–u. Flashvarsy są wygodne je-
śli chodzi o jakieś małe zmienne, kluczowe do
prawidłowego zainicjalizowania aplikacji – na
przykład adres webservice'u.
Jeżeli chodzi o bardziej zaawansowane tech-
niki komunikacji jak webservice i flash remoting
zostały one opisane w artykule pt. Flex i php
– wykorzystanie web services i technologii flash
remoting.
Chciałbym jednakże pokrótce opisać wyko-
rzystanie klasy flash.net.URLLoader po stronie
Flexa do komunikacji z backendem w PHP. Po
stronie serwera będzie znajdował się wystawio-
ny gateway nasłuchujący naszych żądań, który
przyjmować będzie argumenty zarówno z ta-
blicy $_GET jak i $_POST. Adres gateway'a
ustalimy na: http://example.com/gateway.php.
Założę również, że na żądanie ?action=
getDummyData dostanę zwrot w postaci
XML:
<?xml version="1.0" encoding="utf–8"?>
<return><row attr1=”hello” /><row>world</
row></return>
Na Listingu 3. przedstawię fragment ko-
du w ActionScript, który wyśle przykłado-
we dane i odbierze zwrot. Dla uproszcze-
nia przykładu nie dodałem obsługi zdarzenia
IOErrorEvent.IO _ ERROR oraz nie przepro-
wadziłem walidacji zwrotu, co jest niezbędne
w komercyjnych projektach.
Chciałbym jeszcze zaznaczyć, iż Flex po-
zwala również na bezpośrednią komunika-
cję na bardzo niskim poziomie jakim są gniaz-
da (ang. sockets). Wyróżnić można dwa rodza-
je połączeń – poprzez XMLSocket, który wy-
musza posługiwanie się dokumentami XML
oraz klasę Socket, która pozwala na binarny
przesył danych.
Chciałbym jeszcze wymienić trzy sposo-
by komunikowania się ze światem zewnętrz-
nym. Pierwszy z nich to wykorzystanie kla-
sy ExternalInterface. Pozwala ona na wy-
woływanie funkcji osadzonych w skryptach
JavaScript, które mogą towarzyszyć aplika-
cji Flex osadzonej na stronie HTML. Dodat-
kowo dzięki tej klasie możemy umożliwić ko-
munikację w drugą stronę – JavaScript może
wywołać wystawione funkcje z aplikacji Fle-
FLEX
 Flex.Security.allowSecureCommunication(‘*’);

xowej. Natomiast drugi to używanie Local- w grę – np. 8 i 9) osadzonymi na danej stro- identycznie jak cookies w przeglądarce. Tech-
Connection do komunikacji z innymi plika- nie HTML. Trzecim sposobem są SharedO- nika ta pozwala na zapisywanie dowolnych in-
mi SWF (również różne ich wersje wchodzą bjects, które na pierwszy rzut oka wyglądają formacji po stronie użytkownika, do których
można się odwoływać podczas bieżącej sesji
lub dowolnej następnej. Podczas czyszczenia
ciasteczek w przeglądarce SharedObject nie
ulegają usunięciu. W odróżnieniu od popu-
larnych ciasteczek, nie wygasają, ich wielkość
domyślnie może wynosić do 100 KB każdy,
klient może ustawić maksymalną dostępną
wielkość obiektu SharedObject. Potrafią one
przechowywać proste natywne typy danych
oraz co ważne nie są transmitowane do serwe-
ra podczas innej formy komunikacji w przeci-
wieństwie do ciasteczek.
Zachęcam również do zapoznania się z Ry-
sunkiem 1., który obrazuje wydajność róż-
nych sposobów komunikacji. Każdy z dostęp-
nych sposobów ma swoje wady i zalety – we-
dług mnie nie ma jednego najlepszego. Każdy
projekt używający komunikacji backend–fron-
tend wymaga indywidualnego przeanalizowa-
Rysunek 1. Porównanie wydajności metod komunikacji. http://www.jamesward.org/census/ nia i dobrania optymalnej formy integracji.
Podczas fazy projektowej biorę pod uwagę:
Listing 1. Osadzenie aplikacji poprzez SWFObject2
• czy istnieje już gotowe API po stronie
<script type="text/javascript"> backendu,
• czy aplikacja we Flexie/Flashu będzie je-
var flashvars = { }; dynym klientem,
flashvars.name1 = "hello"; • czy chcę mieć możliwość buforowania
flashvars.name2 = "world"; zwrotów po stronie klienta – jest to bar-
dzo ważne w większych projektach,
var params = { }; • kwestię poufności wymienianych da-
params.menu = "false"; nych,
• rząd wielkości zwrotów,
var attributes = { }; • elastyczność zmian na wypadek zmian
w specyfikacji,
swfobject.embedSWF( "aplikacyjka.swf", "myContent", "300", "120", "9.0.0","expressI • wydajność konkretnej technologii.
nstall.swf", flashvars, params, attributes );
</script> Zabezpieczanie komunikacji
Na samym wstępie należy jasno powiedzieć,
Listing 2. Wczytanie flashvars
że nie ma bezwzględnie bezpiecznej formy
komunikacji z aplikacji klienckiej do serwe-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initFlash ra. Jednakże już najprostsze formy uwierzy-
Vars()"> telniania i komplikowania wymiany danych
<mx:Script><![CDATA[ w bardzo dużym stopniu skomplikują ży-
[Bindable] cie osobom, które próbowałyby ją fałszować.
public var myName1:String; Z własnego doświadczenia mogę powiedzieć,
[Bindable] aby zwracać szczególną uwagę na aspekt bez-
public var myName2:String; pieczeństwa w grach online i wszelkiego ty-
pu konkursach internetowych. Należy rów-
private function initFlashVars():void { nież cały czas mieć na uwadze, iż aplikacja
myName1 = Application.application.parameters.name1; kliencka z łatwością może być zdekompilo-
myName2 = Application.application.parameters.name2; wana, a cały ruch Internetowy, który generu-
} je – podsłuchany. Naturalne jest dla mnie nie-
]]></mx:Script> zapisywanie poufnych danych po stronie apli-
kacji klienckiej, takiego typu jak użytkownik
<mx:HBox> i hasło do bazy danych. Owszem istnieje taka
<mx:Label text="Name1: {myName1}"/> możliwość by z poziomu Flexa/ActionScriptu
<mx:Label text="Name2: {myName2}"/> bezpośrednio łączyć się do bazy danych, lecz
</mx:HBox> dla mnie jest to zupełne nieporozumienie.
</mx:Application> Pierwsza bardzo prosta technika zabez-
pieczania komunikacji polega na wysyłaniu
sumy kontrolnej dotyczącej danej paczki.

www.sdjournal.org 45
 ADOBE FLEX
Dla przykładu w pewnym momencie z Fle-
xa wychodzi dowolną metodą ciąg danych
zmienna1=wartosc1, zmienna2=wartosc2,
zmienna3=wartosc3, checksum=123456. Niech
cheksum będzie wartością funkcji MD5 obliczo-
nej na podstawie wartości1 oraz wartości2.
Takie samo obliczenie checksum może się wy-
konać po stronie backendu celem weryfikacji
źródła pochodzenia danych. Oczywiście func-
kja hashująca może być o wiele bardziej skom-
plikowana lub złożona z wielu dostępnych na-
raz. Jest to metoda bardzo prosta, a zarazem
całkiem efektywna i niewymagająca duże-
go nakładu pracy programisty frontendowego
oraz backendowego.
Równie prostym sposobem na weryfikację
źródła pochodzenia danych jest dostarczanie
znaczników czasu podczas wysyłania zapy-
tań – polecam, aby i one były w formie zako-
dowanej. Weryfikacja po stronie serwera mo-
że polegać na sprawdzaniu, czy każdy nowy
znacznik jest większy od poprzedniego. Ko-
lejnym elementem, który jest możliwy do we-
ryfikacji przy tej metodzie, jest sprawdzanie
czy zapytania przychodzą w racjonalnych od-
stępach czasowych stosownych do profilu na-
szej aplikacji.
Następnym elementem wartym uwagi,
jest stosowanie nieintuicyjnych nazw me-
tod. Jednakże należy się poważnie zastano-
wić nad stosowaniem tej techniki, gdyż może
ona przysporzyć wiele kłopotów przy robie-
niu poprawek w aplikacji po dłuższej prze-
rwie lub też na samym etapie debugowania
aplikacji.
Jeśli istnieje możliwość stosowania mecha-
nizmu sesyjnego po stronie serwera, jest to
bardzo naturalne rozwiązanie towarzyszące
wszystkim metodom wymagającym autory-
zacji. Mankamenty takiego rozwiązania mogą
się pojawić podczas uploadu plików ze strony
Flexa, co można zawsze rozwiązać dosyłając
identyfikator sesyjny podczas uploadu, który
pozwoli na manualne ustawienie sesji po stro-
nie backendu.
Bardziej wyrafinowane rozwiązanie za-
bezpieczające komunikację polegać będzie
na pobieraniu przez Flexa dynamicznie wy-
generowanego pliku SWF po stronie backen-
du i wykorzystywaniu informacji w nim za-
wartych do dalszego wysyłania danych. Do
tego celu posłużyć może biblioteka MING
w PHP – http://php.net/ming .Idea jest nastę-
pująca:
• Flex wysyła zapytanie o wygenerowanie
dynamicznego SWF–a.
• Backend generuje bardzo lekki (1kb) plik
SWF zawierający unikalny klucz.
• Flex ładuje wygenerowany plik i wyko-
nuje właściwe zapytanie dodając wartość
pobranego klucza.
• Backend weryfikuje zgodność kluczy
podczas obsługi zapytania, dodatkowo
46
ustawiając czas ważności klucza na przy- komunikacji z wczytanym plikiem – jest to
kładowe pięć minut. konieczne, by z poziomu Flash 9 komuniko-
wać się z Flash 8.
Na Listingu 4. pokażę krótki sposób na wy- Dodatkowym sposobem na zabezpieczenie
generowanie SWF za pomocą biblioteki aplikacji klienckiej jest technika obfuskacji wy-
MING. nikowego SWF. Można do tego celu znaleźć
By następnie na Listingu 5. z poziomu Ac- darmowe programy w sieci, które w ogrom-
tionScriptu we Flexie odebrać klucz. Proszę nym stopniu utrudniają dekompilację skompi-
zwrócić uwagę na użycie LocalConnection do lowanych kodów z Flexa do postaci SWF.
Listing 3. Zastosowanie URLLoader
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;
public class myClass extends Sprite {
public function myClass( ) {
var request:URLRequest = new URLRequest( "http://example.com/gateway.php?ac
tion=getDummyData" );
request.method = URLRequestMethod.POST;
request.data = new URLVariables( );
request.data.myVariable1 = 'raz dwa trzy';
var loader:URLLoader = new URLLoader( );
loader.addEventListener(Event.COMPLETE, onComplete );
loader.load(request);
}
private function onComplete( event:Event ):void {
var dataXML:XML = XML( event.target.data );
}
}
}
Listing 4. Użycie MING w PHP
<?php
$secretKey = '123456';
$m = new SWFMovie( );
$m–>add( new SWFAction( "key = '$secretKey';
var sending_lc:LocalConnection = new LocalConnection( );
sending_lc.send( 'lc_name', 'setKey', key );" ) );
header( 'Content–type: application/x–shockwave–flash' );
$m–>output( );
?>
Listing 5. Obiór klucza we Flexie
var l = new Loader( );
l.load( new URLRequest( 'http://example.com/gateway.php?getSecretKeySwf' ) );
var receivingLC:LocalConnection = new LocalConnection();
receivingLC.client = this;
receivingLC.connect('lc_name');
function setKey( key ) {
trace( 'dostalem klucz z wczytanego swfa skompilowanego do wersji 8: ', key
);
}
FLEX

Warto również, po stronie backendu, po-
kusić się o sprawdzanie adresu URL z którego
przychodzą żądania. Jest to dobry sposób na
wstępną weryfikację prawdziwości generowa-
nych zapytań.
Podsłuchiwanie i
próby fałszowania komunikacji
Zapewne jedną z pierwszych rzeczy, któ-
rą zrobi osoba zainteresowana fałszowaniem
komunikacji, będzie sprawdzenie, w jaki spo-
sób ona się odbywa. Najprostszym sposobem
na to jest zainstalowanie wtyczki DataTamper
dostępnej dla przeglądarki Firefox – widok na
Rysunku 2.
W interesujących nas momentach w okien-
ku wtyczki widać wszystkie zapytania GET,
POST jak również ich treść oraz cookies, któ-
re również mogą zawierać ciekawe rzeczy jak
choćby identyfikator sesyjny. Kolejnym eta-
pem będzie sprawdzenie jak została osadzo-
na aplikacja, a co za tym idzie odszukanie
ewentualnych flashvars. Uzbrojony w ta-
ką wiedzę użytkownik może przystąpić do
działania. Jeśli użyto najprostszej formy wy-
miany danych na przykład w postaci wysyła-
Listing 6. Standardowy plik crossdomain.xml
<cross–domain–policy>
<allow–access–from domain="www.przykladowa_strona.com">
</cross–domain–policy>
Listing 7. Nagłówek odpowiedzi dla pliku crossdomain.xml
HTTP/1.1 200 OK
X–Permitted–Cross–Domain–Policies: none
Rysunek 2. Wtyczka DataTamper dla Firefox
www.sdjournal.org
Flex.Security.allowSecureCommunication(‘*’);
nia żądania na adres http://example.com/gate-
way.php?action=someAction i zwracana jest
odpowiedź w formie XML, a całość nie jest
w żaden sposób zabezpieczona, wówczas za-
danie podmiany danych jest wręcz banalne.
Sytuacja nieznacznie się komplikuje, gdy
komunikacja odbywa się za pomocą FlashRe-
moting, na przykład wykorzystując AMFPHP.
Jednakże i tutaj dla wprawnego oka, dokład-
ne przeanalizowanie RAW_POST_DATA pozwo-
li na wyłuskanie nazw metod i argumentów.
Takie informację przydadzą się do napisania
własnej klasy po stronie ActionScript, która
zasymuluje oryginalną, wykorzystaną w apli-
kacji klienckiej.
Kolejnym krokiem, na jaki zapewne zdecy-
duje się włamywacz, będzie dekompilacja pli-
ku SWF. Jeżeli będzie on w stanie odnaleźć
interesujący go fragment kodu i skutecznie
go podmieni, wówczas po kompilacji takie-
go projektu aplikacja kliencka w krytycznym
momencie wyśle sfałszowane dane. Oczywi-
ście, to czy backend przyjmie takie zapytanie,
zależy od tego, czy jakkolwiek będziemy we-
ryfikować wierzytelność zapytań. Jeśli użyt-
kownik po dekompilacji i udanej zamianie
wrażliwego kodu, uruchomi aplikację lokal-
nie, jego zapytania będą przychodziły z inne-
go URL’a niż backend powinien się spodzie-
wać – chyba, że użytkownik będzie na tyle
dociekliwy, by podmienić nagłówki preparu-
jąc właściwy adres URL.
Stosowanie więcej niż jednego zabezpie-
czenia przesyłu danych zdecydowanie odstra-
szy większą część osób, które bądź to dla za-
bawy, bądź dla konkretnego efektu będą pró-
bowały ją zafałszować.
FlashMediaServer 3
Popularność materiałów wideo w sieci
WWW rośnie lawinowo z roku na rok. Nie
możemy przejść obojętnie obok faktu, że tak
duża popularność była możliwa tylko dzięki
prostemu, szybkiemu, a zarazem przyjazne-
mu dla użytkownika systemowi dostępu do
materiałów video. Pomimo wieloletniej obec-
ności odtwarzaczy multimedialnych na ryn-
ku, takich jak Windows Media Player–Mi-
crosoftu, czy Quicktime'a firmy Apple, nic
nie przyspieszyło rewolucji tak jak format
plików FLV od Adobe. Jednak wraz ze wzro-
stem popularności formatu FLV, pojawił się
problem nieautoryzowanego przechwytywa-
nia plików audio i video (na przykład płatnej
zawartości serwisu internetowego). Istnieje
wiele sposobów przechwycenia video z pliku
FLV. Rozpoczynając od nasłuchiwania zapy-
tań HTTP, poprzez wyciąganie pliku z kata-
logu pamięci podręcznej przeglądarki, aż do
poklatkowego zapisywania video przez klasę
flash.display.BitmapData.
Między innymi dlatego też powstał Flash
Media Server, który miał być odpowiedzią
Adobe na wyższy poziom ochrony zawartości,
oraz zapotrzebowanie na prawdziwe strumie-
niowanie plików.
Wymiana danych pomiędzy użytkowni-
kiem a serwerem odbywa się domyślnie przez
protokół RTMP (ang. Real Time Messaging Pro-
tocle) autorstwa Adobe. Dotychczas możliwe
było szyfrowanie zawartości przez SSL (ang.
Secure Socket Layer) wykorzystywane przez
protokół RTMPS, jednak od wersji trzeciej
serwera, twórcy zawartości dostali dodatko-
wo nowy protokół RTMPE (ang. Encrypted Re-
al Time Messaging Protocole), który nie wyma-
ga użycia certyfikatów. Dzięki 128 bitowemu
kodowaniu zawartości strumienia i zwiększo-
nej wydajności protokół ten stanie się zapew-
ne popularniejszy od znacznie wolniejsze-
go RTMPS. Dzięki strumieniowemu przesy-
łaniu danych nasze pliki nie są przechowy-
wane w pamięci podręcznej przeglądarki,
a w chronionym obszarze pamięci wewnątrz
Flash Playera, co eliminuje większość zagro-
żeń związanych z popularnymi programami
do przechwytywania plików video.
Flash Media Server 3 oferuje również moż-
liwość zapewnienia bezpieczeństwa naszej
aplikacji poprzez dopuszczanie jedynie tych
47
 ADOBE FLEX
plików, które pochodzą z autoryzowanego
źródła. Za każdym razem, kiedy plik SWF
zostaje wysłany do klienta, jego kopia rezy-
duje na serwerze. W razie wykrycia różnic
w strukturze pliku, serwer odrzuci zapytanie
klienta o żądany plik. Oczywiście oprócz te-
go mamy możliwość autoryzacji użytkowni-
ka przez sumy kontrolne MD5, unikalne klu-
cze, czy przekazanie użytkownika i hasła.
Te aspekty zostały poruszone we wcześniej-
szej części artykułu, tak więc nie będę ich tu-
taj rozwijał.
Dlaczego zatem rozwiązanie to nie stało
się bardzo popularne? Otóż dość poważnym
problemem okazała się cena, która nierzad-
ko przewyższała możliwości finansowe nie-
których serwisów, szczególnie w sytuacji,
kiedy ilość połączeń i transfer danych podle-
gały ograniczeniom. W odpowiedzi na brak
taniego rozwiązania powstał serwer RED5.
Rozwiązanie Open Source przedstawiane ja-
ko alternatywa dla FMS. Obecnie prowadzo-
ne są prace nad rozwojem do wersji 1.0 (obec-
na to 0.7.0), tak więc widać, że determinacja
twórców w rozwoju tego projektu nie słabnie
(więcej na http://osflash.org).
Na szczęście FMS w wersji trzeciej nie po-
siada ograniczeń transferu i limitu jednocze-
snych połączeń co znacząco zwiększa opła-
calność tego rozwiązania, które oferuje do-
skonałe zabezpieczenia przy niewielkim na-
kładzie środków, a także odciąża administra-
torów oraz twórców programów, którzy nie
muszą wymyślać setek sposobów na ochro-
nę plików znajdujących się na serwerze. Uży-
wając określenia Flash Media Server w tym
tekście, odnosiłem się do całej rodziny pro-
duktów oferowanych przez Adobe, które
pojawiły się wraz z premierą wersji trzeciej
(więcej na : http://www.adobe.com/products/
flashmediaserver/).
Bezpieczeństwo
od strony developera
W pierwszej części artykułu zostały prze-
analizowane dodatkowe metody zabezpie-
czenia danych przesyłanych pomiędzy użyt-
kownikiem a serwerem. Czy oznacza to, że
firma Adobe nie wyposażyła Flash Playera
w odpowiednie narzędzia bezpieczeństwa?
Wręcz przeciwnie. Wraz z pojawianiem się
kolejnej rewizji Flash Playera twórcy forma-
tu SWF starają się ulepszyć sposoby ochrony
danych oraz maksymalnie ograniczyć możli-
wości nieautoryzowanego dostępu do działa-
jącego programu.
Każdy plik SWF posiada swój własny ob-
szar bezpieczeństwa, w obrębie którego
możemy poruszać się bez większych prze-
szkód przesyłając dane, nazywany powszech-
nie sandboxem (ang. Piaskownica). Podsta-
wowo zdefiniowana ilość możliwych ope-
racji jest ściśle ograniczona do niezbędne-
go minimum, tak abyśmy nie musieli two-
48
rzyć wszystkich reguł zabezpieczających, je- ror, informujący nas o braku możliwości do-
żeli planujemy niewielką stronę internetową stępu do danych. Oczywiście nie zawsze ma-
bądź aplikację. Im większy projekt tym więk- my możliwość umieszczenia pliku crossdo-
sze potrzeby zapewnienia mu bezpieczeń- main.xml w dowolnym miejscu. W tym wy-
stwa oraz umożliwienia swobodnego dostę- padku z pomocą przychodzi nam metoda
pu danych zewnętrznych, takich jak doku- flash.system.SecurityloadPolicyFile() ,
menty, pliki video i audio, a także w niektó- która pozwala nam określić dokładne położe-
rych przypadkach pliki SWF innych autorów, nie pliku. Niestety możliwość wczytania do-
znajdujące się w domenach innych niż nasza wolnej ilości plików crossdomain.xml, zwięk-
aplikacja. sza ryzyko ingerencji w nasz obszar bezpie-
Domyślnie, plik SWF może wczytywać je- czeństwa, poprzez wczytanie innych pli-
dynie te pliki, które znajdują się w tej samej ków crossdomain w trakcie działania nasze-
domenie co nasza aplikacja. Jednak bardzo go programu. Aby zabezpieczyć się przed
często, w szczególności przy tworzeniu du- taką możliwością, możemy wybrać jedną
żych serwisów, pojawia się konieczność wy- z dwóch opcji:
świetlania zawartości dostarczanej z innych
serwerów. Aby możliwe było wczytywanie • Zmodyfkować plik crossdomain.xml do-
plików znajdujących się w innej domenie, dając do niego znacznik <site–control>
niezbędny jest plik XML o nazwie crossdoma- zawierający atrybut permitted–cross–
in.xml . Informacje w nim zawarte pozwalają domain–policies .
określić, między innymi, jakie domeny i ad- • Używając nagłówka odpowiedzi HTTP
resy IP mają prawo do pobierania zawartości X–permitted–Cross–Domain–Policies ,
z serwera, na którym ów plik się znajduje. jak przedstawiono na Listingu 7.
Plik crossdomain przedstawiony na Listin-
gu 6. pozwala na wczytanie danych każdemu Pomimo, iż znacznik meta–policy zo-
plikowi SWF znajdującemu się w domenie stał wprowadzony stosunkowo niedawno,
przykladowa_strona.com. Jeżeli plik zostanie Adobe zaleca umieszczanie go we wszyst-
umieszczony w katalogu głównym domeny kich plikach master policy files, ponieważ ze
nie musimy martwić się potrzebą wczytywa- względów bezpieczeństwa domyślna war-
nia go, ponieważ przy pierwszej próbie wczy- tość all zostanie zamieniona na none, co mo-
tania danych z domeny, na której znajduje że spowodować utrudnienia w działaniu
się plik crossdomain.xml, SWF automatycz- już istniejących aplikacji, które korzystają
nie spróbuje go pobrać. Jeżeli operacja się nie z tych plików. Wszystkie powyższe operacje
powiedzie, wynikiem będzie błąd SecurityEr- na pliku crossdomain.xml dotyczące znaczni-
Opcje konfiguracji znacznika meta–policy w pliku
crossdomain.xml
• all –Domyślna konfiguracja. Wszystkie pliki crossdomain.xml są akceptowane.
• by–content–type – Akceptowane są tylko pliki corssdomain, których nagłówek Content–
Type to text/x–cross–main–policy . Tylko dla serwerów HTTP i HTTPS.
• by–ftp–filename – Akceptowane pliki, których adres URL kończy się na /crossdomain.xml.
Tylko dla serwerów FTP.
• master–only – Jedynym możliwym plikiem crossdomain.xml, będzie tak zwany master poli-
cy file, czyli plik crossdomain.xmli znajdujący się w katalogu głównym domeny.
• none – Żadne pliki crossdomain.xml nie są akceptowane. Jeżeli umieścimy takowy w kata-
logu głównym aplikacji, będzie on mógł zawierać jedynie znacznik meta–policy, wszystkie
inne będą ignorowane.
• none–this–response – dostepny tylko dla nagłówka odpowiedzi HTTP, uniemożliwiający in-
terpretację zwrotu jako pliku crossdomain. Dotyczy to tylko aktualnie przychodzącego na-
główka i nie wpływa na wczytywanie innych plików crossdomain.
Listing 8. Przykładowy znacznik allow–http–request–headers–from
<allow–http–request–headers–from domain="www.przykladowa_strona.com" headers="Moj–
Naglowek"/>
Listing 9. Przykładowy plik crossdomain dla połączeń typu Sachet
<cross–domain–policy>
<allow–access–from domain="www.przykladowa_strona.com" secure="true" to–
ports="3050"/>
</cross–domain–policy>
FLEX

ka meta–policy dotyczą pliku master policy fi-
le, czyli znajdującego się w głównym katalo-
gu domeny.
Flash Player od wersji 9 oferuje możliwość
wysyłania własnych nagłówków HTTP. Jest
to kolejna okazja, aby wydobyć informacje
z naszej aplikacji. Aby temu zapobiec, moż-
liwości konfiguracji pliku crossdomain zosta-
ły wzbogacone o znacznik allow–http–requ-
est–headers–from , który pozwala nam okre-
ślić domenę, z której będą akceptowane przy-
chodzące nagłówki, oraz ich dokładny typ.
Przykładowy wygląd tego znacznika przed-
stawiono na Listingu 8.
Wraz z pojawieniem się rewizji Flash Play-
era 9.0.115, nastąpiła zmiana w dostępie
do danych poprzez klasę Socket, służącą do
przesyłania binarnych danych na wskazanym
przez nas porcie. Dzięki niej mamy możli-
wość napisania na przykład własnego klienta
pocztowego. Dotychczas do kontroli upraw-
nień dla tej klasy wystarczył plik crossdoma-
in.xml, jednak ze względów bezpieczeństwa
postanowiono odseparować te dwa typy połą-
czeń. Obecnie, zanim zostanie nawiązane po-
łączenie z serwerem (nawet jeżeli plik SWF
należy do tej samej domeny) sprawdzana
jest obecność pliku autoryzującego znajdu-
jącego się domyślnie na porcie 843 (podob-
nie jak plik crossdomain.xml domyślnie powi-
nien znajdować się w katalogu głównym do-
meny), możliwe jest wysłanie ów pliku z do-
wolnego dostępnego portu, jednak podobnie
jak w wypadku połączeń przez HTTP musi-
my wczytać plik samodzielnie poprzez me-
todę loadPolicyFile(). Format pliku auto-
ryzującego połączenia portów jest taki sam
jak pliku autoryzującego połączenia HTTP
i HTTPS, z jedną małą różnicą, którą przed-
stawia Listing 9.
Znacznik to–ports określa port bądź za-
kres portów, do których nasza aplikacja
otrzyma dostęp. Podobnie do połączeń przez
HTTP, połączenia poprzez porty również po-
siadają możliwości kontrolowania, które pli-
ki autoryzacyjne powinny być zaakceptowa-
ne. Znacznik meta–policy w tym wypadku
ma mniej możliwości konfiguracji.
Zamykając temat plików autoryzacyjnych,
należy wspomnieć o jeszcze jednym elemen-
cie, który jest wspólny dla połączeń przez
HTTP i porty. Atrybut secure dla znacznika
allow–access–from, jeżeli ustawiony na true,
<allow–access–from secure='true'>, nie
Opcje konfiguracji znacznika meta–policy w pliku autoryzacyjnym
dla połączeń przez klasę Socket
• all –Domyślna konfiguracja. Wszystkie pliki autoryzacyjne dla połączeń przez porty są ak-
ceptowane.
• master–only – Jedynym możliwym plikiem będzie tak zwany socket master policy file, czyli
plik crossdomain dostepny przez port 843.
• none – Żadne pliki autoryzacyjne dla portów nie są akceptowane.
www.sdjournal.org
Flex.Security.allowSecureCommunication(‘*’);
zezwala na nawiązanie połączenia z portem
czy przesłanie danych, jeżeli zapytanie nie
pochodzi z bezpiecznego protokołu HTTPS.
Dla połączeń HTTPS domyślną wartością jej
true, Adobe zaś nie zaleca zmiany jej zamia-
ny na false.
Kiedy jesteśmy już pewni, że zabezpie-
czyliśmy się przed nieautoryzowanymi pró-
bami pobierania zawartości naszego serwe-
ra, a zarazem zapewniliśmy bezproblemo-
we działanie naszej aplikacji, powinniśmy za-
pobiec próbom spenetrowania naszego ko-
du przez inne pliki SWF, a także udostęp-
nić możliwość komunikacji naszego progra-
mu z innymi plikami SWF, jeżeli jest to wy-
magane. Aby umożliwić bądź zablokować
wymianę informacji, tak zwany cross–scrip-
ting, korzystamy przede wszystkim z meto-
dy flash.system.Security.allowDomain
(). Pozwala ona na dostęp wczytanego pli-
ku SWF do pliku wczytującego. Dla przy-
kładu, jeżeli chcemy zareagować na zdarze-
nie Event.RESIZE, nie będziemy w stanie te-
go zrobić, jeżeli główny plik aplikacji nie ze-
zwoli nam na dostęp. Oczywiście pojawia się
problem, jeżeli w chwili kompilacji nie zna-
my dokładnego adresu IP lub domeny, z któ-
rej będzie wczytywany plik SWF. W takiej sy-
tuacji możemy adres takiej domeny przeka-
zać w obiekcie flashvars podczas osadza-
nia pliku SWF bądź wykorzystać informacje
z obiektu loaderInfo, aby przyznać dostęp
adresowi przechowywanemu w zmiennej
url. Niestety oba te rozwiązania niosą ze so-
bą wysokie ryzyko łatwej modyfikacji obu ad-
resów, tak więc są tutaj bardziej przykładem,
niż zalecanym rozwiązaniem. Na szczęście
w większości przypadków znamy adres do-
meny, która będzie chciała komunikować się
z naszym plikiem SWF, tak więc dynamiczne
przyznawanie dostępu plikom SWF, nie jest
tutaj standardem.
Podobnie do powyższej metody działa flas
h.system.Security.allowInsecureDomain(),
z tą różnicą jednak, że w tym wypadku zezwa-
lamy na dostęp do plików SWF dostępnych
przez HTTPS plikom SWF dostępnym przez
protokół HTTP. Oczywiście taką komunikację
otwieramy na własną odpowiedzialność, z peł-
ną świadomością faktu, że osłabiamy tym sa-
mym bezpieczeństwo naszej aplikacji.
Pomimo ścisłej kontroli domen, z których
pliki SWF mogą komunikować się z naszym
programem, istnieje jeszcze jeden sposób
na komunikację pomiędzy dwoma plikami
SWF, znajdującymi się na komputerze użyt-
kownika.
Klasa LocalConnection umożliwia na na-
wiązanie połączenia pomiędzy dwoma uru-
chomionymi plikami SWF (nawet jeżeli znaj-
dują się one w odrębnych oknach przeglądar-
ki) i jest jedynym sposobem na komunikację
pomiędzy plikami SWF starszych wersji ob-
sługiwanych przez pierwszą wersję maszyny
wirtualnej AVM1. Jest to kolejna okazja do
niepożądanego dostępu do aplikacji, jeżeli
nierozważnie będziemy rozporządzać prawa-
mi dostępu do naszej aplikacji. Sposoby kon-
troli przesyłanych tą drogą informacji, działa-
ją podobnie jak przy wczytywaniu zewnętrz-
nych plików SWF i składają się na nie metody
LocalConnection.allowDomain() oraz Loca
lConnection.allowInsecureDomain() .
Pomimo wszystkich tych możliwości, oso-
by o dostatecznie dużej determinacji znaj-
dą drogę dostępu do naszej aplikacji. Dlate-
go też ciągle staramy się wymyślać nowe, bar-
dziej efektywne zabezpieczenia i utrudnie-
nia dostępu osobom niepożądanym. Nawet
pomimo nieudanych prób wstrzyknięcia ko-
du do naszego programu, nasze pliki SWF,
mogą zostać poddane próbie dekompilacji
i późniejszej kompilacji ze zmodyfikowanym
wewnątrz kodem. Obecnie dekompilacja pli-
ków SWF powstałych przy użyciu Flex Fra-
mework nie jest jeszcze taka prosta, jednak
jest to tylko kwestią czasu, zanim powstanie
odpowiednie komercyjne rozwiązanie, gdyż
dekompilacja plików SWF kompilowanych
w środowisku IDE Flasha jest już możliwa.
Dlatego też pamiętajmy, aby nasze aplikacje
zawierały możliwie jak najmniej informacji,
które umożliwiłyby dostęp do danych nasze-
go serwera, bądź ich modyfikację.
Stworzenie aplikacji całkowicie odpornej
na ataki jest praktycznie niemożliwe, jed-
nak dzięki świadomemu i rozważnemu ko-
rzystaniu z reguł bezpieczeństwa i dostępu,
już z pomocą standardowych narzędzi jeste-
śmy w stanie choć trochę utrudnić penetra-
cję stworzonej aplikacji. Dużo lepszym wy-
borem będzie spojrzenie do plików pomocy,
czy rozbudowanej dokumentacji udostępnia-
nej przez Adobe, niż posługiwanie się asteri-
skiem (*) przy przyznawaniu praw dostępu
do danych na serwerze i aplikacji.
ŁUKASZ ZMYWACZYK
Development Team Leader w agencji T-SIGN STU-
DIOS.
Kontakt: L.Zmywaczyk@gmail.com
JAKUB MATUSZEWSKI
Senior Flash Developer oraz Development Team Le-
ader w agencji T–SIGN STUDIOS. Z ActionScriptem
związany od 5 lat.
Kontakt: jacob@t–sign.com
49
 ADOBE FLEX

Test Driven Development

Testuj kod zanim go napiszesz

Człowiek jest niewinny dopóty, dopóki nie udowodni mu się winy.

Analogicznie, aplikacja Flex nie zawiera błędów dopóty, dopóki się ich
nie znajdzie. Jak zatem zorientować na sukces proces produkcyjny takich
aplikacji?

Rational Unified Process), który ma korzenie

Dowiesz się... Powinieneś wiedzieć...
• Co to jest TDD, dlaczego i kiedy warto używać • Jak pracuje się ze środowiskiem FlexBuilder 3.
tej techniki.
• Jak używać biblioteki FlexUnit.
TDD a Flex
Termin TDD pojawił się niedługo po ukuciu
Poziom trudności i rozpowszechnieniu się terminu XP (ang. eXtre-
me Programming), jednej z bardziej popular-
nych metodyk lekkich (inaczej zwanych zwin-
nymi – ang. agile) wytwarzania oprogramowa-
w USDP (ang. Unified Software Development Pro-
cess) i jest reprezentantem metodyk ciężkich. XP
jako uznana metodyka zwinna, zaczęła perma-
nentnie dążyć do skracania faz produkcyjnych,
i tak m.in. powstał pomysł na to, aby zautoma-
tyzować testowanie poprzez wprowadzenie te-
stów jednostkowych (nazwa bierze się z testo-
wania danej jednostki, jaką jest metoda – funk-
cja lub klasa) oraz przeniesienie fazy testowa-
nia na początek fazy implementacji, a docelowo
zmusić programistę, aby pisał przypadki testo-
we przed napisaniem właściwego kodu aplikacji

T
echnologia Flex i język programowa-
nia ActionScript wdzierają się do roz-
wiązań korporacyjnych na tyle szybko,
że coraz częściej zespoły wytwarzające oprogra-
mowanie w oparciu o Flex, stosują znane me-
todyki programowania, używane w innych
środowiskach/technologiach wytwarzania od
dosyć dawna. Same przez siebie niejako nobi-
litują one Flexa, pokazując, że jest on w stanie
podołać skomplikowanym wdrożeniom RIA,
absorbującym duże zespoły projektowe i pro-
dukcyjne.
Biorąc pod uwagę fakt kompleksowości apli-
kacji Flex, która bierze się między innymi z du-
żej liczby możliwych ścieżek kolaboracji mię-
dzy odrębnymi obszarami funkcjonalnymi
– wydaje się, że nie powinno się zakładać z gó-
ry, że oprogramowanie danych funkcjonalno-
ści w kontekście jednostkowych pakietów, klas,
a ostatecznie wyrażeń behawioralnych będzie
pozbawione błędów. Dlatego poszukiwano
sposobu na automatyzację wykrywania błędów
w funkcjonowaniu aplikacji w możliwie naj-
wcześniejszych fazach produkcyjnych, co jest
szczególnie ważne przy wytwarzaniu aplikacji
zorientowanym na klienta, które zakłada pro-
gresywną realizację funkcjonalności przy moż-
liwie najkrótszych iteracjach. Na takim tle po-
wstał pomysł na TDD (ang. Test Driven Develop-
ment), czyli na wytwarzanie oprogramowania
zorientowanego na testy.
nia, które kładą nacisk na dostarczanie kliento- programowej. W skrócie, programista powinien
wi artefaktów programowych, zamiast papiero- opisywać i precyzować na początku, czego ocze-
wych tj. dokumentacji – która w XP ma formę kuje po działaniu przyszłego kodu, zanim zaj-
szczątkową w porównaniu m.in. do RUP (ang. mie się jego pisaniem. W porównaniu do trady-
Listing 1. Przypadek testowy
public class SampleTest extends TestCase //przypadek testowy
{
public function SampleTest(methodName : String = null) {
super(methodName);
}
public static function suite():TestSuite {
var sampleTS:TestSuite = new TestSuite(); // zestaw testowy
sampleTS.addTestSuite(SampleTest);
accountTS.addTest(new SampleTest("testA"));
return sampleTS;
}
public function testA():void { // metoda testowa
var sample:Sample = new Sample();
assertEquals("Expecting zero", 0, sample.getBalance()); // asercja
}
override public function setUp():void {
}
override public function tearDown():void {
}
}

50 FLEX
 Test Driven Development

cyjnego procesu wytwarzania oprogramowania,
w którym testy (czy to weryfikacyjne, walidacyj-
ne, wydajnościowe, czy to ilościowe) są przepro-
wadzane zazwyczaj w końcowych fazach proce-
su wytwarzania oprogramowania z domniema-
niem sukcesu, o którym była mowa wyżej, była
to koncepcja nadzwyczaj rewolucyjna, ale jak się
później okazało słuszna. Ze zdroworozsądkowego
punktu widzenia, wydawało się od razu, że pro-
gramiści będą mieć większy zapał, aby pisać te-
sty na początku fazy wdrożenia, niż w kolejnych
fazach. Każdy z nas ma najwięcej zaangażowania
na początku prac, najmniej na żmudnym końcu,
kiedy należy poprawiać i poprawiać, i nie zawsze
wiadomo, gdzie się popełniło błąd. Kod tworzo-
ny wedle ścisłych reguł umożliwiających auto-
matyzację testowania oraz przypadków testo-
wych będzie łatwiejszy w pielęgnacji i rozbudo-
wie. TDD nie jest metodyką testowania, ale uży-
wania testów w celu wytwarzania oprogramowa-
nia w sposób przyrostowy i zorientowany na me-
todyki lekkie. Owe używanie testów w procesie
produkcyjnym powinno mieć cykl zaprezento-
wany na Rysunku 1.
Utylitarność metodologii TDD bierze się nie
tylko z faktu, niezaprzeczalnych atutów płyną-
cych z teorii, ale również, a być może należy na-
pisać przede wszystkim, z łatwości zaadaptowa-
nia procesu produkcyjnego pod nią oraz z do-
syć dużej liczby narzędzi wspierających jej sto-
sowanie w praktyce.
Słuszność tej tezy potwierdza się również
w przypadku wytwarzania oprogramowania
w oparciu o technologię Flex, dla której najbar-
dziej popularnym w tej chwili frameworkiem
testów jednostkowych pozwalającym na stoso-
wanie idei TDD jest FlexUnit.
Zanim zaczniemy
Przed rozpoczęciem instalacji oraz stworze-
niem przykładowych przypadków testowych,
musimy zrozumieć podstawowe terminy me-
todyki TDD.
Przypadek testowy (ang. test case)
Przypadek testowy to najmniejsza jednostka te-
stowa, która sprawdza poprawność wartości, ja-
ką zwraca test na wyjściu, biorąc pod uwagę war-
tość, która pojawia się na jego wejściu. Przypa-
dek testowy w kontekście elementów języka Ac-
tionScript stanowi klasę, która dziedziczy po kla-
sie TestCase i ma konstruktor, który wywołu-
je za pomocą metody super() konstruktor kla-
sy bazowej. Klasa przypadku testowego może za-
wierać przeciążone dwie metody setUp() oraz
tearDown(), które służą do ustawiania warto-
ści obiektów niezbędnych dla środowiska, w któ-
rym wykonuje się przypadek testowy przed wy-
konaniem testu setUp() oraz po jego zakończe-
niu tearDown(). Metody te ułatwiają m.in. inicja-
cję wspólnego zbioru obiektów dla więcej niż jed-
nego przypadku testowego (patrz na Listing 1.).
Zestaw testowy (ang. test suite)
Służy do grupowania przypadków testowych
oraz innych zestawów testowych. Agregacja wy-
branych testów w zestaw testowy jest niezbęd-
na dla możliwości zadeklarowania, jakie testy
mają się wykonać w danej sesji.
Asercja (ang. assertion)
Predykat to wyrażenie behawioralne, któ-
re zwraca prawdę lub fałsz, umieszczamy go
w pewnym miejscu w kodzie przypadku testo-
wego. Wskazuje on, że programista zakłada, że
dany warunek jest prawdziwy. W przypadku,

Rysunek 2. Flex Builder 3

�����������

����
������������

Rysunek 3. Tworzenie nowego projektu

����������

������������������
������������

Rysunek 1. Cykl TDD Rysunek 4. Dodanie zewnętrznej biblioteki

www.sdjournal.org 51
 ADOBE FLEX

gdy predykat jest fałszywy, (czyli niespełnio-

ne są warunki postawione przez programistę) Listing 2. Operator testu
asercja powoduje przerwanie wykonania pro- <?xml version="1.0" encoding="utf-8"?>
gramu. Asercja jest realizowana za pomocą me- <mx:Application
tod np. assertEquals (message, input – war- xmlns:mx="http://www.adobe.com/2006/mxml"
tość oczekiwana, output – wartość aktualna), xmlns:flexunit="flexunit.flexui.*"
które sprawdzają poprawność predykatów. creationComplete="onCreationComplete()">
<mx:Script>
Operator testu (ang. test runner) <![CDATA[
Jest to komponent uruchomieniowy zestawów private function onCreationComplete():void
testów bądź przypadków testowych. Ma on gra- {
ficzny interfejs oraz pozwala zaprezentować testRunner.test =CartTest.suite();
wykonywanie się zadeklarowanych przypad- testRunner.startTest();
ków testowych. Robimy to przypisując do pa- }
rametru test komponentu TestRunner zestaw ]]>
testowy. Uruchamia się go używając metody </mx:Script>
startTest() komponentu TestRunner. <flexunit:TestRunnerBase id="testRunner" width="100%" height="100%" /> // operator
Przykład znajduje się na Listingu 2. testu
</mx:Application>
No to zaczynamy!
Pierwsze co musimy zrobić to pobrać źródła bi- Listing 3. Klasa zawierająca przypadek testowy
blioteki FlexUnit. Znajdują się one pod adresem: package
http://labs.adobe.com/wiki/inde x.php/ {
ActionScript_3:resources:apis:libraries#FlexUnit. import flexunit.framework.TestCase;
Instalacja ogranicza się do rozpakowania ar- import flexunit.framework.TestSuite;
chiwum. Ja wypakowane pliki umieściłem
w katalogu: D:\Programowanie\flexDev\flex public class CartTest extends TestCase
Unit. Po rozpakowaniu archiwum w katalogu {
flexUnit znajdą się katalogi bin, docs i src oraz public function CartTest(methodName : String){
plik z licencją (license.txt). super(methodName);
}
Przykładowy projekt
Stworzymy klasę obsługującą prosty koszyk public static function suite():TestSuite{
w sklepie internetowym. Każdy, kto chociaż var cartTS:TestSuite = new TestSuite();
raz odwiedził taki sklep zauważy, że jest ona //tutaj umieścisz testy
trywialna i brakuje jej wielu niezbędnych funk- return cartTS;
cjonalności, jednak wystarczy do zrozumienia, }
jak tworzy się aplikacje za pomocą TDD. }
Do stworzenia przykładowej aplikacji wyko- }
rzystałem środowisko Flex Builder 3.
Do pobrania z https://www.adobe.com/ Listing 4. Klasa, którą będziemy testować
cfusion/tdrc/index.cfm?product=flex lub dostęp- package
ne na DVD. {
public class Cart
Utworzenie nowego projektu {
Z menu File wybieramy pozycję New/Flex Pro- public function Cart(){
ject. Otworzy się okno kreatora (Rysunek 3.), }
w pierwszym kroku należy nadać nazwę pro- }
jektowi, np. TDD Tests. }
Możesz też zmienić domyślny katalog, w któ-
rym będzie zapisany projekt, na jakiś dowolnie Listing 5. Test nr 1
wybrany odznaczając pozycję Use default loca- public function testNew():void{
tion. Pozostałe opcje pozostaw bez zmian i na- var cart:Cart = new Cart();
ciśnij Next. W kolejnym kroku ustaw katalog, assertEquals("Nic nie powinno być w koszyku", 0, cart.getQuantity());
gdzie będą zapisywane skompilowane pliki. Tu }

Listing 6. Metoda suite()

public static function suite():TestSuite{
var cartTS:TestSuite = new TestSuite();
cartTS.addTest(new CartTest("testNew"));

return cartTS;
}
Rysunek 5. Pierwszy błąd

52 FLEX
 Test Driven Development

taj możesz nic nie zmieniać i przejść od razu
do kolejnego kroku (przyciskając Next). W tym
kroku ustawimy ścieżki do zewnętrznych bi-
bliotek – czyli w tym przypadki do FlexUnit.
Wybierz zakładkę Library path i naciśnij przy-
cisk Add SWC (Rysunek 4.). Wskaż plik flexu-
nit.swc, znajduje się on w podkatalogu bin, kata-
logu flexUnit. Teraz możesz już wcisnąć Finish
– projekt został utworzony.
Utworzenie pliku main.mxml
Plik MXML dla tego przykładu znajduje się już
w części opisującej operatora testu (test runner),
Listing 2. W pliku tym przede wszystkim:
• tworzymy nową przestrzeń nazw dla na-
szej aplikacji,
• przypisujemy metodę onCreationComlete
do zdarzenia creationComplete ,
• umieszczamy instancję komponentu
TestRunnerBase .
Zawiera też jedną statyczną metodę suite(),
która w wyniku swojego działania zwraca ze-
staw testowy.
Utworzenie klasy koszyka
Oczywiście musisz utworzyć jeszcze klasę, któ-
rą będziesz testować. Umieść ją w pliku Cart.as
Na początku będzie ona bardzo prosta jak na
Listingu 4.
Pierwszy test
Kiedy pierwszy raz wchodzisz do sklepu in-
ternetowego, Twój koszyk jest na początku pu-
sty. Jest to oczywiste, nie zdążyłeś jeszcze wy-
brać niczego co chciałbyś kupić. Jednak, aby się
o tym przekonać potrzebna jest metoda, która
poda ilość towarów znajdujących się w koszyku,
a w tym konkretnym przypadku poda 0. Czyli
masz już założenia do pierwszego testu.
W TDD piszesz najpierw test, a dopiero póź-
niej testowaną metodę. Test umieść w funkcji
testNew() w pliku CartTest.as (Listing 5.).
Funkcja testująca tworzy nową zmienną kla-
sy Cart oraz ustanawia nową asercję metodą
assertEquals(). Metoda ta ma trzy parametry:
assertEquals(„Nic nie powinno być w
koszyku”, 0, cart.getQuantity());
String Nic nie powinno być w koszyku to po pro-
stu komentarz dodany w celach informacyj-
nych. 0 to wartość, jaką powinna zwrócić testo-
wana metoda, a cart.getQuantity() to wła-
śnie testowana metoda.

Stworzenie nowej przestrzeni nazw:

xmlns:flexunit="flexunit.flexui.*"

Kod tworzy przestrzeń nazw flexunit, któ-

ra jest powiązana z pakietem flexunit.flexui.
Masz dostęp do tego pakietu, ponieważ doda-
łeś plik flexunit.swc do projektu.
Aby umieścić instancję komponentu Test
RunnerBase, wystarczy wpisać taką linijkę:

<flexunit:TestRunnerBase id="testRunner" />

Gdybyś inaczej nazwał przestrzeń nazw, rów-

nież ta linia wyglądałaby inaczej:

<jakas_nazwa:TestRunnerBase id="testRunner" />

Komponent TestRunnerBase to nasz operator

testu (ang. test runner), dlatego przypisaliśmy
mu odpowiednie ID.
Przejdźmy do metody onCreationComle Rysunek 6. Odwołanie do nieznanej metody
te(). Jest ona wywoływana przez zdarzenie
creationComplete i robi dwie rzeczy. Wczytu-
je testy do naszego operatora:

testRunner.test =CartTest.suite();

i uruchamia je:

testRunner.startTest();

Utworzenie zastawu testowego

Teraz utworzysz plik ActionScript o nazwie
CartTest.as, w którym będziesz umieszczać te-
sty – Listing 3.
Jak zauważyłeś nasza klasa (CartTest) roz-
szerza klasę TestCase z pakietu FlexUnit. Jej
konstruktor wywołuje konstruktor klasy ma-
cierzystej, wysyłając mu nazwę jakiejś metody:

super(methodName); Rysunek 7. Okno operatora testu

www.sdjournal.org 53
 ADOBE FLEX

Metoda assertEquals() porównuje otrzy-
many wynik działania z zakładanym.
Aby test został wykonany, musisz go jeszcze
dodać do zestawu. Dopisz poniższy kod do me-
tody suite() w pliku CartTest.as
cartTS.addTest(new CartTest("testNew"));
Czyli dodajesz test (nową zmienną klasy
CartTest – tej, w której właśnie jesteś) do
zestawu za pomocą metody addTest(). Ja-
ko parametr dla konstruktora podajesz na-
zwę funkcji testującej (w konstruktorze:
super(methodName);).
Teraz metoda suite() powinna wyglądać
tak jak na Listingu 6.
Pierwszy etap projektowania aplikacji masz już
za sobą (Rysunek 1.). Aby przejść do następnego,
skompiluj i uruchom aplikację [Ctrl] + [F11].
Powinieneś otrzymać raport o pierwszym
błędzie (Rysunek 5.). Przyczyną jest oczywi-
ście to, że nie zaimplementowałeś jeszcze testo-
wanej metody (Rysunek 6.).
Przejdź zatem do etapu 3 z Rysunku 1. i na- śmy wartości 0, a otrzymaliśmy NaN (Not
pisz odpowiednią metodę w klasie Cart. Będzie a Number). Aby go poprawić, wystarczy nadać
ona teraz wyglądała tak jak na Listingu 7. zmiennej _quantity wartość 0 podczas two-
Utworzyłeś zmienną quantity i napisałeś rzenia nowej zmiennej tej klasy, czyli w kon-
metodę getQuantity(), która zwraca jej war- struktorze:
tość. Skompiluj ponownie projekt. Powinieneś
otrzymać rezultat jak na Rysunku 7. public function Cart(){
Operator wykonał pierwszy test, który za- _quantity = 0;
kończył się niepowodzeniem. Oczekiwali- }
Listing 8. Test ilości przedmiotów w koszyku
public function testAddNewItem():void{
var cart:Cart = new Cart();
var newItem:Object = {id:731, name:"Książka", price:26.80};
cart.addItem(newItem);
assertEquals("Powinien być jeden przedmiot", 1, cart.getQuantity());
}
Listing 9. Dodajemy nowy test
public static function suite():TestSuite{
var cartTS:TestSuite = new TestSuite();
cartTS.addTest(new CartTest("testNew"));
cartTS.addTest(new CartTest("testAddNewItem"));
return cartTS;
}

Listing 10. Wprowadzamy zmiany do pliku Cart.as

package
{
public class Cart
{
private var CartItems:Array = new Array();
public function Cart(){
Rysunek 8. Okno operatora testu – test zaliczony
}
public function getQuantity():Number{
return CartItems.length;
}
public function addItem(item:Object):void{
CartItems.push(item);
}
}
}

Listing 11. Testujemy i wprowadzamy nowe funkcjonalności

Rysunek 9. Wynik czwartego testu public function testAddItemAndCalc():void{
var cart:Cart = new Cart();

Listing 7. Piszemy metodę w klasie Cart var newItem:Object = {id:731, name:"Książka", price:26.80};
cart.addItem(newItem);
package newItem = {id:945, name:"Płyta", price:32.50};
cart.addItem(newItem);
{ assertEquals("Powinienny być dwa przedmioty", 2, cart.getQuantity());
public class Cart assertEquals("Wartość towarów w koszyku", 59.30, cart.getValue());
{ }
private var _quantity:Number;
public function Cart(){ Listing 12. Dodajemy kolejną metodę do klasy Cart
} public function getValue():Number{
public function getQuantity(): var val:Number = 0;
Number{ for(var i:int = 0; i<CartItems.length; i++){
return _quantity; val += CartItems[i].price;
} }
} return val;
} }

54 FLEX
 Test Driven Development

Skompiluj projekt ponownie. Tym razem test
powinien zostać zaliczony (Rysunek 8.).
Udało ci się przejść pełny cykl TDD, w wy-
niku czego napisałeś klasę poprawnie inicjali-
zującą koszyk.
Kolejne testy
Teraz przydałoby się coś wrzucić do koszyka.
Napiszmy więc test, który doda jakiś towar do
koszyka i sprawdzi ile przedmiotów się w nim
znajduje po tej operacji (Listing 8.). A następ-
nie dodajmy nowy test do zestawu wg Listingu
9. Oczywiście po kompilacji otrzymasz błąd:
Error: Powinien być jeden przedmiot
expected:<1> but was:<0>
Jest to spowodowane tym, że w klasie Cart
nie ma jeszcze metody addItem(). Dopiszmy
ją zatem. W tym momencie zauważysz też
błąd w początkowych założeniach klasy Cart.
Bardziej logiczne byłoby utworzenie tablicy,
gdzie będą zapisywane kolejne przedmioty.
W takim przypadku nie będzie już potrzeb-
na zmienna _ quantity, ponieważ zawsze mo-
żemy odczytać długość takiej tablicy. Wpro-
wadź zatem zmiany do pliku Cart.as wg Li-
stingu 10.
Skompiluj projekt. Tym razem nie powinie-
neś otrzymać żadnych błędów.
Listing 13. Test obliczeń rabatu
Kolejną funkcjonalnością, jaką dodamy do
naszego koszyka, będzie podanie wartości na-
szych zakupów. Dodajmy też jeszcze jeden
przedmiot, aby sprawdzić czy poprawnie jest
obliczana wartość całego zamówienia. Zacznie-
my oczywiście od testu (Listing 11.).
W tym teście wprowadziliśmy dwie asercje.
Pierwsza sprawdza ilość towarów w koszyku,
a druga ich łączną wartość. Dodaj jeszcze test
od zbioru, umieszczając kolejną linie w meto-
dzie suite():
cartTS.addTest(new CartTest("testAddItemAnd
Calc"));
- cenę należy zaokrąglić do pełnych groszy. Za-
Po kompilacji otrzymasz znany już błąd o bra-
ku metody w klasie Cart , czyli należy ją dopi-
sać wg Listingu 12.
Po kompilacji testy powinny wykonać się po-
prawnie.
Załóżmy, że projektowany przez nas sklep bę-
dzie udzielał rabatów niektórym klientom. Na-
pisz zatem test, który sprawdza poprawność
obliczenia rabatu 15%, tak jak na Listingu 13.
Dodaj go do zestawu dopisując linię:
cartTS.addTest(new CartTest("testPriceWithD
iscount"));
do metody suite() w klasie CartTest .
Po kompilacji ponownie otrzymałeś błąd in-
formujący o braku metody w klasie Cart. Tym
razem chodzi o metodę getDiscountValue().
Obliczy ona cenę towarów po rabacie i zwróci
jej wartość. Procent rabatu przekażemy do me-
tody jako parametr (Listing 14).
Skoro funkcja jest gotowa, skompiluj projekt.
Powinieneś uzyskać efekt podobny do tego
z Rysunku 9. Test zwrócił błąd:
Error: Wartość towarów po udzieleniu rabatu
15% - expected:<50.41> but was:<50.405>
Czyli rabat jest obliczony poprawnie, jednak
tem musisz dodać odpowiednie obliczenia do
naszej metody (Listing 15.).
Skompiluj projekt jeszcze raz. Teraz wszyst-
ko powinno być już w porządku.
Podsumowanie
Na tym prostym przykładzie powinieneś zro-
zumieć technikę TDD. Oczywiście w prak-
tyce będziesz ją wykorzystywał do progra-
mowania bardziej skomplikowanych rze-
czy. Przekonałeś się, jak można programo-
wać od tyłu – najpierw sprawdzając wynik,
a później pisząc i poprawiając kod generują-
cy. Przy projektowaniu dużych i skompliko-
wanych aplikacji technika ta może okazać się
nieoceniona, skracając i upraszczając pracę
programistów.

public function testPriceWithDiscount():void{ Słowniczek stosowanych terminów

var cart:Cart = new Cart(); • Test jednostkowy (ang. unit test) – to w pro-
var newItem:Object = {id:731, name:"Książka", price:26.80}; gramowaniu obiektowym, a w szczegól-
cart.addItem(newItem); ności programowaniu ekstremalnym kod,
newItem = {id:945, name:"Płyta", price:32.50}; który uruchamia fragment testowanego
cart.addItem(newItem); programu i porównuje jego wynik z oczeki-
assertEquals("Wartość towarów po udzieleniu rabatu 15%", 50.41, cart.getDiscountVa wanym;
lue(15)); • eXtreme programming (XP) – programo-
} wanie ekstremalne jest reprezentantem
zwinnych metodyk programowania (ang.
Listing 14. metoda getDiscountValue() obliczy cenę towarów po rabacie i zwróci jej wartość agile), która kładzie nacisk na dostar-
public function getDiscountValue(discount:Number):Number{ czanie klientowi funkcjonalności przy
szczątkowej formie dokumentacji;
var val:Number = getValue(); • Test Driven Development (TDD) – jest
val -= val * (discount/100); techniką wytwarzania oprogramowania
return val; w kontekście zwinnej metodyki XP zo-
} rientowaną na iteracje oraz przypadki te-
stowe. Podstawowa zasada – testuj kod
Listing 15. Szlifujemy metodę, tak by zaokrąglała cenę do pełnych groszy zanim go napiszesz;
public function getDiscountValue(discount:Number):Number{ • FlexUnit – jest frameworkiem testów
jednostkowych dla języka programowa-
var val:Number = getValue(); nia ActionScript 3.0 oraz środowiska
var roundVal:Number = 0; Flex.

val -= val * (discount/100);

roundVal = Math.round(val * 100)/100;
PAWEŁ CICHOŃ,
return roundVal; TOMASZ KULCZYCKI
} Janmedia Interactive
http://www.janmedia.pl/

www.sdjournal.org 55
 ADOBE FLEX
Adobe Cairngorm
Framework architektoniczny dla Adobe Flex
Niezaprzeczalnymi faktami potwierdzającymi to, że aplikacje Internetowe
będą miały coraz większe znaczenie, a dla nas programistów wiedza na ich
temat będzie coraz bardziej potrzebna, są działania największych graczy
rynku Internetowego.
Dowiesz się...
• O najpopularniejszym frameworku MVC dla
platformy Adobe Flex.
• Jaka jest jego zasada działania.
• Jak wykonać przykładowy projekt wykorzy-
stując Adobe Cairngorm.
Poziom trudności
P
o pierwszych sukcesach Adobe Flex,
Microsoft prężnie zaczął rozwijać
swój najnowszy produkt – Silverlight,
a Sun oficjalnie ogłosił stworzenie konku-
rencyjnej technologii JavaFX. Spośród nich,
omawiana platforma jest najbardziej dojrza-
łą i rozbudowaną. Jako programista i konsul-
tant korzystający na co dzień z Adobe Flex
wierzę, że jej nazwa ukrywa w sobie cechę
tego środowiska (flex – ang. giętki). Jest ono
przyjazne osobom w nim pracującym, za-
wsze gotowe na zmiany w projekcie, zarów-
no graficzne, jak i funkcjonalne. Flex w wer-
sji 3 jest opublikowany na licencji Open Sour-
ce, co oznacza, że środowisko jest rozszerzal-
ne i stale udoskonalane.
Projekty Flexowe z natury są aplikacjami
internetowymi wypełnionymi funkcjonalno-
ściami, które mają za zadanie stworzenie wy-
soce interaktywnego, atrakcyjnego i przyja-
znego interfejsu. Wykorzystując tę platfor-
mę, możemy dostarczać naszym klientom
produkty przynoszące nową jakość usług biz-
nesowych.
Przepis jest prosty: potrzebujemy jakieś
źródło danych, np. Web Service, kilka goto-
wych komponentów interfejsu użytkowni-
ka, trochę ActionScriptu, aby wszystko zwią-
zać razem i mamy działającą aplikację inter-
56
Powinieneś wiedzieć...
• Wymagana jest znajomość zasady działania
wzorca MVC.
• Wiedza na temat wzorców projektowych i za-
sad programowania obiektowego.
netową! Rezultat, który otrzymujemy jest za-
skakujący w porównaniu, do pracy jaką wło-
żyliśmy w jego stworzenie. Jest to jedna z za-
sad tworzenia współczesnego oprogramowa-
nia Internetowego. Prędkość i poziom funk-
cjonalności z jaką możemy stworzyć gotowy
produkt stały się najważniejszymi wartościa-
mi biznesowymi.
Jednak co się wydarzy, gdy zaczniemy się
mierzyć z kolejnymi modyfikacjami funkcjo-
nalności, graficy zarzucą nas nowymi elemen-
tami interfejsu, a technologia połączenia z ser-
werem, jak i komunikat z niego otrzymywany
gruntowanie się zmieni? Co będzie, gdy zajdzie
się potrzeba dodania kolejnych elementów apli-
kacji? Gdy do zespołu dołączy nowy programi-
sta? Odpowiedź jest prosta – jakość pracy w ze-
spole będzie współzależna od jakości dotych-
czasowego kodu. Niestety wraz z wprowadza-
niem zmian w projekcie, rozpoczyna się cha-
os. W takiej sytuacji z pomocą przychodzą fra-
meworki architektoniczne. Dlaczego warto więc
podjąć wyzwanie wprowadzając tego typu roz-
wiązania do projektów? Odpowiedzi można
mnożyć, poniżej wymienię te najważniejsze:
• Dostajemy do ręki gotowy i sprawdzony
przepis na dobrze rozwarstwioną i prze-
myślaną aplikację, mogąc skupić się na pro-
gramowaniu elementów naszej aplikacji,
a nie na tym jak rozwiązać problem archi-
tektury;
• Nie chcemy spędzać kolejnych dni na
wprowadzaniu nawet najprostszych
zmian do naszej aplikacji;
• Możemy programować równolegle z wielo-
ma programistami, mając jasny podział ról
i odpowiedzialności, wykorzystując usta-
loną komunikację między warstwami na-
szego projektu.
Cairngorm jest z natury lekkim framewor-
kiem (obciążenie klasami tego frameworka
jest stosunkowo nieduże). Idee będące jego
filarem zostały nakreślone już w 2002 roku
przez zespół Macromedii. Miały one za za-
danie zastosowanie sprawdzonych wzorców
projektowych języka Java (Core J2EE Pat-
tern Catalog) we współczesnym Flash MX.
Duży wpływ na projekt mieli programi-
ści iteration::two, Steven Webster oraz Ali-
star McLeod, którzy obecnie należą do ze-
społu Adobe Consulting oficjalnie tworzą-
cego ten produkt. Opierając się na silnych
podstawach programistycznych, Cairngorm
był rozwijany wewnątrz firmy Adobe i zo-
stał publicznie zaprezentowany jako pro-
jekt typu Open Source w listopadzie 2004 ro-
ku podczas konferencji Macromedia MAX
2004 w Nowym Orleanie. Wówczas była to
wersja oznaczona numerem 0.95. Aktual-
nie Cairngorm jest rozbudowywany przez
zespół doświadczonych programistów i dzie-
li się na dwie wersje Standard oraz Enterpri-
se, znajdując wykorzystanie zarówno w ty-
powych aplikacjach internetowych opartych
o Flex, jak i aplikacjach desktopowych wyko-
rzystujących Adobe AIR.
Cairngorm jest w pełni oparty o architektu-
rę MVC. Będąc całkowicie przygotowanym pod
środowisko Flexa, pozwala on w pełni wykorzy-
stać zalety, jakie ono niesie. Wykorzystuje zna-
ne wzorce projektowe, które omówimy w kolej-
nych częściach tego artykułu. Stworzenie apli-
kacji opartej o ten fremawork wymaga zrozu-
mienia poszczególnych elementów go współ-
tworzących. W tym artykule stworzymy pro-
stą aplikację wyświetlającą książki, wchodzące
w skład pewnej podręcznej biblioteczki.
FLEX

Struktura aplikacji
opartej o Cairngorm
Przedstawiona na Rysunku 1. struktura, opiera
się o podzielenie elementów na główne składo-
we naszej aplikacji. Całość zostanie omówiona
w poszczególnych częściach tego artykułu.
Zarządzanie danymi aplikacji
Podczas tworzenia aplikacji, do pobrania
i prezentowania danych korzystamy z war-
stwy pośredniej, znanej jako warswa bizne-
sowa (ang. Business Tier). Dane przechowywa-
ne w relacyjnych bazach danych muszą zostać
zamienione na konkretne obiekty. Dodatko-
wo spoczywa na nas zadanie podtrzymania
ich spójności.
Z pomocą programistom przychodzą róż-
ne rozwiązania, np. JavaBeans, Hiberna-
te, ADO.NET czy nHibernate. Jako progra-
miści aplikacji internetowych RIA jesteśmy
zwolnieni z tego zadania, możemy skupić
się na odpowiednim przemyśleniu i zastoso-
waniu odpowiedniego modelu danych war-
stwy biznesowej i przedstawieniu go za po-
mocą warstwy prezentacji. Cairngorm opie-
ra się na dwóch wzorcach projektowych uży-
tych do zarządzania informacją przechowy-
waną w naszej aplikacji: Model Locator oraz
Value Object.
Dane dostarczone nam przez zewnętrzne
źródło przechowywane są w postaci obiektów
implementujących interfejs IValueObject.
W naszym przykładzie klasa ta będzie bardzo
prosta – będziemy mieć tu kilka właściwości
tj. tytuł, autor, wydawnictwo i datę wydania.
Całość obejmiemy metatagiem [Bindable],
co pozwoli na skorzystanie z mechanizmu
tzw. Data Bindingu. Ułatwia on prezentowa-
nie modelu, automatycznie odświeżając ko-
lekcję tych obiektów, ściągając z nas obowią-
zek odświeżania elementów aplikacji. Mecha-
nizm działa w dwie strony (zmienny wpro-
wadzane w elementach interfejsu automa-
tycznie zostaną naniesione na odpowiadają-
ce obiekty modelu). Jest to jedna z cech Fle-
xa, która bardzo ułatwia pracę nad aplika-
cjami RIA. Możemy tu również skorzystać
z mechanizmu Remote Class, który pozwo-
li nam na bezpośrednie zmapowanie obiek-
Rysunek1. Struktura Projektu
www.sdjournal.org
Cairngorm
tów strony serwera (obiektów platform Ja- istniejące już klasy, np. bardzo często zda-
va, ColdFusion, PHP, Ruby lub .Net). Imple- rza się użycie obiektów opartych o kolekcję
mentując ten interfejs, możemy rozszerzać ArrayCollection. Przykładowa implementa-
Listing 1. Implementacja oparta na wzorcu Value Object
package com.wjptak.samplelibrary.vo
{
import com.adobe.cairngorm.vo.IValueObject;
[Bindable]
public class BookVO implements IValueObject
{
public var title:String;
public var author:String;
public var publisher:String;
public var yearPublished:Number;
}
}
Listing 2. Implementacja Model Locator
package com.wjptak.samplelibrary.model
{
import com.adobe.cairngorm.CairngormError;
import com.adobe.cairngorm.CairngormMessageCodes;
import com.adobe.cairngorm.model.IModelLocator;
import mx.collections.ArrayCollection;
[Bindable]
public class LibraryModelLocator implements IModelLocator
{
private static var modelLocator:LibraryModelLocator;
public static function getInstance():LibraryModelLocator
{
if(modelLocator == null) {
modelLocator = new LibraryModelLocator();
}
return modelLocator;
}
public function LibraryModelLocator():void {
if(modelLocator != null) {
throw new CairngormError(
CairngormMessageCodes.SINGLETON_EXCEPTION, "ModelLocator"
);
}
modelLocator = this;
}
// DANE NASZEGO MODELU ==============================
public var books:ArrayCollection;
public var applicationState:Number = 0;
// STALE OKRESLAJACE MOZLIWE STANY WIDOKU ===========
public static const VIEW_DATA:Number = 0;
public static const ENTRY_DATA:Number = 1;
}
}
57
 ADOBE FLEX

cja oparta na wzorcu Value Object przedsta- Rozwiązanie to posiada zarówno zalety, jak go wzorca w naszej aplikacji jest następująca
wiona jest na Listingu 1. i wady – w związku z kontrowersjami, jakie (Listing 2.).
Konstrukcja pliku jest dość prosta, więc budzi wśród programistów prawdopodob- W katalogu model możemy umieścić rów-
przejdźmy dalej. Do przechowywania pre- nie w następnych wersjach frameworka zosta- nież inne klasy rozszerzające funkcjonalność
zentowanych informacji, jak i wszelkich nie zamienione na inne. Zaletą tego rozwią- naszego modelu, w miarę jak stopień skom-
danych dotyczących naszej aplikacji, jak zania jest prosty dostęp do danych przecho- plikowania aplikacji wzrasta. Charaktery-
np. stanów komponentów widoku, uży- wywanych w naszej aplikacji, natomiast wią- styczna implementacja wzorca Singleton
wamy obiektu implementującego interfejs że się to ze złamaniem kilku zasad obiekto- wynika z cechy ActionScript 3.0, jaką jest
IModelLocator. Model Locator jest wzorcem wości (do Singletona nie możemy zastoso- nieudostępnienie prywatnych konstrukto-
projektowym opartym o wzorzec Singleton. wać zasad polimorfizmu). Implementacja te- rów. Dostęp do obiektu mamy więc za pomo-
cą wywołania metody LibraryModelLocator
Listing 3. Tworzenie pliku business/Services.mxml .getInstance().
Możemy zauważyć, że dane w na-
<cairngorm:ServiceLocator szej aplikacji przechowujemy w kolekcji
xmlns:cairngorm="com.adobe.cairngorm.business.*" ArrayCollection. Umożliwia ona zastoso-
xmlns:mx="http://www.adobe.com/2006/mxml"> wanie mechanizmu wspomnianego wcze-
śniej – Data Bindingu, co ułatwi nam znacz-
<mx:HTTPService id="BookAssets" nie prezentowanie przechowywanych w niej
url="data/sample_books.xml" obiektów.
makeObjectsBindable="true"
showBusyCursor="true" Komunikacja z zasobami danych
resultFormat="e4x" /> Ideą każdej aplikacji RIA jest przedstawienie
w interaktywny sposób pewnych danych użyt-
</cairngorm:ServiceLocator> kownikowi. Chociaż kod jest w całości wyko-
nywany po stronie klienta, źródło danych znaj-
duje się najczęściej na serwerze, na którym by-
Listing 4. Tworzenie klasy Business Delegate w katalogu business
ła umieszczona również aplikacja. Flex daje
package com.wjptak.samplelibrary.business nam bardzo duże możliwości połączenia z do-
{ wolnymi współczesnymi językami serwerowy-
import com.adobe.cairngorm.business.ServiceLocator; mi przy wykorzystaniu kilku mechanizmów,
m.in. HTTPService – pliki XML oraz komu-
import mx.rpc.AsyncToken; nikaty w formie JSON, Web Service – za-
import mx.rpc.IResponder; równo REST, jak i SOAP oraz RemoteObject
– najsilniejsze rozwiązania przesyłające obiek-
public class GetBasicDataDelegate ty w ich natywnej formie. Cairngorm wystę-
{ puje w wersjach Standard oraz Enterprise. Ta
druga rozszerza funkcjonalność frameworka
private var responder : IResponder; o klasy wspomagające mechanizmy Remote
private var service : Object; Object, szczególnie mowa tu o LiveCycle
Data Services.
public function GetBasicDataDelegate( responder : IResponder ) Aplikacja oparta o Cairngorm jako central-
{ ne miejsce przechowujące dostęp do możli-
this.service = ServiceLocator.getInstance().getHTTPService( "BookAssets" ); wych do użycia serwisów wykorzystuje wzo-
this.responder = responder; rzec Service Locator. Jest to klasa oparta na
} Singletonie, której implementacja w tworzo-
nej aplikacji sprowadza się do stworzenia na-
public function getData():void stępującego pliku business/Services.mxml (Li-
{ sting 3.).
var call:AsyncToken = service.send(); W naszym przykładzie aplikacja będzie ko-
call.addResponder( this.responder ); rzystać z danych umieszczonych w pliku .xml
} na serwerze w katalogu <katalog_aplikacji>/
data/, wykorzystując w tym celu komponent
} HTTPService. Dodatkowo zaznaczyliśmy, aby
} automatycznie wymuszać mechanizm Data
Binding–u na tworzonych obiektach (make-
ObjectsBindable=“true“), pokazać podczas
pobierania pliku kursor oczekiwania (shwoBu-
syCursor=“true“) oraz zwrócić dane w forma-
������������� ������ cie E4X (resultFormat=“e4x“). W przypadku
����� ������� ����� �����
��������� ���������� potrzeby skorzystania z innych lub większej ilo-
ści serwisów modyfikujemy odpowiednio omó-
wiony plik.
Użycie konkretnego serwisu odbywa się
Rysunek 2. Przepływ zdarzenia w aplikacji opartej o Cairngorm przez odpowiednio przygotowany mechanizm,

58 FLEX

oparty o zdarzenia, który zostanie omówiony
w dalszej części. Cairngorm do wywołania kon-
kretnego serwisu używa klas wzorca Business
Delegate. Spełniają one potrójne zadanie – lo-
kalizują poprzez Service Locator odpowied-
ni serwis, wywołują go oraz przesyłają wynik
zapytania do odpowiedniego obiektu rozsze-
rzającego klasę Responder. W naszym przykła-
dzie odwołujemy się do pliku sample_books.xml
poprzez HTTPService. Aby z niego skorzy-
stać, tworzymy odpowiednią klasę Business
Delegate w katalogu business, co widać na Li-
stingu 4.
Do konstruktora tej klasy przekazujemy re-
ferencję do obiektu opartego o Responder. Na-
stępnie chcąc wywołać dany serwis, korzysta-
my z metody getData(). Analogicznie wygląda
zapytanie, mającego na celu przesłanie danych
do serwera np. zapisu do bazy danych. W takim
przypadku wywołujemy odpowiednią metodę
obiektu service, przekazując jako parametry
przesyłane dane.
Warstwa kontrolera
aplikacji opartej o Cairngorm
Aplikacje tworzone w oparciu o omawiany fra-
mework wykorzystują wzorzec Service to
Worker. Cairngorm jest oparty o to rozwiązanie.
Na pierwszy rzut oka konstrukcja, z której przyj-
dzie nam skorzystać, może wydawać się zagma-
twana. Aby lepiej zrozumieć tę ideę, przybliżmy
klasy wchodzące w skład frameworka:
• CairgnormEvent – dziedziczy po Event .
Aby zbudować poprawną komunikację
opartą o zdarzenia, na której opiera się Ca-
irngorm, wykorzystujemy obiekty budo-
wane w oparciu o tą właśnie klasę;
• CairngormEventDispatcher – centralny
punkt komunikacji opartej na zdarzeniach.
Jest oparty na Singletonie, podobnie jak
omówiony wcześniej Model Locator. Słu-
ży do rozgłaszania zdarzeń zbudowanych
w oparciu o CairngormEvent ;
• FrontController – przyporządkowuje
stworzone przez nas klasy rozszerzające
CairngormEvent do odpowiadających im
klasom wzorca Command ;
• ICommand – Budując klasy korzystające ze
wzorca Command , musimy zaimplemento-
wać ten interfejs. Wymaga to od nas opra-
cowania odpowiedniej metody execute(),
która jest przyporządkowana poprzez
FrontController do odpowiedniego zda-
rzenia CairngormEvent .
Podczas fazy analizy projektowanej aplika-
cji tworzymy diagramy przypadków uży-
cia. Następnie, stosując Cairngorm, każdy
przypadek użycia zamieniamy na parę klas
CairngormEvent – ICommand . Jeżeli wymaga
on komunikacji z serwerem, musimy rozsze-
rzyć klasę implementującą ICommand poprzez
Responder, a dodatkowo stworzyć omówio-
www.sdjournal.org
Cairngorm
ną wcześniej implementację wzorca Business nać poprzez bezpośrednie przekazanie pożąda-
Delegate oraz określony odpowiednio serwis nego widoku, np.:
w pliku Services.mxml. Za dobrą praktykę uwa-
ża się oddzielenie Responder od ICommand – new SwitchViewEvent( LibraryModelLoca
tak aby wszystkie klasy wzorca Command mia- tor.ENTRY_DATA ).dispatch();
ły zbliżoną konstrukcję.
Przepływ zdarzenia w aplikacji opartej o Ca- Dokładnie będzie to pokazane podczas oma-
irngorm jest taki jak na Rysunku 2. wiania elementów warstwy prezentacji.
Jako prosty przykład posłużą nam klasy Zwróćmy uwagę, że użycie tego mechani-
służące do zmiany aktualnie wyświetlane- zmu jest bardzo proste. Nie musimy pisać kil-
go interfejsu naszej aplikacji. Klasa rozsze- ku linijek, załatwiamy wszystko w jednej. In-
rzająca Cairngorm Event jest taka jak na Li- ny element omawianej klasy, na który należy
stingu 5. zwrócić uwagę, to stała określająca typ zda-
Konstruktor tej klasy został tak zaprojekto- rzenia. Zastosowanie tu pełnej ścieżki klasy
wany, że rozgłoszenie zdarzenia możemy wyko- pozwala uniknąć sytuacji, gdy budując dużą
Listing 5. Klasa rozszerzająca Cairngorm Event
package com.wjptak.samplelibrary.events
{
import com.adobe.cairngorm.control.CairngormEvent;
import flash.events.Event;
public class SwitchViewEvent extends CairngormEvent
{
public static const SWITCH_VIEW:String = "com.wjptak.samplelibrary.events.Switc
hView";
public var view:Number;
public function SwitchViewEvent( newView:Number )
{
super( SwitchViewEvent.SWITCH_VIEW );
view = newView;
}
override public function clone():Event
{
return new SwitchViewEvent( view );
}
}
}
Listing 6. Klasa implementująca wzorzec Command
package com.wjptak.samplelibrary.commands
{
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.wjptak.samplelibrary.events.SwitchViewEvent;
import com.wjptak.samplelibrary.model.LibraryModelLocator;
public class SwitchViewCommand implements ICommand
{
public function execute(eventParam:CairngormEvent):void
{
var event:SwitchViewEvent = eventParam as SwitchViewEvent;
LibraryModelLocator.getInstance().applicatio
nState = event.view;
}
}
}
59
 ADOBE FLEX

aplikację zaczniemy duplikować nazwy ty- sujemy w konstruktorze, jakie zdarzenie bę- obraźmy sobie także inną sytuację – synchro-
pów zdarzeń. dzie rozgłoszone i w odpowiednim miejscu niczne pobieranie danych z serwera. Zastoso-
Jak już wspomniałem, potrzebna jest metody execute() należy wykonać metodę wanie tego mechanizmu znacznie upraszcza
nam również klasa implementująca wzorzec executeNextCommand(). W tworzonym przez naszą pracę.
Command. Dla pokazanego tu zdarzenia będzie nas przykładzie możemy pomyśleć o rozwiąza- Już wcześniej wspomnieliśmy o potrzebie
ona wyglądać tak jak na Listingu 6. niu dodającym do naszej kolekcji książek nowe zaprogramowania przypadków użycia komu-
Możliwe jest automatyczne stworzenie ta- egzemplarze, a następnie automatycznie prze- nikujących się z warstwami serwerowymi. Aby
kiej klasy rozgłaszającej kolejne zdarzenie łączającym widok (Listing 7.). przybliżyć mechanizm stosowany przez Cairn-
po wykonaniu swojego zadania. W tym ce- Zauważmy, że takie rozwiązanie upraszcza gorm, przeanalizujmy Rysunek 3.
lu należy zbudować ją poprzez rozszerze- zaprogramowanie skomplikowanych interak- To, co jest tu dla nas nowe to implemen-
nie klasy SequenceCommand. Następnie dopi- cji, gdzie musimy wykonać wiele operacji. Wy- tacja wzorca Command oraz Responder. Kla-
sa Business Delegate została już omówio-
Listing 7. Dodawanie do biblioteki nowych książek na – jak pamiętamy, aby wywołać żądany ser-
wis, musimy do jej konstruktora przekazać re-
package com.wjptak.samplelibrary.commands ferencję do obiektu Respondera, odpowiadają-
{ cego za zapis otrzymanego wyniku do nasze-
import com.adobe.cairngorm.commands.ICommand; go Modelu.
import com.adobe.cairngorm.commands.SequenceCommand; W związku z tym, przykładowe rozwiąza-
import com.adobe.cairngorm.control.CairngormEvent; nie wygląda następująco – najpierw przyjrzyj-
import com.wjptak.samplelibrary.events.AddElementEvent; my się klasie Command, znajdującej się podob-
import com.wjptak.samplelibrary.events.SwitchViewEvent; nie, jak i poprzednie w katalogu commands
import com.wjptak.samplelibrary.model.LibraryModelLocator; (Listing 8.).
import com.wjptak.samplelibrary.vo.BookVO; Jak widzimy, rozwiązanie jest niezwy-
kle przejrzyste. Przypatrzmy się więc ko-
public class AddElementCommand extends SequenceCommand implements ICommand lejnej klasie, tj. Responder. W poprzednich
{ wersjach frameworka zalecało się tworzenie
public function AddElementCommand() dwóch rodzajów implementujących wzo-
{ rzec Command – jednej do zwykłych wywo-
this.nextEvent = new SwitchViewEvent( LibraryModelLocator.VIEW_DATA ); łań zmiany widoku, innych wykorzystują-
} cych również metody Respondera służących
do komunikacji poza aplikacją. We współ-
override public function execute( eventParam:CairngormEvent ):void czesnym podejściu rozdziela się te role, two-
{ rząc osobną klasę. Powoduje to spójne podej-
var event:AddElementEvent = eventParam as AddElementEvent; ście do klas wzorca Command. Spójrzmy więc
na przykład z tworzonej przez nas aplikacji
var bookVO:BookVO = new BookVO(); (Listing 9.).
bookVO.title = event.title; Implementacja interfejsu IResponder wią-
bookVO.author = event.author; że się z zaprogramowaniem dwóch metod:
bookVO.publisher = event.publisher; result() oraz fault(). Nasz przykład po po-
bookVO.yearPublished = event.yearPublished; prawnym przesłaniu żądanego pliku odczytuje
kolejne wpisy w nim zawarte, przy użyciu me-
LibraryModelLocator.getInstance().books.addItem( bookVO ); chanizmu E4X. Przykładowy wpis wygląda na-
stępująco:
executeNextCommand();
} <book id="1" title="Adobe Flex 2 Training
} From the source" author="Team work"
} publisher="Adobe Press"
yearPublished="2007"/>

Następnie tworzy odpowiednie obiekty wzor-

ca Value Object , dodając je równocześnie do
kolekcji przechowywanej w modelu. Jak może-
��������������� ������� my się domyślić – niejednokrotnie wcześniej
mechanizm Data Bindingu samoczynnie spo-
woduje zaktualizowanie odpowiednich ele-
��������
�������� mentów interfejsu użytkownika. W razie nie-
������� powodzenia w przesłaniu pliku, aplikacja po-
wiadomi nas komunikatem.

����� ����� ���������

Warstwa prezentacji
Nasza aplikacja umożliwia zarówno wprowa-
dzenie danych, jak i ich wyświetlanie w postaci
tabeli. Dla potrzeb tego przykładu zastosujemy
Rysunek 3. Mechanizm zdarzeń – komunikacja z serwem komponent ViewStack. Umożliwia on proste

60 FLEX

przełączenie pomiędzy stanami aplikacji. Do
tego w naszym modelu służą te linie:
public var applicationState:Number = 0;
publicstaticconst VIEW_DATA:Number = 0;
publicstaticconst ENTRY_DATA:Number = 1;
Stwórzmy więc komponent odpowiadający za
prezentację danych. Wykorzystamy tu kilku-
krotnie wcześniej wspomniany mechanizm
Data Bindingu, dzięki czemu stanie się on w
pełni zrozumiały. Skorzystamy również ze
stworzonych wcześniej klas. Przykładowy plik
MXML, view/MainView.mxml, znajduje się na
Listingu 10.
Przypatrzmy się kolejnym elementom tego
pliku. Do wyświetlania stanów aplikacji (wy-
świetlanie lub wprowadzanie danych) służy
komponent View Stack. Jedna z jego właści-
wości wykorzystuje Data Binding, co możemy
w kodzie MXML rozpoznać po klamrowych
nawiasach {}:
selectedIndex="{model.applicationState}"
Widzimy już jak wykorzystać siłę tego roz-
wiązania w połączeniu z resztą aplikacji
opartej o Cairngorm. Innym ważnym ele-
mentem jest komponent DataGrid , służą-
cy do tabelarycznego przedstawienia kolek-
cji, którą tworzyliśmy w kolejnych krokach.
Przekazujemy jej, w podobny sposób referen-
cję do kolekcji:
dataProvider="{model.books}"
Tworząc odpowiednie kolumny, informujemy,
z jakich pól przekazanych w kolekcji obiektów
mogą one odczytać swoje dane. Całość odby-
wa się automatycznie, co w połączeniu z tech-
nologią Data Binding znacznie przyspiesza na-
szą pracę. W ekranie wyświetlającym kolekcję
obiektów BookVO znajduje się również przy-
cisk, którego kliknięcie powoduje wykona-
nie odpowiedniej funkcji, która rozgłasza od-
powiednie zdarzenie, przełączajac wyświetla-
ny ekran:
new SwitchViewEvent( LibraryModelLoca
tor.ENTRY_DATA ).dispatch();
Ekran wprowadzania danych składa się
z formularza, którego pola muszą pomyślnie
przejść walidację. Warunki, jakie muszą speł-
nić poszczególne pola, określiliśmy w następu-
jący sposób (Listing 12.).
Po kliknięciu przycisku i spełnieniu warun-
ków walidacji rozgłaszane jest odpowiednie
zdarzenie, do którego przekazujemy dane z for-
mularza:
new AddElementEvent( bookTitle.text,
bookAuthor.text, bookPublisher.text,
bookYearPublished.value ).dispatch();
www.sdjournal.org
Cairngorm
Jak pamiętamy ze wcześniejszego przykła- do kolekcji w naszym modelu, a następ-
du, wywołuje ono odpowiednią implemen- nie samoczynnie wywołuje zmianę ekranu,
tację wzorca Command , która zapisuje obiekt na ekran prezentujący dane. Komponent
Listing 8. Implementacja wzorca Command
package com.wjptak.samplelibrary.commands
{
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.wjptak.samplelibrary.business.GetBasicDataDelegate;
public class GetBasicDataCommand implements ICommand
{
public function execute( eventParam:CairngormEvent ):void
{
var delegate:GetBasicDataDelegate = new GetBasicDataDelegate( new
GetBasicDataResponder() );
delegate.getData();
}
}
}
Listing 9. Implementacja wzorca Responder
package com.wjptak.samplelibrary.commands
{
import com.wjptak.samplelibrary.model.LibraryModelLocator;
import com.wjptak.samplelibrary.vo.BookVO;
import mx.controls.Alert;
import mx.rpc.IResponder;
public class GetBasicDataResponder implements IResponder
{
public function GetBasicDataResponder()
{
super();
}
public function result(data:Object):void
{
var result:XML = data.result as XML;
for each (var book:XML in result.book )
{
var bookVO:BookVO = new BookVO();
bookVO.title = book.@title;
bookVO.author = book.@author;
bookVO.publisher = book.@publisher;
bookVO.yearPublished = book.@yearPublished;
LibraryModelLocator.getInstance().books.addItem( bookVO );
}
}
public function fault(info:Object):void
{
Alert.show("Blad podczas pobierania pliku z danymi", "Blad!!");
}
}
}
61
 ADOBE FLEX

Listing 10. Tworzenie pliku widoku, view/MainView.mxml

<mx:Canvas sortableColumns="true">
xmlns:mx="http://www.adobe.com/2006/mxml" <mx:columns>
width="640" height="480"> <mx:DataGridColumn dataField="title"
headerText="Tytul" />
<mx:Script> <mx:DataGridColumn dataField="author"
<![CDATA[ headerText="Autor" />
import com.wjptak.samplelibrary.events.AddElementEvent; <mx:DataGridColumn dataField="publisher"
import com.wjptak.samplelibrary.events.SwitchViewEv headerText="Wydawca" />
ent; <mx:DataGridColumn dataField="yearPublished"
import com.wjptak.samplelibrary.model.LibraryModelLo headerText="Rok wydania" />
cator; </mx:columns>
import mx.events.ValidationResultEvent; </mx:DataGrid>

[Bindable] private var model:LibraryModelLocator = <mx:Button

LibraryModelLocator.getInstance(); label="Wprowadz pozycje"
click="switchToDataEntryScreen()" />
private function addElement():void </mx:Panel>
{
if( vTitle.validate().type == ValidationResultEven <mx:Panel
t.VALID && title="Wprowadzanie nowej pozycji w bibliotece"
vAuthor.validate().type == ValidationResultEven width="100%" height="100%">
t.VALID && <mx:Form
vPublisher.validate().type == ValidationResultE defaultButton="{processBtn}"
vent.VALID ) width="100%" height="100%">
{ <mx:FormHeading
new AddElementEvent( bookTitle.text, label="Wypelnij dane i nacisnij przycisk 'Dodaj'"
bookAuthor.text, bookPublisher.text, textAlign="center"
bookYearPublished.value ).dispatch(); width="100%"/>
} <mx:FormItem
} label="Tytul"
required="true">
private function switchToDataEntryScreen():void <mx:TextInput id="bookTitle" width="150"/>
{ </mx:FormItem>
new SwitchViewEvent( LibraryModelLocator.ENTRY_ <mx:FormItem
DATA ).dispatch(); label="Autor"
} required="true">
]]> <mx:TextInput id="bookAuthor" width="150"/>
</mx:Script> </mx:FormItem>
<mx:FormItem
<mx:StringValidator id="vTitle" source="{bookTitle}" label="Wydawnictwo">
property="text" minLength="4" <mx:TextInput id="bookPublisher"
maxLength="40" required="true" /> width="150"/>
<mx:StringValidator id="vAuthor" source="{bookAuthor}" </mx:FormItem>
property="text" minLength="4" <mx:FormItem
maxLength="40" required="true" /> label="Rok wydania">
<mx:StringValidator id="vPublisher" <mx:NumericStepper id="bookYearPublished"
source="{bookPublisher}" property="text" minimum="1990" maximum="2008"
minLength="4" maxLength="40" stepSize="1" />
required="false" /> </mx:FormItem>
<mx:FormItem>
<mx:ViewStack <mx:Button id="processBtn"
selectedIndex="{model.applicationState}" label="Dodaj"
width="100%" height="100%"> click="addElement()" />
</mx:FormItem>
<mx:Panel </mx:Form>
title="Pozycje w bibliotece"
width="100%" height="100%"> </mx:Panel>

<mx:DataGrid </mx:ViewStack>
dataProvider="{model.books}"
width="100%" height="100%" </mx:Canvas>

62 FLEX
 Cairngorm

DataGrid automatycznie zaktualizuje wy- A kolejne elementy jako komponenty MXML: • Zmiana modelu może odbyć się tylko
świetlane dane. poprzez obiekty Command i Responder.
<business:Services id="services" /> Elementy widoku powinny bąbelko-
Główny plik aplikacji <control:LibraryController id="controller" /> wać zdarzenia w górę, gdzie odpowied-
Aplikacje Flex budowane w oparciu o Cairn- <view:MainViewwidth="100%" height="100%" /> nie funkcje wywołują odpowiadające
gorm zakładają charakterystyczne przygoto- im CairngormEventy. Złamanie tej za-
wanie głównego pliku aplikacji. Musimy tu Aplikacja została ukończona. Możemy teraz sady powoduje naruszenie zasad wzorca
zainicjalizować poszczególne elementy fra- skompilować projekt. MVC, jak i powoduje zaśmiecenie kodu
meworka – Model Locator, Service Locator, aplikacji;
Front Controller i główny plik widoku. Dobre praktyki • Dla każdego przypadku użycia opraco-
W tym pliku możemy zainicjalizować rów- Zasady pomagające tworzyć aplikacje w opar- wujemy jedną klasę Command oraz jed-
nież pierwsze zdarzenia jak np. pobranie da- ciu o Cairngorma można by mnożyć, jednak ną CairngormEvent . W razie potrzeby
nych początkowych. należy wymienić kilka, które na pewno okażą komunikacji dodajemy po jednej klasie
Przykład stworzony dla opracowywanej przez się przydatne. Delegate i Responder oraz modyfikujemy
nas aplikacji pozwoli zrozumieć zasady nakre- odpowiednio plik Services.mxml;
ślone przez Cairngorm. Spójrzmy na Listing 11. • Nie należy używać wzorców View Helper • Dobrą praktyką jest używanie wzorca
Model Locator inicjalizujemy poprzez: oraz View Locator. Nie są one potrzebne, Factory do parsowania danych otrzyma-
gdy poznamy pełne możliwości platformy, nych z serwera. Jest to przydatne z kilku
[Bindable] private var model: zostały oficjalnie usunięte z frameworka. powodów, m.in. uproszczenia pozosta-
LibraryModelLocator = LibraryModelLocato Dodatkowo, zwiększylibyśmy znacznie łych klas, jak i lepszego zoptymalizowania
r.getInstance(); narzut plików ActionScript; kodu pliku wzorca Factory. Odczujemy
to szczególnie przy użyciu wielu różnych
Listing 11. Tworzenie głównego pliku aplikacji źródeł danych w jednej aplikacji przesyła-
jących duże ilości danych;
<mx:Application • Tylko obiekty klas Business Delegate
xmlns:mx="http://www.adobe.com/2006/mxml" mają dostęp do danych w formatach po-
xmlns:business="com.wjptak.samplelibrary.business.*" średnich jak np. JSON, natomiast tylko
xmlns:control="com.wjptak.samplelibrary.control.*" Responder powinien otrzymywać wstęp-
xmlns:view="com.wjptak.samplelibrary.view.*" nie przygotowane dane i zamieniać je na
layout="absolute" konkretne obiekty Value Object ;
creationComplete="this.onCreationComplete()"> • Obiekty Command nie mogą zawierać ja-
kichkolwiek implementacji komunikacji,
<mx:Script> zadanie to należy do Service Locatora
<![CDATA[ i obiektów Business Delegate .
import com.wjptak.samplelibrary.events.GetBasicDataEvent;
import com.wjptak.samplelibrary.model.LibraryModelLocator; Zakończenie
Zapoznaliśmy się z frameworkiem Cairn-
[Bindable] private var model:LibraryModelLocator = LibraryModelLocator.getIn gorm, najszerzej stosowanym w środowisku
stance(); Adobe Flex, rozwijanym wewnątrz tej samej
firmy.
private function onCreationComplete():void { W przyszłości będzie on zapewne coraz bar-
new GetBasicDataEvent().dispatch(); dziej zoptymalizowany, co pozwoli na dostar-
} czenie nowych funkcjonalności, m.in. do two-
]]> rzenia aplikacji typu Enterprise. Stosowanie
</mx:Script> tego typu rozwiązań pozwoli nam uporząd-
kować nie nasz kod, ułatwi wprowadzanie
<business:Services id="services" /> ciągłych zmian, a także wspomoże równole-
głą pracę wielu programistów. Polecam bliż-
<control:LibraryController id="controller" /> sze zapoznanie się z opisanym powyżej fra-
meworkiem.
<view:MainView
width="100%" height="100%" />
WOJCIECH PTAK
</mx:Application> Od 2 lat konsultant i programista Adobe Flex
oraz Adobe Integrated Runtime (AIR) (przez rok
Listing 12. Wyróżniony fragment Listingu 10. obejmował to stanowisko w norweskiej firmie
Making Waves). Wykonał w całości m.in. aplika-
<mx:StringValidator id="vTitle" source="{bookTitle}" property="text" minLength="4" cję Kalkulator Energetyczny Vattenfall, która zo-
maxLength="40" required="true" />; stała wyróżniona w międzynarodowym konkur-
<mx:StringValidator id="vAuthor" source="{bookAuthor}" property="text" minLength="4" sie Webby Awards 2008. Aktualnie pracuje dla
maxLength="40" required="true" />; takich klientów jak Adidas, Heineken, Coca–Co-
<mx:StringValidator id="vPublisher" source="{bookPublisher}" property="text" la, Schweppes czy British Telecom, dostarczając
minLength="4" maxLength="40" required="false" />. kompleksowe aplikacje B2B oparte o Adobe Flex
oraz AIR.

www.sdjournal.org 63
 ADOBE FLEX
Dostęp do danych
z aplikacji Flex
Adobe LiveCycle Data Services w praktyce
Dostęp do danych i logiki biznesowej znajdującej się na serwerze jest
nieodłączną częścią zdecydowanej większości aplikacji internetowych.
W zależności od wybranej technologii, jest to zadanie mniej lub bardziej
skomplikowane. W tym artykule chciałbym pokazać, że w przypadku
aplikacji Flex jest to wyjątkowo proste.
Dowiesz się...
• Jak wywoływać metody obiektów Javy bezpo-
średnio z Flexa.
Poziom trudności
B
udowana aplikacja zazwyczaj będzie
prezentowała i modyfikowała dane
z relacyjnej bazy danych (bezpośrednio
lub przez rozwiązania typu ORM (ang. Object
– Relational Mapping)) lub z zewnętrznych sys-
temów firmy.
Standardowo Flex SDK dostarcza trzech me-
chanizmów dostępu do danych:
• HTTPService;
• WebService;
• Remote Object.
Pierwsze dwa mechanizmy opierają się na
zwykłych wywołaniach HTTP i mogą być
wykorzystane z dowolną technologią serwe-
rową. Remote Object umożliwia proste i wy-
dajne wywołania zdalnych metod, jednakże
wymaga dodatkowego komponentu po stro-
nie serwera. Komponent ten, o nazwie Ado-
be LiveCycle Data Services ES (wcześniej Flex
Data Services) oraz jego dodatkowe funkcjo-
nalności i praktyczne zastosowanie są tema-
tem poniższego artykułu.
Od strony technicznej LiveCycle Data Servi-
ces jest aplikacją J2EE. Instalacja na serwerze
sprowadza się do wdrożenia archiwum WAR;
64
fig.xml i poniżej default–channels dodajemy de-
Powinieneś wiedzieć... klarację punktu docelowego (destination) – Li-
• Powinieneś znać podstawy tworzenia aplikacji sting 2.
w technologii Flex; Deklaracja informuje LiveCycle Data Se-
• Powinieneś znać podstawy Java Enterprise rvices, że chcemy wywoływać metody klasy
Edition. hello.HelloWorld (element source) i nadajemy
jej identyfikator HelloWorld (atrybut id). Ele-
ment scope określa zakres dostępności obiek-
po zakończeniu jesteśmy gotowi do skorzysta- tu podobnie jak znacznik <jsp:useBean>
nia z usług, które nam udostępnia. Podstawo- z tą różnicą, że dostępne są wartości request,
we usługi to: session i application (bez page). Oprócz po-
wyższej deklaracji po stronie serwera nie po-
• RPC Service, w której skład wchodzi Re- trzebujemy nic więcej. Spójrzmy na przykła-
mote Object, czyli zestaw usług umoż- dową aplikację kliencką.
liwiających zdalne wywołania metod Tworzymy główny plik aplikacji Ma-
obiektów Javy (POJO, EJB, itp.) bezpo- in.mxml. Jeśli korzystamy z Flex Buildera,
średnio z Flexa; podczas tworzenia projektu należy zaznaczyć
• Messaging Service – mechanizm przesyła- wykorzystanie LiveCycle Data Services jak na
nia komunikatów wraz z adapterem JMS; Rysunku 1.
• Data Management Service – alternatywny
sposób dostępu do danych, opierający się
na zarządzanych kolekcjach danych.
Przyjrzyjmy się bliżej mechanizmowi Remo-
te Object. Najłatwiej zaprezentować to na ni-
żej opisanym przykładzie. Zakładając, że Live-
Cycle Data Services jest już zainstalowane (na
czas tworzenia aplikacji najwygodniej jest ko-
rzystać z rozpakowanego archiwum WAR; da-
lej katalog instalacji będzie nazywany {LCDS_
HOME}), a serwer aplikacji uruchomiony, za-
cznijmy od standardowego HelloWorld – klasy
Javy, która udostępni nam metodę sayHello
z jednym parametrem (Listing 1.).
Aby móc wywołać tę metodę z Flexa, nie jest
potrzebny żaden dodatkowy kod. Wystarczy
umieścić powyższą klasę w CLASSPATH naszego
serwera aplikacji i poinformować LiveCycle Da-
ta Services, że będziemy chcieli z niej korzystać.
W tym celu otwieramy plik konfiguracyjny
{LCDS_HOME}/WEB–INF/flex/remoting–con-
FLEX
 Dostęp do danych z aplikacji Flex

W następnym kroku podajemy ścieżkę do

{LCDS_HOME}.
Do pliku Main.mxml dodajemy deklarację
Remote Object (Listing 3.), która określa, że:

• Identyfikatorem, który będziemy wyko-

rzystywać w aplikacji klienckiej jest hello-
World.
• Punktem docelowym (destination) po stro-
nie serwera jest HelloWorld, czyli wartość
atrybutu id w pliku remoting–config.xml.
• Zdarzenia result i fault będą obsługiwa-
ne przez metody success i failure , które
dodamy w następnym kroku.

Listing 4. prezentuje fragment skryptu do ob-

sługi zdarzeń.
W przypadku powodzenia wyświetla-
my wynik, w przypadku błędu – komunikat
o przyczynach.
Do zakończenia przykładu brakuje nam je-
dynie wywołania metody zdalnego obiektu.
Wykonamy to w reakcji na zdarzenie klik-
nięcia przycisku, jednocześnie przekazu-
jąc jako parametr zawartość pola tekstowe-
go (Listing 5.).
Rysunek 1. Zaznaczamy LiveCycle Data Services we Flex Builder Warto zauważyć jak proste jest samo wy-
wołanie: helloWorld.sayHello(). Mimo iż
obiekt, który będzie wykonywał główną logikę
jest na zdalnym serwerze, programista traktu-
je go jak lokalny obiekt ActionScriptu. Resztę
wykonuje za nas komponent Remote Object

Listing 1. Przykładowa klasa Javy z metodą

do zdalnego wywołania

package hello;
public class HelloWorld
{
public String sayHello(String
name)
{
return "Hello " + name + "!";
}
}
Rysunek 2. Aplikacja po skompilowaniu i uruchomieniu
Listing 2. Deklaracja punktu docelowego
HelloWorld
<destination id="HelloWorld">
<properties>
<source>hello.HelloWorld</
source>
<scope>request</scope>
</properties>
</destination>

Listing 3. Deklaracja Remote Object

<mx:RemoteObject id="helloWorld"
destination="HelloWorld"
result="success(event)"
fault="failure(event);"/>

Rysunek 3. Wynik wywolania

www.sdjournal.org 65
 ADOBE FLEX

z Flex SDK i LiveCycle Data Services. Po go metody send przekazywane są parametry domyślnego kanału wykorzystywanego przy
skompilowaniu i uruchomieniu aplikacja po- pierwotnego wywołania. Następnie nazwa zdalnych wywołaniach (Listing 7.).
winna wyglądać tak jak na Rysunku 2. zdalnej metody i parametry zostają opakowa- W definicji kanału znajduje się URL servle-
Naciśnięcie przycisku powinno wywo- ne w komunikat RemotingMessage i wysła- tu, który odpowiada za odbieranie komuni-
łać metodę i wyświetlić komunikat zwróco- ne przez odpowiedni kanał komunikacyjny. katów od klienta, wywoływanie odpowied-
ny przez metodę obiektu HelloWorld w Javie Czym jest kanał? Jest to sposób przesyłania nich metod i serializację zwracanych wyni-
(Rysunek 3.). komunikatów, np. przez zwykły HTTP lub ków. Tajmniczy skrót AMF oznacza Action
Przyjrzyjmy się teraz szczegółom powyż- specjalny protokół RTMP. Definicje dostęp- Message Format – binarny format przekazy-
szego wywołania zdalnej metody. Gdy po nych kanałów znajdują się w pliku {LCDS_ wania danych, który zapewnia mały rozmiar
stronie Flexa wywołujemy metodę na rzecz HOME}/WEB–INF/flex/services–config.xml, komunikatu i bardzo szybką serializację i de-
instancji klasy RemoteObject, tworzony jest m.in.: kanał my–amf (Listing 6.), a w pli- serializację obiektów. Oprócz wygody uży-
obiekt mx.rpc.remoting.Operation i do je- ku remoting–config.xml występuje deklaracja cia mechanizmu Remote Object, to właśnie
AMF jest jego główną zaletą, która powodu-
Listing 4. Skrypt do obsługi zdarzeń związanych z wywołaniem Remote Object je, że komunikacja jest znacznie wydajniej-
sza niż przy użyciu XML (jak w HTTPServi-
<mx:Script> ce i WebService).
<![CDATA[ Wykorzystanie Remote Object, nie ograni-
import mx.controls.Alert; cza się do przekazywania parametrów typu
import mx.rpc.events.FaultEvent; String. Możliwe jest przekazywanie i zwra-
import mx.rpc.events.ResultEvent; canie obiektów dowolnego typu, a zasady
konwersji typów między Javą i ActionScrip-
public function success(event:ResultEvent):void tem sa określone w dokumentacji LiveCycle
{ Data Services.
Alert.show(event.result.toString()); Za tworzenie instancji obiektów po stro-
} nie serwera odpowiada tzw. fabryka, czyli
implementacja interfejsu flex.messaging.Fle-
public function failure(event:FaultEvent):void xFactory. Domyślna fabryka w LiveCycle Da-
{ ta Services tworzy obiekty za pomocą opera-
Alert.show(event.fault.faultDetail, event.fault.faultString); tora new. Jeśli chcemy korzystać z komponen-
} tów EJB lub obiektów zarządzanych przez
]]> Springa, wystarczy podać nazwę fabryki
</mx:Script> w deklaracji punktu docelowego; w kodzie
fabryki znajdują się odpowiednie instruk-
Listing 5. Interfejs użytkownika do wywołania zdalnej metody
cje tworzenia obiektu (np. zamiast new – lo-
okup lub getBean).
<mx:TextInput id="nameInput" x="10" y="10"/> Na koniec warto poruszyć kwestię licen-
<mx:Button x="180" y="10" label="sayHello" cjonowania. Adobe LiveCycle Data Services
click="helloWorld.sayHello(nameInput.text);"/> ES jest produktem komercyjnym, dostępnym
w sprzedaży u dystrybutorów Adobe. Jed-
Listing 6. Definicja kanału my–amf w services–config.xml nak do mniejszych zastosowań istnieje wersja
Express Edition, która oferuje pełną funkcjo-
<channel–definition id="my–amf" class="mx.messaging.channels.AMFChannel"> nalność z jednym ograniczeniem: może być
<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" instalowana wyłącznie na serwerach z jed-
class="flex.messaging.endpoints.AMFEndpoint"/> nym procesorem, gdzie dwa rdzenie liczą się
<properties> jako jeden procesor. Z drugiej strony, w celu
<polling–enabled>false</polling–enabled> popularyzacji technologii Flex, Adobe udo-
</properties> stępniło podzbiór funkcjonalności LiveCyc-
</channel–definition> le Data Services w otwartym projekcie Bla-
zeDS. Używając BlazeDS koncepcja Remote
Listing 7.Ustawienie domyślnego kanału w remoting–config.xml Object, pozostaje taka sama, a licencja typu
Open Source pozwala na zastosowanie przy
<default–channels> budowie aplikacji dowolnej wielkości bez
<channel ref="my–amf"/> opłat licencyjnych.
</default–channels>

BARTŁOMIEJ SOIN
W Sieci: Specjalista w zakresie technologii Flex i LiveCycle
w polskim oddziale Adobe. Wolny czas spędza na
• http://www.adobe.com/products/livecycle/dataservices – Adobe LiveCycle Data Services ES; aktywnym wypoczynku (kolarstwo górskie, wspi-
• http://opensource.adobe.com/blazeds – BlazeDS;
naczka, snowboard), zgłębianiu tajników foto-
• http://www.adobe.com/devnet/flex – Flex Developer Center.
grafii i rozpoznawaniu najnowszych technologii
internetowych.

66 FLEX

Flex i PHP
Wykorzystanie technologii Web Services i Flash Remoting do
komunikacji klient – serwer
Adobe Flex zapewnia rozbudowane możliwości tworzenia aplikacji RIA.
Jednak wciąż są to aplikacje wykonywane po stronie klienta, więc w celu
stworzenia w pełni funkcjonalnej aplikacji internetowej konieczne jest
zapewnienie odpowiedniego kanału komunikacyjnego pozwalającego na
wymianę informacji pomiędzy klientem i serwerem.
Dowiesz się...
• Jak za pomocą języka PHP tworzyć usługi in-
ternetowe.
• Jak w języku ActionScript tworzyć aplikacje wy-
korzystujące usługi SOAP oraz Flash Remoting.
Poziom trudności
W
artykule przedstawione zostaną
możliwości wykorzystania techno-
logii PHP. Przedstawię dwie meto-
dy pozwalające na komunikację aplikacji Flex
z serwerem PHP – Web Services i Flash Remoting.
Web Services
W przypadku usług internetowych dane pomię-
dzy klientem i serwerem przesyłane są w forma-
cie XML. Dzięki temu stworzenie takich usług
na serwerze nie ograniczy ich wykorzystania tyl-
ko do aplikacji Flex. Większość popularnych ję-
zyków programowania posiada odpowiednie bi-
blioteki wspierające obsługę Web Services.
Dla języka PHP powstało kilka takich biblio-
tek. Na potrzeby niniejszego artykułu przedsta-
wiona zostanie jedna z nich – NuSOAP. Najwięk-
szą zaletę wspomnianej biblioteki stanowi fakt,
iż nie wymaga ona żadnych dodatkowych roz-
szerzeń PHP. W rezultacie więc można jej uży-
wać nawet na bardzo ograniczonych serwerach.
Po pobraniu biblioteki i umieszczeniu jej na
serwerze możemy przejść do tworzenia usługi.
W pierwszej kolejności stworzymy usłu-
gę, której jedynym zadaniem jest odesłanie do
klienta prostego powitania. Pierwszym etapem
jest dołączenie biblioteki NuSOAP:
require_once('nusoap/nusoap.php');
www.sdjournal.org
Powinieneś wiedzieć...
• Czytelnik powinien znać podstawy technolo-
gii SOAP.
• Znać podstawy języka ActionScript i PHP.
• Znać podstawy systemu obsługi zdarzeń w ję-
zyku ActionScript.
Następnie należy utworzyć instancję serwe-
ra SOAP:
$server = new soap_server();
Aby możliwe było wykorzystanie tworzonej
usługi w aplikacji Flex, konieczne jest skonfi-
gurowanie serwera tak aby generował odpo-
wiedni plik WSDL (Web Services Definition
Language), który jest odpowiedzialny za opi-
sanie usługi:
$server–>configureWSDL( 'sample', 'http:
//localhost' );
Jako pierwszy argument metody należy podać
nazwę, która będzie identyfikować opisywa-
ną usługę. Drugi argument określa przestrzeń
nazw, w której będą się znajdować metody udo-
stępniane przez usługę. Kolejnym etapem jest
utworzenie pierwszej metody. Będzie ona od-
powiedzialna za odesłanie do klienta komuni-
katu powitalnego (Listing 1.).
Ważną czynnością jest teraz zarejestrowanie
utworzonej metody tak, by możliwe było jej
udostępnienie klientom oraz wygenerowanie
odpowiedniego opisu WSDL (Listing 2.).
W Sieci
• NuSOAP – http://sourceforge.net/projects/nusoap/;
• Programming with NuSOAP using WSDL – http://www.scottnichol.com;
• AMFPHP – http://www.amfphp.org;
• Flex and ActionScript with AMFPHP – http://www.sephiroth.it.
Flex i PHP
Pierwszym argumentem jest nazwa udostęp-
nianej metody – musi ona być dokładnie taka
sama jak nazwa wcześniej utworzonej funk-
cji. Kolejnym argumentem jest lista przyjmo-
wanych parametrów. W naszym przypadku
funkcja nie przyjmuje żadnych argumentów,
więc jako wartość przekazujemy pustą tablicę.
Analogicznie, jako wartość trzeciego argumen-
tu należy podać listę zwracanych wartości okre-
ślonych jako pary nazwa – typ. Przykładowa
funkcja zwraca tekst, dlatego też jako typ po-
dajemy xsd:string. Listę wszystkich dostęp-
nych typów danych można znaleźć w specyfi-
kacji protokołu SOAP. Ostatni argument okre-
śla przestrzeń nazw, w jakiej znajdzie się opisy-
wana metoda.
Ostatnią czynnością jest przekazanie otrzy-
manego zapytania do serwera SOAP w celu wy-
wołania metody:
$HTTP_RAW_POST_DATA = isset( $HTTP_RAW_POST_
DATA ) ? $HTTP_RAW_POST_DATA : '';
$server–>service( $HTTP_RAW_POST_DATA );
Mając już przygotowaną usługę interne-
tową udostępniającą przygotowane meto-
dy, możemy przystąpić do utworzenia aplika-
cji klienta. W tym celu wykorzystamy klasę
mx.rpc.soap.WebService. Tworząc instancję
tej klasy, należy podać adres, pod którym jest
udostępniana usługa. W naszym przypadku
będzie to adres utworzonego wcześniej skryp-
tu PHP.
var webService:WebService = new WebService(
"http://localhost/ws/sample.php" );
67
 ADOBE FLEX

Następnie należy podać adres, pod którym

dostępny jest opis WSDL podanej usługi. Bi- Listing 1. Metoda zwracająca do klienta wiadomość powitalną
blioteka NuSOAP generuje plik opisu automa- function welcome()
tycznie i jest on dostępny pod tym samym ad- {
resem co sama usługa. Należy jedynie dodać do return "Welcome client!";
niego argument wsdl: }

webService.wsdl = "http://localhost/ws/ Listing 2. Kod odpowiedzialny za rejestrację metody zdalnej

sample.php?wsdl"; $server–>register(
'welcome',
Zanim możliwe będzie wywołanie metod array(),
usługi, konieczne jest wcześniejsze załadowa- array( 'return' => 'xsd:string' ),
nie opisu WSDL. W tym celu należy wywołać 'http://localhost'
metodę loadWSDL: );

webService.loadWSDL(); Listing 3. Kod odpowiedzialny za wywołanie metody welcome

Ładowanie opisu usługi odbywa się asynchro-
nicznie, dlatego też, aby wywołać metodę usługi
zaraz po jego załadowaniu, konieczne jest zareje-
strowanie metody obsługującej odpowiednie zda-
rzenie:
function onWsdlLoad( event:LoadEvent ):void
{
webService.welcome.addEventListener( ResultEvent.RESULT, onWelcome );
webService.welcome.addEventListener( FaultEvent.FAULT, onFault );
webService.welcome();
}

webService.addEventListener( LoadEvent.LOAD,
onWsdlLoad );
Również wywoływanie metod udostępnia-
nych przez usługę internetową odbywa się
asynchronicznie. Aby wykonać kod korzystają-
cy z wyniku otrzymanego po wykonaniu wywo-
ływanej metody, należy ponownie skorzystać
z mechanizmu obsługi zdarzeń (Listing 3.).
Na koniec wystarczy już tylko utworzyć
funkcję, która zostanie wykonana w momencie
otrzymania od usługi wyniku działania wywo-
łanej wcześniej metody (Listing 4.).
Warto również zadbać o właściwą obsłu-
gę błędów, które mogą się pojawić chociażby
w przypadku wystąpienia problemów z połą-
czeniem (Listing 5.).
W ten sposób udało się nam utworzyć usłu-
gę internetową oraz aplikację klienta. Oczywi-
ście przykład ten jest bardzo uproszczony, jed-
nakże ogólny schemat postępowania pozostaje
dokładnie taki sam, nawet w przypadku zdecy-
dowanie bardziej złożonych aplikacji.
Dotychczas nasza usługa udostępniała tyl-
ko jedną metodę, która nie wymagała podania
żadnych argumentów, dlatego teraz zajmiemy
się dodaniem kolejnej metody, która w wyni-
ku działania będzie zwracać wartość otrzyma-
ną po zsumowaniu dwóch liczb. W tym celu
do utworzonego wcześniej pliku PHP dołączy-
my jej implementację (Listing 6.).
Następnie, tak jak miało to miejsce w przy-
padku metody welcome, musimy dokonać jej
rejestracji (Listing 7.).
Ze względu na to, iż metoda sum przyjmuje
dwa argumenty, musimy podać ich listę. Jest
to konieczne do wygenerowania prawidłowego
opisu usługi. Lista ta ma taką samą postać jak
lista zwracanych wartości, jednak w tym przy-
padku ich typ to xsd:int. Przejdźmy teraz do
modyfikacji aplikacji klienta, tak aby wywoły-
Listing 4. Funkcja odpowiedzialna za odebranie wyniku działania zdalnej metody welcome
function onWelcome( event:ResultEvent ):void
{
trace( event.result.toString() );
}
Listing 5. Funkcja obsługi błędów
function onFault( event:FaultEvent ):void
{
trace( event.fault.getStackTrace() );
}
Listing 6. Metoda usługi odpowiedzialna za obliczenie sumy argumentów
function sum( $a, $b )
{
return $a + $b;
}
Listing 7. Kod odpowiedzialny za rejestrację metody zdalnej
$server–>register(
'sum',
array( 'a' => 'xsd:int', 'b' => 'xsd:int' ),
array( 'return' => 'xsd:int' ),
'http://localhost'
);]
Listing 8. Kod wywołujący zdalną metodę sum wraz z obsługą zdarzenia informującego o
otrzymaniu wyniku jej wykonania
function onWsdlLoad( event:LoadEvent ):void
{
webService.sum.addEventListener( ResultEvent.RESULT, onSum );
webService.sum.addEventListener( FaultEvent.FAULT, onFault );
webService.sum( 5, 3 );
}
private function onSum( event:ResultEvent ):void
{
trace( event.result.toString() );
}

68 FLEX
 Flex i PHP

wała ona nowo utworzoną metodę (Listing 8.).
Jak widać poza zmianą nazwy metody, podczas
jej wywołania przekazane zostały dwie liczby.
Jako wynik otrzymamy ich sumę.
Analizując przedstawione wyżej przykłady
można się przekonać, że zapewnienie komu-
nikacji klienta Flex z serwerem PHP za pomo-
cą Web Services jest łatwe i nie powinno spra-
wiać większych problemów. Zaletą wykorzysta-
nia takiego rozwiązania jest przenośność, która
objawia się w możliwości użycia jednego proto-
kołu komunikacji w wielu aplikacjach klienc-
kich, tworzonych za pomocą różnych języków
programowania. Niestety, zaleta ta jest również
po części wadą. Informacje przesyłane za pomo-
cą protokołu SOAP zapisane są w formie XML.
Jak wiadomo, jest to format tekstowy, co ma du-
ży wpływ na wielkość przesyłanych danych. Mo-
że się okazać, że w przypadku ograniczonej pręd-
kości łącz lub limitów transferów wykorzystanie
usług internetowych będzie niemożliwe.

Flash Remoting
Flash Remoting jest technologią opracowaną przez
firmę Macromedia, a obecnie rozwijaną przez
Adobe. Służy ona do wymiany danych pomiędzy
klientami napisanymi w języku ActionScript a ser-
werem obsługującym format AMF (ang. Action-
Script Message Format). Wspomniana technologia
Rysunek 1. Service Browser dostarczany wraz z biblioteką AMFPHP pozwala na szybkie testowanie jest w dużym stopniu oparta na wspomnianym
tworzonych usług wcześniej protokole SOAP, jednak w przypadku
AMF dane przesyłane są w formie binarnej.
Listing 15. Kod źródłowy usługi Flash Remoting wykorzystującej AMFPHP Tworzenie usług Flash Remoting za pomocą
PHP możliwe jest dzięki bibliotece AMFPHP. Jest
<?php ona cały czas rozwijana, aktualnie trwają prace nad
include_once( AMFPHP_BASE . "shared/util/MethodTable.php" ); wersją 2.0. Po skopiowaniu plików źródłowych na
class Sample serwer można przystąpić do tworzenia usług, któ-
{ re umieszczamy w katalogu amfphp/services.
function welcome() W przypadku AMFPHP usługi tworzone są
{ w formie klas zawierających udostępniane me-
return "Welcome client!"; tody. Aby ułatwić porównanie obu technolo-
} gii, utworzymy dwie metody, które będą dzia-
łać dokładnie tak samo, jak to miało miejsce
function sum( $a, $b ) w poprzednim przykładzie.
{ Na początek należy do skryptu tworzonej
return $a + $b; usługi dołączyć klasę MethodTable dostarcza-
} ną wraz z biblioteką AMFPHP:
}
?> include_once( AMFPHP_BASE . "shared/util/
MethodTable.php" );
Listing 9. Funkcja odpowiedzialna za odebranie wyniku wykonania zdalnej metody welcome
function onWelcomeResult( message:String ):void Następnie tworzymy klasę, która będzie repre-
{ zentować naszą usługę. Zawiera ona dwie me-
trace( message ); tody, które były już wykorzystywane wcześniej
} (Listing 15.).
Poważną zaletą wykorzystania biblioteki AMFPHP
Listing 10. Funkcja obsługi błędów jest to, iż nie musimy zajmować się tworzeniem
function onFault( fault:Object ):void opisu usługi ani nawet w żaden sposób rejestro-
{ wać udostępnianych metod. Wszystko odbywa się
trace( “Flash Remoting error!” ); automatycznie, co bardzo ułatwia pracę i pozwala
} uniknąć ewentualnych błędów. Dodatkowym atu-
tem AMFPHP jest to, iż nie narzuca ona konieczno-
Listing 11. Funkcja odpowiedzialna za odebranie wyniku wykonania zdalnej metody sum ści aktualizacji informacji o udostępnianych meto-
function onSumResult( result:Number ):void dach podczas dokonywania zmian dotyczących li-
{ sty argumentów czy też zwracanych wartości.
trace( result ); Autorzy AMFPHP przygotowali również na-
} rzędzie ułatwiające testowanie utworzonych
usług bez potrzeby tworzenia testowych apli-

www.sdjournal.org 69
 ADOBE FLEX

kacji. Service Browser przedstawia listę dostęp-
nych usług oraz ich metod umożliwiając jed-
nocześnie podanie argumentów i sprawdzenie
wyniku działania. Narzędzie to dostępne jest w
katalogu amfphp/browser/index.html i jest nie-
ocenioną pomocą w codziennej pracy (patrz:
Rysunek 1.).
Tworzenie klienta usług Flash Remoting jest w
pewnym stopniu podobne do tworzenia klien-
tów Web Services. W tym przypadku wykorzy-
stywane są klasy flash.net.NetConnection
oraz flash.net.Responder. Pierwsza z nich
odpowiada za obsługę połączenia z usługą, dru-
ga natomiast zajmuje się obsługą wywołania
udostępnionej metody. W pierwszej kolejności

Listing 12. Kod źródłowy klienta Web Services

// File: SoapClient.as webService.welcome();

package
{ webService.sum.addEventListener(
import mx.core.Application; ResultEvent.RESULT, onSum );
import mx.rpc.events.FaultEvent; webService.sum.addEventListener( FaultEvent.FAULT,
import mx.rpc.events.ResultEvent; onFault );
import mx.rpc.soap.LoadEvent;
import mx.rpc.soap.WebService; webService.sum( 5, 3 );
}
public class SoapClient extends Application
{ private function onWelcome( event:ResultEvent ):void
private var webService:WebService; {
trace( event.result.toString() );
public function SoapClient() }
{
super(); private function onSum( event:ResultEvent ):void
{
webService = new WebService( "http://localhost/ws/ trace( event.result.toString() );
sample.php" ); }

webService.wsdl = "http://localhost/ws/ private function onFault( event:FaultEvent ):void

sample.php?wsdl"; {
webService.addEventListener( trace( event.fault.getStackTrace() );
LoadEvent.LOAD, onWsdlLoad ); }
}
webService.loadWSDL(); }
}
<!– File: SoapClientView.mxml –>
private function onWsdlLoad( event:LoadEvent ):void <?xml version="1.0" encoding="utf–8"?>
{ <SoapClient
webService.welcome.addEventListener( xmlns="*"
ResultEvent.RESULT, onWelcome ); xmlns:mx="http://www.adobe.com/2006/mxml"
webService.welcome.addEventListener( layout="absolute">
FaultEvent.FAULT, onFault ); </SoapClient>

Listing 13. Kod źródłowy usługi Web Services wykorzystującej bibliotekę NuSOAP
<?php 'http://localhost'
require_once( 'nusoap/nusoap.php' ); );

$server = new soap_server(); function welcome()

$server–>configureWSDL( 'sample', 'http://localhost' ); {

return "Welcome client!";
$server–>register( }
'welcome',
array(), function sum( $a, $b )
array('return' => 'xsd:string'), {
'http://localhost'); return $a + $b;
}
$server–>register( $HTTP_RAW_POST_DATA = isset( $HTTP_RAW_POST_DATA ) ? $HTTP_
'sum', RAW_POST_DATA : '';
array( 'a' => "xsd:int", 'b' => 'xsd:int' ), $server–>service( $HTTP_RAW_POST_DATA );
array('return' => 'xsd:int'), ?>

70 FLEX
 Flex i PHP

należy utworzyć instancję klasę NetConnection otrzymywać wynik bezpośrednio w formie ar- zdalnej należy wykonać metodę call clasy
i nawiązać połączenie z bramą AMFPHP, która gumentu (Listing 9.). NetConnection.
odpowiada za dostęp do usług: Natomiast funkcja obsługi błędów została
przedstawiona na Listingu 10. connection.call( "Sample.welcome", responder );
var connection:NetConnection = new NetConnec W celu wywołania metody konieczne jest
tion(); utworzenie instancji klasy Responder. Odpo- Nazwa wywoływanej metody zdalnej jest prze-
connection.connect( "http://localhost/amfphp/ wiada ona za przekazanie wyniku do odpo- kazywana w formie NazwaUsługi.NazwaMetody.
gateway.php" ); wiedniej funkcji lub też poinformowania o wy- W przypadku wykorzystania AMFPHP nazwa
stąpieniu błędu: usługi odnosi się do klasy, w której zdefinio-
Wykorzystanie Flash Remoting pozwala unik- wana została wykonywana metoda. Drugi ar-
nąć konieczności ładowania opisu usługi, dzię- var responder:Responder = new Responder( on- gument to wcześniej utworzony obiekt odpo-
ki czemu możemy przystąpić do wywoływa- WelcomeResult, onFault ); wiedzialny za obsługę tego wywołania meto-
nia usług. dy zdalnej.
Najpierw zajmiemy się przygotowaniem Jako pierwszy argument podajemy referencję Przejdziemy teraz do drugiej metody udostęp-
funkcji odpowiedzialnej za odebranie wyniku do funkcji, która jest odpowiedzialna za ode- nianej przez naszą usługę. W jej przypadku ko-
wykonania wywoływanej metody. Na początek branie wyniku działania wywoływanej metody, nieczne jest przekazanie dwóch argumentów, któ-
zajmiemy się metodą welcome. W przypadku natomiast drugi argument to referencja do me- re w wyniku jej działania zostaną zsumowane:
wykorzystania Flash Remoting funkcja ta będzie tody obsługi błędu. W celu wykonania metody
var responder:Responder = new Responder( on-
SumResult, onFault );
Listing 14. Kod źródłowy kompletnej aplikacji klienta Flash Remoting
connection.call( "Sample.sum", responder, 4, 5 );
// File: SoapClient.as
package W tej sytuacji metoda onSumResult odpowie-
{ dzialna za odebranie wyniku działania me-
import flash.net.NetConnection; tody zdalnej będzie się różnic od metody
import flash.net.Responder; onWelcomeResult tylko typem przyjmowane-
import mx.core.Application; go argumentu (Listing 11.).
public class AmfClient extends Application
{ Podsumowanie
private var connection:NetConnection; Zapewnienie komunikacji na linii klient – ser-
wer jest możliwe na wiele różnych sposobów.
public function AmfClient() Jednak wykorzystanie Web Services i Flash Re-
{ moting w dużym stopniu ułatwia i przyspiesza
connection = new NetConnection(); związane z tym prace. Warto tutaj nadmienić,
connection.connect( "http://localhost/amfphp/gateway.php" ); iż obie technologie umożliwiają przesyłanie
złożonych obiektów, zagadnienie to jednak wy-
var responder:Responder = new Responder( onWelcomeResult, onFault ); kracza poza ramy niniejszego artykułu.
connection.call( "Sample.welcome", responder ); W przypadku Web Service dane przesyłane są
responder = new Responder( onSumResult, onFault ); w formacie XML, co ma duży wpływ na szyb-
connection.call( "Sample.sum", responder, 4, 5 ); kość i ilość przesyłanych informacji. Jednak
} dzięki wykorzystaniu protokołu SOAP, usługi
private function onWelcomeResult( message:String ):void te będą również dostępne dla aplikacji tworzo-
{ nych w innych językach programowania.
trace( message ); Flash Remoting przesyła dane w formie binar-
} nej, co w znacznym stopniu przyspiesza trans-
private function onSumResult( result:Number ):void misję. Niestety protokół AMF ogranicza wyko-
{ rzystanie tych usług do aplikacji utworzonych
trace( result ); w języku ActionScript.
}

private function onFault( event:Object ):void JAKUB WĘGRZYN

{ Pracuje na stanowisku Technical Unit Manager w fir-
trace( "Flash Remoting error!" ); mie Gamelion, wchodzącej w skład Grupy BLStream.
} Jakub kieruje komórką odpowiedzialną za progra-
} mowanie gier opartych na technologii Flash. Gru-
} pa BLStream powstała, by efektywniej wykorzysty-
wać potencjał dwóch, szybko rozwijających się pro-
<!– File: AmfClientView.mxml –> ducentów oprogramowania – BLStream i Game-
<?xml version="1.0" encoding="utf–8"?> lion. Firmy wchodzące w skład grupy specjalizują się
<AmfClient w wytwarzaniu oprogramowania dla klientów kor-
xmlns="*" poracyjnych, w rozwiązaniach mobilnych oraz pro-
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> dukcji i testowaniu gier.
</AmfClient> Kontakt z autorem: jakub.wegrzyn@game–lion.com

www.sdjournal.org 71
 ADOBE FLEX

ActionScript 3.0
Podstawowe wzorce projektowe oraz idiomy kodowania.

Można śmiało założyć, że każdy średnio doświadczony programista

przynajmniej raz spotkał się z pojęciem wzorców projektowych. W dużym
uproszczeniu można powiedzieć, iż wzorce są zestawem standardowych
rozwiązań najczęściej spotykanych problemów natury architekturalnej,
związanych z organizacją i tworzeniem oprogramowania.
Dowiesz się... Powinieneś wiedzieć...
• W jaki sposób implementować podstawowe • Czytelnik powinien znać podstawy programo-
wzorce projektowe w języku ActionScript 3. wania w języku ActionScript.
• Jak radzić sobie z ograniczeniami w Action- • Znać podstawowe koncepcje związane z pro-
Script 3. gramowaniem zorientowanym obiektowo
(OOP – ang. Object Oriented Programming).
gramistów rozpoczyna właśnie od niego swo-
ją przygodę ze wzorcami. Wykorzystuje się
Poziom trudności go w celu zagwarantowania tego, iż klasa bę-
dzie posiadać tylko jeden egzemplarz. Do-
datkowym zadaniem Singeltonu jest zapew-
nienie globalnego dostępu do wspomniane-
na Listingu 1. Osoby, które miały już wcze-
śniej do czynienia z tym wzorcem w innych
językach programowania, zapewne zauwa-
żą w przedstawionej implementacji pewien
zasadniczy problem – brak zabezpieczenia
przed tworzeniem wielu egzemplarzy kla-
sy. Dla przykładu, w języku C++ wystarczy
w tym celu zadeklarować konstruktor klasy
Singleton jako prywatny lub chroniony. Jed-
nak podczas prac nad językiem ActionScript
3, w celu spełnienia standardów określo-
nych w specyfikacji ECMAScript, zrezygno-
wano z możliwości tworzenia prywatnych
konstruktorów. Na szczęście można rozwią-
zać ten problem na kilka sposobów. Jednym

W
spomniane rozwiązania zostały po go egzemplarza. z nich jest wykorzystanie prywatnych klas.
raz pierwszy skatalogowane i opi- Standardowa implementacja Singletonu W tym celu używa się pewnej sztuczki, po-
sane przez tzw. Bandę Czterech w języku ActionScript 3 jest przedstawiona legającej na zadeklarowaniu klasy poza zasię-
(ang. Gang of Four, w skrócie GoF) w książ-
ce Wzorce projektowe – elementy oprogramowa- Listing 1. Prosta implementacja wzorca Singleton w języku ActionScript
nia obiektowego wielokrotnego użytku. Pozy-
cja ta została wydana na polskim rynku przez package
wydawnictwo WNT w ramach serii Inżynieria {
Oprogramowania. W artykule tym przedsta- public class Singleton
wię sposoby implementacji oraz wykorzysta- {
nia kilku popularnych wzorców projektowych private static var instance:Singleton;
w odniesieniu do języka ActionScript.
Warto w tym miejscu podkreślić, iż ce- public function Singleton()
lem tego artykułu nie jest dokładne przed- {
stawienie wszystkich opracowanych do tej // Initialization code
pory wzorców, lecz przedstawienie pewnych }
przekrojowych problemów związanych z ich
implementacją w języku ActionScript 3.0. public static function getInstance():Singleton
W tym kontekście opisane zostaną tylko dwa {
popularne wzorce projektowe – Singleton oraz if ( !instance )
Metoda Wytwórcza, wraz z jednym idiomem {
językowym – Wyliczeniem. Osoby zaintereso- instance = new Singleton();
wane zgłębianiem wiedzy z tej dziedziny odsy- }
łam do literatury zamieszczonej w ramce.
return instance;
Singleton }
Singelton jest to chyba jeden z najbardziej roz- }
powszechnionych wzorców projektowych za- }
proponowanych przez GoF. Duża część pro-

72 FLEX
 ActionScript 3.0

giem jakiejkolwiek przestrzeni nazw, co au- na tylko w obrębie tego samego pliku źródło- Oczywiście zaproponowane rozwiązanie
tomatycznie sprawia, że klasa ta jest dostęp- wego (Listing 2.). może być uznane za swojego rodzaju hak lub
nadużycie. Jednak z powodu braku możli-
Listing 2. Propozycja rozwiązania problemu prywatnego konstruktora za pomocą klasy
wości stosowania prywatnych konstrukto-
zadeklarowanej poza przestrzenią nazw rów konieczne jest poszukiwanie alterna-
tywnych rozwiązań. W przeciwnym wypad-
package ku pozostaje jedynie nadzieja na to, że oso-
{ by korzystające z tej klasy będą wiedziały, aby
public class Singleton samodzielnie nie tworzyć egzemplarzy klasy
{ Singleton, co należy uznać za jeszcze gorsze
private static var instance:Singleton; nadużycie.

public function Singleton( blocker:SingletonBlocker ) Typy wyliczeniowe (enum)

{ Wyliczenie jest to raczej idiom kodowania,
if ( blocker == null ) a nie klasyczny wzorzec projektowy, jednak-
{ że brak tej konstrukcji w języku ActionScript
throw new Error( "Cannot instantiate Singleton class!" ); 3 może być dosyć uciążliwy. Z tego powodu
} powstało kilka propozycji uzupełnienia tej
} luki. Przedstawienie ich wszystkich jest te-
matem na oddzielny artykuł, dlatego też sku-
public static function getInstance():Singleton pię się w tym miejscu na rozwiązaniu, któ-
{ re może spełnić większość wymagań stawia-
if ( !instance ) nych przez programistów chcących go wyko-
{ rzystać w swojej codziennej pracy.
instance = new Singleton( new SingletonBlocker() ); Najważniejszym problemem, z którym
} trzeba się zmierzyć jest zapewnienie kontro-
li typu tak, aby korzystanie ze zdefiniowane-
return instance; go wyliczenia było kontrolowane przez kom-
} pilator. Aby tego dokonać, należy zadeklaro-
} wać klasę, która będzie zawierała statyczne
} pola odpowiadające za poszczególne warto-
ści wyliczenia (Listing 3.).
class SingletonBlocker Przykładem wykorzystania takiego wyli-
{ czenia może być funkcja, której argumentem
} jest jego wartość, tak jak zostało to przedsta-
wione na Listingu 4.
Listing 3. Przykład implementacji wyliczenia umożliwiający wykorzystanie kontroli typu Kolejny raz można zauważyć pewien pro-
blem związany z wykorzystywaniem klasy
package{ reprezentującej typ wyliczeniowy niezgodnie
public class ShapeEnum z przeznaczeniem. Dokładniej chodzi tutaj
o problem prywatnego konstruktora. W ce-
{ lu zabezpieczenia właściwej kontroli typu
public function ShapeEnum() konieczne jest zapewnienie tego, iż egzem-
{ plarze tej klasy nie będą tworzone poza nią
public static const TRIANGLE:ShapeEnum = new ShapeEnum(); samą. Innymi słowy, chcemy mieć pewność,
public static const RECTANGLE:ShapeEnum = new ShapeEnum(); że jej instancje są tworzone tylko podczas ini-
public static const CIRCLE:ShapeEnum = new ShapeEnum(); cjalizacji statycznych stałych identyfikują-
cych wartości wyliczenia.
public function ShapeEnum() Tym razem zastosuję alternatywne rozwią-
{ zanie problemu prywatnego konstruktora.
} Wykorzystuje ono technikę nazywaną statycz-
} nym inicjalizatorem (static initializer). Techni-
} ka ta opiera się na dostarczeniu fragmentu ko-
} du, który jest wykonywany, zanim możliwość
tworzenia jej egzemplarzy zostanie udostęp-

Literatura
• Wzorce projektowe. Elementy oprogramowania obiektowego wielokrotnego użytku, Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides, Wy-
dawnictwa Naukowo–Techniczne;
• Advanced ActionScript 3 with Design Patterns, Joey Lott, Danny Patterson, Adobe Press;
• ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques, William Sanders, Chandima Cumaranatunge, Adobe Developer Library /
O’Reilly.

www.sdjournal.org 73
 ADOBE FLEX

niona na zewnątrz klasy, ale już po inicjalizacji Object.toString, co ułatwi kontrolę wartości ked na true tuż po zainicjalizowaniu wszyst-
jej statycznych pól. wyliczenia za pomocą funkcji trace (Listing 5.). kich pól statycznych, co uniemożliwi wyko-
Dodatkowym elementem ułatwiającym korzy- Powyższy przykład wykorzystuje statycz- rzystanie klasy ShapeEnum poza przewidzia-
stanie z wyliczenia będzie przeciążenie metody ny inicjalizator do zmiany wartości pola loc- nym zakresem.
Zaprezentowana realizacja typu wyliczenio-
Listing 4. Przykład wykorzystania przedstawionej implementacji wyliczenia wego w ActionScript 3 na pewno nie jest ideal-
na. Jedną z jej wad jest konieczność tworzenia
function drawShape( shape:ShapeEnum ):void klasy dla każdego wyliczenia. Ponadto nie ofe-
{ ruje ona możliwości iterowania po kolejnych
switch ( shape ) wartościach, tak jak ma to miejsce w innych ję-
{ zykach programowania. Jednak zapewnienie
case ShapeEnum.TRIANGLE: silnej kontroli typu może być wystarczającym
// Draw triangle argumentem przemawiającym za wykorzysta-
break; niem tego rozwiązania.
case ShapeEnum.RECTANGLE:
// Draw rectangle Metoda Wytwórcza
break; (ang. Factory Method)
case ShapeEnum.CIRCLE: Jest to jeden z najprostszych wzorców pro-
// Draw circle jektowych. Metoda wytwórcza odpowiada za
break; utworzenie obiektów będących egzemplarza-
} mi klas implementujących wspólny interfejs.
} Kod wykorzystujący ten wzorzec zrzuca na
niego odpowiedzialność za wybór właściwej
Listing 5. Poprawiona implementacja wyliczenia wykorzystująca statyczny inicjalizator implementacji tego interfejsu.
package Na początek konieczne jest określenie in-
{ terfejsu produktu metody wytwórczej (Li-
public class ShapeEnum sting 6.). Następnie należy zdefiniować kla-
{ sy implementujące ten interfejs (Listing 7.).
public function ShapeEnum() Oczywiście jest to tylko mocno uproszczo-
{ ny kod mający za zadanie ułatwienie zrozu-
public static const TRIANGLE:ShapeEnum = new ShapeEnum( “Triangle” ); mienia specyfiki korzystania z metody wy-
public static const RECTANGLE:ShapeEnum = new ShapeEnum( “Rectangle” ); twórczej.
public static const CIRCLE:ShapeEnum = new ShapeEnum( “Circle” );
private static var locked:Boolean = false;
Listing 7. Definicje klas implementujących
{ interfejs produktu metody wytwórczej
locked = true;
} // File: Triangle.as
class Triangle implements Ishape
private var _name:String; {
public function draw():void
public function ShapeEnum( name:String ) {
{ // Draw triangle
if ( locked ) }
{ }
throw new Error( "Cannot instantiate ShapeEnum class!" );
} // File: Rectangle.as
class Rectangle implements Ishape
_name = name; {
} public function draw():void
{
public override function toString():String // Draw rectangle
{ }
return “ShapeEnum.” + _name; }
}
} // File: Circle.as
} class Circle implements Ishape
} {
public function draw():void
Listing 6. Przykładowy interfejs produktu metody wytwórczej {
interface Ishape // Draw circle
{ }
function draw():void; }
}

74 FLEX
 ActionScript 3.0

W artykule przedstawimy odmianę wzor-
ca nazywaną Sparametryzowaną Metodą Wy-
twórczą. Główna zasada jej działania pole-
ga na utworzeniu metody przyjmującej jako
argument wartość pozwalającą zidentyfiko-
wać metodzie wytwórczej typ obiektu oczeki-
wanego jako produkt. Oczywiście metoda wy-
twórcza może podejmować decyzję o wyborze
konkretnej implementacji produktu na pod-
stawie dowolnych danych przewidzianych
przez programistę. W przykładzie zostanie
wykorzystany typ wyliczeniowy przedstawio-
ny w poprzedniej części artykułu (Listing 8.).
Listing 8. Implementacja metody wytwórczej wykorzystując typ wyliczeniowy
Zaproponowana implementacja wzorca
jest oczywiście prosta i ma jedynie wartość
czysto merytoryczną. Warto jednak zauwa-
żyć, że jej stosowanie pozwala na tworzenie
obiektów, których inicjalizacja wymaga wy-
konania większej ilości operacji w celu cho-
ciażby przygotowania dużej ilości danych.
Warto również zauważyć, że możliwe jest
rozszerzenie przedstawionej klasy w celu
umożliwienia tworzenia dodatkowych obiek-
tów. Przedstawia to Listing 9.
Metoda wytwórcza jest popularnym wzor-
cem, który często jest wykorzystywany bez
świadomości jego istnienia. Jego stosowa-
nie może być po prostu wynikiem własnych
przemyśleń. Jednak faktem jest, że wzorzec
ten jest bardzo praktyczny, a jednocześnie
dzięki swojej prostocie jego użycie nie spra-
wia większym problemów i nie wprowadza
dodatkowych ograniczeń. Podobnym wzor-
cem jest Fabryka Abstrakcyjna (ang. Abstract
Factory), który zapewnia interfejs odpowie-
dzialny za tworzenie rodzin powiązanych ze
sobą obiektów bez znajomości ich konkret-
nych implementacji. Jednak opis tego wzor-
ca wykracza poza łamy niniejszego artykułu,
dlatego też zachęcam do zapoznania się z lite-
raturą opisującą wzorce projektowe.

class ShapeCreator Podsumowanie

{ Wzorce projektowe są nieocenionym na-
public function createShape( type:ShapeEnum ):Ishape rzędziem każdego programisty. Pomagają
{ w szybkim projektowaniu i tworzeniu opro-
switch ( shape ) gramowania, co w oczywisty sposób wpisuje
{ się w ideę RIA. Wzorce ułatwiają też komu-
case ShapeEnum.TRIANGLE: nikację pomiędzy programistami (na przy-
return new Triangle(); kład, posługując się ustandaryzowanym ję-
break; zykiem wzorców projektowych łatwiej pro-
case ShapeEnum.RECTANGLE: wadzić dyskusję o architekturze danego roz-
return new Rectangle(); wiązania). Niestety, język ActionScript 3.0
break; w pewnych kwestiach utrudnia ich imple-
case ShapeEnum.CIRCLE: mentację, wymuszając w ten sposób stoso-
return new Circle(); wanie sztuczek, które nie są powszechnie
break; znane.
default: Podobnie sytuacja wygląda w przypadku
throw new Error( “Unknown shape!” ); braku pewnych idiomów językowych, któ-
break; re są powszechnie stosowane w innych języ-
} kach programowania. Tutaj również progra-
} miści muszą się wykazywać pomysłowością
} i dociekliwością co niestety często jest nie-
możliwe w warunkach dużych ograniczeń
Listing 9. Rozszerzenie metody wytwórczej o nowy produkt czasowych.
W przedstawionym artykule podałem ze-
class AdvancedShapeCreator extends ShapeCreator staw gotowych rozwiązań nawiązujących do
{ popularnych wzorców projektowych i idio-
public function createShape( type:ShapeEnum ):Ishape mów kodowania. Mam nadzieję, że rozwią-
{ zania te pozwolą zaoszczędzić cenny czas
if ( type == ShapeEnum.STAR ) czytelników tworzących projekty w Action-
{ Script 3.
return new Star();
}
else
{ JAKUB WĘGRZYN
return super.createShape( type ); Pracuje na stanowisku Technical Unit Manager
} w firmie Gamelion, wchodzącej w skład Grupy
} BLStream. Jakub kieruje komórką odpowiedzial-
} ną za programowanie gier opartych na techno-
logii Flash. Grupa BLStream powstała, by efek-
tywniej wykorzystywać potencjał dwóch, szyb-
ko rozwijających się producentów oprogramo-
W Sieci wania – BLStream i Gamelion. Firmy wchodzą-
• ActionScript 3 Design Patterns – http://www.as3dp.com/; ce w skład grupy specjalizują się w wytwarzaniu
• Introduction to Design Patterns – http://www.moock.org/lectures/introToPatterns/; oprogramowania dla klientów korporacyjnych,
• Enums and ActionScript's Static Initializers – http://www.barneyb.com/barneyblog/; w rozwiązaniach mobilnych oraz produkcji i te-
• AS3: Singletons – http://www.gskinner.com/blog/; stowaniu gier.
• ActionScript 3 Singleton Redux – http://www.darronschall.com/weblog/.
Kontakt z autorem:
jakub.wegrzyn@game–lion.com

www.sdjournal.org 75
 TIPS & TRICKS

Flex Tips & Tricks

Chciałbym odtworzyć plik MP3 we Flex. Jak to zrobić? własność selectedRanges, która jest tablicą obiektów zawierających dane
Do odtwarzania dźwięków, wykorzystujemy klasę Sound w połączeniu rangeStart oraz rangeEnd, na podstawie których można łatwo obliczyć
z URLRequest. Przykładowo: różnicę dni za pomocą ActionScript.

var snd:Sound = new Sound(new URLRequest("muzyka.mp3"));
snd.play();
Możemy także podać funkcji play() parametry takie jak miejsce, od które-
go ma zacząć odtwarzać (w milisekundach) lub ilość powtórzeń:
snd.play(1000, 3); // Odtwórz od pierwszej sekundy trzy razy
// Stała zawierająca ilość milisekund w jednym dniu
private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
// Parametem jest jeden z obiektów
tablicy selectedRanges
private function calculateDays(item:Object):String {
var tempDate:Date = new Date(item.rangeEnd – item.rangeStart);
return Math.round((tempDate.time / MS_PER_DAY) +
1).toString();
}

Mam tablicę zawierającą kilka rekordów, gdzie każdy z nich po-

siada dane takie jak imię, nazwisko czy datę urodzenia. Chciał- W jaki sposób formatować daty w kontrolce DateField?
bym je wyświetlać jako listę, a nie siatkę. Czy jest to możliwe? Do formatowania dat Flex posiada klasę DateFormatter, którą można
Oczywiście, Wystarczy użyć komponentu List (lub HorizontalList je- użyć za pomocą małej funkcji przypisanej jako labelFunction:
śli wolimy) i ustawić mu własność itemRenderer.
<mx:Script>
<mx:List itemRenderer="MyItemRenderer" x="0" y="0" width="300" <![CDATA[
height="300"> private function doLabel(item:Date):String {
<mx:dataProvider> return dateFormatter.format(item);
<mx:Array> }
<mx:Object name="Jan" surname="Kowalski" birthdate="1-2-1950" /> ]]>
<mx:Object name="Adam" surname="Marek" birthdate="4-7-1968" /> </mx:Script>
<mx:Object name="Marcin" surname="Iksiński" birthdate="8-12- <mx:DateFormatter id="dateFormatter" formatString="D MMM YYYY"/>
1989" /> <mx:DateField labelFunction="doLabel" />
</mx:Array>
</mx:dataProvider>
</mx:List> Jak zrobić aby zamienić
kolorowy obrazek w czarno-biały?
Do tego celu musimy użyć filtru ColorMatrixFilter i odpowiedniej ma-
Następnie tworzymy nowy komponent, w którym ustalamy sposób wy- trycy kolorów:
świetlania naszych danych:
<mx:Script>
<?xml version="1.0" encoding="utf-8"?> <![CDATA[
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" private var rLum:Number = 0.2225;
width="100%" height="40"> private var gLum:Number = 0.7169;
<mx:Label text="{data.name}" x="5" y="0" /> private var bLum:Number = 0.0606;
<mx:Label text="{data.surname}" x="5" y="15" /> [Bindable]
<mx:Label text="{data.birthdate}" x="5" y="30" /> private var bwMatrix:Array =
</mx:Canvas> [rLum, gLum, bLum, 0, 0, rLum,
gLum, bLum, 0, 0, rLum, gLum,
bLum, 0, 0, 0, 0, 0, 1, 0];
Renderer może być edytowany graficznie, więc ułatwia to nam jego pro- [Bindable]
jektowanie. [Embed('obrazek.jpg')]
private var image:Class;
Jak obliczyć ilość dni pomiędzy ]]> </mx:Script>
zaznaczonymi datami w kontrolce DateChooser? <mx:ColorMatrixFilter id="cmf" matrix="{bwMatrix}" />
Kontrolka DateChooser poza zaznaczeniem jednej daty, pozwala zaznaczyć <mx:Image source="{image}" filters="{[cmf]}" />
jeden lub więcej przedziałów dni. Dostęp do tych informacji mamy poprzez

76 FLEX
 TIPS & TRICKS

Polecam poczytać o tym filtrze oraz pobawić się z wartościami matrycy. Jak ustawić ikonę w przycisku?
Daje to czasami ciekawe rezultaty. Ustawienie ikony wymaga poprzedniego je osadzenia w aplikacji lub za-
ładowania jej z zewnątrz. Osadzić ją możemy na dwa sposoby: poprzez
Jak wyświetlić dane XML wewnątrz komponentu DataGrid? ActionScript lub MXML według kodów poniżej.
Obsługa XML jest bardzo prosta we Flex. Wystarczy użyć klasy XML
oraz XMLListCollection w połączeniu z DataGrid. <mx:Script>
Mając przykładowy plik XML "dane.xml": <![CDATA[
[Bindable]
<?xml version="1.0" encoding="UTF-8" ?> [Embed(source="ikona.png")]
<osoby> private var Icon:Class;
<osoba> ]]>
<name>Jan</name> </mx:Script>
<surname>Kowalski</surname> <mx:Button label="[Embed(source='ikona.png')]" icon="{Icon}" />
<birthdate>1-2-1950</birthdate> <mx:Button label="@Embed('ikona.png')" icon="@Embed('ikona.png
</osoba> ')" />
<osoba>
<name>Adam</name>
<surname>Marek</surname> W jaki sposób wyświetlić
<birthdate>4-7-1968</birthdate> okno dialogowe z przyciskami Tak i Nie?
</osoba> Flex udostępnia klasę Alert, która może być zastosowana do tego celu:
<osoba>
<name>Marcin</name> <mx:Script>
<surname>Iksiński</surname> <![CDATA[
<birthdate>8-12-1989</birthdate> import mx.controls.Alert;
</osoba> private var alert:Alert;
</osoby> private function showAlert():void {
var text:String = "Czy na pewno chcesz wykonać tą jakże
ważną akcję?";
Wystarczy poniższy kod: var title:String = "Tytuł okienka";
alert = Alert.show(text, title, Alert.YES | Alert.NO);
<mx:XML id="myXML" source="dane.xml" /> }
<mx:XMLListCollection id="myXMLList" source="{myXML.osoba}" /> ]]>
<mx:DataGrid id="dataGrid" dataProvider="{myXMLList}" </mx:Script>
width="100%" rowCount= <mx:Button label="Alert.show()" click="showAlert();" />
"{myXMLList.length + 1}">
<mx:columns>
<mx:DataGridColumn id="nameCol" dataField="name" Niestety przyciski są w języku angielskim, więc jeśli chcemy mieć je
headerText="Imie" /> po polsku, musimy stworzyć własne okno dialogowe.
<mx:DataGridColumn id="surnameCol" dataField="surname"
headerText="Nazwisko" /> Jak zmienić format podpowiedzi w kontrolce Slider?
<mx:DataGridColumn Do tego celu musimy ustawić własność dataTipFormatFunction na na-
id="birthdateCol" dataField="birthdate" headerText="Data szą funkcję:
urodzenia" />
</mx:columns> <mx:Script>
</mx:DataGrid> <![CDATA[
private function formatFunction(item:Object):String {
return "Minimalna cena: " + item.toString() + "zł";
Czy mogę zmienić czas po jakim znika podpowiedź (ToolTip)? }
Tak. Wystarczy użyć klasy ToolTipManager: ]]>
</mx:Script>
<mx:Script> <mx:HSlider id="slider" width="200" liveDragging="true"
<![CDATA[ minimum="1" snapInterval="1"
import mx.managers.ToolTipManager; tickInterval="1" value="3" dataTipFormat
ToolTipManager.hideDelay = 2500; Function="formatFunction" />
]]> <mx:Label id="lbl" text="{slider.value}" />
</mx:Script>

<mx:Button id="button" label="Najedź na mnie" toolTip="Jestem Więcej przykładów w języku angielskim, można znaleźć na:
podpowiedzią która zniknie po 2,5s." /> http://blog.flexexamples.com/

www.sdjournal.org 77
 Wywiad
Mike Chambers
dla SDJ Extra
Magazyn SDJ Extra zdołał przyłapać Mike'a Chambersa podczas konferencji
onAIR w Warszawie poświęconej środowisku wykonawczemu AIR 1.1,
gdzie omawiał nowości w odtwarzaczu Flash 10 oraz przybliżył swoją
wcześniejszą pracę przy Macromedia Generator.
Mike Chambers – Principal
Product Manager Developer
Relations Flash Platform
SDJ: Cześć Mike, mógłbyś opowiedzieć
nam trochę o sobie, swoim doświadcze-
niu? W jaki sposób rozpocząłeś swoją pra-
cę w Adobe?
MC: Nazywam się Mike Chambers i pracuję
dla Adobe. Jestem Głównym Kierownikiem
Projektu odpowiedzialnym za relacje pomię-
dzy deweloperami. Jest to dosyć tajemnicza
nazwa stanowiska, ale właściwie to pracuję
nad odtwarzaczem Flash i zespołami odpo-
wiedzialnymi za środowisko AIR. Dbam o do-
bre stosunki i przepływ informacji pomiędzy
nami i deweloperami. Pracuję dla Adobe od
około 8 lat. Pierwotnie związany byłem z Ma-
cromedią i zostałem zatrudniony z powodu
mojej pracy nad Generatorem. Obecnie jest
to już stary produkt i trudno go gdziekolwiek
znaleźć, ale używałem go często w przypad-
ku Flasha i wdrażaniu rozwiązań Java. W ta-
ki oto sposób związałem się z Macromedią,
a dzisiaj Adobe.
SDJ: W jakich okolicznościach pojawił się
AIR?
MC: Idea Flasha jako aplikacji desktopo-
wej jest czymś, co zaprzątało moją głowę
już podczas pracy w Macromedii i przero-
dziło się w projekt nazywany Macromedia
Central. Było to trzy lata temu. Właściwie to
pracowałem z zespołem, który w tym cza-
sie przeprowadził pierwszą próbę zaimple-
mentowania Flasha na pulpit. Nie odnieśli-
śmy wtedy sukcesu z wielu różnych powo-
dów, ale najważniejsze jest to, że wynieśli-
śmy z tego projektu solidny kawał wiedzy
i doświadczenia. Zdaliśmy sobie sprawę
z tego, że odtwarzacz Flash nie był wystar-
czająco szybki jak na nasze potrzeby. Mu-
sieliśmy więc go przyśpieszyć, spowodowa-
ło to wydanie Flasha 9 i ActionScript 3 oraz
78
wypracowało nam metody wdrażania tych
aplikacji. Było to coś, z czym musieliśmy
uporać się dawno temu, ale nie mieliśmy ty-
le zasobów ile byśmy sobie życzyli jako fir-
ma, dlatego połączyliśmy się z Adobe, co
spowodowało znaczne zwiększenie możli-
wości zespołu. Adobe wykonywał podob-
ną pracę z PDF, firma posiada know-how. In-
tegracja z Adobe była znakomitym momen-
tem na rozpoczęcie pracy nad AIR.
SDJ: Jakie ograniczenia technologiczne
przeglądarki musieliście rozważyć?
MC: Jeśli spojrzeć szczególnie na dwa ostat-
nie lata, można zauważyć niesamowitą eks-
plozję aplikacji internetowych i aplikacji
wdrażanych na przeglądarki. Jest wiele po-
wodów takich wdrożeń. Przeglądarki trochę
dojrzały, także typ interakcji oferowany przez
AJAX okazał się niesamowicie prosty we
wdrażaniu aplikacji internetowych, do któ-
rych użytkownicy mogą uzyskać dostęp wła-
ściwie zewsząd. Są też ograniczania, ponie-
waż aplikacje są uruchamiane w przeglądar-
ce z wieloma różnymi dodatkowymi, wbu-
dowanymi wtyczkami. Jeśli przypadkowo
zamkniesz przeglądarkę, stracisz połączenie
z aplikacją. Przeszkadza to, bo nie możesz
prowadzić tego typu interakcji jaką prowa-
dzisz z innymi aplikacjami. Np. nie możesz
chwycić i przeciągnąć elementu z desktopu
do przeglądarki. Przeglądarka jest jak pudeł-
ko i nie ma zbyt dużego dostępu do twojego
systemu plików. AIR stara się korzystać w jak
najlepszy sposób z tych dwóch światów. Bu-
dujemy to środowisko na szczycie interne-
towych technologii. Jest to w miarę prosty
proces w sferze projektowania aplikacji i jej
wdrażania, ale jednocześnie, zbliżamy się do
integracji z pulpitem. Dzięki temu użytkow-
nik może wchodzić w interakcję z aplikacją
w taki sposób, jakby pracował w regularnym
programie. Nie oznacza to oczywiście śmier-
ci przeglądarek internetowych. Jest wiele po-
wodów i sytuacji, w których chcemy używać
zwykłej przeglądarki internetowej, jeśli jed-
nak chcesz być bliżej użytkownika, wtedy
Adobe AIR jest tym czego warto szukać.
SDJ: Jak wyglądają plany na rozwój AIR?
MC: Obecnie jesteśmy na etapie angloję-
zycznej wersji AIR 1.0. Pracę nad kolejną wer-
sją rozpoczęliśmy w lutym i zbliżamy się do
wydania AIR 1.1. Automatycznie zaoferuje-
my wsparcie dla 10 języków. Następnie zaj-
miemy się pracą nad następną pełną wer-
sją środowiska. W międzyczasie wprowadzi-
my wersję dla Linuxa, integrację odtwarza-
cza Flash 10 i inne rzeczy.
SDJ: Możesz nam opowiedzieć trochę wię-
cej o przyszłości Flasha?
MC: Na razie wydaliśmy on-line wersję beta
Flash 10. Jest w niej wiele rożnych, świetnych
rozwiązań, takich jak wsparcie dla sprzęto-
wej akceleracji 3D i całkiem nowy silnik tek-
stu - obecny ma bardzo ograniczone możli-
wości edycyjne. Dysponujemy również pro-
jektem o nazwie Pixel Bender (formalnie: Hy-
dra), który pozwala użytkownikowi na budo-
wanie własnych bitmapowych filtrów tak,
aby mógł je uruchomić natywnie w odtwa-
rzaczu Flash. To tylko niektóre z rozwiązań.
Jest oczywiście jeszcze wiele innych udo-
godnień, na razie jesteśmy na etapie wersji
beta, tak więc praca wre.
SDJ: Wszystkie te rozwiązania wdraża-
ne w odtwarzacz Flash 10 będą dostępne
także dla AIR?
MC: Zdecydowanie tak. Jądro AIR zbudowane
jest na odtwarzaczu Flash, tak więc zsynchro-
nizujemy te rozwiązania w następnej wersji
po AIR 1.1. Będzie ona miała całkowite wspar-
cie dla wszystkich rozwiązań Flasha 10. Oczy-
wiście wyposażymy ją także w inne technolo-
gie. To samo zrobimy z WebKit'em. Wykona-
my update wersji WebKit, którą mamy w Ado-
be AIR i otrzyma ona wszystkie te świetne rze-
czy, które pojawią się już niedługo.
SDJ: Mike, dziękuję za wywiad.
FLEX
Roczna prenumerata

tylko
180 ,-
Software Developer’s Journal (poprzednio Software 2.0)
jest miesięcznikiem głównie dla programistów, którzy li-
czą, że dostarczymy im gotowe rozwiązania, oszczędza-
jąc im czasu i pracy. Jesteśmy czytani przez tych, któ-
rzy chcą być na bieżąco informowani o najnowszych osią-
gnięciach w dziedzinie IT i nie chcą, żeby jakiekolwiek
istotne wydarzenia umknęły ich uwadze. Aby zadowolić
naszych czytelników, prezentujemy zarówno najnowsze
rozwiązania, jaki starsze, sprawdzone technologie.

Kontakt
1. Telefon 2. Online
+48 22 427 36 53 pren@software.com.pl
+48 22 427 36 79
3. Adres
Bokserska 1
2. Fax 02-682 Warszawa
+48 22 244 24 59 Polska
 Zamówienie prenumeraty

Prosimy wypełniać czytelnie i przesyłać faksem na numer:

00 48 22 244 24 59
lub listownie na adres:
Software-Wydawnictwo Sp. z o. o.
ul. Bokserska 1
02-682 Warszawa
Polska
E-Mail: pren@software.com.pl
Przyjmujemy też zamównienia telefoniczne:
0048 22 427 36 53
0048 22 427 36 79

Jeżeli chcesz zapłacić kartą kredytową,

wejdź na stronę naszego sklepu internetowego www.buyitpress.com.

Imię i nazwisko ...............................................................................

Nazwa firmy.....................................................................................

Dokładny adres ..............................................................................

.........................................................................................................

Zadzwoń Telefon ............................................................................................

9
+48 22 427 36 7
E–mail .............................................................................................

lub ID kontrahenta ................................................................................

zamów Numer NIP firmy .............................................................................

mailowo! Fax (wraz z nr kierunkowym) .........................................................

□ automatyczne przedłużenie prenumeraty

Prenumerujesz
– zyskujesz
l oszczędność
pieniędzy Ilość Od
Ilość zama- numeru
l szybka dostawa Tytuł nume- wianych pisma Cena
rów prenume- lub mie-
l prezenty rat siąca

l bezpieczna płatność Software Developer’s

12
180*/

on–line Journal (1 płyta CD)

– dawniej Software 2.0
250
PLN

* cena prenumeraty rocznej dla osób prywatnych