Adobe Flex 3. Oficjalny Podręcznik

Adobe Flex 3.
Oficjalny podrcznik
Autorzy: Jeff Tapper, Michael Labriola,
Matthew Boles, James Talbot
Tumaczenie: Andrzej Goda, Aleksander Lama
ISBN: 978-83-246-1966-5
Tytu oryginau: Adobe Flex 3: Training from the Source
Format: B5, stron: 648
Poznaj potne moliwoci Adobe Flex 3 i twrz bogate aplikacje internetowe
Jak tworzy, wdraa i debugowa bogate aplikacje internetowe?
Jak uywa jzyka MXML do budowania ukadu aplikacji?
Jak tworzy niestandardowe komponenty interfejsu uytkownika w jzykach
MXML i ActionScript?
Adobe Flex 3 to odpowied na zapotrzebowanie programistw w zakresie tworzenia
bogatych aplikacji internetowych za pomoc przyjaznych i intuicyjnych narzdzi.
Na Flex skadaj si m.in.: ActionScript 3.0, zwikszajcy wydajno i prostot
programowania; Flash Player 9, pozwalajcy na szybsz prac i wykorzystujcy
mniejsz ilo pamici; Flex Builder 3, udostpniajcy m.in. wietne narzdzia do
usuwania bdw i promujcy najlepsze praktyki kodowania oraz programowania
aplikacji.
Ksika Adobe Flex 3. Oficjalny podrcznik poprowadzi Ci krok po kroku przez
proces budowania dynamicznych, interaktywnych aplikacji. Zawiera ona szczegowy,
wyczerpujcy, praktyczny kurs tworzenia i projektowania architektury bogatych
aplikacji internetowych (RIA) w jzykach MXML i ActionScript 3.0. Dziki temu
podrcznikowi nauczysz si pracowa ze zoonymi zbiorami danych, tworzy wasne
zdarzenia niestandardowe, stosowa style i skrki, a take instalowa aplikacje w sieci
lub komputerze. Poznasz wszystkie moliwoci Fleksa i bdziesz umia zastosowa
w praktyce nowoczesne narzdzia, a take z atwoci korzysta z innowacyjnych
technologii.
Technologie bogatych aplikacji internetowych
Pulpit programu Flex Builder 3
Obsuga zdarze i struktury danych
Uywanie zdalnych danych z kontrolkami
Tworzenie komponentw w jzyku MXML
Repetery ze zbiorami danych
Tworzenie niestandardowych komponentw w jzyku ActionScript 3.0
Stosowanie siatek danych i generatorw elementw
Wprowadzanie nawigacji
Formatowanie i walidacja danych
Zarzdzanie histori i gbokie linkowanie
Wizualizowanie danych
Wdraanie aplikacji Fleksa
Skorzystaj z indywidualnych warsztatw Flex 3
i zbuduj samodzielnie wyjtkow aplikacj internetow!
Spis treci
O autorach
15
Wstp
17
Wprowadzenie
19
Lekcja 1 Wprowadzenie do bogatych aplikacji internetowych
29
Rozwj aplikacji komputerowych ................................................................................ 29

Odejcie od architektury opartej na stronie ................................................................. 31
Zalety bogatych aplikacji internetowych ......................................................................33
Menederowie przedsibiorstw ...................................................................................... 33
Przedsibiorstwa brany IT ............................................................................................. 33
Uytkownicy kocowi ..................................................................................................... 33
Technologie bogatych aplikacji internetowych ...........................................................33
Asynchroniczny JavaScript i XML (AJAX) ..................................................................34
Flash ................................................................................................................................... 35
Flex ..................................................................................................................................... 35
Windows Presentation Foundation, XAML, Silverlight i Expression ..................... 36
Czego si nauczye? .......................................................................................................37
Lekcja 2 Zaczynamy
39
Wstp do programowania aplikacji Fleksa .................................................................. 40

Tworzenie projektu i aplikacji MXML ........................................................................ 40
Pulpit programu Flex Builder 3 .....................................................................................43
Uruchamianie aplikacji ..................................................................................................46
Tworzenie drugiej strony aplikacji w trybie projektowania .......................................52
Przygotowania do nastpnej lekcji ................................................................................57
Czego si nauczye? .......................................................................................................58
Lekcja 3 Projektowanie interfejsu uytkownika
61
Kontenery ........................................................................................................................ 61
Tworzenie ukadu aplikacji e-commerce w trybie projektowania ..............................62
Praca z ukadami opartymi na wizach ........................................................................68
Wizanie do kontenera nadrzdnego ............................................................................69
Uycie zaawansowanych wizw ...................................................................................74
ADOBE FLEX 3.
Oficjalny podrcznik
Praca ze stanami widoku ................................................................................................76

Sterowanie stanami widoku ............................................................................................78
Projektowanie aplikacji w trybie edycji kodu rdowego ......................................... 80
Dodawanie stanw widoku i sterowanie nimi za pomoc MXML ...........................82
Czego si nauczye? .......................................................................................................86
Lekcja 4 Stosowanie prostych kontrolek
89
Wprowadzenie do prostych kontrolek ........................................................................ 90

Wywietlanie obrazw ....................................................................................................91
Tworzenie widoku szczegw ...................................................................................... 94
Korzystanie z wizania danych do powizania struktury danych
z prost kontrolk ..................................................................................................... 97
Wykorzystywanie kontenera ukadu formularzy do umieszczania
prostych kontrolek w aplikacji ................................................................................. 99
Dodawanie przyciskw radiowych i pl daty do aplikacji Dashboard ................... 103
Czego si nauczye? ..................................................................................................... 105
Lekcja 5 Obsuga zdarze i struktury danych
107
Zrozumienie obsugi zdarze ......................................................................................108

Prosty przykad ............................................................................................................... 108
Obsuga zdarzenia przez funkcj jzyka ActionScript ............................................. 109
Przekazywanie danych podczas wywoania funkcji uchwytu zdarzenia ................ 110
Tworzenie struktury danych w zdarzeniu creationComplete ...................................111
Uywanie danych z obiektu Event .............................................................................. 114
Tworzenie wasnej klasy jzyka ActionScript ............................................................. 118
Tworzenie obiektu wartoci .......................................................................................... 118
Tworzenie metody kreujcej obiekt ............................................................................ 123
Tworzenie klas koszyka na zakupy .............................................................................. 125
Czego si nauczye? .....................................................................................................129
Lekcja 6 Uywanie zdalnych danych XML z kontrolkami
131
Pobieranie danych XML za porednictwem HTTPService ....................................... 132

Tworzenie obiektu HTTPService ................................................................................. 132
Wywoywanie metody send() ........................................................................................ 133
Uywanie zwrconych danych ..................................................................................... 133
Zagadnienia bezpieczestwa ........................................................................................ 134
Pobieranie danych XML za porednictwem HTTPService ....................................... 135
Wypenianie ArrayCollection danymi z HTTPService ............................................. 137
Uywanie obiektw ArrayCollection .......................................................................... 137
Uywanie kolekcji w roli dostawcw danych ............................................................. 138
Wypenianie kontrolki ComboBox i programowe dodawanie opcji ......................140
Uywanie danych XML z kontrolk Tree ................................................................... 143
Pojcie operatorw E4X ................................................................................................ 143
Wypenianie kontrolki Tree danymi XML ................................................................ 148
Pobieranie danych XML i przeksztacanie ich w kolekcj ArrayCollection
obiektw uytkownika ............................................................................................. 154
ADOBE FLEX 3.
Spis treci
Stosowanie powizania danych ze zoonymi strukturami danych ........................ 157

Przeksztacanie danych koszyka na zakupy ............................................................... 159
Dodawanie elementw do koszyka ............................................................................. 159
Sortowanie elementw kolekcji ArrayCollection ..................................................... 160
Dodawanie elementu lub aktualizowanie iloci ........................................................ 162
Korzystanie z kursora do umieszczania elementu koszyka na zakupy .................. 164
Dodawanie przycisku Remove (usu) ........................................................................ 171
Czego si nauczye? .....................................................................................................172
Lekcja 7 Tworzenie komponentw w jzyku MXML
175
Wprowadzenie do komponentw jzyka MXML ...................................................... 176

Podstawy tworzenia niestandardowych komponentw ........................................... 176
Tworzenie wasnego komponentu krok po kroku .................................................... 177
Wykorzystanie niestandardowych komponentw w architekturze aplikacji ....... 179
Tworzenie komponentu aktualizujcego i usuwajcego informacje
o produkcie oraz jego egzemplarza ........................................................................180
Wywietlanie informacji o produkcie po klikniciu przyciskw aktualizacji
i usuwania .................................................................................................................184
Tworzenie kolejnego obiektu wartoci .......................................................................189
Tworzenie komponentu zarzdzajcego danymi dla wszystkich trzech aplikacji ......... 191
Uywanie nowego komponentu zarzdzajcego danymi .........................................197
Wprowadzanie funkcji dodawania produktu ........................................................... 200
Tworzenie i uywanie komponentw dla aplikacji Dashboard ...............................201
Czego si nauczye? .....................................................................................................203
Lekcja 8 Uywanie kontrolek i komponentw Repeater ze zbiorami danych
205
Uywanie zbiorw danych .......................................................................................... 206

Komponenty HorizontalList i TileList ......................................................................207
Wprowadzenie labelFunction ......................................................................................208
Wprowadzenie waciwoci itemRenderer .................................................................209
Wywietlanie kategorii za pomoc elementw HorizontalList i itemRenderer .................210
Wywietlanie informacji o produktach spoywczych nalecych
do okrelonej kategorii ............................................................................................214
Uywanie komponentu Repeater do wykonania ptli przeszukujcej
zbir danych .............................................................................................................. 214
Pobieranie danych z komponentw Repeater ........................................................... 215
Adresowanie komponentw utworzonych przez Repeater ..................................... 217
Wyjanienie rnic w wydajnoci komponentw TileList i Repeater .................... 218
Wywietlanie informacji o artykuach spoywczych nalecych
do okrelonej kategorii ............................................................................................. 218
Kodowanie stanw wywietlajcych szczegowe informacje o produkcie ........... 224
Umieszczanie produktw w koszyku na zakupy ...................................................... 227
Czego si nauczye? .................................................................................................... 229
ADOBE FLEX 3.
Oficjalny podrcznik
Lekcja 9 Uywanie zdarze niestandardowych
232
Korzyci ze stosowania luno powizanej architektury ............................................232

Wysyanie zdarze ........................................................................................................233
Deklarowanie zdarze komponentu ..........................................................................235
Kiedy uywa si klas niestandardowych zdarze .......................................................236
Tworzenie i uywanie CategoryEvent .........................................................................237
Tworzenie i uywanie klasy ProductEvent ................................................................ 240
Uywanie ProductEvent do usuwania produktu z koszyka ....................................244
Wykorzystanie ProductEvent do dodawania produktu do koszyka ......................246
Zrozumienie przepywu i bbelkowania zdarze ..................................................... 247
Czego si nauczye? .....................................................................................................252
Lekcja 10 Tworzenie niestandardowych komponentw w jzyku ActionScript 3.0
255
Wprowadzenie do tworzenia komponentw w jzyku ActionScript 3.0 ................256

