FLEX

12

ADOBE FLEX

www.sdjournal.org

O

bszar zastosowań Flash zaskoczył sa-
mych producentów. Narzędzie prze-
znaczone do tworzenia multimedial-

nej animacji opartej na wektorach stało się jednym
z wiodących rozwiązań wykorzystywanych do
projektowania witryn internetowych.

Model budowy projektów w oparciu o listwę

czasową i sceny, stworzony z myślą o animacji, zo-
stał zaadaptowany na potrzeby WWW. Często-
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-

wych, wykorzystujących dynamicznie generowany
jednoekranowy interfejs użytkownika. Debiut pro-
duktu został poprzedzony wprowadzeniem nowe-
go terminu dla projektów Internetowych – RIA
(Rich Internet Application), co w dosłownym tłu-
maczeniu brzmi bogata aplikacja internetowa. Po-
jęcie oznacza nowoczesne dynamiczne aplikacje in-
ternetowe, w których wyeliminowano uciążliwość
standardowych technologii opartych o HTML.
Aplikacje wykonane w oparciu o założenia RIA
charakteryzują się jednoekranową prezentacją da-
nych (znaną z rozwiązań desktopowych), brakiem
konieczności przeładowywania zawartości ekranu
podczas pracy oraz przyjaznym, zawierającym ele-
menty multimedialne interfejsem.

Wprowadzenie

do technologii Flex

Obszarem zastosowania Flex jest wspomaganie
budowy aplikacji w zakresie tworzenia warstwy
prezentacji. Flex skoncentrowany jest na dostar-
czaniu rozwiązań wspierających budowę graficz-
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
Development Kit (Flex SDK) oraz zaawansowa-
ne środowisko developerskie Flex Builder. SDK to
rozwiązanie darmowe, oferujące m.in. kompilator
działający z linii poleceń. Siłą SDK jest wykorzy-
stanie tandemu: języka MXML wraz z obiektowo
zorientowanym językiem ActionScript 3, dobrze
znanym wszystkim użytkownikom Flash.

MXML jest opartym o XML językiem cha-

rakteryzującym się stosunkowo prostą składnią.
Znacznikowa budowa szczególnie przypadnie do
gustu tradycyjnym webmasterom oraz początku-
jącym programistom. MXML umożliwia łatwe
generowanie i zarządzanie komponentami wizu-
alnymi, które można następnie wywoływać, zmie-
niać właściwości i dodawać efekty.

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.

Dowiesz się...

• O technologii Flex i środowisku Flex Builder 3;
• Nauczysz się korzystać z klasy HttpService

oraz komponentu Datagrid.

• Samodzielnie wykonasz program wyświetlają-

cy dane z pliku XML.

Powinieneś wiedzieć...

• Wymagana jest podstawowa wiedza z zakresu

programowania oraz języka XML.

• Wiedza na temat aplikacji internetowych.

Poziom trudności

Rysunek 1. Zrzut ekranu po uruchomieniu Flex Builder 3

FLEX

12

ADOBE FLEX

www.sdjournal.org

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

>

FLEX

14

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!

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.

Rysunek 3. Widok gotowego projektu

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: [e-mail]

Rysunek 2. Widok panelu Flex Navigator