Adobe Flex 3

33
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¹!

description

Adobe Flex 3

Transcript of Adobe Flex 3

Page 1: Adobe Flex 3

Adobe Flex 3.Oficjalny podrêcznikAutorzy: Jeff Tapper, Michael Labriola,Matthew Boles, James TalbotT³umaczenie: Andrzej Goñda, Aleksander Lam¿aISBN: 978-83-246-1966-5Tytu³ orygina³u: Adobe Flex 3: Training from the SourceFormat: 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 3i zbuduj samodzielnie wyj¹tkow¹ aplikacjê internetow¹!

Page 2: Adobe Flex 3

Spis treści

O autorach 15

Wstęp 17

Wprowadzenie 19

Lekcja 1 Wprowadzenie do bogatych aplikacji internetowych 29Rozwój aplikacji komputerowych ................................................................................ 29Odejście od architektury opartej na stronie ................................................................. 31Zalety bogatych aplikacji internetowych ......................................................................33

Menedżerowie przedsiębiorstw ...................................................................................... 33Przedsiębiorstwa branży IT ............................................................................................. 33Użytkownicy końcowi ..................................................................................................... 33

Technologie bogatych aplikacji internetowych ...........................................................33Asynchroniczny JavaScript i XML (AJAX) ..................................................................34Flash ................................................................................................................................... 35Flex ..................................................................................................................................... 35Windows Presentation Foundation, XAML, Silverlight i Expression ..................... 36

Czego się nauczyłeś? .......................................................................................................37

Lekcja 2 Zaczynamy 39Wstęp do programowania aplikacji Fleksa .................................................................. 40Tworzenie projektu i aplikacji MXML ........................................................................ 40Pulpit programu Flex Builder 3 .....................................................................................43Uruchamianie aplikacji ..................................................................................................46Tworzenie drugiej strony aplikacji w trybie projektowania .......................................52Przygotowania do następnej lekcji ................................................................................57Czego się nauczyłeś? .......................................................................................................58

Lekcja 3 Projektowanie interfejsu użytkownika 61Kontenery ........................................................................................................................ 61Tworzenie układu aplikacji e-commerce w trybie projektowania ..............................62Praca z układami opartymi na więzach ........................................................................68

Wiązanie do kontenera nadrzędnego ............................................................................69Użycie zaawansowanych więzów ...................................................................................74

Page 3: Adobe Flex 3

6 ADOBE FLEX 3.Oficjalny podręcznik

Praca ze stanami widoku ................................................................................................76Sterowanie stanami widoku ............................................................................................78

Projektowanie aplikacji w trybie edycji kodu źródłowego ......................................... 80Dodawanie stanów widoku i sterowanie nimi za pomocą MXML ...........................82

Czego się nauczyłeś? .......................................................................................................86

Lekcja 4 Stosowanie prostych kontrolek 89Wprowadzenie do prostych kontrolek ........................................................................ 90Wyświetlanie obrazów ....................................................................................................91Tworzenie widoku szczegółów ...................................................................................... 94Korzystanie z wiązania danych do powiązania struktury danych

z prostą kontrolką ..................................................................................................... 97Wykorzystywanie kontenera układu formularzy do umieszczania

prostych kontrolek w aplikacji ................................................................................. 99Dodawanie przycisków radiowych i pól daty do aplikacji Dashboard ................... 103Czego się nauczyłeś? ..................................................................................................... 105

Lekcja 5 Obsługa zdarzeń i struktury danych 107Zrozumienie obsługi zdarzeń ......................................................................................108

Prosty przykład ............................................................................................................... 108Obsługa zdarzenia przez funkcję języka ActionScript ............................................. 109Przekazywanie danych podczas wywołania funkcji uchwytu zdarzenia ................ 110

Tworzenie struktury danych w zdarzeniu creationComplete ...................................111Używanie danych z obiektu Event .............................................................................. 114Tworzenie własnej klasy języka ActionScript ............................................................. 118

Tworzenie obiektu wartości .......................................................................................... 118Tworzenie metody kreującej obiekt ............................................................................ 123Tworzenie klas koszyka na zakupy .............................................................................. 125Czego się nauczyłeś? .....................................................................................................129

Lekcja 6 Używanie zdalnych danych XML z kontrolkami 131Pobieranie danych XML za pośrednictwem HTTPService ....................................... 132

Tworzenie obiektu HTTPService ................................................................................. 132Wywoływanie metody send() ........................................................................................ 133Używanie zwróconych danych ..................................................................................... 133Zagadnienia bezpieczeństwa ........................................................................................ 134

Pobieranie danych XML za pośrednictwem HTTPService ....................................... 135Wypełnianie ArrayCollection danymi z HTTPService ............................................. 137

Używanie obiektów ArrayCollection .......................................................................... 137Używanie kolekcji w roli dostawców danych ............................................................. 138

Wypełnianie kontrolki ComboBox i programowe dodawanie opcji ......................140Używanie danych XML z kontrolką Tree ................................................................... 143

Pojęcie operatorów E4X ................................................................................................ 143Wypełnianie kontrolki Tree danymi XML ................................................................ 148

Pobieranie danych XML i przekształcanie ich w kolekcję ArrayCollectionobiektów użytkownika ............................................................................................. 154

Page 4: Adobe Flex 3

ADOBE FLEX 3. 7Spis treści

Stosowanie powiązania danych ze złożonymi strukturami danych ........................ 157Przekształcanie danych koszyka na zakupy ............................................................... 159

Dodawanie elementów do koszyka ............................................................................. 159Sortowanie elementów kolekcji ArrayCollection ..................................................... 160Dodawanie elementu lub aktualizowanie ilości ........................................................ 162Korzystanie z kursora do umieszczania elementu koszyka na zakupy .................. 164

