FLEX

ADOBE FLEX

www.sdjournal.org

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

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"

"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

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

opa-

trzony wymaganym atrybutem

, przyjmij-

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 (

) i pionie (

) (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: krajski@p-innovations.com

Rysunek 2. Widok panelu Flex Navigator