Adobe Flex 3 Oficjalny podręcznik

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¿liwoœ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 odpowiedŸ 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 wydajnoœæ i prostotê

programowania; Flash Player 9, pozwalaj¹cy na szybsz¹ pracê i wykorzystuj¹cy

mniejsz¹ iloœæ pamiêci; Flex Builder 3, udostêpniaj¹cy m.in. œ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¿liwoœci Fleksa i bêdziesz umia³ zastosowaæ

w praktyce nowoczesne narzêdzia, a tak¿e z ³atwoœ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

Wstęp

Wprowadzenie

Lekcja 1 Wprowadzenie do bogatych aplikacji internetowych

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

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

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

ADOBE FLEX 3.
Oficjalny podręcznik

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

Sterowanie stanami widoku ............................................................................................78

Projektowanie aplikacji w trybie edycji kodu ź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

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.

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

ADOBE FLEX 3.
Oficjalny podręcznik

Lekcja 9 Używanie zdarzeń niestandardowych

232

Korzyści ze stosowania luź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.

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 <mx:Style> ...............................................400
Korzystanie z narzędzi wspomagających pracę ze stylami .......................................403
Nadawanie stylów za pomocą plików CSS .................................................................404

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.

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 wskaź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

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.

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 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, 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:

U ytkownik oddzia'uje na aplikacj#.

Obiekt, na który oddzia'uje u ytkownik, tworzy zdarzenie.

Zdarzenie zostaje odczytane i uchwycone.

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'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

, 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

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

<mx:Script>

, 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.

<mx:Script>
<![CDATA[
private function clickHandler():void
{
myL.text="Button Clicked";
}
]]>
</mx:Script>

110

ADOBE FLEX 3.

Oficjalny podr.cznik

<mx:Label id="myL"/>

<mx:Button id="myButton"
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$#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.

<mx:Script>
<![CDATA[
private function clickHandler(toDisplay:String):void
{
myL.text=toDisplay;
}
]]>
</mx:Script>

<mx:Label id="myL"/>

<mx:Button id="myButton"
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:

<?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>

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

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

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 1ró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 1ró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

<mx:Model>

. 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.

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.

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.

Usu/ w#z'y potomne ze znacznika

<mx:Model>

oraz znacznik zamykaj!cy

</mx:Model>

Dodaj na ko/cu znacznika

<mx:Model>

uko$nik zamykaj!cy:

<mx:Model id="groceryInventory" />

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.

Do znacznika

<mx:Application>

dodaj zdarzenie

creationComplete

i spraw, by wywo'ywa'o

ono funkcj# uchwytu zdarzenia o nazwie

prodHandler()

, tak jak poni ej:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
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

<mx:Application>

, 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.

Prze$lij do funkcji

prodHandler()

struktur# danych utworzon! w znaczniku

<mx:Model>

—

groceryInventory

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="prodHandler(groceryInventory)">

Identyfikator znacznika

<mx:Model>

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.

Zaraz po istniej!cym znaczniku

<mx:Model>

dodaj blok

<mx:Script>

. 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

<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

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

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 okre0leniem tej w$a0ciwo0ci, skoro jest to
zdarzenie, które 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.

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.

<mx:Script>
<![CDATA[
private function clickHandler(event:MouseEvent):void
{
trace(event.type);
}
]]>
</mx/Script>

<mx:Label id="myL"/>

<mx:Button id="myButton"
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.

Wybierz z menu

File/New/Flex Project. Nadaj projektowi nazw# EventObject.

Ustal lokalizacj# pliku projektu jako

flexop\Lekcja05\eventObject\start.

Jako typ aplikacji wybierz

Web application.

Ustaw technologi# serwera jako

none

, a nast#pnie kliknij

Next.

Pozostaw typ folderu wyj$ciowego

bin-debug

i kliknij

Next.

Pozostaw

src jako g'ówny folder 1ród'owy.

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