Dodawanie przycisku Remove (usuń) ........................................................................ 171Czego się nauczyłeś? .....................................................................................................172

Lekcja 7 Tworzenie komponentów w języku MXML 175Wprowadzenie do komponentów języka MXML ...................................................... 176

Podstawy tworzenia niestandardowych komponentów ........................................... 176Tworzenie własnego komponentu krok po kroku .................................................... 177Wykorzystanie niestandardowych komponentów w architekturze aplikacji ....... 179

Tworzenie komponentu aktualizującego i usuwającego informacjeo produkcie oraz jego egzemplarza ........................................................................180

Wyświetlanie informacji o produkcie po kliknięciu przycisków aktualizacjii usuwania .................................................................................................................184

Tworzenie kolejnego obiektu wartości .......................................................................189Tworzenie komponentu zarządzającego danymi dla wszystkich trzech aplikacji ......... 191Używanie nowego komponentu zarządzającego danymi .........................................197Wprowadzanie funkcji dodawania produktu ........................................................... 200Tworzenie i używanie komponentów dla aplikacji Dashboard ...............................201Czego się nauczyłeś? .....................................................................................................203

Lekcja 8 Używanie kontrolek i komponentów Repeater ze zbiorami danych 205Używanie zbiorów danych .......................................................................................... 206

Komponenty HorizontalList i TileList ......................................................................207Wprowadzenie labelFunction ......................................................................................208Wprowadzenie właściwości itemRenderer .................................................................209

Wyświetlanie kategorii za pomocą elementów HorizontalList i itemRenderer .................210Wyświetlanie informacji o produktach spożywczych należących

do określonej kategorii ............................................................................................214Używanie komponentu Repeater do wykonania pętli przeszukującej

zbiór danych .............................................................................................................. 214Pobieranie danych z komponentów Repeater ........................................................... 215Adresowanie komponentów utworzonych przez Repeater ..................................... 217Wyjaśnienie różnic w wydajności komponentów TileList i Repeater .................... 218Wyświetlanie informacji o artykułach spożywczych należących

do określonej kategorii ............................................................................................. 218Kodowanie stanów wyświetlających szczegółowe informacje o produkcie ........... 224Umieszczanie produktów w koszyku na zakupy ...................................................... 227Czego się nauczyłeś? .................................................................................................... 229

Page 5: Adobe Flex 3

8 ADOBE FLEX 3.Oficjalny podręcznik

Lekcja 9 Używanie zdarzeń niestandardowych 232Korzyści ze stosowania luźno powiązanej architektury ............................................232Wysyłanie zdarzeń ........................................................................................................233Deklarowanie zdarzeń komponentu ..........................................................................235Kiedy używa się klas niestandardowych zdarzeń .......................................................236Tworzenie i używanie CategoryEvent .........................................................................237Tworzenie i używanie klasy ProductEvent ................................................................ 240

Używanie ProductEvent do usuwania produktu z koszyka ....................................244Wykorzystanie ProductEvent do dodawania produktu do koszyka ......................246

Zrozumienie przepływu i bąbelkowania zdarzeń ..................................................... 247Czego się nauczyłeś? .....................................................................................................252

Lekcja 10 Tworzenie niestandardowych komponentów w języku ActionScript 3.0 255Wprowadzenie do tworzenia komponentów w języku ActionScript 3.0 ................256Tworzenie struktury klasy ............................................................................................257Nadpisywanie metody createChildren() .....................................................................259

Tworzenie przycisku w języku ActionScript ..............................................................260Używanie metody addChild() do dodawania przycisku do komponentu ............260Co to jest chrom i rawChildren ................................................................................... 261Używanie metod addChild() i rawChildren do dodawania elementów

do chromu ..................................................................................................................262Ustalanie rozmiarów i pozycji komponentów we Fleksie ........................................265Zrozumienie metody measure() ................................................................................. 267Nadpisywanie metody updateDisplayList() .............................................................. 267Czego się nauczyłeś? .....................................................................................................273

Lekcja 11 Stosowanie siatek danych i rendererów elementów 276Wprowadzenie do siatek danych i rendererów elementów ...................................... 277Dodawanie standardowej siatki danych do komponentu ChartPod ..................... 277Dodawanie wywołań HTTPService do aplikacji Dashboard ................................... 278Wyświetlanie koszyka na zakupy w siatce danych .................................................... 282

Dodawanie kontrolek edycji w siatce do DataGridColumn ...................................284Tworzenie renderera elementów służącego do wyświetlania informacji

o produkcie ................................................................................................................285Tworzenie lokalnego renderera elementów w celu wyświetlenia

przycisku Remove .....................................................................................................287Aktualizowanie ShoppingCartItem funkcjami Set i Get .........................................292

Używanie zaawansowanej siatki danych .....................................................................293Sortowanie AdvancedDataGrid ...................................................................................294Sortowanie w trybie zaawansowanym .........................................................................295Nadawanie stylów zaawansowanej siatce danych ......................................................296Grupowanie danych ......................................................................................................300Wyświetlanie danych podsumowujących ...................................................................305

Czego się nauczyłeś? ..................................................................................................... 313

Page 6: Adobe Flex 3

ADOBE FLEX 3. 9Spis treści

Lekcja 12 Używanie techniki „przeciągnij i upuść” 315Wprowadzenie do menedżera przeciągania i upuszczania ....................................... 316Przeciąganie i upuszczanie pomiędzy dwiema siatkami danych ............................. 317Przeciąganie i upuszczanie między siatką danych i listą ...........................................320Używanie komponentu z wyłączonym przeciąganiem w operacji przeciągania

i upuszczania ............................................................................................................324Przeciąganie produktu do koszyka na zakupy ...........................................................329Czego się nauczyłeś? .....................................................................................................334

