Adobe Flex 4 Oficjalny podrecznik Tom I fl4op1

• Tworzenie własnych komponentów, nadawanie im stylów i skórek
• Praca nad aplikacjami z wykorzystaniem środowiska Flash Builder
• Wydajny, zorientowany obiektowo język ActionScript 3.0

Adobe Flex 4 to najnowszy zestaw technologii służących do tworzenia bogatych aplikacji
internetowych. Ta wydajna i bezpłatna struktura programistyczna to istne novum na rynku programów
webowych. Flex pozwala na tworzenie prawdziwie dynamicznych i interaktywnych aplikacji
o olbrzymich możliwościach. A to wszystko bez konieczności rezygnowania ze wspaniałej grafiki!

Dzięki książce „Adobe Flex 4. Oficjalny podręcznik. Tom I” stopniowo, krok po kroku, nauczysz się
tworzyć aplikacje w językach MXML oraz ActionScript 3.0. Znajdziesz tu omówienie nowości
wprowadzonych we Fleksie 4, takich jak komponenty Spark, nowe, zaawansowane techniki
tworzenia skórek oraz wiele innych. Poznasz możliwości pracy w środowisku Flex Builder oraz
dowiesz się, jak tworzyć interfejsy użytkownika. Zapoznasz się z wiedzą na temat kontrolek,
obsługi zdarzeń, stosowania techniki „przeciągnij i upuść”, tworzenia nawigacji czy też zmiany
wyglądu Twojej aplikacji za pomocą stylów. Pamiętaj, że masz przed sobą najlepszy podręcznik
technologii Flex, napisany przez zespół specjalistów posiadających olbrzymie doświadczenie
w prowadzeniu kursów programowania, konsultacji i wszelkich działań wspomagających
programistów i projektantów.

• Flash Builder
• Tworzenie interfejsu użytkownika
• Stosowanie kontrolek
• Obsługa zdarzeń
• ActionScript i MXML
• Tworzenie komponentów
• Siatki danych
• Rendering elementów
• Stosowanie mechanizmu "przeciągnij i upuść"
• Style i skórki

Skorzystaj z niesamowitych możliwości Fleksa 4

i stwórz swoją wyjątkową aplikację internetową!

Spis

treci

autorach

Wstp

Wprowadzenie

Lekcja 1. Wprowadzenie do bogatych aplikacji internetowych

Rozwój aplikacji komputerowych ......................................................................................27
Odejcie od architektury opartej na stronie internetowej ...............................................29
Zalety bogatych aplikacji internetowych ............................................................................31

Menederowie przedsibiorstw ...................................................................................... 31
Przedsibiorstwa brany IT ............................................................................................. 31
Uytkownicy kocowi ..................................................................................................... 31

Technologie bogatych aplikacji internetowych ................................................................ 32

Asynchroniczny JavaScript i XML (AJAX) ..................................................................32
Wirtualna maszyna Javy .................................................................................................. 33
Microsoft Silverlight ....................................................................................................... 33
Platforma Adobe Flash ....................................................................................................34

Czego si nauczye? ............................................................................................................. 37

Lekcja 2. Zaczynamy

Wstp do tworzenia fleksowych aplikacji ..........................................................................40
Tworzenie projektu i aplikacji MXML ..............................................................................40
Obszar roboczy Flash Buildera ........................................................................................... 45
Uruchamianie aplikacji ........................................................................................................ 48
Korzystanie z debugera programu Flash Builder ............................................................. 53
Przygotuj si do kolejnych lekcji ......................................................................................... 60
Czego si nauczye? ............................................................................................................. 62

Lekcja 3. Projektowanie interfejsu uytkownika

Layout aplikacji ..................................................................................................................... 65

Kontenery .......................................................................................................................... 66
Obiekty layoutu ............................................................................................................... 66

ADOBE FLEX 4.

Oficjalny podrcznik. Tom I

czenie kontenerów i obiektów layoutu .....................................................................67
Przewijanie zawartoci .....................................................................................................68
Budowa znaczników MXML ..........................................................................................68

Tworzenie layoutu sklepu internetowego ......................................................................... 69

Tworzenie zarysu layoutu w trybie edycji róda .........................................................70
Praca nad layoutem w trybie projektowania ................................................................72
Definiowanie sekcji produktów .....................................................................................75

Praca z layoutami opartymi na wizach ............................................................................ 76
Praca ze stanami widoku ...................................................................................................... 81

Tworzenie stanów widoku .............................................................................................. 81
Sterowanie stanami widoku ............................................................................................84

Refaktoryzacja ....................................................................................................................... 86

Stosowanie zoonych kontenerów ...............................................................................88
Refaktoryzacja kodu aplikacji ........................................................................................89

Czego si nauczye? .............................................................................................................90

Lekcja 4. Stosowanie prostych kontrolek

Wprowadzenie do prostych kontrolek ..............................................................................94
Wywietlanie obrazów .......................................................................................................... 95
Tworzenie widoku szczegóów ............................................................................................98
Korzystanie z wizania danych do powizania struktury danych z prost kontrolk ........101
Wykorzystanie kontenera Form do umieszczania prostych kontrolek ....................... 102
Czego si nauczye? ........................................................................................................... 105

Lekcja 5. Obsuga zdarze

107

Wprowadzenie do obsugi zdarze .................................................................................. 107

Prosty przykad ............................................................................................................... 109
Obsuga zdarzenia przez funkcj jzyka ActionScript ............................................. 110
Przekazywanie danych podczas wywoywania funkcji obsugi zdarzenia ..............111
Uywanie danych z obiektu zdarzenia .........................................................................111
Dokonywanie inspekcji obiektu zdarzenia ................................................................ 114

Obsuga zdarze systemowych ..........................................................................................117

Zdarzenie creationComplete ........................................................................................ 117
Modyfikowanie danych w zdarzeniu creationComplete ......................................... 118

Czego si nauczye? ........................................................................................................... 120

Lekcja 6. Korzystanie ze zdalnych danych XML

123

Osadzanie danych XML ..................................................................................................... 123

Umieszczenie modelu poza aplikacj ......................................................................... 124
Wybór midzy obiektami a XML-em .......................................................................... 126

adowanie danych XML w trakcie dziaania programu ............................................... 129

Tworzenie obiektu HTTPService ................................................................................. 129
Wywoywanie metody send() ........................................................................................ 130
Uzyskiwanie dostpu do otrzymanych danych ......................................................... 130
Problemy zwizane z bezpieczestwem .......................................................................131

Pobieranie danych XML za porednictwem obiektu HTTPService .............................133

ADOBE FLEX 4. 7

Spis treci

Przeszukiwanie XML-a za pomoc E4X ............................................................................135

Operatory E4X ................................................................................................................ 136

Korzystanie z dynamicznych danych XML .....................................................................141
Uywanie obiektu XMLListCollection z kontrolk List ............................................... 145
Czego si nauczye? ........................................................................................................... 147

Lekcja 7. Tworzenie klas

149

Tworzenie wasnej klasy w jzyku ActionScript ............................................................. 149
Tworzenie obiektu wartoci ............................................................................................... 150
Przygotowanie metody tworzcej obiekt ..........................................................................156
Tworzenie klas koszyka na zakupy ................................................................................... 159
Manipulowanie danymi w klasie ShoppingCart ............................................................ 164

Dodawanie produktów do koszyka ............................................................................. 164
Dodawanie pozycji czy uaktualnianie liczby sztuk? ................................................. 166
Warunkowe dodawanie pozycji do koszyka .............................................................. 166

Czego si nauczye? ............................................................................................................171

Lekcja 8. Stosowanie wizania danych i kolekcji

173

Zasada dziaania mechanizmu wizania danych ........................................................... 173

Prosty przykad ............................................................................................................... 174
Bardziej skomplikowany przykad .............................................................................. 177

Mechanizm wizania danych z perspektywy kompilatora ........................................... 179

Metody dostpowe set i get ........................................................................................... 180
Rozgaszanie i nasuchiwanie zdarze ........................................................................ 181
Zdarzenia w mechanizmie wizania danych .............................................................. 182

Podsumowanie informacji o wizaniu danych .............................................................. 184
Korzystanie z klasy ArrayCollection ............................................................................... 184

Wypenianie obiektu ArrayCollection danymi ......................................................... 185
Korzystanie z danych zapisanych w kolekcji ArrayCollection ............................... 191
Sortowanie elementów kolekcji ArrayCollection ..................................................... 193
Refaktoryzacja kodu — wyszukiwanie za pomoc kursora ..................................... 197
Usuwanie elementów z wykorzystaniem kursora ......................................................200
Filtrowanie kolekcji ArrayCollection ......................................................................... 201

Refaktoryzacja klasy ShoppingCartItem .........................................................................202
Czego si nauczye? ...........................................................................................................204

Lekcja 9. Tworzenie komponentów

207

Wprowadzenie w tematyk komponentów MXML .......................................................208

Zasady tworzenia komponentów ................................................................................209
Tworzenie wasnego komponentu ..............................................................................209
Wasne komponenty a architektura aplikacji ............................................................ 211

Tworzenie komponentu ShoppingView .......................................................................... 213
Tworzenie komponentu ProductItem ............................................................................. 218
Tworzenie komponentów zarzdzajcych pobieraniem danych .................................226
Czego si nauczye? ........................................................................................................... 233