Dodaj przycisk pomi#dzy zamykaj!cym znacznikiem

</mx:Script>

a ko/cem aplikacji.

Nadaj przyciskowi za pomoc! w'a$ciwo$ci

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

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 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
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

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

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 omówione.

16.

Kliknij znak

+ przed

target

, nast#pnie kliknij znak

+ przed zestawem w'a$ciwo$ci

[inherited]

i znajd1 w'a$ciwo$&

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 umie0cisz 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 ilo0ci 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@aAciwoAB

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 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 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 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 wartoAci (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.

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

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ó1niej
do opisywania ka dego z produktów spo ywczych. (Zobacz rysunek na nast#pnej stronie).

120

ADOBE FLEX 3.

Oficjalny podr.cznik

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.

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.

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

<mx:Model>

lub bazy danych do parametru

konstruktora.

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$a0ciwo0+ wymieniona po lewej stronie znaku równo0ci 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$a0ciwo0ci oraz parametrów
i mimo to unika+ kolizji nazw. Przedrostek this odwo$uje si# do samej klasy.

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.

Wró& do pliku

EComm.mxml i znajd1 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

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/.

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

<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.

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 kreujAcej 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.

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

static

, nazwanej

buildProduct()

. Upewnij si#, e zwracane przez ni! dane s! typu

Product

oraz e przyjmuje

ona parametr

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.

Wewn!trz metody

buildProduct()

utwórz egzemplarz klasy

Product

o nazwie

, u ywaj!c

s'owa kluczowego

new

. Ustaw w'a$ciwo$ci

catID

prodName

unitID

cost

listPrice

description

isOrganic

isLowFat

imageName

jako parametry konstruktora. B#dziesz

musia' rzutowa& zmienne

isOrganic

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

<mx:Model>

. Kiedy s! pobierane w ten

sposób, nie posiadaj! typu, wi#c warto$ci

true

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

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

isLowFat

Wró& do w'a$nie utworzonego obiektu, u ywaj!c s'owa kluczowego

return

z nazw! obiektu,

czyli

. 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.

Zapisz plik

Product.as.

Plik klasy zosta' zapisany z now! metod!. W widoku

Problems nie powinny pojawi& si# adne

komunikaty o b'#dach.

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.

Znajd1 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

<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 zarówno dla nazwy klasy, jak i jej w$a0ciwo0ci. Kiedy kursor znajduje si# wewn"trz
nawiasów 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.

125

Obs#uga zdarze( i struktury danych

<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, który utworzyli$my wcze$niej.

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.

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. Wprowad1

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.

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

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.

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.

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

quantity

oraz parametry typu

uint

. Poniewa konstruktor jest wywo'ywany tylko podczas tworzenia

produktu, ustaw warto$& parametru

quantity

równ!

public function ShoppingCartItem(product:Product, quantity:uint=1)
{
}

Pami#taj, e funkcje konstruktora musz! by& funkcjami publicznymi i nie mog! posiada& typu.

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!

. Metoda ta zostanie u yta tylko podczas dodawania produktu do koszyka,

logiczne jest wi#c zdefiniowanie ilo$ci pocz!tkowej równej

LEKCJA 5.

127

Obs#uga zdarze( i struktury danych

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&.

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.

Wprowad1

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.

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ó1niejszych 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 znajd1 blok skryptu. Pod wyra eniem

import

klasy

Product

zaimportuj klasy

ShoppingCartItem

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.

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 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

<mx:Button id="add" label="Add To Cart"
<click="addToCart(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

<mx:Application>

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).

Wyszukiwarka

Podobne podstrony:
Adobe Flex 4 Oficjalny podrecznik
Adobe Flex 4 Oficjalny podrecznik 2
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik Tom I fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Flex 4 Oficjalny podrecznik fl4op1
Adobe Pagemaker 7 0 Oficjalny Podrecznik

więcej podobnych podstron