Lekcja 13 Wprowadzanie nawigacji 337Wprowadzenie do nawigacji ........................................................................................337Używanie komponentu TabNavigator w aplikacji DataEntry .................................340Dodawanie strony głównej i strony płatności w aplikacji e-commerce ...................343Przygotowywanie pierwszego etapu procesu płatności wyświetlanego w ViewStack ........ 346Wykorzystanie komponentu ViewStack do finalizacji płatności ............................ 353Czego się nauczyłeś? .....................................................................................................358

Lekcja 14 Formatowanie i walidacja danych 361Podstawowe informacje o klasach formatujących i walidujących ........................... 361Wykorzystanie klasy Formatter do wyświetlania informacji o walucie ..................362Korzystanie z klas walidatorów ...................................................................................366Sprawdzanie poprawności danych za pomocą wyrażeń regularnych (część 1.) ..............368Sprawdzanie poprawności danych za pomocą wyrażeń regularnych (część 2.) .............370Tworzenie własnej klasy walidatora ............................................................................373Czego się nauczyłeś? .....................................................................................................377

Lekcja 15 Zarządzanie historią i głębokie linkowanie 379Wprowadzenie do zarządzania historią .....................................................................380Implementowanie zarządzania historią w kontenerze nawigacyjnym ....................382Tworzenie własnego mechanizmu zarządzania historią ...............................................383Wprowadzenie do głębokiego linkowania .................................................................388

Głębokie linkowanie we Fleksie 3 ................................................................................388Wykorzystanie techniki głębokiego linkowania w aplikacji ....................................388

Czego się nauczyłeś? .....................................................................................................393

Lekcja 16 Zmiana wyglądu aplikacji 396Projekty oparte na stylach i skórkach .........................................................................396Stosowanie stylów .........................................................................................................397

Nadawanie stylów przez atrybuty znaczników ..........................................................398Dziedziczenie stylów .....................................................................................................400Nadawanie stylów za pomocą znacznika <mx:Style> ...............................................400Korzystanie z narzędzi wspomagających pracę ze stylami .......................................403Nadawanie stylów za pomocą plików CSS .................................................................404

Page 7: Adobe Flex 3

10 ADOBE FLEX 3.Oficjalny podręcznik

Zmiana stylów w trakcie działania aplikacji ..............................................................414Korzyści płynące z wczytywania stylów ...................................................................... 414Tworzenie pliku SWF z arkusza CSS ........................................................................... 414Wczytywanie arkusza stylów za pomocą klasy StyleManager ................................. 414Przesłanianie stylów we wczytanych plikach CSS ..................................................... 415

Tworzenie skórek dla komponentów .......................................................................... 415Skórki graficzne .............................................................................................................. 416Importowanie skórek utworzonych w narzędziach z pakietu CS3 ......................... 416Skórki programistyczne ................................................................................................ 419

Czego się nauczyłeś? .....................................................................................................423

Lekcja 17 Korzystanie z usług sieciowych 426Komunikacja z serwerem ............................................................................................ 427Stosowanie wywołań zdalnego modelu zdarzeń ....................................................... 428Konfigurowanie aplikacji do lokalnej pracy ............................................................. 428Wykorzystanie usług sieciowych w aplikacji Dashboard ......................................... 429

Obsługa wyników dostarczanych przez usługi sieciowe ..........................................432Wywoływanie metod usług sieciowych .......................................................................434

Wykorzystanie usług sieciowych w aplikacji DataEntry ...........................................436Korzystanie z kreatora Web Service Introspection ...................................................441Korzystanie z wygenerowanego kodu w aplikacjach .................................................443Refaktoryzacja we Flex Builderze ................................................................................445Finalizowanie łączenia wygenerowanego kodu z aplikacją ..................................... 446Uaktualnianie i usuwanie produktów ....................................................................... 447Czego się nauczyłeś? .................................................................................................... 449

Lekcja 18 Dostęp do obiektów po stronie serwera 451Przesyłanie plików na serwer .......................................................................................452

Integrowanie komponentu FileUpload z aplikacją DataEntry ..............................455Korzystanie z klasy RemoteObject do zapisywania zamówienia .............................457

Aktualizowanie argumentów kompilatora Flex ........................................................459Rozgłaszanie zdarzenia potwierdzającego proces zamawiania ...............................460Tworzenie i wywoływanie obiektów RemoteObject .................................................460Przekazywanie obiektu ShoppingCart do komponentu Checkout .......................464Przywracanie aplikacji do stanu początkowego .........................................................464

Mapowanie obiektów ActionScript na obiekty serwera ........................................... 464Kreatory dostępu do danych ....................................................................................... 467

Tworzenie projektu serwera ..........................................................................................468Czego się nauczyłeś? .....................................................................................................471

Lekcja 19 Wizualizowanie danych 473Komponenty wykresów we Fleksie ............................................................................. 474

Typy wykresów ................................................................................................................474Pakiety z komponentami wykresów ............................................................................474Elementy wykresu ..........................................................................................................475

Przygotowanie wykresów ............................................................................................. 476

Page 8: Adobe Flex 3

ADOBE FLEX 3. 11Spis treści

Wypełnianie wykresów danymi .................................................................................. 477Określanie serii danych dla wykresu ...........................................................................478Dodawanie poziomych i pionowych osi do wykresów liniowych

i kolumnowych ..........................................................................................................483Dodawanie legendy do wykresu ................................................................................. 489Ograniczanie liczby etykiet wyświetlanych na osi .................................................... 490Interaktywność wykresów ............................................................................................491

Zdarzenia związane ze wskaźnikiem myszy ...............................................................492Zdarzenia związane z klikaniem ..................................................................................492Zdarzenia związane z zaznaczaniem ...........................................................................492

Dodawanie zdarzeń do wykresów .............................................................................. 492Dodawanie animacji do wykresów ............................................................................. 496Personalizowanie wyglądu wykresu za pomocą stylów ............................................ 498Czego się nauczyłeś? .....................................................................................................500

Lekcja 20 Tworzenie aplikacji modułowych 503Wprowadzenie do tworzenia modułowych aplikacji we Fleksie ..............................503Korzystanie z modułów Fleksa ....................................................................................505

Korzystanie z klasy modułu .........................................................................................505Wprowadzenie znacznika ModuleLoader ..................................................................507

Mechanizm RSL ............................................................................................................508Zadania konsolidatora .................................................................................................. 510

Przechowywanie bibliotek RSL ................................................................................... 511Cel przechowywania bibliotek ......................................................................................511Podpisane i niepodpisane biblioteki RSL .................................................................. 512Kontrolowanie bieżącego rozmiaru aplikacji ............................................................ 512Dostosowanie aplikacji do korzystania z bibliotek RSL .......................................... 513Skontrolowanie zmian dokonanych przez zastosowanie bibliotek RSL ............... 514

Tworzenie projektu biblioteki ..................................................................................... 515Dodawanie do biblioteki klas i danych ...................................................................... 515Wykorzystanie biblioteki w aplikacji FlexGrocer ..................................................... 516

Czego się nauczyłeś? ..................................................................................................... 517

Lekcja 21 Wdrażanie aplikacji Fleksa 519Kompilowanie wdrożeniowej wersji aplikacji ............................................................520Porzucenie okna przeglądarki i przejście do AIR ......................................................520

Rozpoczęcie pracy ze środowiskiem AIR ................................................................... 521Instalowanie środowiska uruchomieniowego AIR ................................................... 521Instalowanie pierwszej aplikacji ...................................................................................522

Tworzenie aplikacji AIR ...............................................................................................523Tworzenie nowego projektu AIR .................................................................................523Przenoszenie aplikacji Dashboard do projektu AIR ................................................525Dostosowanie aplikacji za pomocą pliku XML .........................................................526Eksportowanie pliku AIR .............................................................................................529

Czego się nauczyłeś? .....................................................................................................533

Page 9: Adobe Flex 3

12 ADOBE FLEX 3.Oficjalny podręcznik

Lekcja 22 Tworzenie przejść i zachowań 535Wprowadzenie do zachowań i przejść ........................................................................535

Wykorzystanie zachowań w komponentach .............................................................. 536Wykorzystanie przejść w stanach aplikacji .................................................................538

Implementowanie efektów w komponencie ..............................................................539Dodawanie efektów do stanów aplikacji .................................................................... 541Czego się nauczyłeś? .....................................................................................................542

Lekcja 23 Drukowanie we Fleksie 546Wprowadzenie do drukowania we Fleksie ..................................................................547Pierwszy wydruk z Fleksa .............................................................................................547Korzystanie z klasy PrintDataGrid w niewidocznych kontenerach ........................549Tworzenie widoku drukowania w osobnym komponencie ....................................553Skalowanie drukowanego dokumentu .......................................................................555Drukowanie potwierdzenia procesu zamawiania ......................................................559Czego się nauczyłeś? .....................................................................................................562

Lekcja 24 Stosowanie obiektów współdzielonych 565Wprowadzenie do obiektów współdzielonych ..........................................................565

Tworzenie obiektów współdzielonych ........................................................................ 566Odczytywanie obiektów współdzielonych .................................................................568

Tworzenie obiektu współdzielonego przechowującego zawartość koszyka ............569Odczytywanie danych z istniejącego obiektu współdzielonego .............................. 571Czego się nauczyłeś? .....................................................................................................574

Lekcja 25 Debugowanie aplikacji we Fleksie 577Wprowadzenie do technik debugowania ...................................................................577Śledzenie wymiany danych między klientem a serwerem .........................................578Zaawansowane korzystanie z debugera .......................................................................579

Więcej na temat ustawiania pułapek ...........................................................................579Inspekcja zmiennych i powiązanych wartości ...........................................................580

Obsługa błędów za pomocą instrukcji try-catch ........................................................586Korzystanie z instrukcji try-catch ................................................................................587Występujące typy błędów ..............................................................................................588Korzystanie z wielu bloków catch ...............................................................................588Przykład wykonywania tylko jednego bloku catch ...................................................589Przykład niewłaściwego zastosowania klasy Error w pierwszym bloku catch ..............590Korzystanie z instrukcji finally ....................................................................................590Korzystanie z instrukcji throw ..................................................................................... 591Tworzenie własnych klas błędów .................................................................................592

Czego się nauczyłeś? .....................................................................................................594

Lekcja 26 Profilowanie aplikacji Fleksa 597Wykorzystanie pamięci przez Flash Player ................................................................598

Alokowanie pamięci we Flash Playerze .......................................................................598Przekazywanie przez referencję lub przez wartość ....................................................598

Page 10: Adobe Flex 3

ADOBE FLEX 3. 13Spis treści

Mechanizm oczyszczający pamięć we Flash Playerze ...............................................599Oczyszczanie pamięci ....................................................................................................602

Profilowanie pamięci w aplikacjach Fleksa ............................................................... 604Omówienie aplikacji ProfilerTest ................................................................................605Profilowanie aplikacji ProfilerTest ..............................................................................607Poprawianie klasy ImageDisplay ..................................................................................611

Profilowanie wydajności aplikacji Fleksa ...................................................................612Profilowanie aplikacji ProfilerTest .............................................................................. 613Poprawianie klasy ProfilerTest ..................................................................................... 615

Czego się nauczyłeś? ..................................................................................................... 615

Dodatek A Instalowanie oprogramowania 618

Skorowidz 621

Page 11: Adobe Flex 3

5 Obs#uga zdarze(

i struktury danych

Wa n! cz#$ci! tworzenia bogatych aplikacji internetowych jest zbudowanie efektywnej architekturypo stronie klienta. Za pomoc! programu Flash Player do tworzenia aplikacji mo na u y& opartegona 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, sterowanegoprzep'ywem. Korzystanie z opartej na zdarzeniach architektury po stronie klienta skutkuje lepiejdzia'aj!cymi aplikacjami, w mniejszym stopniu obci! aj!cymi sie&, poniewa nie jest konieczne ci!g'eod$wie anie strony. W tej lekcji zastosujemy techniki programowania opartego na zdarzeniachz niestandardowymi klasami ActionSriptu we Fleksie.

Uko!czona struktura danych FlexGrocer, utworzona w j,zyku ActionScript 3.0 i zintegrowana z aplikacj3

Page 12: Adobe Flex 3

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 przezu 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 niewidocznegoelementu). 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 modeluprogramowania sterowanego przep$ywem, w którym to programista decyduje o przebiegudzia$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 przezu 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 zostajewys'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 onychcudzys'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 skalarneto proste typy danych, takie jak 'a/cuchy znakowe, liczby lub warto$ci logiczne. U ywali$my ichna przyk'ad do okre$lania warto$ci wspó'rz#dnych x i y, szeroko$ci i warto$ci wy$wietlanych w ety-

Page 13: Adobe Flex 3

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 nawiasachklamrowych. W ostatniej lekcji nawiasy pozwala'y na wprowadzenie kodu ActionScript jako warto$ciw'a$ciwo$ci.

Je eli w'a$ciwo$& zostaje przypisana do zdarzenia, jest ona rozumiana przez kompilator Fleksa jakokod 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='ButtonClicked'".

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# jednakproblem, gdy trzeba wpisa& wi#cej ni dwa wiersze kodu ActionScript, który ma zosta& wykonanyw 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& tenkod 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 onaumieszczona w bloku <mx:Script>, który informuje kompilator Fleksa, e kod w bloku Script jestkodem ActionScript. Zamiast wi#c umieszcza& kod ActionScript, który ma zosta& wykonany, jakowarto$& zdarzenia click, lepiej jest wywo'a& funkcj#. Poni ej znajduje si# kod wykonuj!cy dok'adnieto samo, co zaprezentowany wcze$niej. Ró nica polega na tym, e korzystano z zalecanej technikiumieszczania 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>

Page 14: Adobe Flex 3

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, cozabezpiecza przed wygenerowaniem b$#dów XML dla tego bloku.

Teraz, gdy zostanie klikni#ty przycisk, zostaje wywo'ana funkcja clickHandler() i do etykiety zostajewpisany 'a/cuch znakowy. Poniewa nie ma w kodzie zagnie d onych cudzys'owów, do otoczeniatekstu 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 zostajezwró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'ato 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 funkcjaakceptuje.

W poni szym przyk'adzie aplikacja jest zmodyfikowana tak, e 'a/cuch znaków wy$wietlanyw 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/cuchValue 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$& textetykiety.

Page 15: Adobe Flex 3

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 poprawnymumieszczeniu 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 creationCompleteobiektu 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 nazwieeventText 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$wietleniaw obszarze tekstowym.

Flex nie tworzy elementów w kolejno$ci od góry do do'u. Nale y sobie wyobra a& ten proces raczejjako tworzenie od $rodka na zewn!trz. Zdarzenia creationComplete s! wi#c wysy'ane najpierw przezkontrolki Label i Button. Nast#pnie, skoro tworzenie elementów potomnych kontenera HBox zosta'ozako/czone, zdarzenie creationComplete zostaje wys'ane przez HBox. W ko/cu, gdy wszystkieelementy potomne aplikacji zosta'y utworzone, sam element Application mo e wys'a& zdarzeniecreationComplete.

Page 16: Adobe Flex 3

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 zdarzeniecreationComplete 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 plikiemzewn#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 <mx:Model> oraz znacznik zamykaj!cy </mx:Model>.

4. Dodaj na ko/cu znacznika <mx:Model> uko$nik zamykaj!cy:

<mx:Model id="groceryInventory" />

5. Wewn!trz znacznika <mx:Model> wska zewn#trzny plik XML, okre$laj!c warto$& atrybutusource jako "assets\inventory.xml":

<mx:Model id="groceryInventory" source="assets/inventory.xml"/>

Znacznik <mx:Model> automatycznie przeprowadzi analiz# sk'adniow! danych z zewn#trznegopliku XML do pierwotnej postaci struktury danych ActionScriptu — w tym przypadkuobiektu. W lekcji 6., „U ywanie zdalnych danych XML z kontrolkami”, napiszemy wi#cejo bardziej z'o onych strukturach danych.

6. Do znacznika <mx:Application> dodaj zdarzenie creationComplete i spraw, by wywo'ywa'oono funkcj# uchwytu zdarzenia o nazwie prodHandler(), tak jak poni ej:

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

Page 17: Adobe Flex 3

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ówpotomnych tego znacznika. Jest to korzystne, poniewa oznacza, e wszystkie elementyaplikacji s! ju gotowe do u ycia.

7. 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 wykorzystanydo wi!zania danych.

Je%eli zosta$a utworzona zmienna lub funkcja, podczas wpisywania znacznika dost#pnajest pomoc. W tym przypadku, wprowadzaj"c nazw# zmiennej groceryInventory jakoparametr funkcji, mo%na wpisa+ gr, nast#pnie wcisn"+ Ctrl+spacja i wybra+ nazw#zmiennej z listy.

