Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00394 021143 15573978 na godz. na dobę w sumie
Adobe Flex 4. Oficjalny podręcznik - książka
Adobe Flex 4. Oficjalny podręcznik - książka
Autor: , , Liczba stron: 448
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2884-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> grafika komputerowa >> flex
Porównaj ceny (książka, ebook (-25%), audiobook).

Naucz się tworzyć efektowne aplikacje internetowe dzięki możliwościom Adobe Flex 4!

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

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

Skorzystaj z niesamowitych możliwości Fleksa 4 i stwórz swoją wyjątkową aplikację internetową!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Adobe Flex 4. Oficjalny podręcznik Autorzy: Michael Labriola, Jeff Tapper, Matthew Boles Tłumaczenie: Aleksander Lamża ISBN: 978-83-246-2884-1 Tytuł oryginału: Adobe Flex 4: Training from the Source, Volume 1 Format: B5, stron: 464 Naucz się tworzyć efektowne aplikacje internetowe dzięki możliwościom Adobe Flex 4! • Tworzenie własnych komponentów, nadawanie im stylów i skórek • Praca nad aplikacjami z wykorzystaniem środowiska Flash Builder • Wydajny, zorientowany obiektowo język ActionScript 3.0 Adobe Flex 4 to najnowszy zestaw technologii służących do tworzenia bogatych aplikacji internetowych. Ta wydajna i bezpłatna struktura programistyczna to istne novum na rynku programów webowych. Flex pozwala na tworzenie prawdziwie dynamicznych i interaktywnych aplikacji o olbrzymich możliwościach. A to wszystko bez konieczności rezygnowania ze wspaniałej grafiki! Dzięki książce „Adobe Flex 4. Oficjalny podręcznik” stopniowo, krok po kroku, nauczysz się tworzyć aplikacje w językach MXML oraz ActionScript 3.0. Znajdziesz tu omówienie nowości wprowadzonych we Fleksie 4, takich jak komponenty Spark, nowe, zaawansowane techniki tworzenia skórek oraz wiele innych. Poznasz możliwości pracy w środowisku Flex Builder oraz dowiesz się, jak tworzyć interfejsy użytkownika. Zapoznasz się z wiedzą na temat kontrolek, obsługi zdarzeń, stosowania techniki „przeciągnij i upuść”, tworzenia nawigacji czy też zmiany wyglądu Twojej aplikacji za pomocą stylów. Pamiętaj, że masz przed sobą najlepszy podręcznik technologii Flex, napisany przez zespół specjalistów posiadających olbrzymie doświadczenie w prowadzeniu kursów programowania, konsultacji i wszelkich działań wspomagających programistów i projektantów. • Flash Builder • Tworzenie interfejsu użytkownika • Stosowanie kontrolek • Obsługa zdarzeń • ActionScript i MXML • Tworzenie komponentów • Siatki danych • Rendering elementów • Stosowanie mechanizmu „przeciągnij i upuść” • Style i skórki Skorzystaj z niesamowitych możliwości Fleksa 4 i stwórz swoją wyjątkową aplikację internetową! Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 Spis treļci O autorach Wstďp Wprowadzenie 11 13 15 Lekcja 1. Wprowadzenie do bogatych aplikacji internetowych 27 Rozwój aplikacji komputerowych ......................................................................................27 OdejŎcie od architektury opartej na stronie internetowej ...............................................29 Zalety bogatych aplikacji internetowych ............................................................................31 MenedŮerowie przedsiďbiorstw ...................................................................................... 31 Przedsiďbiorstwa branŮy IT ............................................................................................. 31 UŮytkownicy koĹcowi ..................................................................................................... 31 Technologie bogatych aplikacji internetowych ................................................................ 32 Asynchroniczny JavaScript i XML (AJAX) ..................................................................32 Wirtualna maszyna Javy .................................................................................................. 33 Microsoft Silverlight ....................................................................................................... 33 Platforma Adobe Flash ....................................................................................................34 Czego siď nauczyķeŎ? ............................................................................................................. 37 Lekcja 2. Zaczynamy 39 Wstďp do tworzenia fleksowych aplikacji ..........................................................................40 Tworzenie projektu i aplikacji MXML ..............................................................................40 Obszar roboczy Flash Buildera ........................................................................................... 45 Uruchamianie aplikacji ........................................................................................................ 48 Korzystanie z debugera programu Flash Builder ............................................................. 53 Przygotuj siď do kolejnych lekcji .........................................................................................60 Czego siď nauczyķeŎ? .............................................................................................................62 Lekcja 3. Projektowanie interfejsu uŮytkownika 65 Layout aplikacji ..................................................................................................................... 65 Kontenery ..........................................................................................................................66 Obiekty layoutu ............................................................................................................... 66 ADOBE FLEX 4. 6 Oficjalny podrýcznik. Tom I Ķûczenie kontenerów i obiektów layoutu .....................................................................67 Przewijanie zawartoŎci .....................................................................................................68 Budowa znaczników MXML ..........................................................................................68 Tworzenie layoutu sklepu internetowego .........................................................................69 Tworzenie zarysu layoutu w trybie edycji Ŭródķa .........................................................70 Praca nad layoutem w trybie projektowania ................................................................72 Definiowanie sekcji produktów .....................................................................................75 Praca z layoutami opartymi na wiďzach ............................................................................76 Praca ze stanami widoku ...................................................................................................... 81 Tworzenie stanów widoku .............................................................................................. 81 Sterowanie stanami widoku ............................................................................................84 Refaktoryzacja .......................................................................................................................86 Stosowanie zķoŮonych kontenerów ...............................................................................88 Refaktoryzacja kodu aplikacji ........................................................................................89 Czego siď nauczyķeŎ? .............................................................................................................90 Lekcja 4. Stosowanie prostych kontrolek 93 Wprowadzenie do prostych kontrolek ..............................................................................94 WyŎwietlanie obrazów ..........................................................................................................95 Tworzenie widoku szczegóķów ............................................................................................98 Korzystanie z wiûzania danych do powiûzania struktury danych z prostû kontrolkû ........101 Wykorzystanie kontenera Form do umieszczania prostych kontrolek ....................... 102 Czego siď nauczyķeŎ? ........................................................................................................... 105 Lekcja 5. Obsķuga zdarzeĹ 107 Wprowadzenie do obsķugi zdarzeĹ .................................................................................. 107 Prosty przykķad ...............................................................................................................109 Obsķuga zdarzenia przez funkcjď jďzyka ActionScript ............................................. 110 Przekazywanie danych podczas wywoķywania funkcji obsķugi zdarzenia ..............111 UŮywanie danych z obiektu zdarzenia .........................................................................111 Dokonywanie inspekcji obiektu zdarzenia ................................................................ 114 Obsķuga zdarzeĹ systemowych ..........................................................................................117 Zdarzenie creationComplete ........................................................................................ 117 Modyfikowanie danych w zdarzeniu creationComplete ......................................... 118 Czego siď nauczyķeŎ? ........................................................................................................... 120 Lekcja 6. Korzystanie ze zdalnych danych XML 123 Osadzanie danych XML ..................................................................................................... 123 Umieszczenie modelu poza aplikacjû .........................................................................124 Wybór miďdzy obiektami a XML-em .......................................................................... 126 Ķadowanie danych XML w trakcie dziaķania programu ............................................... 129 Tworzenie obiektu HTTPService .................................................................................129 Wywoķywanie metody send() ........................................................................................ 130 Uzyskiwanie dostďpu do otrzymanych danych ......................................................... 130 Problemy zwiûzane z bezpieczeĹstwem .......................................................................131 Pobieranie danych XML za poŎrednictwem obiektu HTTPService .............................133 ADOBE FLEX 4. Spis treļci 7 Przeszukiwanie XML-a za pomocû E4X ............................................................................135 Operatory E4X ................................................................................................................ 136 Korzystanie z dynamicznych danych XML .....................................................................141 UŮywanie obiektu XMLListCollection z kontrolkû List ............................................... 145 Czego siď nauczyķeŎ? ........................................................................................................... 147 Lekcja 7. Tworzenie klas 149 Tworzenie wķasnej klasy w jďzyku ActionScript ............................................................. 149 Tworzenie obiektu wartoŎci ............................................................................................... 150 Przygotowanie metody tworzûcej obiekt ..........................................................................156 Tworzenie klas koszyka na zakupy ................................................................................... 159 Manipulowanie danymi w klasie ShoppingCart ............................................................ 164 Dodawanie produktów do koszyka ............................................................................. 164 Dodawanie pozycji czy uaktualnianie liczby sztuk? ................................................. 166 Warunkowe dodawanie pozycji do koszyka .............................................................. 166 Czego siď nauczyķeŎ? ............................................................................................................171 Lekcja 8. Stosowanie wiûzania danych i kolekcji 173 Zasada dziaķania mechanizmu wiûzania danych ........................................................... 173 Prosty przykķad ...............................................................................................................174 Bardziej skomplikowany przykķad ..............................................................................177 Mechanizm wiûzania danych z perspektywy kompilatora ........................................... 179 Metody dostďpowe set i get ...........................................................................................180 Rozgķaszanie i nasķuchiwanie zdarzeĹ ........................................................................ 181 Zdarzenia w mechanizmie wiûzania danych ..............................................................182 Podsumowanie informacji o wiûzaniu danych .............................................................. 184 Korzystanie z klasy ArrayCollection ............................................................................... 184 Wypeķnianie obiektu ArrayCollection danymi ......................................................... 185 Korzystanie z danych zapisanych w kolekcji ArrayCollection ............................... 191 Sortowanie elementów kolekcji ArrayCollection ..................................................... 193 Refaktoryzacja kodu — wyszukiwanie za pomocû kursora .....................................197 Usuwanie elementów z wykorzystaniem kursora ......................................................200 Filtrowanie kolekcji ArrayCollection .........................................................................201 Refaktoryzacja klasy ShoppingCartItem .........................................................................202 Czego siď nauczyķeŎ? ...........................................................................................................204 Lekcja 9. Tworzenie komponentów 207 Wprowadzenie w tematykď komponentów MXML .......................................................208 Zasady tworzenia komponentów ................................................................................209 Tworzenie wķasnego komponentu ..............................................................................209 Wķasne komponenty a architektura aplikacji ............................................................ 211 Tworzenie komponentu ShoppingView .......................................................................... 213 Tworzenie komponentu ProductItem ............................................................................. 218 Tworzenie komponentów zarzûdzajûcych pobieraniem danych .................................226 Czego siď nauczyķeŎ? ........................................................................................................... 233 ADOBE FLEX 4. 8 Oficjalny podrýcznik. Tom I Lekcja 10. Korzystanie z komponentów DataGroup oraz List 235 Korzystanie z komponentów List ..................................................................................... 236 WķaŎciwoŎý labelFunction klasy List ...........................................................................236 Korzystanie z komponentów DataGroup .......................................................................238 Implementacja renderera elementów ..........................................................................239 Zastosowanie komponentu DataGroup w klasie ShoppingView ...........................243 Wirtualizacja ...................................................................................................................246 Implementowanie wirtualizacji ...................................................................................246 Wirtualizacja w komponentach List ................................................................................247 WyŎwietlanie produktów z wybranej kategorii ...............................................................249 Filtrowanie produktów pod wzglďdem kategorii ......................................................249 Wykorzystanie zdarzenia change komponentu List .................................................250 Czego siď nauczyķeŎ? ........................................................................................................... 251 Lekcja 11. Tworzenie i rozgķaszanie zdarzeĹ 253 KorzyŎci ze stosowania luŬno powiûzanej architektury ................................................ 253 Rozsyķanie zdarzeĹ ............................................................................................................. 255 Deklarowanie zdarzeĹ komponentu ...............................................................................258 Kiedy przydajû siď klasy niestandardowych zdarzeĹ .....................................................260 Tworzenie i uŮywanie zdarzenia UserAcknowledgeEvent ............................................ 261 StrumieĹ zdarzenia i faza propagacji ...............................................................................264 Tworzenie i uŮywanie klasy ProductEvent ......................................................................269 Tworzenie komponentu ProductList ..........................................................................271 Korzystanie z komponentu ProductList ....................................................................273 Korzystanie ze zdarzenia ProductEvent podczas dodawania i usuwania produktów ..........................................................274 Obsķuga zdarzenia COLLECTION_CHANGE .......................................................275 Czego siď nauczyķeŎ? ...........................................................................................................277 Lekcja 12. Stosowanie siatek danych i rendererów elementów 279 Dwa zestawy kontrolek: Spark i MX ................................................................................280 Komponent DataGrid i renderery elementów ...............................................................280 WyŎwietlanie koszyka na zakupy w kontrolce DataGrid .............................................. 281 Korzystanie z komponentu CartGrid .........................................................................283 Dodawanie kontrolek edycji do DataGridColumn ..................................................283 Tworzenie renderera elementów sķuŮûcego do wyŎwietlenia informacji o produkcie ..............................................285 Tworzenie renderera elementów sķuŮûcego do wyŎwietlenia przycisku Remove ........................................................................287 Ponowne wykorzystanie klasy ProductEvent ............................................................289 Wykorzystanie wķaŎciwoŎci labelFunction do wyŎwietlania wartoŎci produktów .....................................................................290 UŮywanie komponentu AdvancedDataGrid ..................................................................292 Sortowanie zawartoŎci kontrolki AdvancedDataGrid .............................................292 Sortowanie w trybie zaawansowanym .........................................................................293 ADOBE FLEX 4. Spis treļci 9 Nadawanie stylów komponentowi AdvancedDataGrid ..........................................294 Grupowanie danych ......................................................................................................298 WyŎwietlanie danych podsumowujûcych ...................................................................303 Czego siď nauczyķeŎ? ............................................................................................................311 Lekcja 13. Obsķuga techniki „przeciûgnij i upuŎý” 313 Zasada dziaķania menedŮera przeciûgania i upuszczania ............................................. 314 Przeciûganie i upuszczanie miďdzy dwoma komponentami DataGrid .......................315 Przeciûganie i upuszczanie miďdzy siatkû danych i listû ............................................... 317 Stosowanie mechanizmu „przeciûgnij i upuŎý” w komponentach, które go nie obsķugujû ...................................................................................................322 Przeciûganie produktu do koszyka na zakupy ................................................................327 Czego siď nauczyķeŎ? ........................................................................................................... 332 Lekcja 14. Tworzenie nawigacji 335 Wprowadzenie do nawigacji .............................................................................................. 335 Przygotowanie procesu dokonywania pķatnoŎci wyŎwietlanego w kontenerze ViewStack ...................................................................... 337 Integrowanie aplikacji z komponentem CheckOutView ..............................................342 Czego siď nauczyķeŎ? ...........................................................................................................344 Lekcja 15. Formatowanie i walidacja danych 347 Podstawowe informacje o klasach formatujûcych i walidujûcych ...............................347 Klasy formatujûce ..........................................................................................................348 Klasy walidujûce .............................................................................................................348 Korzystanie z klas formatujûcych .....................................................................................349 Korzystanie z dwustronnego wiûzania danych .............................................................. 352 Korzystanie z klas walidatorów ......................................................................................... 353 Czego siď nauczyķeŎ? ........................................................................................................... 356 Lekcja 16. Zmiana wyglûdu aplikacji za pomocû stylów 359 Wprowadzenie projektu graficznego aplikacji za pomocû stylów i skórek ................ 359 Przygotowanie aplikacji na zmiany .................................................................................. 360 Stosowanie stylów ................................................................................................................361 Nadawanie stylów przez atrybuty znaczników ..........................................................362 Dziedziczenie stylów .....................................................................................................364 Nadawanie stylów za pomocû znacznika mx:Style ...............................................365 Nadawanie stylów za pomocû plików CSS .................................................................368 Definiowanie stylów dla pozostaķych elementów aplikacji ..................................... 371 Zmiana stylów w trakcie dziaķania aplikacji ...................................................................377 KorzyŎci pķynûce z wczytywania stylów ......................................................................378 Tworzenie pliku SWF z arkusza CSS ...........................................................................378 Wczytywanie arkusza stylów za pomocû klasy StyleManager .................................379 Przesķanianie stylów we wczytanych plikach CSS .....................................................379 Czego siď nauczyķeŎ? ...........................................................................................................379 10 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I Lekcja 17. Zmiana wyglûdu aplikacji za pomocû skórek 381 Skórki komponentów Spark ............................................................................................. 381 Powiûzanie miďdzy skórkami i stanami ........................................................................... 385 Rysowanie we Fleksie .....................................................................................................385 Definiowanie wyglûdu przycisku w róŮnych stanach ...............................................389 Tworzenie skórki dla aplikacji .......................................................................................... 393 Czego siď nauczyķeŎ? ...........................................................................................................397 Lekcja 18. Tworzenie komponentów w jďzyku ActionScript 399 Komponenty tworzone w jďzyku ActionScript ..............................................................400 Tworzenie komponentów moŮe byý skomplikowane ...................................................400 Komponenty od Ŏrodka ..................................................................................................... 401 Po co tworzyý komponenty? .............................................................................................402 Definiowanie komponentu ...............................................................................................403 Definiowanie interfejsu .................................................................................................404 Wybór klasy bazowej .....................................................................................................405 Tworzenie klasy ..............................................................................................................406 UŮywanie zdefiniowanej klasy .....................................................................................408 Tworzenie czďŎci wizualnej ................................................................................................ 410 OkreŎlenie wymagaĹ dotyczûcych skórki ...................................................................410 Tworzenie skórki ............................................................................................................412 Dodawanie funkcjonalnoŎci do komponentu ............................................................... 416 Asynchroniczna praca komponentów ........................................................................ 416 Komunikowanie siď za pomocû zdarzeĹ ....................................................................421 Sprzûtanie po sobie ........................................................................................................424 Tworzenie renderera dla skórki .........................................................................................426 Czego siď nauczyķeŎ? ...........................................................................................................428 Dodatek A Przygotowanie do pracy 432 Instalowanie oprogramowania .........................................................................................432 Instalowanie Ŏrodowiska Flash Builder ......................................................................432 Kopiowanie plików lekcji .............................................................................................432 Instalowanie odtwarzacza Flash Player z moŮliwoŎciû debugowania ....................433 Importowanie projektów ...................................................................................................434 Importowanie plików lekcji ..........................................................................................434 Skorowidz 437 64 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I 3 A J C K E L Tematyka lekcji 3. Podczas tej lekcji bădziesz: — uŮywaķ kontenerów; — tworzyķ aplikacjď w trybie edycji kodu; — pracowaķ z layoutami opartymi na wiďzach; — pracowaķ ze stanami widoku; — sterowaķ stanami widoku; — tworzyķ aplikacjď w trybie projektowania; — w razie potrzeby poddawaķ kod refaktoryzacji. Przewidywany czas lekcji UkoĹczenie tej lekcji zajmuje okoķo 1 godziny i 30 minut. 3 Projektowanie interfejsu uŜytkownika KaŮda aplikacja musi posiadaý interfejs uŮytkownika. Jednû z najwiďkszych zalet programu Adobe Flash Builder 4 jest to, Ůe bardzo uķatwia on projektowanie interfejsu aplikacji. Podczas tej lekcji zo- stanie przedstawionych wiele kontenerów uŮywanych we Fleksie, opiszemy róŮnice miďdzy nimi oraz metody wykorzystywania ich podczas tworzenia interfejsów uŮytkownika wķasnych projektów. Zasto- sowanie stanów pozwala projektantowi na tworzenie aplikacji dynamicznie dostosowujûcych siď do dziaķaĹ uŮytkowników. Interfejs uŢytkownika sklepu internetowego Layout aplikacji WiďkszoŎý dziaķaĹ zwiûzanych z ustalaniem poķoŮenia komponentów we Fleksie jest przeprowadzana z wykorzystaniem kontenerów i obiektów layoutu. PosķuŮmy siď na chwilď analogiû do sprzďtów kuchennych. WyobraŬ sobie, Ůe kontener jest robotem kuchennym bez ostrzy. Dostďpnych jest wiele robotów kuchennych oferujûcych róŮne funkcje, a Twoim zadaniem jest wybranie tego, który najlepiej sprawdzi siď w okreŎlonych zastosowaniach. 66 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I O obiektach layoutu moŮesz myŎleý jak o ostrzach, które mogû sķuŮyý do siekania, ciďcia na plasterki, w kostkď itp. ŭaden z tych elementów (robot kuchenny i ostrza) nie jest uŮyteczny w pojedynkď — dopiero kiedy siď je poķûczy, stajû siď przydatnym narzďdziem. Ta sama zasada dotyczy kontenerów i obiektów ukķadu graficznego. Kontenery Z technicznego punktu widzenia kontenery sû specjalnym typem komponentów, które zawierajû i grupujû inne elementy. Elementy te zwykle okreŎla siď ogólnie mianem potomków lub, bardziej szcze- góķowo, jako elementy layoutu (co odpowiada takim komponentom, jak przyciski, pola wyboru itp.) oraz elementy graficzne (takie jak prostokûty, koķa itp.). Mimo Ůe kontenery potrafiû grupowaý i utrzymywaý wszystkie elementy razem, nie znajû ich poķoŮenia i kolejnoŎci, w jakiej majû pojawiý siď na ekranie. Przy wyborze odpowiedniego kontenera trzeba siď kierowaý wieloma kryteriami, jednak najistotniejsze sû moŮliwoŎci zastosowania skórek. Dziďki stosowaniu skórek moŮliwa jest zmiana wyglûdu komponentów. W przypadku kontenerów moŮna mówiý o wyglûdzie tķa, krawďdzi, zastosowaniu cieni itd. Do niektórych kontenerów moŮna zastosowaý skórki, czyli moŮna zdefiniowaý ich wyglûd, z kolei inne sķuŮû tylko i wyķûcznie do gru- powania potomków i jako takie nie sû widoczne. Typy kontenerów Kontener Group SkinnableContainer BorderContainer Panel Application NavigationContent Opis Najprostszy typ kontenera we Fleksie 4. MoŮe przechowywaý potomków, ale nie ma graficznej reprezentacji Oferuje te same funkcjonalnoŎci co kontener Group, ale dodatkowo istnieje moŮliwoŎý zdefiniowania jego wyglûdu Typ kontenera SkinnableContainer sķuŮûcy do prostego otoczenia potomków ramkû Typ kontenera SkinnableContainer otoczony ramkû, który moŮna dodatkowo wyposaŮyý w nagķówek i obszar przeznaczony na pasek narzďdzi Typ kontenera SkinnableContainer stosowany jako gķówny kontener fleksowej aplikacji. Podobnie jak Panel moŮe posiadaý pasek narzďdzi Specjalny typ kontenera SkinnableContener stosowany z kontrolkami, takimi jak ViewStack, które zostanû omówione w dalszej czďŎci ksiûŮki To oczywiŎcie nie wszystkie dostďpne kontenery. W kolejnych lekcjach przeczytasz jeszcze np. o DataGroup i SkinnableDataContainer, a takŮe specjalizowanych kontenerach, takich jak np. Form. Wymienione tu kontenery dziaķajû jednak trochď inaczej, wiďc ich opis zostawimy na póŬniej, kiedy pojawi siď potrzeba omówienia ich specyfiki. Obiekty layoutu Obiekty layoutu wspóķpracujû z kontenerami (a takŮe innymi typami obiektów, co zostanie omówione w kolejnych lekcjach) w celu okreŎlenia sposobu grupowania elementów wyŎwietlanych na ekranie. LEKCJA 3. Projektowanie interfejsu uŜytkownika 67 Flex 4 dostarcza wiele gotowych obiektów layoutu oraz pozwala na tworzenie wķasnych, umoŮliwiajûc w ten sposób peķne dopasowanie do wķasnych potrzeb. Obiekt layoutu BasicLayout HorizontalLayout VerticalLayout TileLayout Typy obiektów layoutu Opis Pozwala na bezwzglďdne pozycjonowanie, co oznacza, Ůe w przypadku kaŮdego umieszczanego elementu trzeba okreŎliý wspóķrzďdne x i y jego poķoŮenia Ustawia wszystkich potomków w rzďdzie; kaŮdy jest wyrównany do prawej krawďdzi poprzedniego Ustawia wszystkich potomków w kolumnie; kaŮdy jest wyrównany do dolnej krawďdzi poprzedniego Ustawia potomków w rzďdach i kolumnach. MoŮna okreŎliý liczbď elementów uķoŮonych w pionie lub poziomie, której przekroczenie powoduje dodanie kolejnego wiersza lub kolumny Ĥéczenie kontenerów i obiektów layoutu Po wybraniu odpowiedniego kontenera i obiektu layoutu skķada siď je w MXML-u w celu osiûgniďcia zamierzonego efektu. Przyjrzyj siď poniŮszym przykķadom ustalajûcym poķoŮenie przycisków za po- mocû obiektu layoutu i wķaŎciwoŎci layout. s:Group s:layout s:HorizontalLayout/ /s:layout s:Button label= 1 / s:Button label= 2 / s:Button label= 3 / /s:Group s:Group s:layout s:VerticalLayout/ /s:layout s:Button label= 1 / s:Button label= 2 / s:Button label= 3 / /s:Group 68 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I JeŮeli nie okreŎlisz obiektu layoutu, zostanie zastosowany BasicLayout, co oznacza, Ůe konieczne jest ustalenie wspóķrzďdnych x i y kaŮdego przycisku. W przeciwnym razie wszystkie zostanû wyŎwietlone w domyŎlnej lokalizacji, czyli we wspóķrzďdnych (0, 0). Przewijanie zawartoļci Czasami pojawia siď koniecznoŎý zapewnienia w aplikacji moŮliwoŎci przewijania zawartoŎci grupy. W poprzednich wersjach Fleksa wszystkie kontenery domyŎlnie posiadaķy tď moŮliwoŎý. Mimo Ůe takie rozwiûzanie byķo wygodne dla programistów, wiûzaķo siď z obciûŮeniem kaŮdego kontenera kodem wymaganym do obsķugi przewijania, nawet jeŮeli ta funkcja nie byķa wykorzystywana. We Fleksie 4 trzeba jawnie okreŎliý, Ůe dany kontener moŮna przewijaý. Realizuje siď to za pomocû znacznika Scroller, którym obejmuje siď znacznik Group. s:Scroller height= 65 s:Group s:layout s:VerticalLayout/ /s:layout s:Button label= 1 / s:Button label= 2 / s:Button label= 3 / /s:Group /s:Scroller Zastosowanie tego rozwiûzania nie wiûŮe siď z niepotrzebnym wyŎwietlaniem pasków przewijania. Znacznik Scroller dodaje paski przewijania (pionowy, poziomy lub oba) w sytuacjach, gdy sû nie- zbďdne, czyli wtedy, gdy nie ma moŮliwoŎci wyŎwietlenia elementu Group w peķnych wymiarach. W po- przednim przykķadzie wysokoŎý znacznika Scroller zostaķa ustawiona na 65 pikseli, tak aby pojawiķ siď pionowy pasek przewijania. JeŮeli nie jest ustawiona ani wysokoŎý, ani szerokoŎý, Flex stara siď zmieŎciý caķy element Group na ekranie i dopiero wtedy, gdy siď to nie udaje, wyŎwietlane sû odpo- wiednie paski przewijania. Budowa znaczników MXML Zanim rozpoczniesz kolejne ýwiczenie, musisz poznaý pewnû waŮnû zasadď. W jďzyku MXML instancje klasy sû czymŎ innym niŮ wIJaʼnciwoʼnci. We fragmencie kodu z poprzedniego podrozdziaķu moŮesz zna- leŬý definicjď przycisku. WķaŎciwoŎý label przycisku jest zdefiniowana jako atrybut znacznika Button: s:Button label= 3 / W MXML-u moŮna jednak zdefiniowaý tď samû wķaŎciwoŎý za pomocû znaczników potomnych. W omawianym przypadku kod mógķby wyglûdaý nastďpujûco: LEKCJA 3. Projektowanie interfejsu uŜytkownika 69 s:Button s:label 3 /s:label /s:Button Bez wzglďdu na sposób definiowania klas efekt wyŎwietlony na ekranie bďdzie identyczny. Po jakimŎ czasie pracy z Fleksem nauczysz siď poprawnie dobieraý odpowiedniû skķadniď do sytuacji, jednak na poczûtku moŮe to powodowaý pewien zamďt. Jak myŎlisz, która z przedstawionych moŮliwoŎci to definicja wķaŎciwoŎci, a która klasy? Kluczem do rozwiûzania tej zagadki jest wielkoŎý pierwszej litery nazwy znajdujûcej siď po przestrzeni nazw (w tym przypadku po s:). Kiedy jest to wielka litera (tak jak B w nazwie Button), kod jest odpowiedzialny za utworzenie nowej instancji klasy. Z kolei maķa litera (l w nazwie label) oznacza, Ůe mamy do czynienia z wķaŎciwoŎciû klasy. Przypatrz siď wiďkszemu fragmentowi kodu: s:Group s:layout s:VerticalLayout/ /s:layout s:Button label= 1 / s:Button label= 2 / s:Button s:label 3 /s:label /s:Button /s:Group Litera G w znaczniku s:Group jest wielka, wiďc tworzona jest tu instancja klasy Group. Z kolei l w znaczniku s:layout jest maķe, co oznacza, Ůe jest to wķaŎciwoŎý znacznika Group. Nazwa znacznika s:VerticalLayout rozpoczyna siď wielkû literû V, wiďc tworzona jest nowa instancja klasy VerticalLayout. Gdyby przetķumaczyý kod na zdania, mógķby brzmieý tak: utwórz instancjď klasy Group. Do wķaŎciwoŎci layout tej grupy przypisz nowû instancjď klasy VerticalLayout. Do grupy dodaj trzy przyciski (klasy Button) z etykietami 1, 2 i 3. Bardzo waŮne jest, byŎ w peķni zrozumiaķ zasady opisane w tym podrozdziale. JeŮeli wszystko jest ja- sne, ciûg dalszy tej lekcji nie bďdzie duŮym wyzwaniem. JeŎli jednak nie jesteŎ wszystkiego pewien, pod- czas lektury dalszej czďŎci lekcji moŮesz poczuý zniechďcenie. Tworzenie layoutu sklepu internetowego Sklep internetowy FlexGrocer jest aplikacjû typu e-commerce, która umoŮliwia klientom dokonywa- nie zakupów artykuķów spoŮywczych. W górnej czďŎci interfejsu uŮytkownika jest umieszczone logo sklepu oraz odnoŎniki dostďpne w caķej aplikacji. PoniŮej znajduje siď grupa ikon, dziďki którym uŮyt- kownik moŮe przeglûdaý dostďpne kategorie produktów (nabiaķ, miďso, owoce itd.). Pod ikonami znajduje siď obszar wyŎwietlania informacji o produktach. 70 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I Podczas wykonywania ýwiczeĹ i opracowywania layoutu aplikacji skorzystasz zarówno z trybu projek- towania (Design), jak i edycji Ŭródķa (Source). Tryb projektowania ma bardzo duŮe moŮliwoŎci, ale na poczûtku pracy z nim mogû siď pojawiaý problemy. Czďsto zdarzajû siď trudnoŎci z prawidķowym wy- równaniem obiektów czy umieszczaniem obiektów w wybranych kontenerach. Z tego wzglďdu w ýwi- czeniach znajdziesz fragmenty kodu odpowiadajûce okreŎlonym elementom aplikacji. Dziďki temu w razie problemów z uzyskaniem identycznego efektu co w ksiûŮce moŮesz przeķûczyý siď do trybu edycji Ŭródķa i wprowadziý w kodzie niezbďdne poprawki. Tworzenie zarysu layoutu w trybie edycji Śródĥa Pierwszy etap tworzenia layoutu wykonasz w trybie edycji Ŭródķa. Zdefiniujesz obszary aplikacji prze- znaczone na logo i niektóre elementy nawigacyjne. 1. Wczytaj utworzony w poprzedniej lekcji plik FlexGrocer.mxml. JeŮeli nie ukoĹczyķeŎ poprzedniej lekcji lub przygotowany kod nie dziaķa prawidķowo, moŮesz zaimportowaý projekt FlexGrocer.fxp z katalogu Lekcja03/start. Szczegóķowe informacje na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam zawartych za kaŮdym razem, gdy opuŎcisz którûŎ lekcjď lub natrafisz na problem, którego nie umiesz rozwiûzaý. 2. Wķûcz tryb edycji Ŭródķa (przycisk Source). Do przeķûczania miďdzy trybem projektowania (Design) i trybem edycji Ŭródķa (Source) uŮywaj przycisków umieszczonych na pasku tytuķowym w górnej czďŎci okna. 3. UsuĹ znacznik Label wyŎwietlajûcy tekst „My First Flex Application”, który dodaķeŎ w poprzedniej lekcji. 4. W miejsce usuniďtego elementu wstaw otwierajûcy i zamykajûcy znacznik controlBarLayout. s:controlBarLayout /s:controlBarLayout Nazwa tego znacznika rozpoczyna siď maķû literû, co oznacza, Ůe jest to wķaŎciwoŎý obiektu Application. Obszar paska sterowania (ang. control bar) jest charakterystycznym obszarem kontenera. W tworzonej aplikacji umieŎcimy w nim logo oraz niektóre przyciski nawigacyjne. 5. Wewnûtrz elementu controlBarLayout umieŎý samozamykajûcy siď znacznik s:BasicLayout/ . s:controlBarLayout s:BasicLayout/ /s:controlBarLayout Samozamykajûce siď znaczniki zastďpujû parď znaczników (otwierajûcy i zamykajûcy) zastosowanû np. w elemencie controlBarLayout. Zamkniďcie sygnalizuje siď prawym ukoŎnikiem umieszczonym przed znakiem wiďkszoŎci koĹczûcym definicjď znacznika (/ ). Dodanie znacznika s:BasicLayout oznacza, Ůe w pasku sterowania aplikacji ma zostaý zastosowane pozycjonowanie bezwzglďdne. Innymi sķowy, kaŮdy element umieszczony w tym obszarze musi mieý okreŎlone wspóķrzďdne x i y. LEKCJA 3. Projektowanie interfejsu uŜytkownika 71 6. PoniŮej elementu controlBarLayout dodaj nowû parď znaczników s:controlBarContent . Wewnûtrz tego znacznika zdefiniujesz elementy, które majû siď pojawiý w pasku sterowania. 7. Wewnûtrz elementu controlBarContent umieŎý znacznik Button i jego wķaŎciwoŎci label przypisz tekst Flex Grocer. s:Button label= Flex Grocer / Ustawienie wķaŎciwoŎci label spowoduje wyŎwietlenie tekstu na przycisku. PoniewaŮ przycisk zostaķ dodany wewnûtrz elementu controlBarContent, zostanie wyŎwietlony w obszarze paska sterowania aplikacji. Zanim przejdziesz dalej, sprawdŬ, czy wpisany kod wyglûda tak jak poniŮszy. ?xml version= 1.0 encoding= utf-8 ? s:Application xmlns:fx= http://ns.adobe.com/mxml/2009 xmlns:s= library://ns.adobe.com/flex/spark xmlns:mx= library://ns.adobe.com/flex/mx minWidth= 955 minHeight= 600 fx:Declarations !-- Place non-visual elements (e.g., services, value objects) here -- /fx:Declarations s:controlBarLayout s:BasicLayout/ /s:controlBarLayout s:controlBarContent s:Button label= Flex Grocer / /s:controlBarContent /s:Application 8. Po zweryfikowaniu kodu zapisz plik FlexGrocer.mxml. SprawdŬ, czy w widoku Problems nie pojawiķy siď Ůadne komunikaty o bķďdach. 9. Z menu przycisku Run (uruchom) wybierz pozycjď FlexGrocer, aby uruchomiý aplikacjď w przeglûdarce internetowej. Po uruchomieniu aplikacji na górze ekranu powinien siď pojawiý szary obszar paska sterujûcego. We- wnûtrz paska znajduje siď przycisk Flex Grocer. Co prawda aplikacja nie jest jeszcze zbyt funkcjonalna, ale zdefiniowaķeŎ juŮ kilka wķaŎciwoŎci, skorzystaķeŎ z obiektu layoutu i dodaķeŎ do kontenera obiekt potomny. Kolejne zadania bďdû ķatwiejsze, a ich realizacja szybsza. Kiedy juŮ skoĹczysz podziwiaý swoje dzieķo, zamknij okno przeglûdarki i przygotuj siď do pracy w trybie projektowania. 72 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I Praca nad layoutem w trybie projektowania ZdefiniowaķeŎ juŮ fragment layoutu aplikacji, korzystajûc z jďzyka MXML. Teraz, by dodaý kilka ele- mentów i przypisaý im wķaŎciwoŎci, posķuŮysz siď trybem projektowania. 1. Wķûcz tryb projektowania (przycisk Design). Do przeķûczania miďdzy trybem projektowania i trybem edycji Ŭródķa uŮywaj przycisków umieszczonych na pasku tytuķowym w górnej czďŎci okna. Po wķûczeniu trybu projektowania zobaczysz podglûd opracowanego okna aplikacji. 2. Kliknij dowolne miejsce biaķego obszaru tķa. W panelu Properties (wķaŎciwoŎci) znajdujûcym siď z prawej strony ekranu powinny siď pojawiý informacje o elemencie s:Application. W trybie projektowania panel ten bďdzie pomocny podczas ustawiania wartoŎci poszczególnych wķaŎciwoŎci komponentów. Ješeli panel Properties nie jest wyŁwietlany, z menu Window/Perspective wybierz polecenie Reset Perspective (przywróð perspektywĂ). Spowoduje to przywrócenie domyŁlnej konfiguracji perspektywy dla trybu projektowania, wiĂc panel Properties stanie siĂ widoczny. LEKCJA 3. Projektowanie interfejsu uŜytkownika 73 3. Kliknij przycisk Flex Grocer, który dodaķeŎ w poprzednim ýwiczeniu. Po klikniďciu przycisku w panelu Properties zostanû wyŎwietlone wķaŎciwoŎci elementu s:Button, wiďc moŮesz przystûpiý do wprowadzania zmian dla wybranego przycisku. 4. Na dole panelu Properties znajduje siď zwiniďta kategoria Size and Position (rozmiar i poķoŮenie). RozwiĹ jû, klikajûc ikonď trójkûta umieszczonû obok sķowa Size (moŮliwe, Ůe bďdziesz musiaķ przewinûý widok w dóķ, aby zobaczyý caķû kategoriď). Widoczne staķy siď pola edycyjne Width (szerokoŎý), Height (wysokoŎý), X oraz Y. W polach X i Y wpisz wartoŎý 5, definiujûc w ten sposób wspóķrzďdne przycisku równe (5, 5). Po zmianie wspóķrzďdnej y pasek sterujûcy zwiďkszyķ swojû wysokoŎý, dopasowujûc jû do zaktualizowanej zawartoŎci. W dalszej czďŎci ksiûŮki zastosujesz style definiujûce kolory i rozmiar logo. Na razie w miejscu logo pozostanie przycisk. PowyŮej zostaķ przedstawiony sposób pozycjonowania oparty na bezwzglďdnych wspóķrzďdnych. 5. Odszukaj na ekranie widok Components (komponenty). Powinien znajdowaý siď w lewym dolnym rogu okna Flash Buildera. Kliknij ikonď trójkûta przy nazwie Controls (kontrolki), by otworzyý katalog kontrolek, i przeciûgnij przycisk (Button) do paska sterujûcego, umieszczajûc go blisko prawej krawďdzi. W panelu Properties nadaj kontrolce ID równy btnCartView i etykietď View Cart. Podczas wstawiania kontrolki pojawi siĂ niebieska linia wskazujîca wzajemne poĪošenie (w pionie i poziomie) pozostaĪych komponentów. Pomaga to w szybkim umieszczaniu wielu komponentów w jednym rzĂdzie lub kolumnie. Na razie nie przejmuj siď dokķadnym umiejscowieniem kontrolek. W dalszej czďŎci tej lekcji nauczysz siď posķugiwaý ukķadem opartym na wiďzach w celu umieszczenia przycisku tak, by znajdowaķ zawsze w odlegķoŎci 10 pikseli od prawej krawďdzi okna aplikacji. 6. Przeciûgnij kolejny przycisk do paska sterujûcego, umieszczajûc go z lewej strony pierwszego. W panelu Properties nadaj kontrolce identyfikator btnCheckout i etykietď Checkout. UŮytkownicy bďdû mogli nacisnûý ten przycisk, by skoĹczyý zakupy i zamówiý wybrane produkty. Tak jak poprzednio, dokķadnym umiejscowieniem kontrolki zajmiesz siď póŬniej, gdy nauczysz siď korzystaý z ukķadu opartego na wiďzach. 7. Przeciûgnij kontrolkď Label (etykieta) z katalogu Controls i umieŎý jû w prawym dolnym rogu ekranu. Kliknij dwukrotnie etykietď i w jej polu text wpisz (c) 2009, FlexGrocer. 74 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I Jak w przypadku przycisków: nie przejmuj siď dokķadnym umiejscowieniem etykiety — zajmiesz siď tym póŬniej. 8. W panelu Components zwiĹ folder Controls i rozwiĹ Layout. 9. Przeciûgnij kontener Group z katalogu Layout i umieŎý go w duŮym biaķym obszarze poniŮej paska sterowania. W panelu Properties ustaw ID kontenera na bodyGroup, wartoŎci wysokoŎci (pole Height) oraz szerokoŎci (pole Width) na 100 , a wspóķrzďdne X i Y na 0. 10. Przy zaznaczonym kontenerze bodyGroup przewiĹ zawartoŎý panelu Properties w dóķ. Powinno siď pokazaý rozwijane menu Layout. RozwiĹ je i wybierz pozycjď spark.layouts.HorizontalLayout, dziďki czemu kontener bďdzie ukķadaķ obiekty potomne w poziomie. Dodany kontener bodyGroup bďdzie zawieraķ informacje o produktach oraz koszyk na zakupy. Pamiďtaj o tym, Ůe w kontenerze Group zdefiniowanym jako HorizontalLayout elementy sû ukķadane poziomo. W ten sposób informacje o produktach bďdû wyŎwietlane z lewej strony okna, a o koszyku — z prawej. 11. Przeciûgnij kolejny kontener Group z katalogu Layout w panelu Components i umieŎý go wewnûtrz kontenera bodyGroup. W panelu Properties ustaw ID kontenera na products, ustaw wysokoŎý równû 150 i szerokoŎý 100 . 12. Skorzystaj z rozwijanego menu Layout znajdujûcego siď na dole panelu Properties i wybierz pozycjď spark.layouts.VerticalLayout, dziďki czemu elementy w tym kontenerze bďdû ukķadane w pionie. Ten pionowy kontener bďdzie zawieraķ szczegóķowe informacje o produkcie. 13. Zanim przystûpisz do realizacji kolejnego ýwiczenia, przeķûcz tryb pracy na edycjď Ŭródķa i sprawdŬ, czy wygenerowany kod jest podobny do przedstawionego poniŮej. JeŮeli jakiegoŎ znacznika brakuje lub jest bķďdnie zapisany, popraw to, korzystajûc z poniŮszego kodu. OczywiŎcie mogû wystûpiý drobne róŮnice w wartoŎciach wspóķrzďdnych x i y kontrolek, jeŎli ustawiķeŎ je w trochď innych miejscach. ?xml version= 1.0 encoding= utf-8 ? s:Application xmlns:fx= http://ns.adobe.com/mxml/2009 xmlns:s= library://ns.adobe.com/flex/spark xmlns:mx= library://ns.adobe.com/flex/mx minWidth= 955 minHeight= 600 fx:Declarations !-- Place non-visual elements (e.g., services, value objects) here -- /fx:Declarations s:controlBarLayout s:BasicLayout/ /s:controlBarLayout s:controlBarContent s:Button id= btnCheckout x= 463 y= 10 label= Checkout / s:Button id= btnCartView x= 541 y= 10 label= View Cart / s:Button label= Flex Grocer x= 5 y= 5 / /s:controlBarContent s:Label x= 518 y= 320 text= (c) 2009, FlexGrocer / s:Group x= 0 y= 0 width= 100 height= 100 id= bodyGroup s:layout LEKCJA 3. Projektowanie interfejsu uŜytkownika 75 s:HorizontalLayout/ /s:layout s:Group width= 100 height= 150 id= products s:layout s:VerticalLayout/ /s:layout /s:Group /s:Group /s:Application Definiowanie sekcji produktów Po upewnieniu siď, Ůe kod aplikacji odpowiada przedstawionemu powyŮej, przeķûcz tryb pracy na projektowanie, poniewaŮ skorzystasz z niego podczas definiowania sekcji wyŎwietlajûcej produkty. Dodasz teraz kontrolki odpowiadajûce wszystkim produktom dostďpnym w projektowanym sklepie internetowym. Czasem podczas przeĪîczania miĂdzy trybami edycji kodu i projektowania znika panel Properties, który powinien byð widoczny w trybie projektowania. Ješeli panel zniknîĪ, z menu Window wybierz pozycjĂ Properties. 1. Przeciûgnij kontrolkď Label z folderu Controls w widoku Components i umieŎý jû w pionowym kontenerze products, który dodaķeŎ w poprzednim ýwiczeniu. W trybie projektowania wspomniany pionowy kontener moŮna rozpoznaý po delikatnej ramce rozpoczynajûcej siď tuŮ poniŮej paska sterujûcego, a koĹczûcej 150 pikseli niŮej. Etykietď moŮesz umieŎciý w dowolnym miejscu tego obszaru. 2. Identyfikatorowi (ID) kontrolki przypisz nazwď prodName, a wķaŎciwoŎý text ustaw na Milk. 3. Przeciûgnij drugû kontrolkď Label na miejsce poniŮej pierwszej. Wpisz jej ID — price, oraz text — $1.99. PoniewaŮ dodane etykiety sû umieszczone w kontenerze Group ustawionym jako Vertical ´Layout, nazwa produktu jest wyŎwietlana nad cenû. Ješeli otworzysz widok Outline, klikajîc zakĪadkĂ Outline (znajdujîcî siĂ obok zakĪadki Components, z której juš korzystaĪeŁ), bĂdziesz mógĪ zobaczyð hierarchiĂ elementów tworzîcych aplikacjĂ. GĪównym elementem jest znacznik s:Application , w którym sî zawarte elementy potomne: etykieta (Label) i kontener bodyGroup, a takše wĪaŁciwoŁci controlBarContent i controlBarLayout. Widoczne sî równieš inne skĪadniki elementów controlBarContent i bodyGroup. Ješeli rozwiniesz gaĪîş kontenera Group o nazwie products, zobaczysz dwie ostatnio dodane etykiety. Widok Outline jest bardzo ušyteczny, gdy chcesz dokonað zmian któregoŁ z komponentów. Wybranie np. kontenera products moše byð trudne w trybie projektowania. Dušo Īatwiejsze jest wybranie go klikniĂciem w widoku Outline. 4. Dodaj kontrolkď Button poniŮej dwóch etykiet, nadaj jej identyfikator add oraz etykietď AddToCart. 76 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I Przy kaŮdym produkcie powinna byý wyŎwietlana nazwa i cena. Przycisk AddToCart umoŮliwia uŮytkownikom umieszczenie wybranych produktów w koszykach na zakupy. PoniewaŮ dwie kontrolki Label oraz kontrolka Button sû umieszczone w kontenerze z pionowym uķoŮeniem elementów, sû wyŎwietlane jedna nad drugû. FunkcjonalnoŎciû przycisku zajmiesz siď w kolejnej lekcji. 5. Zapisz plik i kliknij przycisk Run. W uruchomionej aplikacji widaý wyraŬnie róŮnicď pomiďdzy elementami umieszczonymi w pasku sterujûcym a tymi, które znajdujû siď w gķównym obszarze aplikacji. Praca z layoutami opartymi na wiýzach Flex obsķuguje layouty oparte na wiďzach, co pozwala na dowolne rozmieszczanie elementów interfejsu uŮytkownika przy zachowaniu duŮej dokķadnoŎci pozycjonowania. Wedķug wiďzów naķoŮonych na elementy jest ustalana wielkoŎý i poķoŮenie tych elementów, kiedy uŮytkownik zmienia wielkoŎý okna aplikacji. Taka metoda ustalania rozmiaru i poķoŮenia elementów róŮni siď od tej, w której stosowane sû zagnieŮdŮone kontenery (takie jak np. kontenery Group wykorzystane w poprzednim ýwiczeniu). W przypadku layoutów opartych na wiďzach wszystkie kontrolki sû rozmieszczane wzglďdem krawďdzi nadrzďdnego kontenera wykorzystujûcego obiekt BasicLayout pozwalajûcy na pozycjonowanie bez- wzglďdne. Obiektu tego moŮna uŮyý z dowolnym kontenerem typu Group i SkinnableContainer, wķû- czajûc w to Application i Panel. Wyjûtek stanowiû specjalizowane kontenery, na przykķad Form (które poznasz w kolejnych lekcjach). Kontenery korzystajûce z obiektu BasicLayout wymagajû co prawda okreŎlenia bezwzglďdnych wspóķ- rzďdnych elementów, jednak wiďzy umoŮliwiajû dynamiczne dopasowanie przygotowanego w ten spo- sób layoutu do wielkoŎci okna aplikacji wyŎwietlanej w przeglûdarce internetowej. JeŎli na przykķad chcesz, LEKCJA 3. Projektowanie interfejsu uŜytkownika 77 by etykieta byķa zawsze wyŎwietlana w prawym dolnym rogu okna aplikacji (bez wzglďdu na rozmiar okna przeglûdarki), moŮesz zakotwiczyý kontrolkď do prawej krawďdzi nadrzďdnego kontenera. Ozna- cza to, Ůe poķoŮenie kontrolki bďdzie ustalane wzglďdem prawej krawďdzi kontenera. Zakotwiczenia layoutu uŮywane sû do ustalenia, w jaki sposób kontrolka ma byý wyŎwietlana wzglď- dem krawďdzi nadrzďdnego kontenera. Aby sprawiý, by znajdowaķa siď ona w wyznaczonej odlegķoŎci od prawej i dolnej krawďdzi kontenera, naleŮy zaznaczyý pola wyboru umieszczone poniŮej i z prawej strony kontrolki w obszarze Constraints sekcji Layout w panelu Properties. W polach tekstowych podawana jest odlegķoŎý (w liczbie pikseli), o jakû krawďdzie zakotwiczonej kontrolki majû byý oddalone od brzegów kontenera. Flex udostďpnia wiďzy do górnej, dolnej, lewej i prawej krawďdzi kontenera nadrzďdnego oraz do jego Ŏrodka w poziomie i w pionie. Wszystkie wiĂzy ustawiane sî wzglĂdem krawĂdzi kontenera, ješeli zastosowano w nim pozycjonowanie bezwzglĂdne (obiekt BasicLayout), wiĂc nie mogî byð ustawiane wzglĂdem innych kontrolek lub kontenerów. 1. Otwórz plik FlexGrocer.mxml, uŮywany w poprzedniej lekcji. JeŮeli nie ukoĹczyķeŎ poprzedniej lekcji lub przygotowany kod nie dziaķa prawidķowo, moŮesz zaimportowaý projekt FlexGrocer.fxp z katalogu Lekcja03/intermediate. Szczegóķowe informacje na temat importowania projektu znajdziesz w dodatku A. Skorzystaj z uwag tam zawartych za kaŮdym razem, gdy opuŎcisz którûŎ lekcjď lub natrafisz na problem, którego nie umiesz rozwiûzaý. 2. ZnajdŬ i zaznacz przycisk Checkout. W obszarze Constraints sekcji Size and Position panelu Properties zdefiniuj wiûzanie prawej krawďdzi przycisku do prawej krawďdzi kontenera i wpisz odlegķoŎý równû 10 pikseli. SprawdŬ, czy w polu Y jest ustawiona wartoŎý 10. W celu uwiûzania przycisku do prawej krawďdzi kliknij pole wyboru umieszczone najbardziej z prawej strony ponad ikonû przycisku w obszarze Constraints. W wyŎwietlonym polu tekstowym wpisz liczbď pikseli, o jakû przycisk ma byý oddalony od brzegu kontenera. JeŎli etykieta zniknie z ekranu, skorzystaj z pasków przewijania podglûdu w trybie projektowania. Zwykle wyŎwietlany jest tylko fragment okna aplikacji, wiďc czasem — by zobaczyý pewien element — konieczne jest przewiniďcie zawartoŎci. 78 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I 3. ZnajdŬ i zaznacz przycisk View Cart. Dodaj wiďzy tak, aby prawa krawďdŬ przycisku byķa oddalona o 90 pikseli od prawej krawďdzi kontenera. SprawdŬ, czy w polu Y jest ustawiona wartoŎý 10. Po wprowadzeniu zmian oba przyciski nawigacyjne zawsze bďdû zakotwiczone do górnego prawego rogu kontenera, niezaleŮnie od rozmiaru okna przeglûdarki. 4. ZnajdŬ i zaznacz etykietď zawierajûcû notkď o prawach autorskich. Ustaw wiďzy etykiety tak, aby byķa ona oddalona o 10 pikseli od dolnej i prawej krawďdzi zawierajûcego jû kontenera. Kliknij pole wyboru w prawym górnym rogu obszaru Constraints i wpisz 10 w wyŎwietlonym polu tekstowym. Nastďpnie kliknij dolne pole wyboru i równieŮ wpisz wartoŎý 10. PoniewaŮ etykieta znajduje siď poniŮej innych kontenerów, prawdopodobnie najproŎciej bďdzie wskazaý jû w widoku Outline. Wprowadzone ustawienia gwarantujû, Ůe niezaleŮnie od szerokoŎci kontrolki Label jej prawy dolny róg bďdzie zawsze umieszczony w pozycji 10 pikseli powyŮej i 10 pikseli w lewû stronď od prawego dolnego naroŮnika aplikacji. JeŮeli teraz przeķûczysz program w tryb edycji Ŭródķa (Source), kod powinien przypominaý ten zamieszczony na poniŮszym listingu. ?xml version= 1.0 encoding= utf-8 ? s:Application xmlns:fx= http://ns.adobe.com/mxml/2009 xmlns:s= library://ns.adobe.com/flex/spark xmlns:mx= library://ns.adobe.com/flex/mx minWidth= 955 minHeight= 600 fx:Declarations !-- Place non-visual elements (e.g., services, value objects) here -- /fx:Declarations s:controlBarLayout s:BasicLayout/ /s:controlBarLayout s:controlBarContent s:Button id= btnCheckout label= Checkout right= 10 y= 10 / s:Button id= btnCartView label= View Cart right= 90 y= 10 / s:Button label= Flex Grocer x= 5 y= 5 / /s:controlBarContent s:Label text= (c) 2009, FlexGrocer right= 10 bottom= 10 / s:Group x= 0 y= 0 width= 100 height= 100 id= bodyGroup s:layout s:HorizontalLayout/ /s:layout s:Group width= 100 height= 150 id= products s:layout s:VerticalLayout/ /s:layout s:Label text= Milk id= prodName / s:Label text= $1.99 id= price / s:Button label= AddToCart id= add / /s:Group /s:Group /s:Application W Twoim kodzie mogû wystûpiý niewielkie róŮnice spowodowane kolejnoŎciû, w jakiej dodawaķeŎ elementy i definiowaķeŎ ich wķaŎciwoŎci. Nie musisz siď tym przejmowaý, poniewaŮ w tym przypadku kolejnoŎý nie jest istotna. KaŮdy kontener i kaŮda kontrolka dodawane LEKCJA 3. Projektowanie interfejsu uŜytkownika 79 w trybie projektowania sû reprezentowane w kodzie programu przez znacznik. Elementy dodawane do kontenera sû reprezentowane przez znaczniki potomne znacznika kontenera. ZauwaŮ takŮe, Ůe wiďzy ukķadu sû oznaczane jako atrybuty odpowiedniego kontenera. 5. Przeķûcz program z powrotem w tryb projektowania i wewnûtrz kontenera bodyGroup umieŎý drugi kontener Group (element bodyGroup jest pierwszym, który dodaķeŎ; jego wysokoŎý i szerokoŎý sû ustawione na 100 ). W polu ID wpisz cartGroup, wyczyŎý pole szerokoŎci (Width), a w polu wysokoŎci (Height) wpisz 100 . Pamiďtaj, Ůe w przypadku problemów z odszukaniem komponentów w trybie projektowania zawsze moŮesz skorzystaý z widoku Outline. JeŎli przez przypadek umieŎciķeŎ element Group w niewķaŎciwym miejscu, najprostszym sposobem naprawienia bķďdu jest przeķûczenie siď do trybu edycji Ŭródķa i rďczne przeniesienie znaczników. Na poniŮszym listingu zostaķ przedstawiony omawiany fragment kodu. s:Group x= 0 y= 0 width= 100 height= 100 id= bodyGroup s:layout s:HorizontalLayout/ /s:layout s:Group width= 100 height= 150 id= products s:layout s:VerticalLayout/ /s:layout s:Label text= Milk id= prodName / s:Label text= $1.99 id= price / s:Button label= AddToCart id= add / /s:Group s:Group height= 100 id= cartGroup /s:Group /s:Group 6. W trybie projektowania ustaw typ layoutu kontenera cartGroup na VerticalLayout. JeŮeli nie umiesz znaleŬý kontenera cartGroup, zaznacz go w widoku Outline i przewiĹ okno podglûdu trybu projektowania, by zobaczyý podŎwietlony kontener. 7. Dodaj kontrolkď Label do kontenera cartGroup i w polu wķaŎciwoŎci text wpisz Your Cart Total: $. Po prawej stronie wyŎwietlanych informacji o produktach bďdzie zawsze widoczna ogólna informacja o koszyku, wskazujûca, czy zawiera on jakieŎ produkty i jaki jest aktualny koszt zakupów. SzerokoŁð kontenera products zostaĪa ustawiona na 100 , czyli tak, aby zajmowaĪ caĪî dostĂpnî przestrzeĬ. Póşniej jednak z jego prawej strony dodaĪeŁ kontener cartGroup i etykietĂ. Czy to oznacza, še wykorzystywane jest ponad 100 szerokoŁci? We Fleksie szerokoŁð i wy- sokoŁð kontenera moše przekraczað 100 . Przy ustalaniu rozmiarów i rozmieszczenia elementów dostĂpna przestrzeĬ jest dzielona proporcjonalnie do przypisanych szerokoŁci i wysokoŁci. Poniewaš w omawianym przypadku šîdana szerokoŁð przekracza maksymalnî, kašdej kontrolce zostanie przydzielona szerokoŁð, jaka wynika z podziaĪu dostĂpnego miejsca. JeŁli wŁród kontrolek znajdujî siĂ takie, których szerokoŁci sî ustawione na staĪe (czyli zastosowano wielkoŁci wyrašone w pikselach, a nie procentach), wartoŁci te zostanî odjĂte od caĪkowitej dostĂpnej szerokoŁci, a dopiero póşniej dojdzie do jej podziaĪu na po- zostaĪe elementy. 80 ADOBE FLEX 4. Oficjalny podrýcznik. Tom I 8. Przeciûgnij kontrolkď Button z katalogu Controls w widoku Components i umieŎý jû poniŮej ostatnio wprowadzonej etykiety. W polu wķaŎciwoŎci label wpisz View Cart. Przycisk ten bďdzie sķuŮyķ do wyŎwietlania peķnej zawartoŎci koszyka. JeŎli przez przypadek umieŎciķeŎ dodawane komponenty w niewķaŎciwym miejscu, najprostszym sposobem naprawienia bķďdu jest przeķûczenie siď do trybu edycji Ŭródķa i rďczne przeniesienie znaczników. Na poniŮszym listingu zostaķ przedstawiony omawiany fragment kodu. s:Group x= 0 y= 0 width= 100 height= 100 id= bodyGroup s:layout s:HorizontalLayout/ /s:layout s:Group width= 100 height= 150 id= products s:layout s:VerticalLayout/ /s:layout s:Label text= Milk id= prodName / s:Label text= $1.99 id= price / s:Button label= AddToCart id= add / /s:Group s:Group height= 100 id= cartGroup s:layout s:VerticalLayout/ /s:layout s:Label text= Your Cart Total: $ / s:Button label= View Cart / /s:Group /s:Group 9. W widoku Outline zaznacz znacznik Application. W panelu Properties wyczyŎý pola Min width (minimalna szerokoŎý) i Min height (minimalna wysokoŎý). Po uruchomieniu aplikacji i kilkakrotnej zmianie rozmiaru okna przeglûdarki bďdzie moŮna siď przekonaý, Ůe przyciski i etykiety sû prawidķowo rozmieszczane. WartoŎci minimalnej szerokoŎci i wysokoŎci mogķyby uniemoŮliwiý sprawdzenie tego zachowania w przypadku mniejszych ekranów. 10. Zapisz plik i uruchom aplikacjď poleceniem Run. LEKCJA 3. Projektowanie interfejsu uŜytkownika 81 Praca ze stanami widoku Flex umoŮliwia projektowanie aplikacji zmieniajûcych wyglûd w zaleŮnoŎci od dziaķaĹ uŮytkownika. Na przykķad aplikacja sklepu internetowego rozpoczyna dziaķanie od wyŎwietlenia uŮytkownikowi informacji o produktach, które moŮe kupiý. Gdy uŮytkownik zaczyna dodawaý produkty do koszyka, widok powinien byý zaktualizowany tak, by klient miaķ kontrolď nad zawartoŎciû koszyka. MoŮe byý na przykķad wyŎwietlany caķkowity koszt wybranych produktów. UŮytkownik powinien mieý takŮe moŮliwoŎý przeglûdania zawartoŎci koszyka i zarzûdzania niû. Tworzenie stanów widoku Dodawanie tego typu mechanizmu we Fleksie realizuje siď za poŎrednictwem stanów widoku (ang. view states). Stan widoku jest jednym z wielu sposobów wyŎwietlania definiowanych dla caķej aplikacji bûdŬ jej elementów. KaŮdy plik MXML posiada co najmniej jedno ustawienie nazywane podstawowym stanem (ang. default state), które odzwierciedla domyŎlny wyglûd aplikacji. Dodatkowe stany w MXML-u to zmodyfikowane ustawienia widoku podstawowego lub innych stanów. 1. Otwórz plik FlexGro
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Adobe Flex 4. Oficjalny podręcznik
Autor:
, ,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: