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
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-
Oznaczone 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óz
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? Odpowiedz
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

ayout="absolute">


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

layout="absolute" creationComplete="adr
esyDane.send()">


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

layout="absolute" creationComplete="adr
esyDane.send()">



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



ult.adresy.stock}" />

Listing 5. Dodajemy nagłówki w kolumnach

layout="absolute" creationComplete="adr
esyDane.send()">

Dane.lastResult.adresy.osoba}">

headerText="Imię"/>
headerText="Nazwisko"/>
headerText="Adres zamieszkania"/>
headerText="Telefon kontaktowy"/>



FLEX www.sdjournal.org
ADOBE FLEX
mi, np. możemy przetworzyć dane wprowadzo- Pierwszy projekt bardzo proste i logiczne. Uzupełniamy nasz
ne przez użytkownika w polach tekstowych, wy- Wspólnie wykonamy projekt prostej aplikacji, któ- kod z
ródłowy tak jak na Listingu 2. Wywołanie
konać obliczenia itd. Budowa Flex pozwala na bar- ra w przystępny sposób wyświetli nam zawartość funkcji send() przekazuje dane z pliku XML
dzo intuicyjne łączenie obu języków, dlatego praca pliku adresy.xml. Celem wykonania projektu jest do Flex w postaci obiektu, który zostaje ob-
z dokumentem jest łatwa, a budowa projektu spój- zaprezentowanie składni języka MXML oraz pro- służony przez klasę HTTPService. Po otrzyma-
na. Kod z
ródłowy aplikacji wykonanych we Flex stoty tworzenia aplikacji we Flex. niu danych HTTPService umieszcza je w obiek-
przetwarzany jest do postaci kodu ActionScript, Aby utworzyć aplikację, musimy stworzyć no- cie lastResult. Za każdym razem, kiedy dane
a następnie kompilowany do postaci pliku SWF. wy projekt, w którym Flex utworzy niezbędną zostaną zmienione obiekt lastResult zostanie
W skład SDK wchodzą również: biblioteka goto- strukturę katalogów i plików. W tym celu wybie- zaktualizowany.
wych klas - Flex Class Library oraz Flex Data ramy menu File>New>Flex Project. W polu Pro- Nadszedł czas, aby wyświetlić pobrane da-
Service umożliwiający łączenie warstwy prezen- jectname wpisujemy nazwę naszego projektu np. ne. W tym miejscu skorzystamy z komponen-
tacji z warstwą biznesową. PierwszaAplikacjaFlex. Inne opcje pozostawiamy tu DataGrid, który wyświetla dane znajdują-
Flex Data Sevice nie umożliwia bezpośred- z domyślnymi wartościami i klikamy przycisk Fi- ce się w obiekcie w tabeli. Uzupełnijmy zatem
niego dostępu do baz danych. Pełni rolę pośredni- nish. Po chwili nasz projekt zostanie załadowa- nasz kod, dodając komponent wraz z atrybuta-
ka umożliwiającego np. wywołanie na serwerze ny. Jak widać na Rysunku 1. w panelu Flex Na- mi definiującymi szerokość pola (width) oraz
kodu Java, .Net, PHP, ASP czy ColdFusion, powo- vigator, stworzona została odpowiednia struktu- pozycje w poziomie (x) i pionie (y) (Listing 3.).
dującego pobranie danych z bazy, a następnie ich ra. W głównym oknie projektu znajdują się dwie Następnie musimy przekazać dane, które zo-
przekazanie do warstwy prezentacji. zakładki: Source, w której możemy edytować kod stały przechwycone przez HTTPService do pola
Wraz z pojawieniem się technologii Flex, Adobe z
ródłowy naszej aplikacji oraz Design, z której do- DataGrid, w tym przypadku HTTPService peł-
zaoferowało dedykowane rozwiązanie wspomaga- stęp mamy do edytora graficznego. Skupimy się na ni rolę dostawcy danych, które chcemy wyświe-
jące pracę developerów - Flex Builder. Produkt jest edycji kodu z
ródłowego, dlatego przejdz
my do za- tlić. Aby wyświetlić dane, musimy odwołać się
zaawansowanym graficznym środowiskiem typu kładki Source. do obiektu lastResult (Listing 4.).
RAD opartym o dobrze znany programistom Ja- Jak widać, po stworzeniu projektu, utworzony W zasadzie nasza aplikacja jest już gotowa,
va - Eclipse. został szkielet dokumentu z otwierającym i zamy- dodajmy jednak przyjazne użytkownikowi na-
Oprócz znanych z Eclipse narzędzi wspoma- kającym znacznikiem Application. główki poszczególnych kolumn w tabeli wg Li-
gających tworzenie aplikacji, Flex Builder oferu- Istnieje kilka możliwości uzyskana dostępu stingu 5.
je graficzny edytor pozwalający na wizualną kre- do zawartości pliku XML. Wykorzystamy kla- Nasz projekt jest gotowy. Pozostaje jedynie
ację projektu. Wszystkie niezbędne komponenty sę HTTPService, dzięki której Flex otrzyma da- skompilować i uruchomić program. W tym ce-
jak przyciski, pola tekstowe, elementy menu, moż- ne z pliku XML w postaci odpowiedzi HTTP. lu z menu wybieramy Run>Run PierwszaApli-
na w prosty sposób przeciągnąć myszką i umieścić W tym miejscu warto przypomnieć, że progra- kacjaFlex lub wciskamy skrót klawiszowy [Ctrl]
w oknie projektu. Celowo pomijam opis samego mowanie we Flex jest zorientowane obiektowo + [F11]. Po chwili w oknie domyślnej przeglą-
środowiska Flex Builder oraz opis procesu insta- i każdemu zdarzeniu przyporządkowana jest darki ukaże się nasz program wyświetlający da-
lacji. W poniższym opisie wykorzystałem najnow- odpowiednia akcja. Zdarzeniem może być np. ne adresowe z pliku adresy.xml (na DVD).
szą, trzecią odsłonę Flex Buildera. Do dzieła! Za- załadowanie aplikacji, kliknięcie przycisku lub
czynamy przygodę z Flex! wpisanie tekstu. Podsumowanie
Pomiędzy głównymi znacznikami aplikacji Tworzenie aplikacji we Flex nie jest trudne. Jak
wprowadzamy znacznik opa- łatwo zauważyć, ilość linii kodu potrzebnych
trzony wymaganym atrybutem id, przyjmij- do wyświetlenia pliku XML jest minimalna.
my id= adresy . Kolejny atrybut URL definiu- Poznaliśmy składnię języka MXML, a samo-
je ścieżkę dostępu do pliku oraz jego nazwę, po- dzielne wykonanie projektu przybliżyło moż-
dajmy ścieżkę do katalogu gdzie umieściliśmy liwości klasy HTTPService oraz komponent
nasz plik adresy.xml. Nasz kod powinien wyglą- DataGrid.
dać jak na Listingu 1. Mam nadzieję, że ten artykuł stanie się dla
Jak wspomniałem wcześniej, aby nastąpi- Was początkiem dalszej przygody z Flex, tech-
ła akcja, musi wystąpić zdarzenie, które ją wy- nologią, która zmienia oblicze Internetu.
woła. Samo użycie klasy HTTPService do po-
łączenia z plikiem XML nie jest rozpoznawa- Propozycja dalszej literatury
ne jako zdarzenie, dlatego musimy zdefinio- Niestety brakuje polskojęzycznych podręczni-
wać inne zdarzenie. Użycie creatioComplete ków do nauki Flex, dlatego konieczne jest sko-
w głównym znaczniku Application spowo- rzystanie z anglojęzycznej literatury. Szczegól-
duje, że fakt ukończenia ładowania aplikacji nie dwie pozycje warte są polecenia:
zwrócony zostanie jako zdarzenie mogące wy-
wołać odpowiednią funkcję. W naszym przy- " Flex 3: A Beginner's Guide By Michele E. Da-
padku użyjemy funkcji send(), która zosta- vis, Jon A. Phillips;
nie wywołana w momencie załadowania apli- " The Essential Guide to Flex 3 By Charles E
Rysunek 2. Widok panelu Flex Navigator
kacji. Brzmi to nieco zawile, ale w istocie jest 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.
Rysunek 3. Widok gotowego projektu Kontakt: [e-mail]
14 FLEX