8. Zaraz po istniej!cym znaczniku <mx:Model> dodaj blok <mx:Script>. Zauwa , e Flex Builderautomatycznie dodaje znacznik CDATA. U góry bloku skryptu zdefiniuj funkcj# prywatn! typuvoid 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 jakoprywatna, co oznacza, e mo e by& u ywana tylko wewn!trz klasy. Funkcja b#dzie przyjmowa'apojedynczy parametr typu Object oraz nie b#dzie zwraca'a adnej warto$ci, poniewa jakotyp zwracany zosta' okre$lony void.

9. Wewn!trz funkcji prodHandler() dodaj dwa wyra enia trace, wy$wietlaj!ce nazw# i kosztelementó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 powinnaby& widoczna nazwa produktu i jego koszt. B#dziesz musia' zminimalizowa& wy$wietlone oknoprzegl!darki oraz wybra& z menu opcj# Window/Console, je eli widok Console nie jest wy$wietlany.(Zobacz rysunek na nast#pnej stronie).

Page 18: Adobe Flex 3

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 zostaniewykorzystany. B#dzie jednak cz#sto stosowany. Zwykle obiekt zdarzenia jest wysy'any do uchwytuzdarzenia 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 jestzdefiniowany 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/czeniuwywo'ania us'ugi sieciowej. Z tego powodu ogólna klasa Event stanowi podstaw# dla wielu innych klaszdarze/. Na poni szym rysunku wida&, jak wiele innych klas jest opartych na ogólnej klasie Eventlub stanowi jej podklasy.

Czy wszystkie te obiekty zdarze/ s! potrzebne? Potrzebne s! te zawieraj!ce wszystkie potrzebneinformacje, ale nie ich nadmiar.

Ogólny obiekt Event zawiera w'a$ciwo$ci u yte we wszystkich obiektach typu zdarzenie. Dwa 'atwedo zrozumienia typy to type i target. W'a$ciwo$& type zdarzenia jest 'a/cuchem zawieraj!cymnazw# uchwyconego zdarzenia, na przyk'ad click lub creationComplete. W'a$ciwo$& targetwskazuje element, który wys'a' zdarzenie, na przyk'ad element Button, je eli zdarzenie zosta'owys'ane przed klikni#ciem przycisku.

Target (cel) mo%e wydawa+ si# dziwnym okre0leniem tej w$a0ciwo0ci, skoro jest tozdarzenie, 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.

Page 19: Adobe Flex 3

LEKCJA 5. 115

Obs#uga zdarze( i struktury danych

Przyjrzyjmy si# poni szemu kodowi, który wysy'a obiekt zdarzenia, w tym przypadku obiektMouseEvent, 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 debugowaniaaplikacji 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 trzechaplikacji 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 1ró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 wykorzystywanado eksperymentowania z obiektem zdarzenia. Plik ten jest tylko szkieletem aplikacji z dodanymblokiem Script.

8. Dodaj przycisk pomi#dzy zamykaj!cym znacznikiem </mx:Script> a ko/cem aplikacji.Nadaj przyciskowi za pomoc! w'a$ciwo$ci id nazw# egzemplarza myButton. Dodaj w'a$ciwo$&label o warto$ci Click To Debug. Dodaj zdarzenie click i spowoduj, by wywo'ywa'o onouchwyt 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 niejwys'any obiekt event.

9. W bloku skryptu dodaj prywatn! funkcj# typu void o nazwie doClick(). Przyjmij parametrtypu MouseEvent o nazwie event, tak jak poni ej:

Page 20: Adobe Flex 3

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%ywanejest 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 najprostszysposób. Debuger zostanie dok'adnie omówiony w lekcji 25., „Debugowanie aplikacjiwe Fleksie”. Tutaj u yjemy go do przyjrzenia si# obiektowi zdarzenia.

10. Dodaj punkt przerwania programu na zamykaj!cym funkcj# nawiasie klamrowym, dwukrotnieklikaj!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 zostanieszpoproszony 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).

Page 21: Adobe Flex 3

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 umieszczonaw 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 elementemwysy'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$& 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 kwadracikw widoku Debug lub Console, by zako/czy& debugowanie.

Nie zapominaj o tym, aby zako/czy& sesj# debugowania. Mo liwe jest dzia'anie jednej sesjidebugowania 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 ekranui 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 przydzielonegoperspektywom. 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.

Page 22: Adobe Flex 3

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@aAciwoABi 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 niewiedzie&, poniewa Flex ukrywa je przed programist!. Podczas tworzenia aplikacji w j#zyku MXMLtworzymy tak naprawd# now! klas# j#zyka ActionScript. Kod MXML jest po'!czony z kodemActionScript w bloku skryptu i jest tworzona czysta klasa j#zyka ActionScript skompilowana dopliku .swf, gotowego do u ycia przez program Flash Player. W ostatnim &wiczeniu po utworzeniuEventTest.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 wynikuutworzenia ka dej z aplikacji w tej ksi! ce.

Aby widzie+ tworzony kod j#zyka ActionScript, nale%y doda+ argument kompilatora weFlex Builderze. Przejd; do Project/Properties/Flex Compiler/Additional compiler arguments(projekt/w$a0ciwo0ci/kompilator Fleksa/dodatkowe argumenty kompilatora) i dodaj nako4cu istniej"cych argumentów tekst -keep-generated-actionscript. W projekciezostanie automatycznie utworzony katalog generated, a w nim — wiele plików j#zykaActionScript. Aktualne pliki aplikacji znajduj" si# w formularzu Name-generated.as. Niezapomnij 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!cz 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ówwarto$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ówczaskonieczne.

Tworzenie obiektu warto@ci

