Adobe Flex 3.
Oficjalny podręcznik
Autorzy: Jeff Tapper, Michael Labriola,
Matthew Boles, James Talbot
Tłumaczenie: Andrzej Gońda, Aleksander Lamża
ISBN: 978-83-246-1966-5
Tytuł oryginału: Adobe Flex 3: Training from the Source
Format: B5, stron: 648
Poznaj potężne możliwoS
ci Adobe Flex 3 i twórz bogate aplikacje internetowe
" Jak tworzyć, wdrażać i debugować bogate aplikacje internetowe?
" Jak używać języka MXML do budowania układu aplikacji?
" Jak tworzyć niestandardowe komponenty interfejsu użytkownika w językach
MXML i ActionScript?
Adobe Flex 3 to odpowiedx
na zapotrzebowanie programistów w zakresie tworzenia
bogatych aplikacji internetowych za pomocą przyjaznych i intuicyjnych narzędzi.
Na Flex składają się m.in.: ActionScript 3.0, zwiększający wydajnoS
ć i prostotę
programowania; Flash Player 9, pozwalający na szybszą pracę i wykorzystujący
mniejszą iloS
ć pamięci; Flex Builder 3, udostępniający m.in. S
wietne narzędzia do
usuwania błędów i promujący najlepsze praktyki kodowania oraz programowania
aplikacji.
Książka  Adobe Flex 3. Oficjalny podręcznik poprowadzi Cię krok po kroku przez
proces budowania dynamicznych, interaktywnych aplikacji. Zawiera ona szczegółowy,
wyczerpujący, praktyczny kurs tworzenia i projektowania architektury bogatych
aplikacji internetowych (RIA) w językach MXML i ActionScript 3.0. Dzięki temu
podręcznikowi nauczysz się pracować ze złożonymi zbiorami danych, tworzyć własne
zdarzenia niestandardowe, stosować style i skórki, a także instalować aplikacje w sieci
lub komputerze. Poznasz wszystkie możliwoS
ci Fleksa i będziesz umiał zastosować
w praktyce nowoczesne narzędzia, a także z łatwoS
cią korzystać z innowacyjnych
technologii.
" Technologie bogatych aplikacji internetowych
" Pulpit programu Flex Builder 3
" Obsługa zdarzeń i struktury danych
" Używanie zdalnych danych z kontrolkami
" Tworzenie komponentów w języku MXML
" Repetery ze zbiorami danych
" Tworzenie niestandardowych komponentów w języku ActionScript 3.0
" Stosowanie siatek danych i generatorów elementów
" Wprowadzanie nawigacji
" Formatowanie i walidacja danych
" Zarządzanie historią i głębokie linkowanie
" Wizualizowanie danych
" Wdrażanie aplikacji Fleksa
Skorzystaj z indywidualnych warsztatów Flex 3
i zbuduj samodzielnie wyjątkową aplikację internetową!
Spis treści
O autorach 15
Wstęp17
Wprowadzenie 19
Lekcja 1 Wprowadzenie do bogatych aplikacji internetowych 29
Rozwój aplikacji komputerowych ................................................................................ 29
Odejście od architektury opartej na stronie ................................................................. 31
Zalety bogatych aplikacji internetowych ......................................................................33
Menedżerowie przedsiębiorstw ...................................................................................... 33
Przedsiębiorstwa branży IT ............................................................................................. 33
Użytkownicy końcowi ..................................................................................................... 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ę nauczyłeś? .......................................................................................................37
Lekcja 2 Zaczynamy 39
Wstęp 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 następnej lekcji ................................................................................57
Czego się nauczyłeś? .......................................................................................................58
Lekcja 3 Projektowanie interfejsu użytkownika 61
Kontenery ........................................................................................................................ 61
Tworzenie układu aplikacji e-commerce w trybie projektowania ..............................62
Praca z układami opartymi na więzach ........................................................................68
Wiązanie do kontenera nadrzędnego ............................................................................69
Użycie zaawansowanych więzów ...................................................................................74
6 ADOBE FLEX 3.
Oficjalny podręcznik
Praca ze stanami widoku ................................................................................................76
Sterowanie stanami widoku ............................................................................................78
Projektowanie aplikacji w trybie edycji kodu z
ródłowego ......................................... 80
Dodawanie stanów widoku i sterowanie nimi za pomocą MXML ...........................82
Czego się nauczyłeś? .......................................................................................................86
Lekcja 4 Stosowanie prostych kontrolek 89
Wprowadzenie do prostych kontrolek ........................................................................ 90
Wyświetlanie obrazów ....................................................................................................91
Tworzenie widoku szczegółów ...................................................................................... 94
Korzystanie z wiązania danych do powiązania struktury danych
z prostą kontrolką ..................................................................................................... 97
Wykorzystywanie kontenera układu formularzy do umieszczania
prostych kontrolek w aplikacji ................................................................................. 99
Dodawanie przycisków radiowych i pól daty do aplikacji Dashboard ................... 103
Czego się nauczyłeś? .....................................................................................................105
Lekcja 5 Obsługa zdarzeń i struktury danych 107
Zrozumienie obsługi zdarzeń ......................................................................................108
Prosty przykład ...............................................................................................................108
Obsługa zdarzenia przez funkcję języka ActionScript .............................................109
Przekazywanie danych podczas wywołania funkcji uchwytu zdarzenia ................ 110
Tworzenie struktury danych w zdarzeniu creationComplete ...................................111
Używanie danych z obiektu Event .............................................................................. 114
Tworzenie własnej klasy języka ActionScript ............................................................. 118
Tworzenie obiektu wartości .......................................................................................... 118
Tworzenie metody kreującej obiekt ............................................................................ 123
Tworzenie klas koszyka na zakupy .............................................................................. 125
Czego się nauczyłeś? .....................................................................................................129
Lekcja 6 Używanie zdalnych danych XML z kontrolkami 131
Pobieranie danych XML za pośrednictwem HTTPService ....................................... 132
Tworzenie obiektu HTTPService ................................................................................. 132
Wywoływanie metody send() ........................................................................................ 133
Używanie zwróconych danych ..................................................................................... 133
Zagadnienia bezpieczeństwa ........................................................................................ 134
Pobieranie danych XML za pośrednictwem HTTPService ....................................... 135
Wypełnianie ArrayCollection danymi z HTTPService ............................................. 137
Używanie obiektów ArrayCollection .......................................................................... 137
Używanie kolekcji w roli dostawców danych ............................................................. 138
Wypełnianie kontrolki ComboBox i programowe dodawanie opcji ......................140
Używanie danych XML z kontrolką Tree ................................................................... 143
Pojęcie operatorów E4X ................................................................................................ 143
Wypełnianie kontrolki Tree danymi XML ................................................................ 148
Pobieranie danych XML i przekształcanie ich w kolekcję ArrayCollection
obiektów użytkownika .............................................................................................154
ADOBE FLEX 3. 7
Spis treści
Stosowanie powiązania danych ze złożonymi strukturami danych ........................ 157
Przekształcanie danych koszyka na zakupy ...............................................................159
Dodawanie elementów do koszyka ............................................................................. 159
Sortowanie elementów kolekcji ArrayCollection ..................................................... 160
Dodawanie elementu lub aktualizowanie ilości ........................................................ 162
Korzystanie z kursora do umieszczania elementu koszyka na zakupy .................. 164
Dodawanie przycisku Remove (usuń) ........................................................................ 171
Czego się nauczyłeś? .....................................................................................................172
Lekcja 7 Tworzenie komponentów w języku MXML 175
Wprowadzenie do komponentów języka MXML ......................................................176
Podstawy tworzenia niestandardowych komponentów ........................................... 176
Tworzenie własnego komponentu krok po kroku ....................................................177
Wykorzystanie niestandardowych komponentów w architekturze aplikacji .......179
Tworzenie komponentu aktualizującego i usuwającego informacje
o produkcie oraz jego egzemplarza ........................................................................180
Wyświetlanie informacji o produkcie po kliknięciu przycisków aktualizacji
i usuwania .................................................................................................................184
Tworzenie kolejnego obiektu wartości .......................................................................189
Tworzenie komponentu zarządzającego danymi dla wszystkich trzech aplikacji ......... 191
Używanie nowego komponentu zarządzającego danymi .........................................197
Wprowadzanie funkcji dodawania produktu ........................................................... 200
Tworzenie i używanie komponentów dla aplikacji Dashboard ...............................201
Czego się nauczyłeś? .....................................................................................................203
Lekcja 8 Używanie kontrolek i komponentów Repeater ze zbiorami danych 205
Używanie zbiorów danych .......................................................................................... 206
Komponenty HorizontalList i TileList ......................................................................207
Wprowadzenie labelFunction ......................................................................................208
Wprowadzenie właściwości itemRenderer .................................................................209
Wyświetlanie kategorii za pomocą elementów HorizontalList i itemRenderer .................210
Wyświetlanie informacji o produktach spożywczych należących
do określonej kategorii ............................................................................................214
Używanie komponentu Repeater do wykonania pętli przeszukującej
zbiór danych .............................................................................................................. 214
Pobieranie danych z komponentów Repeater ........................................................... 215
Adresowanie komponentów utworzonych przez Repeater .....................................217
Wyjaśnienie różnic w wydajności komponentów TileList i Repeater ....................218
Wyświetlanie informacji o artykułach spożywczych należących
do określonej kategorii ............................................................................................. 218
Kodowanie stanów wyświetlających szczegółowe informacje o produkcie ........... 224
Umieszczanie produktów w koszyku na zakupy ...................................................... 227
Czego się nauczyłeś? .................................................................................................... 229
8 ADOBE FLEX 3.
Oficjalny podręcznik
Lekcja 9 Używanie zdarzeń niestandardowych 232
Korzyści ze stosowania luz
no powiązanej architektury ............................................232
Wysyłanie zdarzeń ........................................................................................................233
Deklarowanie zdarzeń komponentu ..........................................................................235
Kiedy używa się klas niestandardowych zdarzeń .......................................................236
Tworzenie i używanie CategoryEvent .........................................................................237
Tworzenie i używanie klasy ProductEvent ................................................................ 240
Używanie ProductEvent do usuwania produktu z koszyka ....................................244
Wykorzystanie ProductEvent do dodawania produktu do koszyka ......................246
Zrozumienie przepływu i bąbelkowania zdarzeń ..................................................... 247
Czego się nauczyłeś? .....................................................................................................252
Lekcja 10 Tworzenie niestandardowych komponentów w języku ActionScript 3.0 255
Wprowadzenie do tworzenia komponentów w języku ActionScript 3.0 ................256
Tworzenie struktury klasy ............................................................................................257
Nadpisywanie metody createChildren() .....................................................................259
Tworzenie przycisku w języku ActionScript ..............................................................260
Używanie metody addChild() do dodawania przycisku do komponentu ............260
Co to jest chrom i rawChildren ................................................................................... 261
Używanie metod addChild() i rawChildren do dodawania elementów
do chromu ..................................................................................................................262
Ustalanie rozmiarów i pozycji komponentów we Fleksie ........................................265
Zrozumienie metody measure() ................................................................................. 267
Nadpisywanie metody updateDisplayList() .............................................................. 267
Czego się nauczyłeś? .....................................................................................................273
Lekcja 11 Stosowanie siatek danych i rendererów elementów 276
Wprowadzenie do siatek danych i rendererów elementów ...................................... 277
Dodawanie standardowej siatki danych do komponentu ChartPod ..................... 277
Dodawanie wywołań HTTPService do aplikacji Dashboard ................................... 278
Wyświetlanie koszyka na zakupy w siatce danych .................................................... 282
Dodawanie kontrolek edycji w siatce do DataGridColumn ...................................284
Tworzenie renderera elementów służącego do wyświetlania informacji
o produkcie ................................................................................................................285
Tworzenie lokalnego renderera elementów w celu wyświetlenia
przycisku Remove .....................................................................................................287
Aktualizowanie ShoppingCartItem funkcjami Set i Get .........................................292
Używanie zaawansowanej siatki danych .....................................................................293
Sortowanie AdvancedDataGrid ...................................................................................294
Sortowanie w trybie zaawansowanym .........................................................................295
Nadawanie stylów zaawansowanej siatce danych ......................................................296
Grupowanie danych ......................................................................................................300
Wyświetlanie danych podsumowujących ...................................................................305
Czego się nauczyłeś? ..................................................................................................... 313
ADOBE FLEX 3. 9
Spis treści
Lekcja 12 Używanie techniki  przeciągnij i upuść 315
Wprowadzenie do menedżera przeciągania i upuszczania ....................................... 316
Przeciąganie i upuszczanie pomiędzy dwiema siatkami danych ............................. 317
Przeciąganie i upuszczanie między siatką danych i listą ...........................................320
Używanie komponentu z wyłączonym przeciąganiem w operacji przeciągania
i upuszczania ............................................................................................................324
Przeciąganie produktu do koszyka na zakupy ...........................................................329
Czego się nauczyłeś? .....................................................................................................334
Lekcja 13 Wprowadzanie nawigacji 337
Wprowadzenie do nawigacji ........................................................................................337
Używanie komponentu TabNavigator w aplikacji DataEntry .................................340
Dodawanie strony głównej i strony płatności w aplikacji e-commerce ...................343
Przygotowywanie pierwszego etapu procesu płatności wyświetlanego w ViewStack ........ 346
Wykorzystanie komponentu ViewStack do finalizacji płatności ............................353
Czego się nauczyłeś? .....................................................................................................358
Lekcja 14 Formatowanie i walidacja danych 361
Podstawowe informacje o klasach formatujących i walidujących ........................... 361
Wykorzystanie klasy Formatter do wyświetlania informacji o walucie ..................362
Korzystanie z klas walidatorów ...................................................................................366
Sprawdzanie poprawności danych za pomocą wyrażeń regularnych (część 1.) ..............368
Sprawdzanie poprawności danych za pomocą wyrażeń regularnych (część 2.) .............370
Tworzenie własnej klasy walidatora ............................................................................373
Czego się nauczyłeś? .....................................................................................................377
Lekcja 15 Zarządzanie historią i głębokie linkowanie 379
Wprowadzenie do zarządzania historią .....................................................................380
Implementowanie zarządzania historią w kontenerze nawigacyjnym ....................382
Tworzenie własnego mechanizmu zarządzania historią ...............................................383
Wprowadzenie do głębokiego linkowania .................................................................388
Głębokie linkowanie we Fleksie 3 ................................................................................388
Wykorzystanie techniki głębokiego linkowania w aplikacji ....................................388
Czego się nauczyłeś? .....................................................................................................393
Lekcja 16 Zmiana wyglądu aplikacji 396
Projekty oparte na stylach i skórkach .........................................................................396
Stosowanie stylów .........................................................................................................397
Nadawanie stylów przez atrybuty znaczników ..........................................................398
Dziedziczenie stylów .....................................................................................................400
Nadawanie stylów za pomocą znacznika ...............................................400
Korzystanie z narzędzi wspomagających pracę ze stylami .......................................403
Nadawanie stylów za pomocą plików CSS .................................................................404
10 ADOBE FLEX 3.
Oficjalny podręcznik
Zmiana stylów w trakcie działania aplikacji ..............................................................414
Korzyści płynące z wczytywania stylów ...................................................................... 414
Tworzenie pliku SWF z arkusza CSS ........................................................................... 414
Wczytywanie arkusza stylów za pomocą klasy StyleManager .................................414
Przesłanianie stylów we wczytanych plikach CSS ..................................................... 415
Tworzenie skórek dla komponentów ..........................................................................415
Skórki graficzne .............................................................................................................. 416
Importowanie skórek utworzonych w narzędziach z pakietu CS3 ......................... 416
Skórki programistyczne ................................................................................................ 419
Czego się nauczyłeś? .....................................................................................................423
Lekcja 17 Korzystanie z usług sieciowych 426
Komunikacja z serwerem ............................................................................................ 427
Stosowanie wywołań zdalnego modelu zdarzeń ....................................................... 428
Konfigurowanie aplikacji do lokalnej pracy ............................................................. 428
Wykorzystanie usług sieciowych w aplikacji Dashboard ......................................... 429
Obsługa wyników dostarczanych przez usługi sieciowe ..........................................432
Wywoływanie metod usług sieciowych .......................................................................434
Wykorzystanie usług 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 produktów ....................................................................... 447
Czego się nauczyłeś? .................................................................................................... 449
Lekcja 18 Dostęp do obiektów po stronie serwera 451
Przesyłanie plików na serwer .......................................................................................452
Integrowanie komponentu FileUpload z aplikacją DataEntry ..............................455
Korzystanie z klasy RemoteObject do zapisywania zamówienia .............................457
Aktualizowanie argumentów kompilatora Flex ........................................................459
Rozgłaszanie zdarzenia potwierdzającego proces zamawiania ...............................460
Tworzenie i wywoływanie obiektów RemoteObject .................................................460
Przekazywanie obiektu ShoppingCart do komponentu Checkout .......................464
Przywracanie aplikacji do stanu początkowego .........................................................464
Mapowanie obiektów ActionScript na obiekty serwera ........................................... 464
Kreatory dostępu do danych ....................................................................................... 467
Tworzenie projektu serwera ..........................................................................................468
Czego się nauczyłeś? .....................................................................................................471
Lekcja 19 Wizualizowanie danych 473
Komponenty wykresów we Fleksie ............................................................................. 474
Typy wykresów ................................................................................................................474
Pakiety z komponentami wykresów ............................................................................474
Elementy wykresu ..........................................................................................................475
Przygotowanie wykresów ............................................................................................. 476
ADOBE FLEX 3. 11
Spis treści
Wypełnianie wykresów danymi .................................................................................. 477
Określanie serii danych dla wykresu ...........................................................................478
Dodawanie poziomych i pionowych osi do wykresów liniowych
i kolumnowych ..........................................................................................................483
Dodawanie legendy do wykresu ................................................................................. 489
Ograniczanie liczby etykiet wyświetlanych na osi .................................................... 490
Interaktywność wykresów ............................................................................................491
Zdarzenia związane ze wskaz
nikiem myszy ...............................................................492
Zdarzenia związane z klikaniem ..................................................................................492
Zdarzenia związane z zaznaczaniem ...........................................................................492
Dodawanie zdarzeń do wykresów .............................................................................. 492
Dodawanie animacji do wykresów ............................................................................. 496
Personalizowanie wyglądu wykresu za pomocą stylów ............................................ 498
Czego się nauczyłeś? .....................................................................................................500
Lekcja 20 Tworzenie aplikacji modułowych 503
Wprowadzenie do tworzenia modułowych aplikacji we Fleksie ..............................503
Korzystanie z modułów Fleksa ....................................................................................505
Korzystanie z klasy modułu .........................................................................................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 bieżącego 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ę nauczyłeś? .....................................................................................................517
Lekcja 21 Wdrażanie aplikacji Fleksa 519
Kompilowanie wdrożeniowej wersji aplikacji ............................................................520
Porzucenie okna przeglądarki i przejście do AIR ......................................................520
Rozpoczęcie 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ę nauczyłeś? .....................................................................................................533
12 ADOBE FLEX 3.
Oficjalny podręcznik
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 efektów w komponencie ..............................................................539
Dodawanie efektów do stanów aplikacji ....................................................................541
Czego się nauczyłeś? .....................................................................................................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ę nauczyłeś? .....................................................................................................562
Lekcja 24 Stosowanie obiektów współdzielonych 565
Wprowadzenie do obiektów współdzielonych ..........................................................565
Tworzenie obiektów współdzielonych ........................................................................ 566
Odczytywanie obiektów współdzielonych .................................................................568
Tworzenie obiektu współdzielonego przechowującego zawartość koszyka ............569
Odczytywanie danych z istniejącego obiektu współdzielonego ..............................571
Czego się nauczyłeś? .....................................................................................................574
Lekcja 25 Debugowanie aplikacji we Fleksie 577
Wprowadzenie do technik debugowania ...................................................................577
Śledzenie wymiany danych między klientem a serwerem .........................................578
Zaawansowane korzystanie z debugera .......................................................................579
Więcej na temat ustawiania pułapek ...........................................................................579
Inspekcja zmiennych i powiązanych wartości ...........................................................580
Obsługa błędów za pomocą instrukcji try-catch ........................................................586
Korzystanie z instrukcji try-catch ................................................................................587
Występujące typy błędów ..............................................................................................588
Korzystanie z wielu bloków catch ...............................................................................588
Przykład wykonywania tylko jednego bloku catch ...................................................589
Przykład niewłaściwego zastosowania klasy Error w pierwszym bloku catch ..............590
Korzystanie z instrukcji finally ....................................................................................590
Korzystanie z instrukcji throw ..................................................................................... 591
Tworzenie własnych klas błędów .................................................................................592
Czego się nauczyłeś? .....................................................................................................594
Lekcja 26 Profilowanie aplikacji Fleksa 597
Wykorzystanie pamięci przez Flash Player ................................................................598
Alokowanie pamięci we Flash Playerze .......................................................................598
Przekazywanie przez referencję lub przez wartość ....................................................598
ADOBE FLEX 3. 13
Spis treści
Mechanizm oczyszczający pamięć we Flash Playerze ...............................................599
Oczyszczanie pamięci ....................................................................................................602
Profilowanie pamięci w aplikacjach Fleksa ............................................................... 604
Omówienie aplikacji ProfilerTest ................................................................................605
Profilowanie aplikacji ProfilerTest ..............................................................................607
Poprawianie klasy ImageDisplay ..................................................................................611
Profilowanie wydajności aplikacji Fleksa ...................................................................612
Profilowanie aplikacji ProfilerTest .............................................................................. 613
Poprawianie klasy ProfilerTest ..................................................................................... 615
Czego się nauczyłeś? ..................................................................................................... 615
Dodatek A Instalowanie oprogramowania 618
Skorowidz 621
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 programistów aplikacji siecio-
wych, 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 aplikacj
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, który ma zosta wykonany.
Wiele osób zajmuj cych si programowaniem po stronie serwera przywyk o do modelu
programowania sterowanego przep ywem, w którym 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 który 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:

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 owów pojedynczych i podwójnych. Cudzys owy podwójne otaczaj ca y wiersz kodu, a poje-
dyncze 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. 109
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,
która 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, który 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 , który informuje kompilator Fleksa, e kod w bloku Script jest
kodem ActionScript. Zamiast wi c umieszcza kod ActionScript, który 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, który ma zosta wykonany w odpowiedzi na zdarzenie, w funkcji.