Tworzenie struktury klasy ............................................................................................257
Nadpisywanie metody createChildren() .....................................................................259
Tworzenie przycisku w jzyku ActionScript ..............................................................260
Uywanie metody addChild() do dodawania przycisku do komponentu ............260
Co to jest chrom i rawChildren ................................................................................... 261
Uywanie metod addChild() i rawChildren do dodawania elementw
do chromu ..................................................................................................................262
Ustalanie rozmiarw i pozycji komponentw we Fleksie ........................................265
Zrozumienie metody measure() ................................................................................. 267
Nadpisywanie metody updateDisplayList() .............................................................. 267
Czego si nauczye? .....................................................................................................273
Lekcja 11 Stosowanie siatek danych i rendererw elementw
276
Wprowadzenie do siatek danych i rendererw elementw ...................................... 277

Dodawanie standardowej siatki danych do komponentu ChartPod ..................... 277
Dodawanie wywoa HTTPService do aplikacji Dashboard ................................... 278
Wywietlanie koszyka na zakupy w siatce danych .................................................... 282
Dodawanie kontrolek edycji w siatce do DataGridColumn ...................................284
Tworzenie renderera elementw sucego do wywietlania informacji
o produkcie ................................................................................................................285
Tworzenie lokalnego renderera elementw w celu wywietlenia
przycisku Remove .....................................................................................................287
Aktualizowanie ShoppingCartItem funkcjami Set i Get .........................................292
Uywanie zaawansowanej siatki danych .....................................................................293
Sortowanie AdvancedDataGrid ...................................................................................294
Sortowanie w trybie zaawansowanym .........................................................................295
Nadawanie stylw zaawansowanej siatce danych ......................................................296
Grupowanie danych ......................................................................................................300
Wywietlanie danych podsumowujcych ................................................................... 305
Czego si nauczye? ..................................................................................................... 313
ADOBE FLEX 3.
Spis treci
Lekcja 12 Uywanie techniki przecignij i upu
315
Wprowadzenie do menedera przecigania i upuszczania ....................................... 316

Przeciganie i upuszczanie pomidzy dwiema siatkami danych ............................. 317
Przeciganie i upuszczanie midzy siatk danych i list ...........................................320
Uywanie komponentu z wyczonym przeciganiem w operacji przecigania
i upuszczania ............................................................................................................324
Przeciganie produktu do koszyka na zakupy ...........................................................329
Czego si nauczye? .....................................................................................................334
Lekcja 13 Wprowadzanie nawigacji
337
Wprowadzenie do nawigacji ........................................................................................337

Uywanie komponentu TabNavigator w aplikacji DataEntry .................................340
Dodawanie strony gwnej i strony patnoci w aplikacji e-commerce ...................343
Przygotowywanie pierwszego etapu procesu patnoci wywietlanego w ViewStack ........ 346
Wykorzystanie komponentu ViewStack do finalizacji patnoci ............................ 353
Czego si nauczye? .....................................................................................................358
Lekcja 14 Formatowanie i walidacja danych
361
Podstawowe informacje o klasach formatujcych i walidujcych ........................... 361

Wykorzystanie klasy Formatter do wywietlania informacji o walucie ..................362
Korzystanie z klas walidatorw ...................................................................................366
Sprawdzanie poprawnoci danych za pomoc wyrae regularnych (cz 1.) ..............368
Sprawdzanie poprawnoci danych za pomoc wyrae regularnych (cz 2.) .............370
Tworzenie wasnej klasy walidatora ............................................................................373
Czego si nauczye? .....................................................................................................377
Lekcja 15 Zarzdzanie histori i gbokie linkowanie
379
Wprowadzenie do zarzdzania histori .....................................................................380

Implementowanie zarzdzania histori w kontenerze nawigacyjnym ....................382
Tworzenie wasnego mechanizmu zarzdzania histori ...............................................383
Wprowadzenie do gbokiego linkowania .................................................................388
Gbokie linkowanie we Fleksie 3 ................................................................................388
Wykorzystanie techniki gbokiego linkowania w aplikacji ....................................388
Czego si nauczye? .....................................................................................................393
Lekcja 16 Zmiana wygldu aplikacji
396
Projekty oparte na stylach i skrkach .........................................................................396

Stosowanie stylw .........................................................................................................397
Nadawanie stylw przez atrybuty znacznikw ..........................................................398
Dziedziczenie stylw .....................................................................................................400
Nadawanie stylw za pomoc znacznika <mx:Style> ...............................................400
Korzystanie z narzdzi wspomagajcych prac ze stylami .......................................403
Nadawanie stylw za pomoc plikw CSS .................................................................404
10
ADOBE FLEX 3.
Oficjalny podrcznik
Zmiana stylw w trakcie dziaania aplikacji ..............................................................414

Korzyci pynce z wczytywania stylw ...................................................................... 414
Tworzenie pliku SWF z arkusza CSS ........................................................................... 414
Wczytywanie arkusza stylw za pomoc klasy StyleManager ................................. 414
Przesanianie stylw we wczytanych plikach CSS ..................................................... 415
Tworzenie skrek dla komponentw .......................................................................... 415
Skrki graficzne .............................................................................................................. 416
Importowanie skrek utworzonych w narzdziach z pakietu CS3 ......................... 416
Skrki programistyczne ................................................................................................ 419
Czego si nauczye? .....................................................................................................423
Lekcja 17 Korzystanie z usug sieciowych
426
Komunikacja z serwerem ............................................................................................ 427

Stosowanie wywoa zdalnego modelu zdarze ....................................................... 428
Konfigurowanie aplikacji do lokalnej pracy ............................................................. 428
Wykorzystanie usug sieciowych w aplikacji Dashboard ......................................... 429
Obsuga wynikw dostarczanych przez usugi sieciowe ..........................................432
Wywoywanie metod usug sieciowych .......................................................................434
Wykorzystanie usug sieciowych w aplikacji DataEntry ...........................................436
Korzystanie z kreatora Web Service Introspection ...................................................441
Korzystanie z wygenerowanego kodu w aplikacjach .................................................443
Refaktoryzacja we Flex Builderze ................................................................................445
Finalizowanie czenia wygenerowanego kodu z aplikacj ..................................... 446
Uaktualnianie i usuwanie produktw ....................................................................... 447
Czego si nauczye? .................................................................................................... 449
Lekcja 18 Dostp do obiektw po stronie serwera
451
Przesyanie plikw na serwer .......................................................................................452

Integrowanie komponentu FileUpload z aplikacj DataEntry ..............................455
Korzystanie z klasy RemoteObject do zapisywania zamwienia .............................457
Aktualizowanie argumentw kompilatora Flex ........................................................459
Rozgaszanie zdarzenia potwierdzajcego proces zamawiania ...............................460
Tworzenie i wywoywanie obiektw RemoteObject .................................................460
Przekazywanie obiektu ShoppingCart do komponentu Checkout .......................464
Przywracanie aplikacji do stanu pocztkowego .........................................................464
Mapowanie obiektw ActionScript na obiekty serwera ........................................... 464
Kreatory dostpu do danych ....................................................................................... 467
Tworzenie projektu serwera ..........................................................................................468
Czego si nauczye? .....................................................................................................471
Lekcja 19 Wizualizowanie danych
473
Komponenty wykresw we Fleksie ............................................................................. 474

Typy wykresw ................................................................................................................474
Pakiety z komponentami wykresw ............................................................................474
Elementy wykresu ..........................................................................................................475
Przygotowanie wykresw ............................................................................................. 476
ADOBE FLEX 3.
Spis treci
Wypenianie wykresw danymi .................................................................................. 477

Okrelanie serii danych dla wykresu ...........................................................................478
Dodawanie poziomych i pionowych osi do wykresw liniowych
i kolumnowych ..........................................................................................................483
Dodawanie legendy do wykresu ................................................................................. 489
Ograniczanie liczby etykiet wywietlanych na osi .................................................... 490
Interaktywno wykresw ............................................................................................491
Zdarzenia zwizane ze wskanikiem myszy ...............................................................492
Zdarzenia zwizane z klikaniem ..................................................................................492
Zdarzenia zwizane z zaznaczaniem ...........................................................................492
Dodawanie zdarze do wykresw .............................................................................. 492
Dodawanie animacji do wykresw ............................................................................. 496
Personalizowanie wygldu wykresu za pomoc stylw ............................................ 498
Czego si nauczye? .....................................................................................................500
Lekcja 20 Tworzenie aplikacji moduowych
503
Wprowadzenie do tworzenia moduowych aplikacji we Fleksie ..............................503

Korzystanie z moduw Fleksa ....................................................................................505
Korzystanie z klasy moduu .........................................................................................505
Wprowadzenie znacznika ModuleLoader ..................................................................507
Mechanizm RSL ............................................................................................................508
Zadania konsolidatora .................................................................................................. 510
Przechowywanie bibliotek RSL ................................................................................... 511
Cel przechowywania bibliotek ......................................................................................511
Podpisane i niepodpisane biblioteki RSL .................................................................. 512
Kontrolowanie biecego rozmiaru aplikacji ............................................................ 512
Dostosowanie aplikacji do korzystania z bibliotek RSL .......................................... 513
Skontrolowanie zmian dokonanych przez zastosowanie bibliotek RSL ............... 514
Tworzenie projektu biblioteki ..................................................................................... 515
Dodawanie do biblioteki klas i danych ...................................................................... 515
Wykorzystanie biblioteki w aplikacji FlexGrocer ..................................................... 516
Czego si nauczye? ..................................................................................................... 517
Lekcja 21 Wdraanie aplikacji Fleksa
519
Kompilowanie wdroeniowej wersji aplikacji ............................................................520

Porzucenie okna przegldarki i przejcie do AIR ......................................................520
Rozpoczcie pracy ze rodowiskiem AIR ................................................................... 521
Instalowanie rodowiska uruchomieniowego AIR ................................................... 521
Instalowanie pierwszej aplikacji ...................................................................................522
Tworzenie aplikacji AIR ...............................................................................................523
Tworzenie nowego projektu AIR ................................................................................. 523
Przenoszenie aplikacji Dashboard do projektu AIR ................................................525
Dostosowanie aplikacji za pomoc pliku XML .........................................................526
Eksportowanie pliku AIR .............................................................................................529
Czego si nauczye? ..................................................................................................... 533
11
12
ADOBE FLEX 3.
Oficjalny podrcznik
Lekcja 22 Tworzenie przej i zachowa
535
Wprowadzenie do zachowa i przej ........................................................................ 535

Wykorzystanie zachowa w komponentach .............................................................. 536
Wykorzystanie przej w stanach aplikacji ................................................................. 538
Implementowanie efektw w komponencie ..............................................................539
Dodawanie efektw do stanw aplikacji .................................................................... 541
Czego si nauczye? .....................................................................................................542
Lekcja 23 Drukowanie we Fleksie
546
Wprowadzenie do drukowania we Fleksie ..................................................................547