ADOBE FLEX 4.

Oficjalny podrcznik. Tom I

Lekcja 10. Korzystanie z komponentów DataGroup oraz List

235

Korzystanie z komponentów List ..................................................................................... 236

Waciwo labelFunction klasy List ...........................................................................236

Korzystanie z komponentów DataGroup ....................................................................... 238

Implementacja renderera elementów ..........................................................................239
Zastosowanie komponentu DataGroup w klasie ShoppingView ...........................243
Wirtualizacja ...................................................................................................................246
Implementowanie wirtualizacji ...................................................................................246

Wirtualizacja w komponentach List ................................................................................247
Wywietlanie produktów z wybranej kategorii ...............................................................249

Filtrowanie produktów pod wzgldem kategorii ......................................................249
Wykorzystanie zdarzenia change komponentu List .................................................250

Czego si nauczye? ........................................................................................................... 251

Lekcja 11. Tworzenie i rozgaszanie zdarze

253

Korzyci ze stosowania luno powizanej architektury ................................................ 253
Rozsyanie zdarze ............................................................................................................. 255
Deklarowanie zdarze komponentu ............................................................................... 258
Kiedy przydaj si klasy niestandardowych zdarze .....................................................260
Tworzenie i uywanie zdarzenia UserAcknowledgeEvent ............................................ 261
Strumie zdarzenia i faza propagacji ...............................................................................264
Tworzenie i uywanie klasy ProductEvent ......................................................................269

Tworzenie komponentu ProductList .......................................................................... 271
Korzystanie z komponentu ProductList ....................................................................273
Korzystanie ze zdarzenia ProductEvent

podczas dodawania i usuwania produktów ..........................................................274

Obsuga zdarzenia COLLECTION_CHANGE .......................................................275

Czego si nauczye? ...........................................................................................................277

Lekcja 12. Stosowanie siatek danych i rendererów elementów

279

Dwa zestawy kontrolek: Spark i MX ................................................................................280
Komponent DataGrid i renderery elementów ...............................................................280
Wywietlanie koszyka na zakupy w kontrolce DataGrid .............................................. 281

Korzystanie z komponentu CartGrid .........................................................................283
Dodawanie kontrolek edycji do DataGridColumn ..................................................283
Tworzenie renderera elementów

sucego do wywietlenia informacji o produkcie ..............................................285

Tworzenie renderera elementów sucego

do wywietlenia przycisku Remove ........................................................................287

Ponowne wykorzystanie klasy ProductEvent ............................................................289
Wykorzystanie waciwoci labelFunction

do wywietlania wartoci produktów .....................................................................290

Uywanie komponentu AdvancedDataGrid ..................................................................292

Sortowanie zawartoci kontrolki AdvancedDataGrid .............................................292
Sortowanie w trybie zaawansowanym .........................................................................293

ADOBE FLEX 4. 9

Spis treci

Nadawanie stylów komponentowi AdvancedDataGrid ..........................................294
Grupowanie danych ......................................................................................................298
Wywietlanie danych podsumowujcych ................................................................... 303

Czego si nauczye? ............................................................................................................311

Lekcja 13. Obsuga techniki „przecignij i upu”

313

Zasada dziaania menedera przecigania i upuszczania ............................................. 314
Przeciganie i upuszczanie midzy dwoma komponentami DataGrid .......................315
Przeciganie i upuszczanie midzy siatk danych i list ............................................... 317
Stosowanie mechanizmu „przecignij i upu” w komponentach,

które go nie obsuguj ................................................................................................... 322

Przeciganie produktu do koszyka na zakupy ................................................................ 327
Czego si nauczye? ........................................................................................................... 332

Lekcja 14. Tworzenie nawigacji

335

Wprowadzenie do nawigacji .............................................................................................. 335
Przygotowanie procesu dokonywania patnoci

wywietlanego w kontenerze ViewStack ...................................................................... 337

Integrowanie aplikacji z komponentem CheckOutView .............................................. 342
Czego si nauczye? ........................................................................................................... 344

Lekcja 15. Formatowanie i walidacja danych

347

Podstawowe informacje o klasach formatujcych i walidujcych ............................... 347

Klasy formatujce ..........................................................................................................348
Klasy walidujce .............................................................................................................348

Korzystanie z klas formatujcych ..................................................................................... 349
Korzystanie z dwustronnego wizania danych .............................................................. 352
Korzystanie z klas walidatorów ......................................................................................... 353
Czego si nauczye? ........................................................................................................... 356

Lekcja 16. Zmiana wygldu aplikacji za pomoc stylów

359

Wprowadzenie projektu graficznego aplikacji za pomoc stylów i skórek ................ 359
Przygotowanie aplikacji na zmiany .................................................................................. 360
Stosowanie stylów ................................................................................................................361

Nadawanie stylów przez atrybuty znaczników ..........................................................362
Dziedziczenie stylów .....................................................................................................364
Nadawanie stylów za pomoc znacznika <mx:Style> ............................................... 365
Nadawanie stylów za pomoc plików CSS .................................................................368
Definiowanie stylów dla pozostaych elementów aplikacji ..................................... 371

Zmiana stylów w trakcie dziaania aplikacji ................................................................... 377

Korzyci pynce z wczytywania stylów ......................................................................378
Tworzenie pliku SWF z arkusza CSS ...........................................................................378
Wczytywanie arkusza stylów za pomoc klasy StyleManager .................................379
Przesanianie stylów we wczytanych plikach CSS .....................................................379

Czego si nauczye? ........................................................................................................... 379

ADOBE FLEX 4.

Oficjalny podrcznik. Tom I

Lekcja 17. Zmiana wygldu aplikacji za pomoc skórek

381

Skórki komponentów Spark ............................................................................................. 381
Powizanie midzy skórkami i stanami ........................................................................... 385

Rysowanie we Fleksie .....................................................................................................385
Definiowanie wygldu przycisku w rónych stanach ...............................................389

Tworzenie skórki dla aplikacji .......................................................................................... 393
Czego si nauczye? ........................................................................................................... 397

Lekcja 18. Tworzenie komponentów w jzyku ActionScript

399

Komponenty tworzone w jzyku ActionScript ..............................................................400
Tworzenie komponentów moe by skomplikowane ...................................................400
Komponenty od rodka ..................................................................................................... 401
Po co tworzy komponenty? .............................................................................................402
Definiowanie komponentu ............................................................................................... 403

Definiowanie interfejsu .................................................................................................404
Wybór klasy bazowej .....................................................................................................405
Tworzenie klasy ..............................................................................................................406
Uywanie zdefiniowanej klasy .....................................................................................408

Tworzenie czci wizualnej ................................................................................................ 410

Okrelenie wymaga dotyczcych skórki ................................................................... 410
Tworzenie skórki ............................................................................................................ 412

Dodawanie funkcjonalnoci do komponentu ............................................................... 416

Asynchroniczna praca komponentów ........................................................................ 416
Komunikowanie si za pomoc zdarze .................................................................... 421
Sprztanie po sobie ........................................................................................................424

Tworzenie renderera dla skórki .........................................................................................426
Czego si nauczye? ...........................................................................................................428

Dodatek A Przygotowanie do pracy

432

Instalowanie oprogramowania ......................................................................................... 432

Instalowanie rodowiska Flash Builder ......................................................................432
Kopiowanie plików lekcji .............................................................................................432
Instalowanie odtwarzacza Flash Player z moliwoci debugowania .................... 433

Importowanie projektów ................................................................................................... 434

Importowanie plików lekcji ..........................................................................................434

Skorowidz

437

3 Projektowanie

interfejsu uytkownika

Kada aplikacja musi posiada interfejs uytkownika. Jedn z najwikszych zalet programu Adobe
Flash Builder 4 jest to, e bardzo uatwia on projektowanie interfejsu aplikacji. Podczas tej lekcji zo-
stanie przedstawionych wiele kontenerów uywanych we Fleksie, opiszemy rónice midzy nimi oraz
metody wykorzystywania ich podczas tworzenia interfejsów uytkownika wasnych projektów. Zasto-
sowanie stanów pozwala projektantowi na tworzenie aplikacji dynamicznie dostosowujcych si do
dziaa uytkowników.

Interfejs uytkownika sklepu internetowego

Layout aplikacji

Wikszo dziaa zwizanych z ustalaniem pooenia komponentów we Fleksie jest przeprowadzana
z wykorzystaniem kontenerów i obiektów layoutu.

Posumy si na chwil analogi do sprztów kuchennych. Wyobra sobie, e kontener jest robotem
kuchennym bez ostrzy. Dostpnych jest wiele robotów kuchennych oferujcych róne funkcje, a Twoim
zadaniem jest wybranie tego, który najlepiej sprawdzi si w okrelonych zastosowaniach.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

O obiektach layoutu moesz myle jak o ostrzach, które mog suy do siekania, cicia na plasterki,
w kostk itp. aden z tych elementów (robot kuchenny i ostrza) nie jest uyteczny w pojedynk
— dopiero kiedy si je poczy, staj si przydatnym narzdziem. Ta sama zasada dotyczy kontenerów
i obiektów ukadu graficznego.

Kontenery