Obiekty wartoAci (value objects, nazywane równie obiektami transferu danych — DTO), lub po prostu obiektytransferu, przechowuj! dowolne dane zwi!zane z obiektem, nie zawieraj! szczegó'owego kodu i logikibiznesowej 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 zapleczaaplikacji w celu zachowania ich na sta'e w bazie danych. W tej lekcji utworzymy obiekty warto$ci dlaproduktów spo ywczych, produktu przeniesionego do koszyka na zakupy oraz samego koszyka.

Page 23: Adobe Flex 3

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 nowyegzemplarz 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 produkciespo 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 spowodujeautomatyczne 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, abyutworzy& plik.

Zostaje utworzony plik o nazwie Product.as, zawieraj!cy podstawow! struktur# klasy j#zykaActionScript. Wyra enia package i class s! s'owami kluczowymi u ytymi w definicji tejklasy. Nale y pami#ta&, e b#dzie ona podstaw! dla wielu obiektów u ywanych pó1niejdo opisywania ka dego z produktów spo ywczych. (Zobacz rysunek na nast#pnej stronie).

Page 24: Adobe Flex 3

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!zanaz kontrolk! lub inn! struktur! danych). Zamiast okre$lania ca'ej klasy jako [Bindable] mo naokre$li& pojedyncze w'a$ciwo$ci. W przypadku aplikacji FlexGrocer ka da w'a$ciwo$& powinnaby& 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;

Page 25: Adobe Flex 3

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# konstruktoraklasy 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 yje 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 nanada& 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 parametrukonstruktora.

5. Wewn!trz funkcji konstruktora nadaj ka dej w'a$ciwo$ci warto$& przes'an! do funkcjikonstruktora.

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 parametrowiprzes'anemu do konstruktora.

Page 26: Adobe Flex 3

122 ADOBE FLEX 3.

Oficjalny podr.cznik

Ka%da w$a0ciwo0+ wymieniona po lewej stronie znaku równo0ci mo%e mie+ przedrostekthis., na przyk$ad this.catID = _catID;. Taki przedrostek jest czasem dodawany przezprogramistów, którzy chc" u%ywa+ takich samych nazw w$a0ciwo0ci oraz parametrówi 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 pobieraniunazwy. 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!ckod dziedziczony. Metoda toString() jest wywo'ywana automatycznie przez szkielet Fleksaza ka dym razem, gdy obiekt jest $ledzony. Jest to bardzo przydatne podczas debugowaniai wy$wietlania struktur danych.

7. Wró& do pliku EComm.mxml i znajd1 blok skryptu u góry strony. Poni ej znacznika CDATAzaimportuj klas# Product z katalogu valueObjects.

import valueObjects.Product;

W celu u ycia klasy niestandardowej Flex Builder musi skorzysta& z wyra enia importodwo'uj!cego si# do po'o enia lub pakietu, w którym klasa jest umieszczona. Kiedy tworzonajest w'asna klasa, nale y j! zaimportowa&, aby by'a dost#pna dla szkieletu Fleksa. Wykonujesi# 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 ypodczas tworzenia pliku MXML stosowa& t# sam! konwencj#, co podczas tworzenia klasyj#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 blokuskryptu. Znacznik metadanych [Bindable] gwarantuje, e warto$& tej w'a$ciwo$ci mo ezosta& u yta w wyra eniach powi!za/.

9. Wewn!trz funkcji prodHandler(), ale powy ej wyra e/ trace, utwórz nowy egzemplarz klasyProduct 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.

Page 27: Adobe Flex 3

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 utworzymymetod#, która przyjmuje obiekt zawieraj!cy wszystkie pary w'a$ciwo$& – warto$& i zwraca egzemplarzklasy Product. Trzeba zauwa y&, e dla poprawnego dzia'ania tej metody obiekt przekazywany doniej musi zawiera& nazwy w'a$ciwo$ci dok'adnie odpowiadaj!ce tym u ytym w klasie.

1. Upewnij si#, e klasa Product w katalogu valueObjects jest otwarta. Znajd1 metod# toString()i dodaj za ni! szkielet nowej metody o w'a$ciwo$ciach public i static, nazwanejbuildProduct(). Upewnij si#, e zwracane przez ni! dane s! typu Product oraz e przyjmujeona 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 obiektuz klasy. Metody egzemplarzowe, tak jak te, których u ywali$my dot!d, mog! by& stosowanetylko z obiektami, których egzemplarze s! tworzone z klasy. Metody zadeklarowane jakostatyczne mog! by& u ywane bezpo$rednio z klasy. Metody statyczne s! przydatne w programachu ytkowych, na przyk'ad tworzona tutaj statyczna metoda buildObject(), do której chcemymie& dost#p bez potrzeby tworzenia wcze$niej obiektu. Odpowiednio u yte metody statycznemog! 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$myzastosowa& 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!cs'owa kluczowego new. Ustaw w'a$ciwo$ci catID, prodName, unitID, cost, listPrice,description, isOrganic, isLowFat i imageName jako parametry konstruktora. B#dzieszmusia' rzutowa& zmienne isOrganic i isLowFat do typu boolowskiego.

Page 28: Adobe Flex 3

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 tensposób, nie posiadaj! typu, wi#c warto$ci true i false s! traktowane jak zwyk'e 'a/cuchyznakowe. Rzutowanie zmiennej dostarcza kompilatorowi informacji, e ma traktowa&warto$& jako dan! okre$lonego typu. W tym przyk'adzie informujesz kompilator, e Ty jakoprogramista wiesz, e w'a$ciwo$ci isOrganic i isLowFat b#d! zawiera'y dane logiczne i przezich rzutowanie do tego typu nowo utworzony obiekt b#dzie posiada' warto$ci logiczne dlaw'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ólnegoobiektu do metody.

4. Zapisz plik Product.as.

Plik klasy zosta' zapisany z now! metod!. W widoku Problems nie powinny pojawi& si# adnekomunikaty o b'#dach.