private function clickHandler():void
{
myL.text="Button Clicked";
}
]]>

110 ADOBE FLEX 3.
Oficjalny podr cznik

label="Click Me"
click="clickHandler()"/>
Blok 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 dów 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 owów, do otoczenia
tekstu mog y zosta u yte cudzys owy podwójne.
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
zwrócona 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, które maj zosta przekazane, s wpisywane wewn trz nawia-
sów nast puj cych po nazwie funkcji, nast pnie uchwyt zdarzenia musi zosta zmodyfikowany tak,
by móg przyj te dane. Parametry, tak jak funkcje, równie powinny posiada typ, który funkcja
akceptuje.
W poni szym przyk adzie aplikacja jest zmodyfikowana tak, e a cuch znaków wy wietlany
w etykiecie jest przekazywany do uchwytu zdarzenia jako parametr.

private function clickHandler(toDisplay:String):void
{
myL.text=toDisplay;
}
]]>


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, któremu zosta nadany typ String.
Warto przechowywana w zmiennej toDisplay zostaje nast pnie wy wietlona jako w a ciwo text
etykiety.
LEKCJA 5. 111
Obs uga zdarze i struktury danych
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, które ich dotycz .
Przeanalizujmy poni szy fragment kodu:

creationComplete="addToTextArea('Application creationComplete')">