Pierwszy wydruk z Fleksa .............................................................................................547
Korzystanie z klasy PrintDataGrid w niewidocznych kontenerach ........................549
Tworzenie widoku drukowania w osobnym komponencie .................................... 553
Skalowanie drukowanego dokumentu .......................................................................555
Drukowanie potwierdzenia procesu zamawiania ......................................................559
Czego si nauczye? .....................................................................................................562
Lekcja 24 Stosowanie obiektw wspdzielonych
565
Wprowadzenie do obiektw wspdzielonych ..........................................................565

Tworzenie obiektw wspdzielonych ........................................................................ 566
Odczytywanie obiektw wspdzielonych .................................................................568
Tworzenie obiektu wspdzielonego przechowujcego zawarto koszyka ............569
Odczytywanie danych z istniejcego obiektu wspdzielonego .............................. 571
Czego si nauczye? .....................................................................................................574
Lekcja 25 Debugowanie aplikacji we Fleksie
577
Wprowadzenie do technik debugowania ...................................................................577

ledzenie wymiany danych midzy klientem a serwerem .........................................578
Zaawansowane korzystanie z debugera .......................................................................579
Wicej na temat ustawiania puapek ...........................................................................579
Inspekcja zmiennych i powizanych wartoci ...........................................................580
Obsuga bdw za pomoc instrukcji try-catch ........................................................586
Korzystanie z instrukcji try-catch ................................................................................587
Wystpujce typy bdw ..............................................................................................588
Korzystanie z wielu blokw catch ...............................................................................588
Przykad wykonywania tylko jednego bloku catch ...................................................589
Przykad niewaciwego zastosowania klasy Error w pierwszym bloku catch ..............590
Korzystanie z instrukcji finally ....................................................................................590
Korzystanie z instrukcji throw ..................................................................................... 591
Tworzenie wasnych klas bdw .................................................................................592
Czego si nauczye? .....................................................................................................594
Lekcja 26 Profilowanie aplikacji Fleksa
597
Wykorzystanie pamici przez Flash Player ................................................................598

Alokowanie pamici we Flash Playerze .......................................................................598
Przekazywanie przez referencj lub przez warto ....................................................598
ADOBE FLEX 3.
Spis treci
Mechanizm oczyszczajcy pami we Flash Playerze ...............................................599

Oczyszczanie pamici ....................................................................................................602
Profilowanie pamici w aplikacjach Fleksa ............................................................... 604
Omwienie aplikacji ProfilerTest ................................................................................605
Profilowanie aplikacji ProfilerTest ..............................................................................607
Poprawianie klasy ImageDisplay ..................................................................................611
Profilowanie wydajnoci aplikacji Fleksa ................................................................... 612
Profilowanie aplikacji ProfilerTest .............................................................................. 613
Poprawianie klasy ProfilerTest ..................................................................................... 615
Czego si nauczye? ..................................................................................................... 615
Dodatek A Instalowanie oprogramowania

Skorowidz
618
621
13
5 Obs#uga zdarze(
i struktury danych
Wa n! cz#$ci! tworzenia bogatych aplikacji internetowych jest zbudowanie efektywnej architektury
po stronie klienta. Za pomoc! programu Flash Player do tworzenia aplikacji mo na u y& opartego
na zdarzeniach modelu programowania, tworzy& bogate modele danych po stronie klienta i tworzy&
logiczne aplikacje, post#puj!c wed'ug dobrych praktyk programowania zorientowanego obiektowo.
Ten typ projektowania r ni si# bardzo od metod stosowanych przez programistw aplikacji sieciowych, poniewa nie korzysta si# w nim z modelu projektowania opartego na stronie, sterowanego
przep'ywem. Korzystanie z opartej na zdarzeniach architektury po stronie klienta skutkuje lepiej
dzia'aj!cymi aplikacjami, w mniejszym stopniu obci! aj!cymi sie&, poniewa nie jest konieczne ci!g'e
od$wie anie strony. W tej lekcji zastosujemy techniki programowania opartego na zdarzeniach
z niestandardowymi klasami ActionSriptu we Fleksie.
Uko!czona struktura danych FlexGrocer, utworzona w j,zyku ActionScript 3.0 i zintegrowana z aplikacj3
108
ADOBE FLEX 3.
Oficjalny podr.cznik
Zrozumienie obs#ugi zdarze(

Flex wykorzystuje model programowania oparty na zdarzeniach lub, inaczej, sterowany zdarzeniami.
Oznacza to, e zdarzenia decyduj! o przebiegu dzia'ania aplikacji. Na przyk'ad klikni#cie przez
u ytkownika przycisku lub dane zwracane z us'ugi sieciowej decyduj! o tym, co powinno nast!pi&
w aplikacji.
Zdarzenia te reprezentuj! dwa typy: zdarzenia u ytkownika (na przyk'ad klikni#cie mysz! lub wci$ni#cie klawisza) i systemowe (uruchomienie aplikacji i wy$wietlenie jej, wy$wietlenie niewidocznego
elementu). Programista Fleksa decyduje, co powinno wydarzy& si# po wyst!pieniu danego zdarzenia,
obs'uguje te zdarzenia i pisze kod, ktry ma zosta& wykonany.
Wiele osb zajmuj"cych si# programowaniem po stronie serwera przywyk$o do modelu
programowania sterowanego przep$ywem, w ktrym to programista decyduje o przebiegu
dzia$ania aplikacji, a nie zdarzenia systemowe i u%ytkownika.
Oddzia'ywanie u ytkownika na aplikacj# wywo'uje szereg czynno$ci:

1. U ytkownik oddzia'uje na aplikacj#.
2. Obiekt, na ktry oddzia'uje u ytkownik, tworzy zdarzenie.
3. Zdarzenie zostaje odczytane i uchwycone.
4. Zostaje wykonany kod powi!zany z odpowiednim uchwytem zdarzenia.
Prosty przyk#ad
Aby u'atwi& zrozumienie tematu, przyjrzyjmy si# konkretnemu przyk'adowi. Po klikni#ciu przez
u ytkownika przycisku w etykiecie pojawia si# tekst:
<mx:Label id="myL"/>
<mx:Button id="myButton"
label="Click Me"
click="myL.text='Button Clicked'"/>
Zostaje wy$wietlony przycisk z tekstem Click Me. Po klikni#ciu przycisku przez u ytkownika zostaje
wys'ane zdarzenie. W tym przypadku zostaje wykonany kod j#zyka ActionScript myL.text=
'Button Clicked'. W'a$ciwo$ci text etykiety zostaje przypisany 'a/cuch znakowy Button Clicked.
Ten fragment kodu zawiera warto$ci zagnie d one i dlatego konieczne jest u ycie zagnie d onych
cudzys'oww pojedynczych i podwjnych. Cudzys'owy podwjne otaczaj! ca'y wiersz kodu, a pojedyncze wyodr#bniaj! 'a/cuch.
Do tej pory przypisywali$my w'a$ciwo$ciom warto$ci skalarne lub powi!zania. Warto$ci skalarne
to proste typy danych, takie jak 'a/cuchy znakowe, liczby lub warto$ci logiczne. U ywali$my ich
na przyk'ad do okre$lania warto$ci wsp'rz#dnych x i y, szeroko$ci i warto$ci wy$wietlanych w ety-
LEKCJA 5.
Obs#uga zdarze( i struktury danych
kietach. Stosowali$my tak e powi!zania. By'o tak zawsze, gdy warto$& by'a umieszczona w nawiasach
klamrowych. W ostatniej lekcji nawiasy pozwala'y na wprowadzenie kodu ActionScript jako warto$ci
w'a$ciwo$ci.
Je eli w'a$ciwo$& zostaje przypisana do zdarzenia, jest ona rozumiana przez kompilator Fleksa jako
kod j#zyka ActionScript. Mo na wi#c wpisa& kod ActionScript bezpo$rednio jako warto$& zdarzenia,
pomijaj!c nawiasy. Wida& to we wcze$niejszym przyk'adowym kodzie: click="myL.text='Button
Clicked'".
Podpowiadanie kodu pomaga nie tylko podczas wpisywania nazw w'a$ciwo$ci, ale tak e nazw zdarze/.
Na poni szym rysunku wida& zdarzenia change i click ze znajduj!c! si# przed nimi ikon! b'yskawicy,
ktra oznacza zdarzenia.
Obs#uga zdarzenia przez funkcj. j.zyka ActionScript

Po klikni#ciu przycisku kod u yty do wpisania tekstu w etykiecie dzia'a poprawnie. Pojawia si# jednak
problem, gdy trzeba wpisa& wi#cej ni dwa wiersze kodu ActionScript, ktry ma zosta& wykonany
w celu obs'ugi zdarzenia. Po zdarzeniu click nale a'oby u y& wielu wierszy kodu oddzielonych
$rednikami. Taki zapis, chocia prawid'owy, powoduje ba'agan. Po wyst!pieniu r nych zdarze/
mo e by& wykonywany jednakowy kod. Aby zastosowa& to rozwi!zanie, trzeba skopiowa& i wklei& ten
kod w wielu miejscach, co w przypadku konieczno$ci jego edycji wymaga wprowadzenia wielu zmian.
Lepsz! metod! obs'ugiwania zdarze/ jest tworzenie funkcji w j#zyku ActionScript. Zostanie ona
umieszczona w bloku <mx:Script>, ktry informuje kompilator Fleksa, e kod w bloku Script jest
kodem ActionScript. Zamiast wi#c umieszcza& kod ActionScript, ktry ma zosta& wykonany, jako
warto$& zdarzenia click, lepiej jest wywo'a& funkcj#. Poni ej znajduje si# kod wykonuj!cy dok'adnie
to samo, co zaprezentowany wcze$niej. R nica polega na tym, e korzystano z zalecanej techniki
umieszczania kodu, ktry ma zosta& wykonany w odpowiedzi na zdarzenie, w funkcji.
<mx:Script>
<![CDATA[
private function clickHandler():void
{
myL.text="Button Clicked";
}
]]>
</mx:Script>
109
110
ADOBE FLEX 3.
label="Click Me"
click="clickHandler()"/>
Blok <!CDATA[]]> wewn"trz bloku skryptu oznacza dan" sekcj# jako dane znakowe.
Informuje on kompilator, %e zamiast kodu XML w bloku s" zawarte dane znakowe, co
zabezpiecza przed wygenerowaniem b$#dw XML dla tego bloku.
Teraz, gdy zostanie klikni#ty przycisk, zostaje wywo'ana funkcja clickHandler() i do etykiety zostaje
wpisany 'a/cuch znakowy. Poniewa nie ma w kodzie zagnie d onych cudzys'oww, do otoczenia
tekstu mog'y zosta& u yte cudzys'owy podwjne.
Samej funkcji zosta' nadany typ void. Oznacza to, e nie zwraca ona adnej warto$ci. Bardzo dobr!
praktyk! jest przypisywanie funkcjom typu, nawet je eli jest to typ void wskazuj!cy, e nie zostaje
zwrcona adna warto$&. Kompilator wy$wietli ostrze enie, je eli funkcji nie zostanie nadany
aden typ.
Przekazywanie danych
podczas wywo#ania funkcji uchwytu zdarzenia
Podczas wywo'ywania funkcji mo e zaistnie& potrzeba przekazania danych. W ActionScripcie dzia'a
to tak, jak mo na si# spodziewa&. Dane, ktre maj! zosta& przekazane, s! wpisywane wewn!trz nawiasw nast#puj!cych po nazwie funkcji, nast#pnie uchwyt zdarzenia musi zosta& zmodyfikowany tak,
by mg' przyj!& te dane. Parametry, tak jak funkcje, rwnie powinny posiada& typ, ktry funkcja
akceptuje.
W poni szym przyk'adzie aplikacja jest zmodyfikowana tak, e 'a/cuch znakw wy$wietlany
w etykiecie jest przekazywany do uchwytu zdarzenia jako parametr.
<mx:Script>
<![CDATA[
private function clickHandler(toDisplay:String):void
{
myL.text=toDisplay;
}
]]>
</mx:Script>
label="Click Me"
click="clickHandler('Value Passed')"/>
W tym przypadku po klikni#ciu przycisku do funkcji uchwytu zdarzenia zostaje przekazany 'a/cuch
Value Passed. Funkcja przyjmuje dane do parametru toDisplay, ktremu zosta' nadany typ String.
Warto$& przechowywana w zmiennej toDisplay zostaje nast#pnie wy$wietlona jako w'a$ciwo$& text
etykiety.
LEKCJA 5.
Tworzenie struktury danych