Z technicznego punktu widzenia kontenery s specjalnym typem komponentów, które zawieraj
i grupuj inne elementy. Elementy te zwykle okrela si ogólnie mianem potomków lub, bardziej szcze-
góowo, jako elementy layoutu (co odpowiada takim komponentom, jak przyciski, pola wyboru itp.)
oraz elementy graficzne (takie jak prostokty, koa itp.). Mimo e kontenery potrafi grupowa
i utrzymywa wszystkie elementy razem, nie znaj ich pooenia i kolejnoci, w jakiej maj pojawi si
na ekranie. Przy wyborze odpowiedniego kontenera trzeba si kierowa wieloma kryteriami, jednak
najistotniejsze s moliwoci zastosowania skórek.

Dziki stosowaniu skórek moliwa jest zmiana wygldu komponentów. W przypadku kontenerów
mona mówi o wygldzie ta, krawdzi, zastosowaniu cieni itd. Do niektórych kontenerów mona
zastosowa skórki, czyli mona zdefiniowa ich wygld, z kolei inne su tylko i wycznie do gru-
powania potomków i jako takie nie s widoczne.

Typy kontenerów

Kontener

Opis

Group

Najprostszy typ kontenera we Fleksie 4. Moe przechowywa potomków, ale nie
ma graficznej reprezentacji

SkinnableContainer

Oferuje te same funkcjonalnoci co kontener

Group

, ale dodatkowo istnieje

moliwo zdefiniowania jego wygldu

BorderContainer

Typ kontenera

SkinnableContainer

sucy do prostego otoczenia potomków ramk

Panel

Typ kontenera

SkinnableContainer

otoczony ramk, który mona dodatkowo

wyposay w nagówek i obszar przeznaczony na pasek narzdzi

Application

Typ kontenera

SkinnableContainer

stosowany jako gówny kontener fleksowej

aplikacji. Podobnie jak

Panel

moe posiada pasek narzdzi

NavigationContent

Specjalny typ kontenera

SkinnableContener

stosowany z kontrolkami, takimi jak

ViewStack

, które zostan omówione w dalszej czci ksiki

To oczywicie nie wszystkie dostpne kontenery. W kolejnych lekcjach przeczytasz jeszcze np.
o

DataGroup

SkinnableDataContainer

, a take specjalizowanych kontenerach, takich jak np.

Form

Wymienione tu kontenery dziaaj jednak troch inaczej, wic ich opis zostawimy na póniej, kiedy
pojawi si potrzeba omówienia ich specyfiki.

Obiekty layoutu

Obiekty layoutu wspópracuj z kontenerami (a take innymi typami obiektów, co zostanie omówione
w kolejnych lekcjach) w celu okrelenia sposobu grupowania elementów wywietlanych na ekranie.

LEKCJA 3.

Projektowanie interfejsu uytkownika

Flex 4 dostarcza wiele gotowych obiektów layoutu oraz pozwala na tworzenie wasnych, umoliwiajc
w ten sposób pene dopasowanie do wasnych potrzeb.

Typy obiektów layoutu

Obiekt layoutu

Opis

BasicLayout

Pozwala na bezwzgldne pozycjonowanie, co oznacza, e w przypadku kadego
umieszczanego elementu trzeba okreli wspórzdne x i y jego pooenia

HorizontalLayout

Ustawia wszystkich potomków w rzdzie; kady jest wyrównany do prawej krawdzi
poprzedniego

VerticalLayout

Ustawia wszystkich potomków w kolumnie; kady jest wyrównany do dolnej
krawdzi poprzedniego

TileLayout

Ustawia potomków w rzdach i kolumnach. Mona okreli liczb elementów
uoonych w pionie lub poziomie, której przekroczenie powoduje dodanie kolejnego
wiersza lub kolumny

czenie kontenerów i obiektów layoutu

Po wybraniu odpowiedniego kontenera i obiektu layoutu skada si je w MXML-u w celu osignicia
zamierzonego efektu. Przyjrzyj si poniszym przykadom ustalajcym pooenie przycisków za po-
moc obiektu layoutu i waciwoci

layout

<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>

<s:Group>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Jeeli nie okrelisz obiektu layoutu, zostanie zastosowany

BasicLayout

, co oznacza, e konieczne jest

ustalenie wspórzdnych x i y kadego przycisku. W przeciwnym razie wszystkie zostan wywietlone
w domylnej lokalizacji, czyli we wspórzdnych (0, 0).

Przewijanie zawartoci

Czasami pojawia si konieczno zapewnienia w aplikacji moliwoci przewijania zawartoci grupy.
W poprzednich wersjach Fleksa wszystkie kontenery domylnie posiaday t moliwo. Mimo e takie
rozwizanie byo wygodne dla programistów, wizao si z obcieniem kadego kontenera kodem
wymaganym do obsugi przewijania, nawet jeeli ta funkcja nie bya wykorzystywana. We Fleksie 4 trzeba
jawnie okreli, e dany kontener mona przewija. Realizuje si to za pomoc znacznika

Scroller

którym obejmuje si znacznik

Group

<s:Scroller height="65">
<s:Group>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>
</s:Scroller>

Zastosowanie tego rozwizania nie wie si z niepotrzebnym wywietlaniem pasków przewijania.
Znacznik

Scroller

dodaje paski przewijania (pionowy, poziomy lub oba) w sytuacjach, gdy s nie-

zbdne, czyli wtedy, gdy nie ma moliwoci wywietlenia elementu

Group

w penych wymiarach. W po-

przednim przykadzie wysoko znacznika

Scroller

zostaa ustawiona na 65 pikseli, tak aby pojawi

si pionowy pasek przewijania. Jeeli nie jest ustawiona ani wysoko, ani szeroko, Flex stara si
zmieci cay element

Group

na ekranie i dopiero wtedy, gdy si to nie udaje, wywietlane s odpo-

wiednie paski przewijania.

Budowa znaczników MXML

Zanim rozpoczniesz kolejne wiczenie, musisz pozna pewn wan zasad. W jzyku MXML instancje
klasy s czym innym ni waciwoci. We fragmencie kodu z poprzedniego podrozdziau moesz zna-
le definicj przycisku. Waciwo

label

przycisku jest zdefiniowana jako atrybut znacznika

Button

<s:Button label="3"/>

W MXML-u mona jednak zdefiniowa t sam waciwo za pomoc znaczników potomnych.
W omawianym przypadku kod mógby wyglda nastpujco:

LEKCJA 3.

Projektowanie interfejsu uytkownika

<s:Button>
<s:label>3</s:label>
</s:Button>

Bez wzgldu na sposób definiowania klas efekt wywietlony na ekranie bdzie identyczny. Po jakim
czasie pracy z Fleksem nauczysz si poprawnie dobiera odpowiedni skadni do sytuacji, jednak na
pocztku moe to powodowa pewien zamt.

Jak mylisz, która z przedstawionych moliwoci to definicja waciwoci, a która klasy? Kluczem do
rozwizania tej zagadki jest wielko pierwszej litery nazwy znajdujcej si po przestrzeni nazw (w tym
przypadku po

). Kiedy jest to wielka litera (tak jak B w nazwie Button), kod jest odpowiedzialny za

utworzenie nowej instancji klasy. Z kolei maa litera (l w nazwie label) oznacza, e mamy do czynienia
z waciwoci klasy.

Przypatrz si wikszemu fragmentowi kodu:

<s:Group>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button>
<s:label>3</s:label>
</s:Button>
</s:Group>

Litera G w znaczniku

<s:Group>

jest wielka, wic tworzona jest tu instancja klasy

Group

. Z kolei

l w znaczniku

<s:layout>

jest mae, co oznacza, e jest to waciwo znacznika

Group

. Nazwa

znacznika

<s:VerticalLayout>

rozpoczyna si wielk liter V, wic tworzona jest nowa instancja klasy

VerticalLayout

Gdyby przetumaczy kod na zdania, mógby brzmie tak: utwórz instancj klasy

Group

. Do waciwoci

layout

tej grupy przypisz now instancj klasy

VerticalLayout

. Do grupy dodaj trzy przyciski (klasy

Button

) z etykietami

Bardzo wane jest, by w peni zrozumia zasady opisane w tym podrozdziale. Jeeli wszystko jest ja-
sne, cig dalszy tej lekcji nie bdzie duym wyzwaniem. Jeli jednak nie jeste wszystkiego pewien, pod-
czas lektury dalszej czci lekcji moesz poczu zniechcenie.

Tworzenie layoutu sklepu internetowego

Sklep internetowy FlexGrocer jest aplikacj typu e-commerce, która umoliwia klientom dokonywa-
nie zakupów artykuów spoywczych. W górnej czci interfejsu uytkownika jest umieszczone logo
sklepu oraz odnoniki dostpne w caej aplikacji. Poniej znajduje si grupa ikon, dziki którym uyt-
kownik moe przeglda dostpne kategorie produktów (nabia, miso, owoce itd.). Pod ikonami
znajduje si obszar wywietlania informacji o produktach.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Podczas wykonywania wicze i opracowywania layoutu aplikacji skorzystasz zarówno z trybu projek-
towania (Design), jak i edycji róda (Source). Tryb projektowania ma bardzo due moliwoci, ale na
pocztku pracy z nim mog si pojawia problemy. Czsto zdarzaj si trudnoci z prawidowym wy-
równaniem obiektów czy umieszczaniem obiektów w wybranych kontenerach. Z tego wzgldu w wi-
czeniach znajdziesz fragmenty kodu odpowiadajce okrelonym elementom aplikacji. Dziki temu
w razie problemów z uzyskaniem identycznego efektu co w ksice moesz przeczy si do trybu
edycji róda i wprowadzi w kodzie niezbdne poprawki.