5. Wró& do aplikacji EComm.mxml. Z metody prodHandler() usu/ kod tworz!cy theProducti 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 zwracaobiekt warto$ci Product o nadanym mocnym typie z obiektu, który nie posiada' nadanego typu.

6. Znajd1 w stanie rozszerzonym pierwszy kontener uk'adu VBox, który wy$wietla opis produktuoraz 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 podpowiadaniekodu zarówno dla nazwy klasy, jak i jej w$a0ciwo0ci. Kiedy kursor znajduje si# wewn"trznawiasów tworz"cych powi"zanie, naci0nij Ctrl+spacja, aby uzyska+ pomoc we wpisywaniuegzemplarza klasy Product — theProduct. Nast#pnie, po wstawieniu kropki, zostan"wy0wietlone w$a0ciwo0ci.

Page 29: Adobe Flex 3

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.

7. Zapisz plik i uruchom debugowanie.

Powinno by& widoczne, e trace dzia'a tak jak wcze$niej, a powi!zanie danych powinnodzia'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. Jejzadaniem b#dzie $ledzenie, jaki produkt zosta' dodany oraz w jakiej ilo$ci. Utworzymy metod#, którab#dzie liczy'a koszt zakupu tego produktu. Zbudujemy tak e szkielet klasy ShoppingCart, która b#dzieobs'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 utworzonegowcze$niej katalogu. Wprowad1 ShoppingCartItem w polu nazwy i pozostaw warto$ci domy$lnedla 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; }}

Page 30: Adobe Flex 3

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 logicznewykorzystanie 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 koszykaproduktu mo e wynosi& zero lub zosta& okre$lona liczb! dodatni!, zastosowanie typu uintjest 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 aktualizacjasumy 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 parametryprzekazywane do tej funkcji. Zaliczaj! si# do nich: product, parametry typu Product i quantityoraz parametry typu uint. Poniewa konstruktor jest wywo'ywany tylko podczas tworzeniaproduktu, 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 tymprzypadku zosta'y u yte jednakowe nazwy, nale y wi#c poprzedzi& nazwy w'a$ciwo$cipo lewej stronie znaków równo$ci przedrostkiem this. Przypisz równie w'a$ciwo$cisubtotal 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 jesttworzony 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.

Page 31: Adobe Flex 3

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 celuzaktualizowania ca'kowitej sumy. Nale y tak e sprawdzi&, czy element zosta' ju wcze$niejdodany 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$& Packagerówn! valueObjects, dodaj!c automatycznie t# klas# do utworzonego wcze$niej katalogu.Wprowad1 ShoppingCart w polu nazwy i pozostaw warto$ci domy$lne dla wszystkichpozosta'ych pól.

Tworzymy now! klas#, która b#dzie samym koszykiem wype'nionym obiektamishoppingCartItem. 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& ekonomicznyuk'ad logiczny do klasy ShoppingCart. W sk'ad uk'adu logicznego wchodz!: dodawanieproduktó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'yzosta& wykorzystane, konieczne jest te zaimportowanie odpowiednich klas szkieletu. B#dziemyu 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 nazwieitem typu ShoppingCartItem. Wewn!trz metody dodaj wyra enie trace, które b#dzie $ledzi'oprodukt 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 dodamydo 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, zawszegdy jest $ledzony egzemplarz klasy Product.

Page 32: Adobe Flex 3

128 ADOBE FLEX 3.

Oficjalny podr.cznik

11. Otwórz w programie Flex Builder plik EComm.mxml i znajd1 blok skryptu. Pod wyra eniemimport klasy Product zaimportuj klasy ShoppingCartItem i ShoppingCart z kataloguvalueObjects, 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 adresulub pakietu, w którym mie$ci si# klasa.

12. Pod wyra eniami import utwórz egzemplarz publiczny klasy ShoppingCart i nadajmu 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 ShoppingCartItemo nazwie addItem(), któr! w'a$nie utworzyli$my. Dzi#ki utworzeniu egzemplarza klasyw 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 prywatnejmetody typu void o nazwie addToCart(). Spraw, by przyjmowa'a parametr typu Producto 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 zostanieprzes'any wybrany przez niego obiekt warto$ci Product. Jest to metoda pliku MXML i nieb#dzie wywo'ywana spoza tego pliku. W ten sposób mo na u ywa& prywatnego identyfikatoraoznaczaj!cego, e do danej metody nie mo na uzyska& dost#pu spoza jej klasy, co sprzyjalepszej ochronie danych.

14. Wewn!trz metody addToCart() utwórz nowy egzemplarz klasy ShoppingCartItem o nazwiesci i przeka do jego konstruktora parametr product:

var sci:ShoppingCartItem = new ShoppingCartItem(product);

15. Wewn!trz metody addToCart() wywo'aj metod# addItem() egzemplarza cart klasyShoppingCart. Prze$lij do metody utworzony obiekt sci:

cart.addItem(sci);

Kod ten wywo'a metod# addItem() utworzonej wcze$niej klasy ShoppingCart. W kolejnejlekcji poka emy, jak wykonywa& p#tle przez struktur# danych w celu sprawdzenia, czy elementzosta' do niej dodany. Obecnie metoda ta po prostu $ledzi nazw# produktu dodanegodo koszyka.

16. Dodaj zdarzenie click do przycisku Add To Cart. Wywo'aj metod# addToCart(), przekazuj!cdo niej egzemplarz theProduct:

<mx:Button id="add" label="Add To Cart" <click="addToCart(theProduct)"/>

Page 33: Adobe Flex 3

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]Milkpojawiaj!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 utworzeniastruktury danych (s. 111 – 114),

zbada'e$ obiekt zdarzenia, aby zrozumie&, czym jest, i korzysta'e$ z dwóch w'a$ciwo$ci tegoobiektu (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).