w zdarzeniu creationComplete
Zdarzenie creationComplete zostaje wys'ane po utworzeniu egzemplarza elementu i jego poprawnym
umieszczeniu w aplikacji. Element b#dzie widoczny w aplikacji po wyst!pieniu zdarzenia creation
Complete, chyba e jego w'a$ciwo$& visible jest ustawiona na false. Zdarzenie creationComplete
obiektu g'wnego Application zostaje wys'ane po wys'aniu przez wszystkie jego elementy potomne
(wszystkie elementy zawarte w kontenerze Application) zdarze/ creationComplete, ktre ich dotycz!.
Przeanalizujmy poni szy fragment kodu:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="addToTextArea('Application creationComplete')">
<mx:Script>
<![CDATA[
private function addToTextArea(eventText:String):void
{
var existingText:String=reportEvents.text;
reportEvents.text=existingText+eventText+"\n";
}
]]>
</mx:Script>
<mx:TextArea editable="false"
height="100"
width="200"
borderStyle="solid"
id="reportEvents" />
<mx:HBox creationComplete="addToTextArea('HBox creationComplete')">
<mx:Label creationComplete="addToTextArea('Label creationComplete')"/>
<mx:Button creationComplete="addToTextArea('Button creationComplete')"/>
</mx:HBox>
</mx:Application>
Spjrzmy najpierw na uchwyt zdarzenia nazwany addToTextArea. Przyjmuje on parametr o nazwie

eventText i umieszcza go w obszarze tekstu, wprowadzaj!c po nim 'amanie wiersza. Dla ka dego z elementw, czyli Application, HBox, Label i Button, zostaje wywo'ane wydarzenie creationComplete.
Gdy proces tworzenia ka dego z elementw zostaje zako/czony, zdarzenie jest wysy'ane i odpowiedni dla niego 'a/cuch znakw zostaje przekazany do uchwytu zdarzenia w celu wy$wietlenia
w obszarze tekstowym.
Flex nie tworzy elementw w kolejno$ci od gry do do'u. Nale y sobie wyobra a& ten proces raczej
jako tworzenie od $rodka na zewn!trz. Zdarzenia creationComplete s! wi#c wysy'ane najpierw przez
kontrolki Label i Button. Nast#pnie, skoro tworzenie elementw potomnych kontenera HBox zosta'o
zako/czone, zdarzenie creationComplete zostaje wys'ane przez HBox. W ko/cu, gdy wszystkie
elementy potomne aplikacji zosta'y utworzone, sam element Application mo e wys'a& zdarzenie
creationComplete.
111
112
ADOBE FLEX 3.
Wyniki wy$wietlone na ekranie w obszarze tekstowym wygl!daj! tak, jak te zaprezentowane poni ej.
Teraz ju rozumiesz, dlaczego zdarzenie creationComplete obiektu Application jest cz#sto wykorzystywane do pobierania danych. Kiedy wszystkie obiekty potomne obiektu Application zostan!
ju utworzone, nadchodzi odpowiedni moment na !danie danych z zewn#trznego 1rd'a i wykorzystanie ich.
W nast#pnym &wiczeniu wprowadzimy dwie du e zmiany: utworzymy odwo'anie do pliku zewn#trznego b#d!cego 1rd'em danych, ktre zostan! osadzone w aplikacji, oraz zastosujemy uchwyt zdarzenia do $ledzenia niektrych danych w celu upewnienia si#, e s! one poprawnie pobierane.
Najpierw zostanie okre$lony zewn#trzny model XML dla znacznika <mx:Model>. Nast#pnie zdarzenie
creationComplete zostanie wykorzystane do wywo'ania metody lub funkcji, ktra za pomoc!
w'asnej klasy ActionScript ostatecznie utworzy pojedyncze obiekty warto$ci.
1. W programie Flex Builder otwrz plik src\assets\inventory.xml.
Plik ten jest zbiorem danych u ytych w poprzedniej lekcji, tylko e obecnie jest plikiem
zewn#trznym.
2. Otwrz plik EComm.mxml, z ktrym pracowa'e$ w poprzedniej lekcji. Je eli jej nie uko/czy'e$,
mo esz go otworzy& z katalogu Lekcja05\start i zapisa& go w swoim folderze flexGrocer\src.

3. Usu/ w#z'y potomne ze znacznika <mx:Model> oraz znacznik zamykaj!cy </mx:Model>.
4. Dodaj na ko/cu znacznika <mx:Model> uko$nik zamykaj!cy:
<mx:Model id="groceryInventory" />
5. Wewn!trz znacznika <mx:Model> wska zewn#trzny plik XML, okre$laj!c warto$& atrybutu
source jako "assets\inventory.xml":
<mx:Model id="groceryInventory" source="assets/inventory.xml"/>
Znacznik <mx:Model> automatycznie przeprowadzi analiz# sk'adniow! danych z zewn#trznego

pliku XML do pierwotnej postaci struktury danych ActionScriptu w tym przypadku
obiektu. W lekcji 6., U ywanie zdalnych danych XML z kontrolkami, napiszemy wi#cej
o bardziej z'o onych strukturach danych.
6. Do znacznika <mx:Application> dodaj zdarzenie creationComplete i spraw, by wywo'ywa'o
ono funkcj# uchwytu zdarzenia o nazwie prodHandler(), tak jak poni ej:
layout="absolute"
creationComplete="prodHandler()">
LEKCJA 5.
Jak ju wyja$nili$my, je eli zdarzenie creationComplete znajduje si# w znaczniku

<mx:Application>, zostaje ono wys'ane dopiero po utworzeniu wszystkich elementw
potomnych tego znacznika. Jest to korzystne, poniewa oznacza, e wszystkie elementy
aplikacji s! ju gotowe do u ycia.
7. Prze$lij do funkcji prodHandler() struktur# danych utworzon! w znaczniku <mx:Model>
groceryInventory:
layout="absolute"
creationComplete="prodHandler(groceryInventory)">
Identyfikator znacznika <mx:Model> jest rwny groceryInventory. Znacznik ten utworzy'

automatycznie z pliku XML prosty obiekt j#zyka ActionScript i mo e zosta& teraz wykorzystany
do wi!zania danych.
Je%eli zosta$a utworzona zmienna lub funkcja, podczas wpisywania znacznika dost#pna
jest pomoc. W tym przypadku, wprowadzaj"c nazw# zmiennej groceryInventory jako
parametr funkcji, mo%na wpisa+ gr, nast#pnie wcisn"+ Ctrl+spacja i wybra+ nazw#
zmiennej z listy.
8. Zaraz po istniej!cym znaczniku <mx:Model> dodaj blok <mx:Script>. Zauwa , e Flex Builder
automatycznie dodaje znacznik CDATA. U gry bloku skryptu zdefiniuj funkcj# prywatn! typu
void o nazwie prodHandler(). Musi ona przyjmowa& parametr typu Object o nazwie theItems.
<mx:Script>
<![CDATA[
private function prodHandler(theItems:Object):void
{
}
]]>
</mx:/Script>
Funkcja prodHandler() jest uchwytem zdarzenia creationComplete. Zosta'a okre$lona jako

prywatna, co oznacza, e mo e by& u ywana tylko wewn!trz klasy. Funkcja b#dzie przyjmowa'a
pojedynczy parametr typu Object oraz nie b#dzie zwraca'a adnej warto$ci, poniewa jako
typ zwracany zosta' okre$lony void.
9. Wewn!trz funkcji prodHandler() dodaj dwa wyra enia trace, wy$wietlaj!ce nazw# i koszt
elementw przekazywanych do funkcji.