Tworzenie zarysu layoutu w trybie edycji róda

Pierwszy etap tworzenia layoutu wykonasz w trybie edycji róda. Zdefiniujesz obszary aplikacji prze-
znaczone na logo i niektóre elementy nawigacyjne.

Wczytaj utworzony w poprzedniej lekcji plik FlexGrocer.mxml.

Jeeli nie ukoczye poprzedniej lekcji lub przygotowany kod nie dziaa prawidowo, moesz
zaimportowa projekt FlexGrocer.fxp z katalogu Lekcja03/start. Szczegóowe informacje na temat
importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam zawartych za kadym
razem, gdy opucisz któr lekcj lub natrafisz na problem, którego nie umiesz rozwiza.

Wcz tryb edycji róda (przycisk Source).

Do przeczania midzy trybem projektowania (Design) i trybem edycji róda (Source) uywaj
przycisków umieszczonych na pasku tytuowym w górnej czci okna.

Usu znacznik

Label

wywietlajcy tekst „My First Flex Application”, który dodae

w poprzedniej lekcji.

W miejsce usunitego elementu wstaw otwierajcy i zamykajcy znacznik

controlBarLayout

<s:controlBarLayout>
</s:controlBarLayout>

Nazwa tego znacznika rozpoczyna si ma liter, co oznacza, e jest to waciwo obiektu

Application

Obszar paska sterowania (ang. control bar) jest charakterystycznym obszarem kontenera.
W tworzonej aplikacji umiecimy w nim logo oraz niektóre przyciski nawigacyjne.

Wewntrz elementu

controlBarLayout

umie samozamykajcy si znacznik

<s:BasicLayout/>

<s:controlBarLayout>

<s:BasicLayout/>

</s:controlBarLayout>

Samozamykajce si znaczniki zastpuj par znaczników (otwierajcy i zamykajcy) zastosowan
np. w elemencie

controlBarLayout

. Zamknicie sygnalizuje si prawym ukonikiem