private function addToTextArea(eventText:String):void
{
var existingText:String=reportEvents.text;
reportEvents.text=existingText+eventText+"\n";
}
]]>

height="100"
width="200"
borderStyle="solid"
id="reportEvents" />





Spójrzmy 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 ele-
mentów, czyli Application, HBox, Label i Button, zostaje wywo ane wydarzenie creationComplete.
Gdy proces tworzenia ka dego z elementów zostaje zako czony, zdarzenie jest wysy ane i odpo-
wiedni dla niego a cuch znaków zostaje przekazany do uchwytu zdarzenia w celu wy wietlenia
w obszarze tekstowym.
Flex nie tworzy elementów w kolejno ci od góry 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 elementów 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.
112 ADOBE FLEX 3.
Oficjalny podr cznik
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 wyko-
rzystywane do pobierania danych. Kiedy wszystkie obiekty potomne obiektu Application zostan
ju utworzone, nadchodzi odpowiedni moment na danie danych z zewn trznego ród a i wyko-
rzystanie ich.
W nast pnym wiczeniu wprowadzimy dwie du e zmiany: utworzymy odwo anie do pliku zewn trz-
nego b d cego ród em danych, które zostan osadzone w aplikacji, oraz zastosujemy uchwyt zda-
rzenia do ledzenia niektórych danych w celu upewnienia si , e s one poprawnie pobierane.
Najpierw zostanie okre lony zewn trzny model XML dla znacznika . Nast pnie zdarzenie
creationComplete zostanie wykorzystane do wywo ania metody lub funkcji, która za pomoc
w asnej klasy ActionScript ostatecznie utworzy pojedyncze obiekty warto ci.
1. W programie Flex Builder otwórz plik src\assets\inventory.xml.
Plik ten jest zbiorem danych u ytych w poprzedniej lekcji, tylko e obecnie jest plikiem
zewn trznym.
2. Otwórz plik EComm.mxml, z którym 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 oraz znacznik zamykaj cy .
4. Dodaj na ko cu znacznika uko nik zamykaj cy:

5. Wewn trz znacznika wska zewn trzny plik XML, okre laj c warto atrybutu
source jako "assets\inventory.xml":

Znacznik 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 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. 113
Obs uga zdarze i struktury danych
Jak ju wyja nili my, je eli zdarzenie creationComplete znajduje si w znaczniku
, zostaje ono wys ane dopiero po utworzeniu wszystkich elementów
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
 groceryInventory:
layout="absolute"
creationComplete="prodHandler(groceryInventory)">
Identyfikator znacznika jest równy 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 dodaj blok . Zauwa , e Flex Builder
automatycznie dodaje znacznik CDATA. U góry bloku skryptu zdefiniuj funkcj prywatn typu
void o nazwie prodHandler(). Musi ona przyjmowa parametr typu Object o nazwie theItems.

private function prodHandler(theItems:Object):void
{
}
]]>

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
elementów 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).
114 ADOBE FLEX 3.
Oficjalny podr cznik
U ywanie danych z obiektu Event
Flex tworzy obiekt Event za ka dym razem, gdy zostaje wys ane zdarzenie. Obiekt ten zawiera in-
formacje o zdarzeniu, które 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 rodzajów obiektów zdarze , których mo na u y . Ogólny obiekt Event jest
zdefiniowany w klasie j zyka ActionScript. Ta ogólna wersja nie b dzie jednak dzia a a we wszyst-
kich zdarzeniach. Mo na si domy li , e najwa niejsza informacja zwrócona ze zdarzenia  prze-
ci gni cia i upuszczenia b dzie ró na od najwa niejszej informacji zwróconej po zako czeniu
wywo ania us ugi sieciowej. Z tego powodu ogólna klasa Event stanowi podstaw dla wielu innych klas
zdarze . Na poni szym rysunku wida , jak wiele innych klas jest opartych na ogólnej 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.
Ogólny 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, który 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 okre leniem tej w a ciwo ci, skoro jest to
zdarzenie, które wys a o inne zdarzenie, a nie cel czegokolwiek. Wyja ni si to w lekcji 9.,
 Stosowanie zdarze u ytkownika , i gdy dowiesz si czego o przep ywie zdarze .