private function(prodHandler(theItems:Object):void
{
trace (theItems.prodName);
trace(theItems.cost);
}
10. Kliknij narz#dzie Debug, aby skompilowa& aplikacj#. Wr& do Flex Buildera.
W widoku Console zostan! wy$wietlone wyniki dzia'ania wyra e/ trace. W oknie konsoli powinna
by& widoczna nazwa produktu i jego koszt. B#dziesz musia' zminimalizowa& wy$wietlone okno
przegl!darki oraz wybra& z menu opcj# Window/Console, je eli widok Console nie jest wy$wietlany.
(Zobacz rysunek na nast#pnej stronie).
113
114
ADOBE FLEX 3.
U=ywanie danych z obiektu Event

Flex tworzy obiekt Event za ka dym razem, gdy zostaje wys'ane zdarzenie. Obiekt ten zawiera informacje o zdarzeniu, ktre nast!pi'o. Jest tworzony automatycznie nawet wtedy, gdy nie zostanie
wykorzystany. B#dzie jednak cz#sto stosowany. Zwykle obiekt zdarzenia jest wysy'any do uchwytu
zdarzenia i odczytywane s! z niego w'a$ciwo$ci.
Istnieje bardzo wiele rodzajw obiektw zdarze/, ktrych mo na u y&. Oglny obiekt Event jest
zdefiniowany w klasie j#zyka ActionScript. Ta oglna wersja nie b#dzie jednak dzia'a'a we wszystkich zdarzeniach. Mo na si# domy$li&, e najwa niejsza informacja zwrcona ze zdarzenia przeci!gni#cia i upuszczenia b#dzie r na od najwa niejszej informacji zwrconej po zako/czeniu
wywo'ania us'ugi sieciowej. Z tego powodu oglna klasa Event stanowi podstaw# dla wielu innych klas
zdarze/. Na poni szym rysunku wida&, jak wiele innych klas jest opartych na oglnej klasie Event
lub stanowi jej podklasy.
Czy wszystkie te obiekty zdarze/ s! potrzebne? Potrzebne s! te zawieraj!ce wszystkie potrzebne

informacje, ale nie ich nadmiar.
Oglny obiekt Event zawiera w'a$ciwo$ci u yte we wszystkich obiektach typu zdarzenie. Dwa 'atwe
do zrozumienia typy to type i target. W'a$ciwo$& type zdarzenia jest 'a/cuchem zawieraj!cym
nazw# uchwyconego zdarzenia, na przyk'ad click lub creationComplete. W'a$ciwo$& target
wskazuje element, ktry wys'a' zdarzenie, na przyk'ad element Button, je eli zdarzenie zosta'o
wys'ane przed klikni#ciem przycisku.
Target (cel) mo%e wydawa+ si# dziwnym okre0leniem tej w$a0ciwo0ci, skoro jest to
zdarzenie, ktre wys$a$o inne zdarzenie, a nie cel czegokolwiek. Wyja0ni si# to w lekcji 9.,
Stosowanie zdarze4 u%ytkownika, i gdy dowiesz si# czego0 o przep$ywie zdarze4.
LEKCJA 5.
Przyjrzyjmy si# poni szemu kodowi, ktry wysy'a obiekt zdarzenia, w tym przypadku obiekt
MouseEvent, do uchwytu zdarzenia.
<mx:Script>
<![CDATA[
private function clickHandler(event:MouseEvent):void
{
trace(event.type);
}
]]>
</mx/Script>
label="Click Me"
click="clickHandler(event)"/>
W powy szym kodzie zdarzenie zostaje wys'ane do uchwytu zdarzenia i podczas debugowania
aplikacji w widoku Console zostaje wy$wietlone s'owo click.
Chocia obiekt Event nie jest u ywany w adnym miejscu tworzonych obecnie aplikacji, zrozumienie,
do czego s'u y, jest niezb#dne. W zwi!zku z tym, chocia obiekt ten nie jest zawarty w adnej z trzech
aplikacji tworzonych podczas pracy z ksi! k!, w poni szym &wiczeniu zastosujemy go.
1. Wybierz z menu File/New/Flex Project. Nadaj projektowi nazw# EventObject.
2. Ustal lokalizacj# pliku projektu jako flexop\Lekcja05\eventObject\start.
3. Jako typ aplikacji wybierz Web application.
4. Ustaw technologi# serwera jako none, a nast#pnie kliknij Next.
5. Pozostaw typ folderu wyj$ciowego bin-debug i kliknij Next.
6. Pozostaw src jako g'wny folder 1rd'owy.
7. Przeszukaj opcj# Main application file i zaznacz EventTest.mxml. Kliknij Finish.
W'a$nie utworzy'e$ projekt. Mo esz uruchomi& aplikacj#, ktra b#dzie wykorzystywana

do eksperymentowania z obiektem zdarzenia. Plik ten jest tylko szkieletem aplikacji z dodanym
blokiem Script.
8. Dodaj przycisk pomi#dzy zamykaj!cym znacznikiem </mx:Script> a ko/cem aplikacji.
Nadaj przyciskowi za pomoc! w'a$ciwo$ci id nazw# egzemplarza myButton. Dodaj w'a$ciwo$&
label o warto$ci Click To Debug. Dodaj zdarzenie click i spowoduj, by wywo'ywa'o ono
uchwyt zdarzenia o nazwie doClick(), przesy'aj!cy obiekt zdarzenia w formie parametru:
<mx:Button id="myButton" label="Click To Debug" click="doClick(event)"/>
Kiedy zostanie klikni#ty przycisk, zostanie wywo'ana funkcja doClick() i zostanie do niej
wys'any obiekt event.
9. W bloku skryptu dodaj prywatn! funkcj# typu void o nazwie doClick(). Przyjmij parametr
typu MouseEvent o nazwie event, tak jak poni ej:
115
116
ADOBE FLEX 3.
private function doClick(event:MouseEvent):void
{
}
Mo%na przyj"+ spjne nazewnictwo dla uchwytw zdarze4. Na przyk$ad w tej lekcji u%ywane
jest zdarzenie click obs$ugiwane przez uchwyty zdarze4 o nazwach clickHandler()
i doClick(). Nie istnieje jedyna s$uszna metoda nadawania nazw uchwytom zdarze4,
mo%na jednak wybra+ sobie konwencj# nazewnictwa i trzyma+ si# jej.
W nast#pnym kroku u yjemy wbudowanego w program Flex Builder debugera w najprostszy

sposb. Debuger zostanie dok'adnie omwiony w lekcji 25., Debugowanie aplikacji
we Fleksie. Tutaj u yjemy go do przyjrzenia si# obiektowi zdarzenia.
10. Dodaj punkt przerwania programu na zamykaj!cym funkcj# nawiasie klamrowym, dwukrotnie
klikaj!c pasek znacznikw po lewej stronie kodu i numerw wierszy. Na pasku pojawi si#
ma'y niebieski punkt wskazuj!cy miejsce, w ktrym zostanie wstrzymane wykonanie programu.
W tym punkcie mo na przyjrze& si# aktualnym warto$ciom.
Debuger jest niesamowicie pomocny w zrozumieniu tego, co dzieje si# w aplikacji Fleksa,
dlatego warto cz#sto go u ywa&.
11. Kliknij przycisk Debug interfejsu programu Flex Builder.
12. W przegl!darce kliknij przycisk z etykiet! Click To Debug. We Flex Builderze zostaniesz
poproszony o skorzystanie z perspektywy Debugging. Powiniene$ to zrobi&.

13. Kliknij dwukrotnie belk# widoku Variables, aby wy$wietli& j! w trybie pe'noekranowym.
Okno zawiera wiele informacji i przej$cie do widoku pe'noekranowego u'atwi ich przegl!danie.
14. Zostan! wy$wietlone dwie zmienne: this i event (tak jak poni ej).
LEKCJA 5.
Zmienna this reprezentuje ca'! aplikacj#. Je eli klikniesz znajduj!cy si# przed ni! znak +,
zobaczysz wiele w'a$ciwo$ci i skojarzonych warto$ci. Zmienna event reprezentuje zmienn!
zdarzenia lokaln! dla funkcji, w ktrej zosta' wstawiony punkt przerwania. Litera L umieszczona
w ikonie po lewej stronie zmiennej event wskazuje, e jest to zmienna lokalna.
15. Kliknij znak + przed zmienn! event, a nast#pnie znak + przed zestawem w'a$ciwo$ci
[inherited]. Znajd1 w'a$ciwo$& target. Zwr& uwag#, e target jest elementem
wysy'aj!cym zdarzenie Button. Zauwa tak e, e w'a$ciwo$& type ma warto$& click.
Wszystkie te warto$ci zosta'y ju omwione.

16. Kliknij znak + przed target, nast#pnie kliknij znak + przed zestawem w'a$ciwo$ci
[inherited] i znajd1 w'a$ciwo$& id.
Zauwa , e warto$ci! w'a$ciwo$ci jest myButton, tak jak zosta'o to wpisane w kodzie.
17. Przywr& widok Variables, klikaj!c dwukrotnie jego belk#. Kliknij czerwony kwadracik
w widoku Debug lub Console, by zako/czy& debugowanie.
Nie zapominaj o tym, aby zako/czy& sesj# debugowania. Mo liwe jest dzia'anie jednej sesji
debugowania w innej. Mo e by& to przydatne w pewnych przypadkach, nie jest jednak zalecane.
18. Wr& do perspektywy Development, klikaj!c znak >> w prawym grnym rogu ekranu
i wybieraj!c Flex Development.
Je%eli umie0cisz kursor z lewej strony ikony Open Perspective, pojawi si# podwjna strza$ka.
Mo%esz klikn"+ i przeci"gn"+ okno w lewo w celu zwi#kszenia ilo0ci miejsca przydzielonego
perspektywom. B#dzie widoczna zarwno perspektywa Development, jak i Debugging,
i b#dzie mo%na $atwo prze$"cza+ si# mi#dzy nimi, klikaj"c ich zak$adki.
19. Zamknij projekt EventObject i wr& do projektu FlexGrocer.
117
118
ADOBE FLEX 3.
Tworzenie w#asnej klasy j.zyka ActionScript

Jak wspomniano pod koniec lekcji 2., ksi! ka ta nie jest podr#cznikiem programowania zorientowanego obiektowo, ka dy programista Fleksa musi jednak chocia w podstawowym stopniu zna&
specjalistyczn! terminologi#. Je eli wi#c nie s! Ci znane takie wyra enia, jak klasa, obiekt, w@aAciwoAB
i metoda, nadszed' najwy szy czas, by skorzysta& z setek, je eli nie tysi#cy, publikacji wprowadzaj!cych do programowania zorientowanego obiektowo.
Tworzyli$my ju w'asne klasy j#zyka ActionScript podczas pracy z t! ksi! k!, cho& mog'e$ o tym nie
wiedzie&, poniewa Flex ukrywa je przed programist!. Podczas tworzenia aplikacji w j#zyku MXML
tworzymy tak naprawd# now! klas# j#zyka ActionScript. Kod MXML jest po'!czony z kodem
ActionScript w bloku skryptu i jest tworzona czysta klasa j#zyka ActionScript skompilowana do
pliku .swf, gotowego do u ycia przez program Flash Player. W ostatnim &wiczeniu po utworzeniu
EventTest.mxml powsta' wi#c plik EventTest-generated.as zawieraj!cy poni szy kod:
public class EventTest extends mx.core.Application
W wyniku utworzenia EventTest.mxml zosta'a rozszerzona klasa Application, tak jak w wyniku
utworzenia ka dej z aplikacji w tej ksi! ce.
Aby widzie+ tworzony kod j#zyka ActionScript, nale%y doda+ argument kompilatora we
Flex Builderze. Przejd; do Project/Properties/Flex Compiler/Additional compiler arguments
(projekt/w$a0ciwo0ci/kompilator Fleksa/dodatkowe argumenty kompilatora) i dodaj na
ko4cu istniej"cych argumentw tekst -keep-generated-actionscript. W projekcie
zostanie automatycznie utworzony katalog generated, a w nim wiele plikw j#zyka
ActionScript. Aktualne pliki aplikacji znajduj" si# w formularzu Name-generated.as. Nie
zapomnij o usuni#ciu argumentu kompilatora po zako4czeniu sprawdzania.
W tej cz#$ci lekcji zbudujemy klasy j#zyka ActionScript bezpo$rednio w tym j#zyku, nie korzystaj!c
z konwersji kodu MXML na kod ActionScript przez Fleksa.
Po co si# to robi? Tworzenie klas j#zyka ActionScript jest niezb#dne do wykonania niektrych &wicze/ przedstawionych w tej ksi! ce, wliczaj!c w to tworzenie w'asnych klas zdarze/ oraz obiektw
warto$ci. Niedawno poznali$my obiekty zdarze/. W lekcji 9. utworzymy obiekty zdarze/ do przechowywania okre$lonych danych i tworzenie w'asnych klas j#zyka ActionScript b#dzie wwczas
konieczne.
Tworzenie obiektu warto@ci

Obiekty wartoAci (value objects, nazywane rwnie obiektami transferu danych DTO), lub po prostu obiekty
transferu, przechowuj! dowolne dane zwi!zane z obiektem, nie zawieraj! szczeg'owego kodu i logiki
biznesowej oraz s! wdro one jako klasy ActionScript.
Nazwa obiektw transferu jest zwi!zana z tym, e cz#sto s'u ! one do przesy'ania danych do zaplecza
aplikacji w celu zachowania ich na sta'e w bazie danych. W tej lekcji utworzymy obiekty warto$ci dla
produktw spo ywczych, produktu przeniesionego do koszyka na zakupy oraz samego koszyka.
LEKCJA 5.
Najpierw jednak omwimy podstawy tworzenia klasy j#zyka ActionScript. Poni ej zosta'a pokazana bardzo prosta klasa:
W linii A wyra enie package reprezentuje struktur# katalogu, w ktrym jest przechowywana klasa.
Plik jest przechowywany w katalogu grocery/product w strukturze plikw aplikacji.
W linii B klasie zostaje nadana nazwa Fruit. Musi to odpowiada& nazwie pliku Fruit.as.
W linii C zosta'y zadeklarowane w'asno$ci klasy. Mo e ich by& wiele.
Linia D zawiera konstruktor klasy. Jest on wywo'ywany automatycznie, gdy tworzony jest nowy
egzemplarz obiektu klasy. Nazwa funkcji konstruktora klasy musi by& taka sama jak nazwa klasy,
ktra z kolei jest taka sama jak nazwa pliku. Funkcja ta musi by& funkcj! publiczn! i nie mo e mie&
nadanego typu.
W linii E zosta'y zdefiniowane metody klasy. Mo e zosta& zadeklarowanych wiele metod.
W aplikacji FlexGrocer trzeba zarz!dza& wielkimi ilo$ciami danych i przesy'a& je do innych aplikacji. W kolejnym &wiczeniu utworzymy obiekt warto$ci przechowuj!cy informacje o produkcie
spo ywczym.
1. Utwrz nowy plik klasy j#zyka ActionScript, wybieraj!c z menu File/New/ActionScript class
(plik/nowy/klasa ActionScript). W polu Package wpisz valueObjects, co spowoduje
automatyczne utworzenie przez Flex Builder katalogu o tej samej nazwie. Nazwij klas#
Product i pozostaw warto$ci domy$lne wszystkich pozosta'ych pl. Kliknij Finish, aby
utworzy& plik.
Zostaje utworzony plik o nazwie Product.as, zawieraj!cy podstawow! struktur# klasy j#zyka
ActionScript. Wyra enia package i class s! s'owami kluczowymi u ytymi w definicji tej
klasy. Nale y pami#ta&, e b#dzie ona podstaw! dla wielu obiektw u ywanych p1niej
do opisywania ka dego z produktw spo ywczych. (Zobacz rysunek na nast#pnej stronie).
119
120
ADOBE FLEX 3.
2. W utworzonym pliku, przed s'owem kluczowym class, ale za s'owem kluczowym package,
dodaj znacznik metadanych [Bindable]. Wewn!trz definicji klasy Product dodaj w'a$ciwo$&
publiczn! typu Number o nazwie catID.
package valueObjects{
[Bindable]
public class Product{
public var catID:Number;
}
}
Je eli znacznik metadanych [Bindable] zostanie wstawiony przed s'owem kluczowym class,
oznacza, e ka da w'a$ciwo$& klasy mo e zosta& u yta w powi!zaniu (zosta& powi!zana
z kontrolk! lub inn! struktur! danych). Zamiast okre$lania ca'ej klasy jako [Bindable] mo na
okre$li& pojedyncze w'a$ciwo$ci. W przypadku aplikacji FlexGrocer ka da w'a$ciwo$& powinna
by& mo liwa do powi!zania.
3. Utwrz w'a$ciwo$ci publiczne o nazwach prodName (typ String), unitID (typ Number), cost
(typ Number), listPrice (typ Number), description (typ String), isOrganic (typ Boolean),
isLowFat (typ Boolean) oraz imageName (typ String). Klasa powinna wygl!da& tak:
[Bindable]
public class Product{
public var catID:Number;
LEKCJA 5.
public
public
public
public
public
public
public
public
var
var
var
var
var
var
var
var
prodName:String;
unitID:Number;
cost:Number;
listPrice:Number;
description:String;
isOrganic:Boolean;
isLowFat:Boolean;
imageName:String;
}
}
Tworzymy struktur# danych przechowuj!c! informacje magazynowe dla sklepu spo ywczego.
Powy ej utworzyli$my wszystkie w'a$ciwo$ci, ktre zostan! wykorzystane w tej klasie.
4. Wewn!trz nawiasw klasy Product, za w'a$ciwo$ci! imageName, zdefiniuj funkcj# konstruktora
klasy i okre$l parametry, ktre b#d! przekazywane do tej funkcji. Musz! si# one zgadza&
typem danych z typem ju zdefiniowanych w'a$ciwo$ci. Nazwy powinny by& jednakowe, nale y
je jednak poprzedzi& podkre$lnikiem, aby unikn!& kolizji nazw parametrw i w'a$ciwo$ci
(wyst#puj!cej, gdy taka sama nazwa odnosi si# do dwch r nych zmiennych). Upewnij si#,
e nazwa funkcji odpowiada nazwie klasy oraz e konstruktor jest publiczny. Nie mo na
nada& typu funkcji konstruktora.
public function Product(_catID:Number, _prodName:String, _unitID:Number,
_cost:Number, _listPrice:Number, _description:String, _isOrganic:Boolean,
_isLowFat:Boolean, _imageName:String){
}
Funkcja konstruktora jest wywo'ywana za ka dym razem, gdy z klasy jest tworzony obiekt.
Mo na utworzy& z klasy obiekt, u ywaj!c s'owa kluczowego new i przekazuj!c klasie parametry.
Na koniec przeka emy warto$ci ze znacznika <mx:Model> lub bazy danych do parametru
konstruktora.
5. Wewn!trz funkcji konstruktora nadaj ka dej w'a$ciwo$ci warto$& przes'an! do funkcji
konstruktora.
public function Product(_catID:Number, _prodName:String, _unitID:Number,
_cost:Number, _listPrice:Number, _description:String, _isOrganic:Boolean,
_isLowFat:Boolean, _imageName:String)
{
catID =_catID;
prodName = _prodName;
unitID = _unitID;
cost = _cost;
listPrice = _listPrice;
description = _description;
isOrganic = _isOrganic;
isLowFat = _isLowFat;
imageName = _imageName;
}
Powy szy kod ustawi warto$& ka dej w'a$ciwo$ci klasy na rwn! odpowiedniemu parametrowi
przes'anemu do konstruktora.
121
122
ADOBE FLEX 3.
Ka%da w$a0ciwo0+ wymieniona po lewej stronie znaku rwno0ci mo%e mie+ przedrostek
this., na przyk$ad this.catID = _catID;. Taki przedrostek jest czasem dodawany przez
programistw, ktrzy chc" u%ywa+ takich samych nazw w$a0ciwo0ci oraz parametrw
i mimo to unika+ kolizji nazw. Przedrostek this odwo$uje si# do samej klasy.
6. Utwrz bezpo$rednio pod funkcj! konstruktora now! metod# o nazwie toString(),
zwracaj!c! 'a/cuch [Product] i nazw# produktu.
public function toString():String
{
return "[Product]"+this.prodName;
}
Metoda ta b#dzie zwraca'a nazw# aktualnego produktu i b#dzie przydatna przy pobieraniu
nazwy. Tworzenie metod daj!cych dost#p do w'a$ciwo$ci jest dobrym zwyczajem, poniewa
je eli nazwa w'a$ciwo$ci si# zmieni, wci! b#dzie mo na wywo'a& t# sam! funkcj#, wykorzystuj!c
kod dziedziczony. Metoda toString() jest wywo'ywana automatycznie przez szkielet Fleksa
za ka dym razem, gdy obiekt jest $ledzony. Jest to bardzo przydatne podczas debugowania
i wy$wietlania struktur danych.
7. Wr& do pliku EComm.mxml i znajd1 blok skryptu u gry strony. Poni ej znacznika CDATA
zaimportuj klas# Product z katalogu valueObjects.
import valueObjects.Product;
W celu u ycia klasy niestandardowej Flex Builder musi skorzysta& z wyra enia import
odwo'uj!cego si# do po'o enia lub pakietu, w ktrym klasa jest umieszczona. Kiedy tworzona
jest w'asna klasa, nale y j! zaimportowa&, aby by'a dost#pna dla szkieletu Fleksa. Wykonuje
si# to za pomoc! s'owa kluczowego import.
8. W bloku skryptu nast#puj!cym po wyra eniu import, powy ej funkcji, zadeklaruj zmienn!
prywatn! typu Product o nazwie theProduct. Dodaj znacznik metadanych [Bindable].
[Bindable]
private var theProduct:Product;
Wszystkie pliki MXML s! ostatecznie kompilowane do klasy j#zyka ActionScript. Nale y

podczas tworzenia pliku MXML stosowa& t# sam! konwencj#, co podczas tworzenia klasy
j#zyka ActionScript. Nale y na przyk'ad zaimportowa& wszystkie klasy, ktre nie s!
macierzystymi dla j#zyka ActionScript, tak jak utworzona klasa Product, i zadeklarowa&
wszystkie w'a$ciwo$ci, ktre zostan! u yte w pliku MXML. Zostaje to wykonane w bloku
skryptu. Znacznik metadanych [Bindable] gwarantuje, e warto$& tej w'a$ciwo$ci mo e
zosta& u yta w wyra eniach powi!za/.
9. Wewn!trz funkcji prodHandler(), ale powy ej wyra e/ trace, utwrz nowy egzemplarz klasy
Product o nazwie theProduct. Wype'nij i prze$lij parametr do funkcji konstruktora z informacj!
ze znacznika <mx:Model>:
theProduct = new Product(theItems.catID, theItems.prodName, theItems.unitID,
theItems.cost, theItems.listPrice, theItems.description, theItems.isOrganic,
theItems.isLowfat, theItems.imageName);
U ywasz nowo utworzonej klasy i tworzysz egzemplarz jej obiektu. Dane ze znacznika
<mx:Model> zostaj! przekazane jako warto$ci dla w'a$ciwo$ci.
LEKCJA 5.
10. Usu/ z funkcji prodHandler() dwa wyra enia trace i zamie/ je na nowe wyra enia trace.
B#d! one pobiera'y automatycznie informacje okre$lone w metodzie toString().
trace(theProduct);
11. Zapisz i w'!cz debugowanie aplikacji.
W widoku konsoli powinien zosta& wy$wietlony tekst[Product]Milk wskazuj!cy, e utworzy'e$

obiekt warto$ci Product.
Tworzenie metody kreujAcej obiekt

Tak jak zrobili$my to w poprzednim &wiczeniu, mo na utworzy& egzemplarz klasy Product, przekazuj!c wszystkie warto$ci do metody konstruktora jako parametry. W tym zadaniu utworzymy
metod#, ktra przyjmuje obiekt zawieraj!cy wszystkie pary w'a$ciwo$& warto$& i zwraca egzemplarz
klasy Product. Trzeba zauwa y&, e dla poprawnego dzia'ania tej metody obiekt przekazywany do
niej musi zawiera& nazwy w'a$ciwo$ci dok'adnie odpowiadaj!ce tym u ytym w klasie.
1. Upewnij si#, e klasa Product w katalogu valueObjects jest otwarta. Znajd1 metod# toString()
i dodaj za ni! szkielet nowej metody o w'a$ciwo$ciach public i static, nazwanej
buildProduct(). Upewnij si#, e zwracane przez ni! dane s! typu Product oraz e przyjmuje
ona parametr o o typie danych Object, tak jak poni ej:
public static function buildProduct(o:Object):Product
{
}
Metoda statyczna mo e by& wywo'ywana bez potrzeby wcze$niejszego tworzenia obiektu

z klasy. Metody egzemplarzowe, tak jak te, ktrych u ywali$my dot!d, mog! by& stosowane
tylko z obiektami, ktrych egzemplarze s! tworzone z klasy. Metody zadeklarowane jako
statyczne mog! by& u ywane bezpo$rednio z klasy. Metody statyczne s! przydatne w programach
u ytkowych, na przyk'ad tworzona tutaj statyczna metoda buildObject(), do ktrej chcemy
mie& dost#p bez potrzeby tworzenia wcze$niej obiektu. Odpowiednio u yte metody statyczne
mog! podnie$& wydajno$&, poniewa nie musz! tworzy& najpierw obiektu zajmuj!cego pami#&
komputera. W celu odwo'ania si# do statycznej metody getName() z klasy Product powinni$my
zastosowa& kod Product.getName(), ktry korzysta z nazwy klasy wstawionej przed metod!,
a nie z nazwy obiektu, ktrego egzemplarz utworzono z klasy.
2. Wewn!trz metody buildProduct() utwrz egzemplarz klasy Product o nazwie p, u ywaj!c
s'owa kluczowego new. Ustaw w'a$ciwo$ci catID, prodName, unitID, cost, listPrice,
description, isOrganic, isLowFat i imageName jako parametry konstruktora. B#dziesz
musia' rzutowa& zmienne isOrganic i isLowFat do typu boolowskiego.
123
124
ADOBE FLEX 3.
var p:Product = new Product(o.catID, o.prodName, o.unitID, o.cost, o.listPrice,
o.description, Boolean(o.isOrganic), Boolean(o.isLowFat), o.imageName);
Pami#taj, e u yte tutaj dane s! pobierane ze znacznika <mx:Model>. Kiedy s! pobierane w ten
sposb, nie posiadaj! typu, wi#c warto$ci true i false s! traktowane jak zwyk'e 'a/cuchy
znakowe. Rzutowanie zmiennej dostarcza kompilatorowi informacji, e ma traktowa&
warto$& jako dan! okre$lonego typu. W tym przyk'adzie informujesz kompilator, e Ty jako
programista wiesz, e w'a$ciwo$ci isOrganic i isLowFat b#d! zawiera'y dane logiczne i przez
ich rzutowanie do tego typu nowo utworzony obiekt b#dzie posiada' warto$ci logiczne dla
w'a$ciwo$ci isOrganic i isLowFat.
3. Wr& do w'a$nie utworzonego obiektu, u ywaj!c s'owa kluczowego return z nazw! obiektu,
czyli p. Gotowa metoda buildProduct() powinna mie& posta&:
public static function buildProduct(o:Object):Product{
var p:Product = new Product(o.catID, o.prodName, o.unitID, o.cost,
o.listPrice, o.description, Boolean(o.isOrganic), Boolean(o.isLowFat),
o.imageName);
return p;
}
Powy szy kod zwrci obiekt warto$ci Product utworzony przez przekazanie oglnego
obiektu do metody.
4. Zapisz plik Product.as.
Plik klasy zosta' zapisany z now! metod!. W widoku Problems nie powinny pojawi& si# adne
komunikaty o b'#dach.
5. Wr& do aplikacji EComm.mxml. Z metody prodHandler() usu/ kod tworz!cy theProduct
i wstaw zamiast niego kod u ywaj!cy metody statycznej do utworzenia theProduct.
Pami#taj o usuni#ciu s'owa kluczowego new.
theProduct = Product.buildProduct(theItems);
Powy szy kod wywo'uje statyczn! metod# tworz!c! egzemplarz klasy Product, ktra zwraca
obiekt warto$ci Product o nadanym mocnym typie z obiektu, ktry nie posiada' nadanego typu.
6. Znajd1 w stanie rozszerzonym pierwszy kontener uk'adu VBox, ktry wy$wietla opis produktu
oraz informacje, czy jest on ekologiczny i dietetyczny. Zmie/ w'a$ciwo$& text znacznika
<mx:Text> tak, by odwo'ywa' si# do obiektu theProduct utworzonego metod! prodHandler().
Dodaj tak e w'a$ciwo$& visible do obu etykiet oraz powi! ka d! z nich z odpowiedni!
w'a$ciwo$ci! obiektu theProduct, tak jak jest to pokazane w nast#pnym fragmencie kodu.
(Zobacz rysunek na nast#pnej stronie).

Pami#taj, %e teraz Product jest klas" zaimportowan", dost#pne jest zatem podpowiadanie
kodu zarwno dla nazwy klasy, jak i jej w$a0ciwo0ci. Kiedy kursor znajduje si# wewn"trz
nawiasw tworz"cych powi"zanie, naci0nij Ctrl+spacja, aby uzyska+ pomoc we wpisywaniu
egzemplarza klasy Product theProduct. Nast#pnie, po wstawieniu kropki, zostan"
wy0wietlone w$a0ciwo0ci.
LEKCJA 5.
<mx:VBox x="200" width="100%">

<mx:Text text="{theProduct.description}"
width="50%"/>
<mx:Label
text="Certified Organic"
visible="{theProduct.isOrganic}"/>
<mx:Label
text="LowFat"
visible="{theProduct.isLowFat}"/>
</mx:VBox>
Odwo'ujesz si# teraz do obiektu warto$ci, ktry utworzyli$my wcze$niej.

7. Zapisz plik i uruchom debugowanie.
Powinno by& widoczne, e trace dzia'a tak jak wcze$niej, a powi!zanie danych powinno
dzia'a& po umieszczeniu kursora na obrazku.
Tworzenie klas koszyka na zakupy

W tym &wiczeniu utworzymy now! klas# dla produktw dodawanych do koszyka na zakupy. Jej
zadaniem b#dzie $ledzenie, jaki produkt zosta' dodany oraz w jakiej ilo$ci. Utworzymy metod#, ktra
b#dzie liczy'a koszt zakupu tego produktu. Zbudujemy tak e szkielet klasy ShoppingCart, ktra b#dzie
obs'ugiwa'a ca'y uk'ad logiczny koszyka na zakupy, wliczaj!c w to dodawanie do niego elementw.
1. Utwrz nowy plik klasy j#zyka ActionScript, wybieraj!c z menu File/New/ActionScript class.
Ustaw warto$& Package rwn! valueObjects, dodaj!c automatycznie t# klas# do utworzonego
wcze$niej katalogu. Wprowad1 ShoppingCartItem w polu nazwy i pozostaw warto$ci domy$lne
dla wszystkich pozosta'ych pl.

W tej klasie b#dzie sprawdzana liczba produktw oraz ich cena.
2. Wewn!trz definicji class wstaw w'a$ciwo$& publiczn! o nazwie product i typie danych Product:
package valueObjects {
public class ShoppingCartItem {
public var product:Product;
}
}
125
126
ADOBE FLEX 3.
Wa nym elementem koszyka na zakupy jest informacja, ktry produkt zosta' do niego dodany.
Utworzyli$my ju klas# Product s'u !c! $ledzeniu tych danych, jest wi#c jak najbardziej logiczne
wykorzystanie egzemplarza tej klasy w klasie ShoppingCartItem.
3. Zdefiniuj w'a$ciwo$& publiczn! o nazwie quantity i typie danych uint:
public var quantity:uint;
}
}
Typ danych uint oznacza ca'kowit! liczb# nieujemn! (0, 1, 2, 3, ). Ilo$& dodanego do koszyka
produktu mo e wynosi& zero lub zosta& okre$lona liczb! dodatni!, zastosowanie typu uint
jest wi#c logiczne.
4. Zdefiniuj w'a$ciwo$& publiczn! typu Number o nazwie subtotal:
public var quantity:uint;
public var subtotal:Number;
}
}
Za ka dym razem, gdy u ytkownik doda produkt do koszyka, b#dzie potrzebna aktualizacja
sumy warto$ci produktw. Ostatecznie dane te zostan! wy$wietlone w kontrolce.
5. Zaraz po w'a$ciwo$ci subtotal zdefiniuj nag'wek funkcji konstruktora klasy i okre$l parametry
przekazywane do tej funkcji. Zaliczaj! si# do nich: product, parametry typu Product i quantity
oraz parametry typu uint. Poniewa konstruktor jest wywo'ywany tylko podczas tworzenia
produktu, ustaw warto$& parametru quantity rwn! 1.
public function ShoppingCartItem(product:Product, quantity:uint=1)
{
}
Pami#taj, e funkcje konstruktora musz! by& funkcjami publicznymi i nie mog! posiada& typu.
6. W funkcji konstruktora przypisz w'a$ciwo$ciom klasy warto$ci parametryczne. W tym
przypadku zosta'y u yte jednakowe nazwy, nale y wi#c poprzedzi& nazwy w'a$ciwo$ci
po lewej stronie znakw rwno$ci przedrostkiem this. Przypisz rwnie w'a$ciwo$ci
subtotal warto$& wyra enia w'a$ciwo$ci listPrice produktu pomno onego razy quantity.
public function ShoppingCartItem(product:Product, quantity:uint=1){
this.product = product;
this.quantity = quantity;
this.subtotal = product.listPrice * quantity;
}
Pami#taj, e funkcja konstruktora jest wywo'ywana automatycznie za ka dym razem, gdy jest
tworzony obiekt z klasy. Konstruktor ustawi w'a$ciwo$ci, ktre zosta'y do niego przekazane
w tym przypadku b#dzie to egzemplarz klasy Product oraz ilo$&, ktra otrzymuje domy$ln!
warto$& rwn! 1. Metoda ta zostanie u yta tylko podczas dodawania produktu do koszyka,
logiczne jest wi#c zdefiniowanie ilo$ci pocz!tkowej rwnej 1.
LEKCJA 5.
7. Utwrz metod# publiczn! o nazwie recalc(), ktra b#dzie przelicza'a sum# ka dego produktu
(mno y'a warto$& listPrice produktu razy quantity):
public function recalc():void{
this.subtotal = product.listPrice * quantity;
}
Kiedy u ytkownik dodaje produkt do koszyka, nale y przeprowadzi& kalkulacj# w celu

zaktualizowania ca'kowitej sumy. Nale y tak e sprawdzi&, czy element zosta' ju wcze$niej
dodany do koszyka je eli tak, nale y zaktualizowa& ilo$&. W nast#pnej lekcji wyja$nimy,
jak to wykona&.
8. Utworzymy teraz now! klas#. Wybierz z menu File/New/ActionScript class. Ustaw warto$& Package
rwn! valueObjects, dodaj!c automatycznie t# klas# do utworzonego wcze$niej katalogu.
Wprowad1 ShoppingCart w polu nazwy i pozostaw warto$ci domy$lne dla wszystkich
pozosta'ych pl.
Tworzymy now! klas#, ktra b#dzie samym koszykiem wype'nionym obiektami
shoppingCartItem. Jej zadaniem b#dzie obrbka danych dla koszyka z zakupami.
Zaprojektowali$my ju wygl!d i styl graficzny koszyka, mo emy wi#c wprowadzi& ekonomiczny
uk'ad logiczny do klasy ShoppingCart. W sk'ad uk'adu logicznego wchodz!: dodawanie
produktw do koszyka, usuwanie ich z koszyka, aktualizacja produktw w koszyku itp.
9. Dodaj wyra enie import, ktre pozwoli u ywa& narz#dzi Fleksa, takich jak wyra enie trace,
wewn!trz klasy:
import flash.utils.*
public class ShoppingCart{
}
}
Z tego samego powodu, z jakiego nale y zaimportowa& klasy niestandardowe, aby mog'y
zosta& wykorzystane, konieczne jest te zaimportowanie odpowiednich klas szkieletu. B#dziemy
u ywali funkcji trace() i innych narz#dzi, co wymaga zaimportowania tych klas.
10. Utwrz szkielet publicznej metody addItem() typu void przyjmuj!cej parametr o nazwie
item typu ShoppingCartItem. Wewn!trz metody dodaj wyra enie trace, ktre b#dzie $ledzi'o
produkt dodany do koszyka:

import flash.utils.*
public class ShoppingCart{
public function addItem(item:ShoppingCartItem):void{
trace(item.product);
}
}
}
W metodzie tej b#dziemy dodawali nowe elementy do koszyka. W p1niejszych lekcjach dodamy
do niej logik#. W tej chwili metoda b#dzie tylko $ledzi'a produkty dodawane do koszyka.
Pami#taj, e napisana wcze$niej funkcja toString() jest wywo'ywana automatycznie, zawsze
gdy jest $ledzony egzemplarz klasy Product.
127
128
ADOBE FLEX 3.
11. Otwrz w programie Flex Builder plik EComm.mxml i znajd1 blok skryptu. Pod wyra eniem
import klasy Product zaimportuj klasy ShoppingCartItem i ShoppingCart z katalogu
valueObjects, tak jak poni ej:

import valueObjects.ShoppingCartItem;
import.valueObjects.ShoppingCart;
Aby u y& klasy, Flex Builder potrzebuje wyra enia import odwo'uj!cego si# do adresu
lub pakietu, w ktrym mie$ci si# klasa.
12. Pod wyra eniami import utwrz egzemplarz publiczny klasy ShoppingCart i nadaj
mu nazw# cart, a nast#pnie dodaj znacznik metadanych [Bindable]:

[Bindable]
public var cart:ShoppingCart = new ShoppingCart();
Kiedy u ytkownik klika przycisk Add To Cart, nale y wywo'a& metod# klasy ShoppingCartItem
o nazwie addItem(), ktr! w'a$nie utworzyli$my. Dzi#ki utworzeniu egzemplarza klasy
w tym miejscu mamy pewno$&, e b#dzie ona dost#pna w ca'ej aplikacji.
13. Znajd1 w bloku <mx:Script> metod# prodHandler(). Zaraz za ni! dodaj szkielet nowej prywatnej
metody typu void o nazwie addToCart(). Spraw, by przyjmowa'a parametr typu Product
o nazwie product, tak jak poni ej:
private function addToCart(product:Product):void {
}
Powy sza metoda b#dzie wywo'ywana, gdy u ytkownik kliknie przycisk Add i zostanie
przes'any wybrany przez niego obiekt warto$ci Product. Jest to metoda pliku MXML i nie
b#dzie wywo'ywana spoza tego pliku. W ten sposb mo na u ywa& prywatnego identyfikatora
oznaczaj!cego, e do danej metody nie mo na uzyska& dost#pu spoza jej klasy, co sprzyja
lepszej ochronie danych.
14. Wewn!trz metody addToCart() utwrz nowy egzemplarz klasy ShoppingCartItem o nazwie
sci i przeka do jego konstruktora parametr product:
var sci:ShoppingCartItem = new ShoppingCartItem(product);
15. Wewn!trz metody addToCart() wywo'aj metod# addItem() egzemplarza cart klasy
ShoppingCart. Prze$lij do metody utworzony obiekt sci:
cart.addItem(sci);
Kod ten wywo'a metod# addItem() utworzonej wcze$niej klasy ShoppingCart. W kolejnej
lekcji poka emy, jak wykonywa& p#tle przez struktur# danych w celu sprawdzenia, czy element
zosta' do niej dodany. Obecnie metoda ta po prostu $ledzi nazw# produktu dodanego
do koszyka.
16. Dodaj zdarzenie click do przycisku Add To Cart. Wywo'aj metod# addToCart(), przekazuj!c
do niej egzemplarz theProduct:

<mx:Button id="add" label="Add To Cart"
<click="addToCart(theProduct)"/>
LEKCJA 5.
17. Zapisz aplikacj# i uruchom debugowanie.
Po ka dym klikni#ciu przycisku Add To Cart powiniene$ widzie& tekst [Product]Milk

pojawiaj!cy si# w widoku Console.
Czego si. nauczy#e@?

Podczas tej lekcji:
zrozumia'e$, na czym polega obs'uga zdarze/ (s. 108 110),
obs'ugiwa'e$ zdarzenie creationComplete znacznika <mx:Application> w celu utworzenia
struktury danych (s. 111 114),
zbada'e$ obiekt zdarzenia, aby zrozumie&, czym jest, i korzysta'e$ z dwch w'a$ciwo$ci tego
obiektu (s. 114 117),
zrozumia'e$ podstawow! struktur# klasy j#zyka ActionScript (s. 118),
tworzy'e$ klasy j#zyka ActionScript b#d!ce obiektami warto$ci (s. 118 123),
tworzy'e$ w'a$ciwo$ci, metody i metody statyczne klas j#zyka ActionScript (s. 123 129).
129

Adobe Flex 3. Oficjalny Podręcznik

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Adobe Flex 3. Oficjalny Podręcznik

Uploaded by

Copyright:

Available Formats

Adobe Flex 3.

Lekcja 1 Wprowadzenie do bogatych aplikacji internetowych

Rozwj aplikacji komputerowych ................................................................................ 29

Wstp do programowania aplikacji Fleksa .................................................................. 40

Lekcja 3 Projektowanie interfejsu uytkownika

Praca ze stanami widoku ................................................................................................76

Lekcja 4 Stosowanie prostych kontrolek

Wprowadzenie do prostych kontrolek ........................................................................ 90

Lekcja 5 Obsuga zdarze i struktury danych

Zrozumienie obsugi zdarze ......................................................................................108

Lekcja 6 Uywanie zdalnych danych XML z kontrolkami

Pobieranie danych XML za porednictwem HTTPService ....................................... 132

Stosowanie powizania danych ze zoonymi strukturami danych ........................ 157

Lekcja 7 Tworzenie komponentw w jzyku MXML

Wprowadzenie do komponentw jzyka MXML ...................................................... 176

Lekcja 8 Uywanie kontrolek i komponentw Repeater ze zbiorami danych

Uywanie zbiorw danych .......................................................................................... 206

Lekcja 9 Uywanie zdarze niestandardowych

Korzyci ze stosowania luno powizanej architektury ............................................232

Lekcja 10 Tworzenie niestandardowych komponentw w jzyku ActionScript 3.0

Wprowadzenie do tworzenia komponentw w jzyku ActionScript 3.0 ................256

Lekcja 11 Stosowanie siatek danych i rendererw elementw

Wprowadzenie do siatek danych i rendererw elementw ...................................... 277

Lekcja 12 Uywanie techniki przecignij i upu

Wprowadzenie do menedera przecigania i upuszczania ....................................... 316

Lekcja 13 Wprowadzanie nawigacji

Wprowadzenie do nawigacji ........................................................................................337

Lekcja 14 Formatowanie i walidacja danych

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

Lekcja 15 Zarzdzanie histori i gbokie linkowanie

Wprowadzenie do zarzdzania histori .....................................................................380

Lekcja 16 Zmiana wygldu aplikacji

Projekty oparte na stylach i skrkach .........................................................................396

Zmiana stylw w trakcie dziaania aplikacji ..............................................................414

Lekcja 17 Korzystanie z usug sieciowych

Komunikacja z serwerem ............................................................................................ 427

Lekcja 18 Dostp do obiektw po stronie serwera

Przesyanie plikw na serwer .......................................................................................452

Lekcja 19 Wizualizowanie danych

Komponenty wykresw we Fleksie ............................................................................. 474

Wypenianie wykresw danymi .................................................................................. 477

Lekcja 20 Tworzenie aplikacji moduowych

Wprowadzenie do tworzenia moduowych aplikacji we Fleksie ..............................503

Lekcja 21 Wdraanie aplikacji Fleksa

Kompilowanie wdroeniowej wersji aplikacji ............................................................520

Lekcja 22 Tworzenie przej i zachowa

Wprowadzenie do zachowa i przej ........................................................................ 535

Lekcja 23 Drukowanie we Fleksie

Wprowadzenie do drukowania we Fleksie ..................................................................547

Lekcja 24 Stosowanie obiektw wspdzielonych

Wprowadzenie do obiektw wspdzielonych ..........................................................565

Lekcja 25 Debugowanie aplikacji we Fleksie

Wprowadzenie do technik debugowania ...................................................................577

Lekcja 26 Profilowanie aplikacji Fleksa

Wykorzystanie pamici przez Flash Player ................................................................598

Mechanizm oczyszczajcy pami we Flash Playerze ...............................................599

Dodatek A Instalowanie oprogramowania

Zrozumienie obs#ugi zdarze(

Oddzia'ywanie u ytkownika na aplikacj# wywo'uje szereg czynno$ci:

Obs#uga zdarzenia przez funkcj. j.zyka ActionScript

Tworzenie struktury danych

Spjrzmy najpierw na uchwyt zdarzenia nazwany addToTextArea. Przyjmuje on parametr o nazwie

mo esz go otworzy& z katalogu Lekcja05\start i zapisa& go w swoim folderze flexGrocer\src.