umieszczonym przed znakiem wikszoci koczcym definicj znacznika (

Dodanie znacznika

<s:BasicLayout>

oznacza, e w pasku sterowania aplikacji ma zosta

zastosowane pozycjonowanie bezwzgldne. Innymi sowy, kady element umieszczony w tym
obszarze musi mie okrelone wspórzdne x i y.

LEKCJA 3.

Projektowanie interfejsu uytkownika

Poniej elementu

controlBarLayout

dodaj now par znaczników

<s:controlBarContent>

Wewntrz tego znacznika zdefiniujesz elementy, które maj si pojawi w pasku sterowania.

Wewntrz elementu

controlBarContent

umie znacznik

Button

i jego waciwoci

label

przypisz tekst

Flex Grocer

<s:Button label="Flex Grocer"/>

Ustawienie waciwoci

label

spowoduje wywietlenie tekstu na przycisku. Poniewa przycisk

zosta dodany wewntrz elementu

controlBarContent

, zostanie wywietlony w obszarze paska

sterowania aplikacji.

Zanim przejdziesz dalej, sprawd, czy wpisany kod wyglda tak jak poniszy.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>

<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button label="Flex Grocer"/>
</s:controlBarContent>

</s:Application>

Po zweryfikowaniu kodu zapisz plik FlexGrocer.mxml. Sprawd, czy w widoku Problems nie pojawiy
si adne komunikaty o bdach.

Z menu przycisku Run (uruchom) wybierz pozycj FlexGrocer, aby uruchomi aplikacj
w przegldarce internetowej.

Po uruchomieniu aplikacji na górze ekranu powinien si pojawi szary obszar paska sterujcego. We-
wntrz paska znajduje si przycisk Flex Grocer. Co prawda aplikacja nie jest jeszcze zbyt funkcjonalna,
ale zdefiniowae ju kilka waciwoci, skorzystae z obiektu layoutu i dodae do kontenera obiekt
potomny. Kolejne zadania bd atwiejsze, a ich realizacja szybsza. Kiedy ju skoczysz podziwia swoje
dzieo, zamknij okno przegldarki i przygotuj si do pracy w trybie projektowania.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Praca nad layoutem w trybie projektowania

Zdefiniowae ju fragment layoutu aplikacji, korzystajc z jzyka MXML. Teraz, by doda kilka ele-
mentów i przypisa im waciwoci, posuysz si trybem projektowania.

Wcz tryb projektowania (przycisk Design).

Do przeczania midzy trybem projektowania i trybem edycji róda uywaj przycisków
umieszczonych na pasku tytuowym w górnej czci okna. Po wczeniu trybu projektowania
zobaczysz podgld opracowanego okna aplikacji.

Kliknij dowolne miejsce biaego obszaru ta.

W panelu Properties (waciwoci) znajdujcym si z prawej strony ekranu powinny si pojawi
informacje o elemencie s:Application. W trybie projektowania panel ten bdzie pomocny podczas
ustawiania wartoci poszczególnych waciwoci komponentów.

Jeeli panel Properties nie jest wywietlany, z menu Window/Perspective wybierz polecenie
Reset Perspective (przywró perspektyw). Spowoduje to przywrócenie domylnej konfiguracji
perspektywy dla trybu projektowania, wic panel Properties stanie si widoczny.

LEKCJA 3.

Projektowanie interfejsu uytkownika

Kliknij przycisk Flex Grocer, który dodae w poprzednim wiczeniu.

Po klikniciu przycisku w panelu Properties zostan wywietlone waciwoci elementu s:Button,
wic moesz przystpi do wprowadzania zmian dla wybranego przycisku.

Na dole panelu Properties znajduje si zwinita kategoria Size and Position (rozmiar i pooenie).
Rozwi j, klikajc ikon trójkta umieszczon obok sowa Size (moliwe, e bdziesz musia
przewin widok w dó, aby zobaczy ca kategori). Widoczne stay si pola edycyjne Width
(szeroko), Height (wysoko), X oraz Y. W polach X i Y wpisz warto

, definiujc w ten sposób

wspórzdne przycisku równe (5, 5).

Po zmianie wspórzdnej y pasek sterujcy zwikszy swoj wysoko, dopasowujc j
do zaktualizowanej zawartoci. W dalszej czci ksiki zastosujesz style definiujce kolory
i rozmiar logo. Na razie w miejscu logo pozostanie przycisk. Powyej zosta przedstawiony
sposób pozycjonowania oparty na bezwzgldnych wspórzdnych.

Odszukaj na ekranie widok Components (komponenty). Powinien znajdowa si w lewym dolnym
rogu okna Flash Buildera. Kliknij ikon trójkta przy nazwie Controls (kontrolki), by otworzy
katalog kontrolek, i przecignij przycisk (Button) do paska sterujcego, umieszczajc go blisko
prawej krawdzi. W panelu Properties nadaj kontrolce ID równy

btnCartView

i etykiet

View Cart

Podczas wstawiania kontrolki pojawi si niebieska linia wskazujca wzajemne pooenie
(w pionie i poziomie) pozostaych komponentów. Pomaga to w szybkim umieszczaniu
wielu komponentów w jednym rzdzie lub kolumnie.

Na razie nie przejmuj si dokadnym umiejscowieniem kontrolek. W dalszej czci tej lekcji
nauczysz si posugiwa ukadem opartym na wizach w celu umieszczenia przycisku tak,
by znajdowa zawsze w odlegoci 10 pikseli od prawej krawdzi okna aplikacji.

Przecignij kolejny przycisk do paska sterujcego, umieszczajc go z lewej strony pierwszego.
W panelu Properties nadaj kontrolce identyfikator

btnCheckout

i etykiet

Checkout

Uytkownicy bd mogli nacisn ten przycisk, by skoczy zakupy i zamówi wybrane
produkty. Tak jak poprzednio, dokadnym umiejscowieniem kontrolki zajmiesz si póniej,
gdy nauczysz si korzysta z ukadu opartego na wizach.

Przecignij kontrolk Label (etykieta) z katalogu Controls i umie j w prawym dolnym rogu
ekranu. Kliknij dwukrotnie etykiet i w jej polu

text

wpisz

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Jak w przypadku przycisków: nie przejmuj si dokadnym umiejscowieniem etykiety
— zajmiesz si tym póniej.

W panelu Components zwi folder Controls i rozwi Layout.

Przecignij kontener Group z katalogu Layout i umie go w duym biaym obszarze poniej
paska sterowania. W panelu Properties ustaw ID kontenera na

bodyGroup

, wartoci wysokoci

(pole Height) oraz szerokoci (pole Width) na

100%

, a wspórzdne X i Y na

10.

Przy zaznaczonym kontenerze

bodyGroup

przewi zawarto panelu Properties w dó. Powinno

si pokaza rozwijane menu Layout. Rozwi je i wybierz pozycj spark.layouts.HorizontalLayout,
dziki czemu kontener bdzie ukada obiekty potomne w poziomie.

Dodany kontener

bodyGroup

bdzie zawiera informacje o produktach oraz koszyk na zakupy.

Pamitaj o tym, e w kontenerze

Group

zdefiniowanym jako

HorizontalLayout

elementy s

ukadane poziomo. W ten sposób informacje o produktach bd wywietlane z lewej strony
okna, a o koszyku — z prawej.

11.

Przecignij kolejny kontener Group z katalogu Layout w panelu Components i umie go wewntrz
kontenera

bodyGroup

. W panelu Properties ustaw ID kontenera na

products

, ustaw wysoko

równ

150

i szeroko

100%

12.

Skorzystaj z rozwijanego menu Layout znajdujcego si na dole panelu Properties i wybierz pozycj
spark.layouts.VerticalLayout, dziki czemu elementy w tym kontenerze bd ukadane w pionie.

Ten pionowy kontener bdzie zawiera szczegóowe informacje o produkcie.

13.

Zanim przystpisz do realizacji kolejnego wiczenia, przecz tryb pracy na edycj róda
i sprawd, czy wygenerowany kod jest podobny do przedstawionego poniej. Jeeli jakiego
znacznika brakuje lub jest bdnie zapisany, popraw to, korzystajc z poniszego kodu. Oczywicie
mog wystpi drobne rónice w wartociach wspórzdnych

kontrolek, jeli ustawie je

w troch innych miejscach.

<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button id="btnCheckout" x="463" y="10" label="Checkout"/>
<s:Button id="btnCartView" x="541" y="10" label="View Cart"/>
<s:Button label="Flex Grocer" x="5" y="5"/>
</s:controlBarContent>
<s:Label x="518" y="320" text="(c) 2009, FlexGrocer"/>
<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:layout>

LEKCJA 3.

Projektowanie interfejsu uytkownika

<s:HorizontalLayout/>
</s:layout>
<s:Group width="100%" height="150" id="products">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Group>
</s:Application>

Definiowanie sekcji produktów

Po upewnieniu si, e kod aplikacji odpowiada przedstawionemu powyej, przecz tryb pracy na
projektowanie, poniewa skorzystasz z niego podczas definiowania sekcji wywietlajcej produkty.
Dodasz teraz kontrolki odpowiadajce wszystkim produktom dostpnym w projektowanym sklepie
internetowym.

Czasem podczas przeczania midzy trybami edycji kodu i projektowania znika panel
Properties, który powinien by widoczny w trybie projektowania. Jeeli panel znikn, z
menu Window wybierz pozycj Properties.

Przecignij kontrolk Label z folderu Controls w widoku Components i umie j w pionowym
kontenerze

products

, który dodae w poprzednim wiczeniu. W trybie projektowania

wspomniany pionowy kontener mona rozpozna po delikatnej ramce rozpoczynajcej si tu
poniej paska sterujcego, a koczcej 150 pikseli niej. Etykiet moesz umieci w dowolnym
miejscu tego obszaru.

Identyfikatorowi (ID) kontrolki przypisz nazw

prodName

, a waciwo text ustaw na

Milk

Przecignij drug kontrolk Label na miejsce poniej pierwszej. Wpisz jej ID —

price

, oraz text

—

$1.99

Poniewa dodane etykiety s umieszczone w kontenerze

Group

ustawionym jako

Vertical

´Layout

, nazwa produktu jest wywietlana nad cen.

Jeeli otworzysz widok Outline, klikajc zakadk Outline (znajdujc si obok zakadki
Components, z której ju korzystae), bdziesz móg zobaczy hierarchi elementów
tworzcych aplikacj. Gównym elementem jest znacznik <s:Application>, w którym s
zawarte elementy potomne: etykieta (Label) i kontener bodyGroup, a take waciwoci
controlBarContent i controlBarLayout. Widoczne s równie inne skadniki elementów
controlBarContent i bodyGroup. Jeeli rozwiniesz ga kontenera Group o nazwie
products, zobaczysz dwie ostatnio dodane etykiety. Widok Outline jest bardzo uyteczny,
gdy chcesz dokona zmian którego z komponentów. Wybranie np. kontenera products
moe by trudne w trybie projektowania. Duo atwiejsze jest wybranie go klikniciem
w widoku Outline.

Dodaj kontrolk Button poniej dwóch etykiet, nadaj jej identyfikator

add

oraz etykiet

AddToCart

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Przy kadym produkcie powinna by wywietlana nazwa i cena. Przycisk AddToCart umoliwia
uytkownikom umieszczenie wybranych produktów w koszykach na zakupy. Poniewa dwie
kontrolki Label oraz kontrolka Button s umieszczone w kontenerze z pionowym uoeniem
elementów, s wywietlane jedna nad drug. Funkcjonalnoci przycisku zajmiesz si
w kolejnej lekcji.

Zapisz plik i kliknij przycisk Run.

W uruchomionej aplikacji wida wyranie rónic pomidzy elementami umieszczonymi
w pasku sterujcym a tymi, które znajduj si w gównym obszarze aplikacji.

Praca z layoutami opartymi na wizach

Flex obsuguje layouty oparte na wizach, co pozwala na dowolne rozmieszczanie elementów interfejsu
uytkownika przy zachowaniu duej dokadnoci pozycjonowania. Wedug wizów naoonych na
elementy jest ustalana wielko i pooenie tych elementów, kiedy uytkownik zmienia wielko okna
aplikacji. Taka metoda ustalania rozmiaru i pooenia elementów róni si od tej, w której stosowane s
zagniedone kontenery (takie jak np. kontenery

Group

wykorzystane w poprzednim wiczeniu).

W przypadku layoutów opartych na wizach wszystkie kontrolki s rozmieszczane wzgldem krawdzi
nadrzdnego kontenera wykorzystujcego obiekt

BasicLayout

pozwalajcy na pozycjonowanie bez-

wzgldne. Obiektu tego mona uy z dowolnym kontenerem typu

Group

SkinnableContainer

, w-

czajc w to

Application

Panel

. Wyjtek stanowi specjalizowane kontenery, na przykad

Form

(które

poznasz w kolejnych lekcjach).

Kontenery korzystajce z obiektu

BasicLayout

wymagaj co prawda okrelenia bezwzgldnych wspó-

rzdnych elementów, jednak wizy umoliwiaj dynamiczne dopasowanie przygotowanego w ten spo-
sób layoutu do wielkoci okna aplikacji wywietlanej w przegldarce internetowej. Jeli na przykad chcesz,

LEKCJA 3.

Projektowanie interfejsu uytkownika

by etykieta bya zawsze wywietlana w prawym dolnym rogu okna aplikacji (bez wzgldu na rozmiar
okna przegldarki), moesz zakotwiczy kontrolk do prawej krawdzi nadrzdnego kontenera. Ozna-
cza to, e pooenie kontrolki bdzie ustalane wzgldem prawej krawdzi kontenera.

Zakotwiczenia layoutu uywane s do ustalenia, w jaki sposób kontrolka ma by wywietlana wzgl-
dem krawdzi nadrzdnego kontenera. Aby sprawi, by znajdowaa si ona w wyznaczonej odlegoci
od prawej i dolnej krawdzi kontenera, naley zaznaczy pola wyboru umieszczone poniej i z prawej
strony kontrolki w obszarze Constraints sekcji Layout w panelu Properties. W polach tekstowych podawana
jest odlego (w liczbie pikseli), o jak krawdzie zakotwiczonej kontrolki maj by oddalone od
brzegów kontenera.

Flex udostpnia wizy do górnej, dolnej, lewej i prawej krawdzi kontenera nadrzdnego oraz do jego
rodka w poziomie i w pionie.

Wszystkie wizy ustawiane s wzgldem krawdzi kontenera, jeeli zastosowano w nim
pozycjonowanie bezwzgldne (obiekt BasicLayout), wic nie mog by ustawiane wzgldem
innych kontrolek lub kontenerów.

Otwórz plik FlexGrocer.mxml, uywany w poprzedniej lekcji.

Jeeli nie ukoczye poprzedniej lekcji lub przygotowany kod nie dziaa prawidowo, moesz
zaimportowa projekt FlexGrocer.fxp z katalogu Lekcja03/intermediate. Szczegóowe informacje
na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam zawartych
za kadym razem, gdy opucisz któr lekcj lub natrafisz na problem, którego nie umiesz
rozwiza.

Znajd i zaznacz przycisk Checkout. W obszarze Constraints sekcji Size and Position panelu Properties
zdefiniuj wizanie prawej krawdzi przycisku do prawej krawdzi kontenera i wpisz odlego
równ

pikseli. Sprawd, czy w polu Y jest ustawiona warto

W celu uwizania przycisku do prawej krawdzi kliknij pole wyboru umieszczone najbardziej
z prawej strony ponad ikon przycisku w obszarze Constraints. W wywietlonym polu tekstowym
wpisz liczb pikseli, o jak przycisk ma by oddalony od brzegu kontenera. Jeli etykieta zniknie
z ekranu, skorzystaj z pasków przewijania podgldu w trybie projektowania. Zwykle wywietlany
jest tylko fragment okna aplikacji, wic czasem — by zobaczy pewien element — konieczne
jest przewinicie zawartoci.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Znajd i zaznacz przycisk View Cart. Dodaj wizy tak, aby prawa krawd przycisku bya oddalona
o

pikseli od prawej krawdzi kontenera. Sprawd, czy w polu Y jest ustawiona warto

Po wprowadzeniu zmian oba przyciski nawigacyjne zawsze bd zakotwiczone do górnego
prawego rogu kontenera, niezalenie od rozmiaru okna przegldarki.

Znajd i zaznacz etykiet zawierajc notk o prawach autorskich. Ustaw wizy etykiety tak,
aby bya ona oddalona o 10 pikseli od dolnej i prawej krawdzi zawierajcego j kontenera.
Kliknij pole wyboru w prawym górnym rogu obszaru Constraints i wpisz

w wywietlonym

polu tekstowym. Nastpnie kliknij dolne pole wyboru i równie wpisz warto

Poniewa etykieta znajduje si poniej innych kontenerów, prawdopodobnie najprociej bdzie
wskaza j w widoku Outline. Wprowadzone ustawienia gwarantuj, e niezalenie od szerokoci
kontrolki Label jej prawy dolny róg bdzie zawsze umieszczony w pozycji 10 pikseli powyej
i 10 pikseli w lew stron od prawego dolnego naronika aplikacji.

Jeeli teraz przeczysz program w tryb edycji róda (Source), kod powinien przypomina ten
zamieszczony na poniszym listingu.

<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>
<s:Button id="btnCartView" label="View Cart" right="90" y="10"/>
<s:Button label="Flex Grocer" x="5" y="5"/>
</s:controlBarContent>
<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Group width="100%" height="150" id="products">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Milk" id="prodName"/>
<s:Label text="$1.99" id="price"/>
<s:Button label="AddToCart" id="add"/>
</s:Group>
</s:Group>
</s:Application>

W Twoim kodzie mog wystpi niewielkie rónice spowodowane kolejnoci, w jakiej
dodawae elementy i definiowae ich waciwoci. Nie musisz si tym przejmowa, poniewa
w tym przypadku kolejno nie jest istotna. Kady kontener i kada kontrolka dodawane

LEKCJA 3.

Projektowanie interfejsu uytkownika

w trybie projektowania s reprezentowane w kodzie programu przez znacznik. Elementy
dodawane do kontenera s reprezentowane przez znaczniki potomne znacznika kontenera.
Zauwa take, e wizy ukadu s oznaczane jako atrybuty odpowiedniego kontenera.

Przecz program z powrotem w tryb projektowania i wewntrz kontenera

bodyGroup

umie

drugi kontener Group (element

bodyGroup

jest pierwszym, który dodae; jego wysoko i szeroko

s ustawione na 100%). W polu ID wpisz

cartGroup

, wyczy pole szerokoci (Width), a w polu

wysokoci (Height) wpisz

100%

. Pamitaj, e w przypadku problemów z odszukaniem komponentów

w trybie projektowania zawsze moesz skorzysta z widoku Outline.

Jeli przez przypadek umiecie element

Group

w niewaciwym miejscu, najprostszym

sposobem naprawienia bdu jest przeczenie si do trybu edycji róda i rczne przeniesienie
znaczników. Na poniszym listingu zosta przedstawiony omawiany fragment kodu.

<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Group width="100%" height="150" id="products">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Milk" id="prodName"/>
<s:Label text="$1.99" id="price"/>
<s:Button label="AddToCart" id="add"/>
</s:Group>
<s:Group height="100%" id="cartGroup">
</s:Group>
</s:Group>

W trybie projektowania ustaw typ layoutu kontenera

cartGroup

na VerticalLayout.

Jeeli nie umiesz znale kontenera

cartGroup

, zaznacz go w widoku Outline i przewi okno

podgldu trybu projektowania, by zobaczy podwietlony kontener.

Dodaj kontrolk Label do kontenera

cartGroup

i w polu waciwoci text wpisz

Your Cart

Total: $

Po prawej stronie wywietlanych informacji o produktach bdzie zawsze widoczna ogólna
informacja o koszyku, wskazujca, czy zawiera on jakie produkty i jaki jest aktualny koszt
zakupów.

Szeroko kontenera products zostaa ustawiona na 100%, czyli tak, aby zajmowa ca
dostpn przestrze. Póniej jednak z jego prawej strony dodae kontener cartGroup i etykiet.
Czy to oznacza, e wykorzystywane jest ponad 100% szerokoci? We Fleksie szeroko i wy-
soko kontenera moe przekracza 100%. Przy ustalaniu rozmiarów i rozmieszczenia
elementów dostpna przestrze jest dzielona proporcjonalnie do przypisanych szerokoci
i wysokoci. Poniewa w omawianym przypadku dana szeroko przekracza maksymaln,
kadej kontrolce zostanie przydzielona szeroko, jaka wynika z podziau dostpnego
miejsca. Jeli wród kontrolek znajduj si takie, których szerokoci s ustawione na stae
(czyli zastosowano wielkoci wyraone w pikselach, a nie procentach), wartoci te zostan
odjte od cakowitej dostpnej szerokoci, a dopiero póniej dojdzie do jej podziau na po-
zostae elementy.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Przecignij kontrolk Button z katalogu Controls w widoku Components i umie j poniej ostatnio
wprowadzonej etykiety. W polu waciwoci label wpisz

View Cart

Przycisk ten bdzie suy do wywietlania penej zawartoci koszyka.

Jeli przez przypadek umiecie dodawane komponenty w niewaciwym miejscu, najprostszym
sposobem naprawienia bdu jest przeczenie si do trybu edycji róda i rczne przeniesienie
znaczników. Na poniszym listingu zosta przedstawiony omawiany fragment kodu.

W widoku Outline zaznacz znacznik

Application

. W panelu Properties wyczy pola Min width

(minimalna szeroko) i Min height (minimalna wysoko).

Po uruchomieniu aplikacji i kilkakrotnej zmianie rozmiaru okna przegldarki bdzie mona
si przekona, e przyciski i etykiety s prawidowo rozmieszczane. Wartoci minimalnej
szerokoci i wysokoci mogyby uniemoliwi sprawdzenie tego zachowania w przypadku
mniejszych ekranów.

10.

Zapisz plik i uruchom aplikacj poleceniem Run.

LEKCJA 3.

Projektowanie interfejsu uytkownika

Praca ze stanami widoku

Flex umoliwia projektowanie aplikacji zmieniajcych wygld w zalenoci od dziaa uytkownika.
Na przykad aplikacja sklepu internetowego rozpoczyna dziaanie od wywietlenia uytkownikowi
informacji o produktach, które moe kupi. Gdy uytkownik zaczyna dodawa produkty do koszyka,
widok powinien by zaktualizowany tak, by klient mia kontrol nad zawartoci koszyka. Moe
by na przykad wywietlany cakowity koszt wybranych produktów. Uytkownik powinien mie take
moliwo przegldania zawartoci koszyka i zarzdzania ni.

Tworzenie stanów widoku

Dodawanie tego typu mechanizmu we Fleksie realizuje si za porednictwem stanów widoku (ang.
view states). Stan widoku jest jednym z wielu sposobów wywietlania definiowanych dla caej aplikacji
bd jej elementów. Kady plik MXML posiada co najmniej jedno ustawienie nazywane podstawowym
stanem (ang. default state), które odzwierciedla domylny wygld aplikacji.

Dodatkowe stany w MXML-u to zmodyfikowane ustawienia widoku podstawowego lub innych stanów.

Otwórz plik FlexGrocer.mxml, w którym pracowae w poprzednim wiczeniu.

Jeeli nie ukoczye poprzedniej lekcji lub przygotowany kod nie dziaa prawidowo, moesz
zaimportowa projekt FlexGrocer-PreStates.fxp z katalogu Lekcja03/intermediate. Szczegóowe
informacje na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam
zawartych za kadym razem, gdy opucisz któr lekcj lub natrafisz na problem, którego nie
umiesz rozwiza.

Przejd do trybu projektowania. Jeeli widok States (stany) nie jest widoczny, z menu Window
wybierz pozycj States.

W panelu States powinien by widoczny jeden stan odpowiadajcy domylnemu layoutowi
aplikacji.

Utwórz nowy stan o nazwie

cartView

, oparty na stanie

Nowy stan tworzy si przez kliknicie przycisku New State u góry panelu States lub przez kliknicie
prawym przyciskiem myszy w panelu i wybranie z podrcznego menu opcji New. W widoku

cartView

bd wywietlane szczegóowe informacje o wszystkich produktach umieszczonych

przez uytkownika w koszyku.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Po zaznaczeniu na licie stanów pozycji

cartView

kliknij kontener

products

i nadaj jego

szerokoci i wysokoci wartoci

. Nastpnie zaznacz kontener

cartGroup

i ustaw jego szeroko

oraz wysoko na

100%

W stanie widoku

cartView

zawarto koszyka ma cakowicie zastpi informacje o produktach

wywietlane na rodku ekranu. Z tego powodu zmienie rozmiar kontenera produktów tak,
aby w ogóle nie zajmowa miejsca, a rozmiar kontenera

cartGroup

tak, aby zajmowa ca

dostpn przestrze.

Po wprowadzeniu opisanych zmian na ekranie zrobi si niemay baagan, poniewa kontrolki
pozachodziy na siebie. To bardzo wana lekcja — we Fleksie waciwoci wysokoci i szerokoci
su do wyznaczenia pooenia poszczególnych elementów na ekranie. W tym przypadku
kontener

products

przesta zajmowa miejsce, wic kontener

cartGroup

przesun si w lewo,

zajmujc dostpn przestrze. Trzeba jednak wiedzie, e ustawienie rozmiaru elementu w taki
sposób, by nie zajmowa miejsca na ekranie, nie oznacza tego samego, co wyczenie widocznoci.

Zaznacz kontener

products

i zmie waciwo

visible

(widoczny) na

false

(fasz). Aby to

zrobi, w panelu Properties wcinij przycisk Category View (widok kategorii), odszukaj waciwo
visible i zmie jej warto na false.

Co prawda byo to ju wielokrotnie powtarzane w tej lekcji, ale jest bardzo istotne, wic
warte powtarzania: jeeli masz problem z odszukaniem kontenera w trybie podgldu
okna aplikacji, skorzystaj z widoku Outline.

LEKCJA 3.

Projektowanie interfejsu uytkownika

W widoku States zaznacz stan

cartView

, a nastpnie z katalogu Controls w panelu Components

przecignij kontrolk DataGrid (siatka danych) i umie j poniej przycisku View Cart. Nadaj
kontrolce identyfikator

równy

dgCart

i ustaw jej szeroko na

100%

W jednej z nastpnych lekcji kontrolka DataGrid zostanie uyta do wywietlenia caej zawartoci
koszyka.

Upewnij si, e umiecie kontrolk DataGrid w kontenerze cartGroup. Jeeli przypadkowo
umiecisz kontrolk poza kontenerem, kod ródowy aplikacji bdzie wyglda troch inaczej
od zamieszczonego poniej.

Wcz tryb edycji róda. Na poniszym listingu zosta zamieszczony peny kod aplikacji
(pogrubion czcionk s zaznaczone fragmenty dodane w tym wiczeniu).

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="State1"/>
<s:State name="cartView"/>
</s:states>
<fx:Declarations>

</fx:Declarations>
<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>
<s:Button id="btnCartView" label="View Cart" right="90" y="10"/>
<s:Button label="Flex Grocer" x="5" y="5"/>
</s:controlBarContent>
<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Group width="100%" height="150" id="products"
width.cartView="0" height.cartView="0"
visible.cartView="false">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Milk" id="prodName"/>
<s:Label text="$1.99" id="price"/>
<s:Button label="AddToCart" id="add"/>
</s:Group>
<s:Group height="100%" id="cartGroup" width.cartView="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Your Cart Total: $"/>
<s:Button label="View Cart"/>
<mx:DataGrid includeIn="cartView" id="dgCart" width="100%">

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

<mx:columns>
<mx:DataGridColumn headerText="Column 1"
dataField="col1"/>
<mx:DataGridColumn headerText="Column 2"
dataField="col2"/>
<mx:DataGridColumn headerText="Column 3"
dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</s:Group>
</s:Group>
</s:Application>

Zapisz plik.

Zwró uwag na nowe elementy i konstrukcje, które pojawiy si w kodzie. Po pierwsze, w klasie

DataGrid

zostaa wykorzystana waciwo

includeIn

, która odpowiada za wywietlenie kontrolki

tylko we wskazanym stanie (

cartView

). Po drugie, kontener

products

nadal ma szeroko

100% i wysoko 150 pikseli, jednak zostay dodane dwie waciwoci:

width.cartView="0"

height.cartView="0"

. Taka konstrukcja powoduje ustawienie waciwoci tylko w stanie

cartView

W dziaaniu uruchomionego testowo programu nie powinny wystpi adne widoczne rónice, po-
niewa nie zostay jeszcze dodane moliwoci przeczania si przez uytkownika midzy stanami
widoku. Funkcje nawigacyjne zostan dodane w nastpnym wiczeniu.

Sterowanie stanami widoku

W MXML-u kady element ma waciwo

currentState

. Mona jej uy do wybrania stanu wywie-

tlanego w danej sytuacji.

Otwórz plik FlexGrocer.mxml, w którym pracowae w poprzednim wiczeniu.

Jeeli nie ukoczye poprzedniej lekcji lub przygotowany kod nie dziaa prawidowo, moesz
zaimportowa projekt FlexGrocer-PreControl.fxp z katalogu Lekcja03/intermediate. Szczegóowe
informacje na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam
zawartych za kadym razem, gdy opucisz któr lekcj lub natrafisz na problem, którego nie
umiesz rozwiza.

Wcz tryb projektowania, przejd do widoku States (jeeli jest niewidoczny, wcz go) i zaznacz
stan State1.

Do bazowego stanu widoku dodasz moliwo przejcia do innych stanów aplikacji.

Zaznacz przycisk

View Cart

umieszczony w kontenerze

cartGroup

. W panelu Properties w polu

On click wpisz

this.currentState='cartView'

Zdarzenia takie jak kliknicie przycisku zostan szczegóowo omówione w lekcji 5., „Obsuga
zdarze”. W tej chwili wystarczy, eby wiedzia, e po klikniciu przycisku widok zmieni si
na stan

cartView

LEKCJA 3.

Projektowanie interfejsu uytkownika

W nazwach stanów widoku rozróniane s wielkie i mae litery, dlatego musisz wpisa
tak sam nazw, jak w poprzednim wiczeniu. Wpisujc nazw stanu widoku w trybie
projektowania, musisz j uj w apostrofy.

Zaznacz przycisk View Cart umieszczony w pasku sterujcym. W panelu Properties w polu On
click równie wpisz

this.currentState='cartView'

. Dziki temu do stanu cartView mona

si bdzie przeczy na dwa sposoby.

Przecz stan widoku na cartView. Dodaj now kontrolk Button poniej kontrolki DataGrid,
nadajc jej etykiet

Continue Shopping

(kontynuuj zakupy) oraz ustawiajc warto

waciwoci

click

this.currentState=''

Przypisanie do waciwoci

currentState

pustego cigu spowoduje powrót do bazowego

stanu widoku aplikacji.

Z widoku

cartView

usu przycisk View Cart znajdujcy si w kontenerze

cartGroup

Gdy uytkownik przeglda zawarto koszyka, nie jest mu potrzebny przycisk View Cart.
W trybie projektowania przycisk moesz usun, zaznaczajc go i wciskajc klawisz Delete.

Peny kod aplikacji zosta przedstawiony na poniszym listingu.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="State1"/>
<s:State name="cartView"/>
</s:states>
<fx:Declarations>

</fx:Declarations>
<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>
<s:Button id="btnCartView" label="View Cart" right="90" y="10"
click.State1="this.currentState='cartView'"/>
<s:Button label="Flex Grocer" x="5" y="5"/>
</s:controlBarContent>
<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Group width="100%" height="150" id="products"
width.cartView="0" height.cartView="0"
visible.cartView="false">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Milk" id="prodName"/>
<s:Label text="$1.99" id="price"/>

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

<s:Button label="AddToCart" id="add"/>
</s:Group>
<s:Group height="100%" id="cartGroup" width.cartView="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Your Cart Total: $"/>
<s:Button label="View Cart" click="this.currentState='cartView'"
includeIn="State1"/>
<mx:DataGrid includeIn="cartView" id="dgCart" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1"
dataField="col1"/>
<mx:DataGridColumn headerText="Column 2"
dataField="col2"/>
<mx:DataGridColumn headerText="Column 3"
dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<s:Button includeIn="cartView" label="Continue Shopping"
click="this.currentState=''"/>
</s:Group>
</s:Group>
</s:Application>

Zapisz plik i przetestuj aplikacj. Moesz teraz przecza stany widoku, klikajc przyciski,
do których dodae kod.

Refaktoryzacja

Refaktoryzacja jest jednym z najmniej znanych, a zarazem jednym z najbardziej uytecznych narzdzi
dostpnych dla programistów. Programici Fleksa i jzyka ActionScript powinni je szczególnie doceni,
poniewa podczas tworzenia prototypów i kolejnych faz projektów zawierajcych dynamiczne interfejsy
czsto dochodzi do zmian.

Refaktoryzacja jest procesem, w którym dochodzi do reorganizacji kodu bez ingerencji w jego funk-
cjonowanie, dziki czemu atwiej go utrzymywa i modyfikowa w przyszoci. O aplikacji trzeba myle
dugofalowo — trzeba bdzie j poprawia, zmienia architektur w celu dopasowania do nowych

LEKCJA 3.

Projektowanie interfejsu uytkownika

moliwoci oraz, co wane, przygotowa na zmian zespou programistów. Zawsze jednak musi obo-
wizywa zasada: po pomylnym zakoczeniu procesu refaktoryzacji uytkownik niemajcy wgldu
do kodu nie powinien zauway adnej zmiany w funkcjonowaniu aplikacji.

Wielu programistów uwaa ten pogld za niesuszny, a sam refaktoryzacj za zbdn. Po co spdza
duo czasu na modyfikowaniu kodu, który si wanie napisao, skoro nie przyniesie to adnych
zmian w funkcjonowaniu aplikacji? Na tak postawione pytanie mona odpowiedzie na wiele spo-
sobów. Poniej kilka moliwych argumentów.

Wartoci edukacyjne. Nauka nowego jzyka i póniejsze jego uywanie wymaga cigego
poszerzania wiedzy. Kadego dnia zdobywa si nowe umiejtnoci i poznaje nowe techniki.
Prowadzi to czsto do konstatacji, e kod napisany kilka dni, tygodni lub miesicy temu jest
le napisany, a moe nawet nie dziaa prawidowo w niektórych sytuacjach. Analizowanie
napisanego wczeniej kodu poczone z chci wprowadzania zmian moe pomóc w tworzeniu
duo lepszego kodu, bardziej spójnego i przygotowanego na modyfikacje.

Powielanie kodu. Podczas programowania bardzo czsto zdarza si sytuacja, w której w wielu
miejscach aplikacji wymagane jest przeprowadzenie tych samych operacji. Niestety z uwagi
na popiech typowym rozwizaniem jest powielanie fragmentów kodu. Najpowaniejszy
problem wynikajcy z takiego postpowania pojawia si wtedy, gdy do kodu trzeba wprowadzi
jakie poprawki. Programista musi wprowadzi zmiany we wszystkich wystpieniach powielonego
kodu. Najistotniejsze jest unikanie za wszelk cen powielania kodu. Dziki temu zaoszczdzimy
duo czasu, a programowanie stanie si zdecydowanie bardziej efektywne.

Spojrzenie z szerszej perspektywy. Niekiedy na pocztku pisania kodu trudno jest przewidzie
(o ile to w ogóle moliwe), jak bdzie zbudowana caa aplikacja i jak jej elementy bd ze sob
wspópracowa. Jeeli fragmenty kodu napisane wczeniej s „niemodyfikowalne”, podczas
próby poczenia ich z innymi elementami aplikacji moe si okaza, e konieczne bdzie
zupene przebudowanie fragmentów programu. Jeeli bdziesz regularnie refaktoryzowa kod,
moesz na bieco „szlifowa” poszczególne elementy, tak aby pod koniec tworzenia aplikacji
wszystko do siebie pasowao.

Mamy kilka powodów, dla których podejmujemy temat refaktoryzacji. Po pierwsze, wielu programi-
stów Fleksa i jzyka ActionScript prezentuje dosy „skostniae” podejcie do programowania, w któ-
rym nie ma miejsca na refaktoryzacj. Z naszych obserwacji wynika, e tego typu programici wol
walczy z jzykiem, zamiast nauczy si go efektywnie wykorzystywa. Chcemy po prostu ustrzec czy-
telników przed problemami.

Po drugie, czytajc t ksik i wykonujc wiczenia, bdziesz si uczy. W wielu miejscach poznasz
wiele rozwiza prowadzcych do tego samego celu. Czasami niemoliwe jest wskazanie jedynej susznej
metody, poniewa zbyt wiele jest zalenoci. Kiedy znajdziesz nowy, lepszy sposób na rozwizanie ja-
kiego problemu, moesz na tym zakoczy proces refaktoryzacji. Wynikaj z tego dwie korzyci:
poznajesz wiele moliwoci rozwizania danego zadania (oraz wiesz, dlaczego w danej sytuacji zastosowa
takie, a nie inne rozwizanie) oraz dopracowujesz kod aplikacji, który moe si przyda w przyszoci.

Czas przej do praktyki. Utworzon aplikacj poddasz refaktoryzacji, dziki czemu atwiej bdzie nad
ni pracowa w kolejnych lekcjach.

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

Stosowanie zoonych kontenerów

W tej lekcji dowiedziae si, e w wikszoci kontenerów mona zastosowa obiekty layoutu, które
wpywaj na sposób ukadania elementów potomnych. Dokonuje si tego poprzez dodanie obiektu
klasy

LayoutObject

do kontenera

Group

, stosujc waciwo

layout

, co zostao przedstawione na

poniszym przykadzie:

<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>

Chocia takie rozwizanie jest najbardziej elastyczne, wymaga wprowadzenia dodatkowego kodu za
kadym razem, gdy tworzymy kontener

Group

. W maych aplikacjach nie jest to powanym proble-

mem, jednak w znacznie wikszych projektach dodawanie obiektów layoutu do setek kontenerów
moe by uciliwe. Flex wychodzi naprzeciw takim problemom, umoliwiajc tworzenie nowych
komponentów zoonych z innych obiektów i waciwoci. Tak utworzone konstrukcje mona pó-
niej stosowa w projekcie, uatwiajc sobie prac.

Flex udostpnia dwa komponenty zbudowane wanie w ten sposób:

VGroup

HGroup

. W poniszej

tabeli zostao zamieszczone porównanie kodu wykorzystujcego kontener

Group

oraz dwa opisane

komponenty.

Alternatywna implementacja kontenerów

Wersja z waciwoci

layout

Wersja ze zoonymi kontenerami

<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>

<s:HGroup>
<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:HGroup>

<s:Group>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:Group>

<s:VGroup>
<s:Button label="1"/>
<s:Button label="2"/>
<s:Button label="3"/>
</s:VGroup>

Jeli zajrzysz do kodu ródowego komponentów

HGroup

VGroup

, zauwaysz, e s bardziej skom-

plikowane od zastosowanych w omawianej aplikacji. W lekcji 9. „Tworzenie komponentów” i lekcji 18.
„Tworzenie komponentów w jzyku ActionScript” dowiesz si, jak tworzy wasne komponenty, i zo-
baczysz, jak wielokrotnie wykorzysta kod.

LEKCJA 3.

Projektowanie interfejsu uytkownika

Refaktoryzacja kodu aplikacji

W tym wiczeniu zamienisz wszystkie kontenery

Group

z obiektami

HorizontalLayout

Vertical

´Layout

na komponenty

HGroup

VGroup

. Celem tych dziaa jest zmodyfikowanie wewntrznej struk-

tury aplikacji bez wprowadzenia zmian w jej funkcjonowaniu i wygldzie.

Otwórz plik FlexGrocer.mxml, w którym pracowae w poprzednim wiczeniu.

Jeeli nie ukoczye poprzedniej lekcji lub przygotowany kod nie dziaa prawidowo, moesz
zaimportowa projekt FlexGrocer-PreRefactor.fxp z katalogu Lekcja03/intermediate. Szczegóowe
informacje na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam
zawartych za kadym razem, gdy opucisz któr lekcj lub natrafisz na problem, którego nie
umiesz rozwiza.

Wcz tryb edycji kodu ródowego.

Odszukaj znacznik

Group

o identyfikatorze

bodyGroup

i zamie go na

HGroup

. Nie zapomnij

zmieni równie znacznika zamykajcego.

Z elementu

bodyGroup

usu waciwo

layout

i obiekt

HorizontalLayout

Odszukaj znacznik

Group

o identyfikatorze

products

i zamie go na

VGroup

. Nie zapomnij

zmieni równie znacznika zamykajcego.

Z elementu

products

usu waciwo

layout

i obiekt

VerticalLayout

Te same czynnoci powtórz dla grupy

cartGroup

Po pomylnym zakoczeniu refaktoryzacji kod aplikacji powinien przypomina ten
z poniszego listingu.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="State1"/>
<s:State name="cartView"/>
</s:states>
<fx:Declarations>

</fx:Declarations>
<s:controlBarLayout>
<s:BasicLayout/>
</s:controlBarLayout>

<s:controlBarContent>
<s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>
<s:Button id="btnCartView" label="View Cart" right="90" y="10"
click.State1="this.currentState='cartView'"/>
<s:Button label="Flex Grocer" x="5" y="5"/>
</s:controlBarContent>
<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
<s:HGroup x="0" y="0" width="100%" height="100%" id="bodyGroup">
<s:VGroup width="100%" height="150" id="products"

ADOBE FLEX 4.
Oficjalny podrcznik. Tom I

width.cartView="0" height.cartView="0"
visible.cartView="false">
<s:Label text="Milk" id="prodName"/>
<s:Label text="$1.99" id="price"/>
<s:Button label="AddToCart" id="add"/>
</s:VGroup>
<s:VGroup height="100%" id="cartGroup" width.cartView="100%">
<s:Label text="Your Cart Total: $"/>
<s:Button label="View Cart" click="this.currentState='cartView'"
includeIn="State1"/>
<mx:DataGrid includeIn="cartView" id="dgCart" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1"
dataField="col1"/>
<mx:DataGridColumn headerText="Column 2"
dataField="col2"/>
<mx:DataGridColumn headerText="Column 3"
dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<s:Button includeIn="cartView" label="Continue Shopping"
click="this.currentState=''"/>
</s:VGroup>
</s:HGroup>
</s:Application>

Zapisz plik i uruchom aplikacj.

Aplikacja powinna wyglda i dziaa dokadnie tak samo jak przed refaktoryzacj. Zmianie
uleg kod, dziki czemu jest bardziej czytelny i prostszy w utrzymaniu.

Czego si nauczye?

Podczas tej lekcji:

stosowae kontenery i obiekty layoutu (s. 65 – 69);

tworzye aplikacj w trybie edycji kodu ródowego (s. 69 – 72);

pracowae nad layoutem aplikacji w trybie projektowania (s. 72– 76);

pracowae z layoutami opartymi na wizach (s. 76 – 80);

pracowae ze stanami widoków (s. 81 – 84);

sterowae stanami widoków (s. 84 – 86);

refaktoryzowae kod aplikacji (s. 86 – 90).

Wyszukiwarka

Podobne podstrony:
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 3 Oficjalny podręcznik
Adobe Flex 4 Oficjalny podrecznik

więcej podobnych podstron