LEKCJA 5. 115
Obs uga zdarze i struktury danych
Przyjrzyjmy si poni szemu kodowi, który wysy a obiekt zdarzenia, w tym przypadku obiekt
MouseEvent, do uchwytu zdarzenia.

private function clickHandler(event:MouseEvent):void
{
trace(event.type);
}
]]>


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 ród owy.
7. Przeszukaj opcj Main application file i zaznacz EventTest.mxml. Kliknij Finish.
W a nie utworzy e projekt. Mo esz uruchomi aplikacj , która 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 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:

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:
116 ADOBE FLEX 3.
Oficjalny podr cznik
private function doClick(event:MouseEvent):void
{
}
Mo na przyj spójne nazewnictwo dla uchwytów zdarze . Na przyk ad w tej lekcji u ywane
jest zdarzenie click obs ugiwane przez uchwyty zdarze o nazwach clickHandler()
i doClick(). Nie istnieje jedyna s uszna metoda nadawania nazw uchwytom zdarze ,
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
sposób. Debuger zostanie dok adnie omówiony 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 znaczników po lewej stronie kodu i numerów wierszy. Na pasku pojawi si
ma y niebieski punkt wskazuj cy miejsce, w którym 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. 117
Obs uga zdarze i struktury danych
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 której 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]. Znajd 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 omówione.
16. Kliknij znak + przed target, nast pnie kliknij znak + przed zestawem w a ciwo ci
[inherited] i znajd 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 górnym rogu ekranu
i wybieraj c Flex Development.
Je eli umie cisz kursor z lewej strony ikony Open Perspective, pojawi si podwójna strza ka.
Mo esz klikn i przeci gn okno w lewo w celu zwi kszenia ilo ci miejsca przydzielonego
perspektywom. B dzie widoczna zarówno 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.
118 ADOBE FLEX 3.
Oficjalny podr cznik
Tworzenie w asnej klasy j zyka ActionScript
Jak wspomniano pod koniec lekcji 2., ksi ka ta nie jest podr cznikiem programowania zoriento-
wanego 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 a ciwo
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 a ciwo ci/kompilator Fleksa/dodatkowe argumenty kompilatora) i dodaj na
ko cu istniej cych argumentów tekst -keep-generated-actionscript. W projekcie
zostanie automatycznie utworzony katalog generated, a w nim  wiele plików j zyka
ActionScript. Aktualne pliki aplikacji znajduj si w formularzu Name-generated.as. Nie
zapomnij o usuni ciu argumentu kompilatora po zako czeniu 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 niektórych wi-
cze przedstawionych w tej ksi ce, wliczaj c w to tworzenie w asnych klas zdarze oraz obiektów
warto ci. Niedawno poznali my obiekty zdarze . W lekcji 9. utworzymy obiekty zdarze do prze-
chowywania okre lonych danych i tworzenie w asnych klas j zyka ActionScript b dzie wówczas
konieczne.
Tworzenie obiektu warto ci
Obiekty warto ci (value objects, nazywane równie 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 obiektów 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
produktów spo ywczych, produktu przeniesionego do koszyka na zakupy oraz samego koszyka.
LEKCJA 5. 119
Obs uga zdarze i struktury danych
Najpierw jednak omówimy podstawy tworzenia klasy j zyka ActionScript. Poni ej zosta a poka-
zana bardzo prosta klasa:
W linii A wyra enie package reprezentuje struktur katalogu, w którym jest przechowywana klasa.
Plik jest przechowywany w katalogu grocery/product w strukturze plików 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,
która 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 apli-
kacji. W kolejnym wiczeniu utworzymy obiekt warto ci przechowuj cy informacje o produkcie
spo ywczym.
1. Utwórz 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 pól. 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 obiektów u ywanych pó niej
do opisywania ka dego z produktów spo ywczych. (Zobacz rysunek na nast pnej stronie).
120 ADOBE FLEX 3.
Oficjalny podr cznik
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. Utwórz 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:
package valueObjects{
[Bindable]
public class Product{
public var catID:Number;
LEKCJA 5. 121
Obs uga zdarze i struktury danych
public var prodName:String;
public var unitID:Number;
public var cost:Number;
public var listPrice:Number;
public var description:String;
public var isOrganic:Boolean;
public var isLowFat:Boolean;
public var imageName:String;
}
}
Tworzymy struktur danych przechowuj c informacje magazynowe dla sklepu spo ywczego.
Powy ej utworzyli my wszystkie w a ciwo ci, które zostan wykorzystane w tej klasie.
4. Wewn trz nawiasów klasy Product, za w a ciwo ci imageName, zdefiniuj funkcj konstruktora
klasy i okre l parametry, które 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 parametrów i w a ciwo ci
(wyst puj cej, gdy taka sama nazwa odnosi si do dwóch 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 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 równ odpowiedniemu parametrowi
przes anemu do konstruktora.
122 ADOBE FLEX 3.
Oficjalny podr cznik
Ka da w a ciwo wymieniona po lewej stronie znaku równo ci mo e mie przedrostek
this., na przyk ad this.catID = _catID;. Taki przedrostek jest czasem dodawany przez
programistów, którzy chc u ywa takich samych nazw w a ciwo ci oraz parametrów
i mimo to unika kolizji nazw. Przedrostek this odwo uje si do samej klasy.
6. Utwórz 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 znajd blok skryptu u góry 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 którym 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, które nie s
macierzystymi dla j zyka ActionScript, tak jak utworzona klasa Product, i zadeklarowa
wszystkie w a ciwo ci, które 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, utwórz nowy egzemplarz klasy
Product o nazwie theProduct. Wype nij i prze lij parametr do funkcji konstruktora z informacj
ze znacznika :
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
zostaj przekazane jako warto ci dla w a ciwo ci.
LEKCJA 5. 123
Obs uga zdarze i struktury danych
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 kreuj cej obiekt
Tak jak zrobili my to w poprzednim wiczeniu, mo na utworzy egzemplarz klasy Product, prze-
kazuj c wszystkie warto ci do metody konstruktora jako parametry. W tym zadaniu utworzymy
metod , która 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. Znajd 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, których u ywali my dot d, mog by stosowane
tylko z obiektami, których 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 której 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(), który korzysta z nazwy klasy wstawionej przed metod ,
a nie z nazwy obiektu, którego egzemplarz utworzono z klasy.
2. Wewn trz metody buildProduct() utwórz 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.
124 ADOBE FLEX 3.
Oficjalny podr cznik
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 . Kiedy s pobierane w ten
sposób, 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 zwróci obiekt warto ci Product utworzony przez przekazanie ogólnego
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, która zwraca
obiekt warto ci Product o nadanym mocnym typie z obiektu, który nie posiada nadanego typu.
6. Znajd w stanie rozszerzonym pierwszy kontener uk adu VBox, który wy wietla opis produktu
oraz informacje, czy jest on ekologiczny i dietetyczny. Zmie w a ciwo text znacznika
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 zarówno dla nazwy klasy, jak i jej w a ciwo ci. Kiedy kursor znajduje si wewn trz
nawiasów tworz cych powi zanie, naci nij Ctrl+spacja, aby uzyska pomoc we wpisywaniu
egzemplarza klasy Product  theProduct. Nast pnie, po wstawieniu kropki, zostan
wy wietlone w a ciwo ci.
LEKCJA 5. 125
Obs uga zdarze i struktury danych

width="50%"/>
text="Certified Organic"
visible="{theProduct.isOrganic}"/>
text="LowFat"
visible="{theProduct.isLowFat}"/>

Odwo ujesz si teraz do obiektu warto ci, który 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 produktów dodawanych do koszyka na zakupy. Jej
zadaniem b dzie ledzenie, jaki produkt zosta dodany oraz w jakiej ilo ci. Utworzymy metod , która
b dzie liczy a koszt zakupu tego produktu. Zbudujemy tak e szkielet klasy ShoppingCart, która b dzie
obs ugiwa a ca y uk ad logiczny koszyka na zakupy, wliczaj c w to dodawanie do niego elementów.
1. Utwórz nowy plik klasy j zyka ActionScript, wybieraj c z menu File/New/ActionScript class.
Ustaw warto Package równ valueObjects, dodaj c automatycznie t klas do utworzonego
wcze niej katalogu. Wprowad ShoppingCartItem w polu nazwy i pozostaw warto ci domy lne
dla wszystkich pozosta ych pól.
W tej klasie b dzie sprawdzana liczba produktów 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;
}
}
126 ADOBE FLEX 3.
Oficjalny podr cznik
Wa nym elementem koszyka na zakupy jest informacja, który 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:
package valueObjects {
public class ShoppingCartItem {
public var product:Product;
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:
package valueObjects {
public class ShoppingCartItem {
public var product:Product;
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 produktów. 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 równ 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 znaków równo ci przedrostkiem this. Przypisz równie 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, które zosta y do niego przekazane
 w tym przypadku b dzie to egzemplarz klasy Product oraz ilo , która otrzymuje domy ln
warto równ 1. Metoda ta zostanie u yta tylko podczas dodawania produktu do koszyka,
logiczne jest wi c zdefiniowanie ilo ci pocz tkowej równej 1.
LEKCJA 5. 127
Obs uga zdarze i struktury danych
7. Utwórz metod publiczn o nazwie recalc(), która 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
równ valueObjects, dodaj c automatycznie t klas do utworzonego wcze niej katalogu.
Wprowad ShoppingCart w polu nazwy i pozostaw warto ci domy lne dla wszystkich
pozosta ych pól.
Tworzymy now klas , która b dzie samym koszykiem wype nionym obiektami
shoppingCartItem. Jej zadaniem b dzie obróbka 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
produktów do koszyka, usuwanie ich z koszyka, aktualizacja produktów w koszyku itp.
9. Dodaj wyra enie import, które pozwoli u ywa narz dzi Fleksa, takich jak wyra enie trace,
wewn trz klasy:
package valueObjects{
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. Utwórz szkielet publicznej metody addItem() typu void przyjmuj cej parametr o nazwie
item typu ShoppingCartItem. Wewn trz metody dodaj wyra enie trace, które b dzie ledzi o
produkt dodany do koszyka:
package valueObjects{
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 pó niejszych 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.
128 ADOBE FLEX 3.
Oficjalny podr cznik
11. Otwórz w programie Flex Builder plik EComm.mxml i znajd 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 którym mie ci si klasa.
12. Pod wyra eniami import utwórz 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(), któr 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. Znajd w bloku 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 sposób 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() utwórz 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:

LEKCJA 5. 129
Obs uga zdarze i struktury danych
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 w celu utworzenia
struktury danych (s. 111  114),
zbada e obiekt zdarzenia, aby zrozumie , czym jest, i korzysta e z dwóch 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).