Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00303 006242 14087036 na godz. na dobę w sumie
Hello! Flex 4 - książka
Hello! Flex 4 - książka
Autor: Liczba stron: 272
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2881-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> grafika komputerowa >> flex
Porównaj ceny (książka, ebook, audiobook).

Najnowszy Flex - aktualna książka. Wykorzystaj szansę!

Flex w wersji 4 to najnowszy krzyk mody na rynku aplikacji webowych. Pozwala na tworzenie rozwiązań internetowych w niczym nieprzypominających tych, z którymi mamy do czynienia na co dzień. Są one atrakcyjne pod względem graficznym, charakteryzują się wysoką interakcyjnością oraz nieprawdopodobnie ogromnymi możliwościami. Jeżeli wspomnieć jeszcze o tym, że jest to środowisko zupełnie darmowe... pora przygotować się na rewolucję w świecie aplikacji internetowych!

Od marca 2010 roku dostępna jest najnowsza wersja Fleksa, oznaczona numerem 4. Warto poznawać tę wersję z podręcznikiem 'Hello! Flex 4' w dłoni. Znajdziesz tu wszechstronną wiedzę na temat języków ActionScript, XML, E4X, obiektów pierwotnych oraz zasad projektowania stylów. Ponadto dowiesz się, jak tworzyć efekty, animacje oraz jak wykorzystać obiekty typu DataGrid. Jednak zanim dojdziesz do tych interesujących, lecz złożonych zagadnień, będziesz miał okazję zapoznać się z samym środowiskiem oraz najlepszymi praktykami i metodami pracy. Jeżeli chcesz rozpocząć przygodę z najnowszą wersją środowiska Flex - nie mogłeś lepiej trafić! Rozpocznij ją już dziś!

Rozpocznij przygodę z Flex 4 bez najmniejszych problemów!

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

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział 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–2010 Hello! Flex 4 Autor: Peter Armstrong Tłumaczenie: Krzysztof Sawka ISBN: 978-83-246-2881-0 Tytuł oryginału: Hello! Flex 4 Format: 158×235, stron: 272 Najnowszy Flex – aktualna książka. Wykorzystaj szansę! • Jak stworzyć swój pierwszy projekt? • Jak projektować style? • Co wybrać: AJAX czy Flex? A może je połączyć? Flex w wersji 4 to najnowszy krzyk mody na rynku aplikacji webowych. Pozwala na tworzenie rozwiązań internetowych w niczym nieprzypominających tych, z którymi mamy do czynienia na co dzień. Są one atrakcyjne pod względem graficznym, charakteryzują się wysoką interakcyjnością oraz nieprawdopodobnie ogromnymi możliwościami. Jeżeli wspomnieć jeszcze o tym, że jest to środowisko zupełnie darmowe… pora przygotować się na rewolucję w świecie aplikacji internetowych! Od marca 2010 roku dostępna jest najnowsza wersja Fleksa, oznaczona numerem 4. Warto poznawać tę wersję z podręcznikiem „Hello! Flex 4” w dłoni. Znajdziesz tu wszechstronną wiedzę na temat języków ActionScript, XML, E4X, obiektów pierwotnych oraz zasad projektowania stylów. Ponadto dowiesz się, jak tworzyć efekty, animacje oraz jak wykorzystać obiekty typu DataGrid. Jednak zanim dojdziesz do tych interesujących, lecz złożonych zagadnień, będziesz miał okazję zapoznać się z samym środowiskiem oraz najlepszymi praktykami i metodami pracy. Jeżeli chcesz rozpocząć przygodę z najnowszą wersją środowiska Flex – nie mogłeś lepiej trafić! Rozpocznij ją już dziś! • Pierwsze kroki we Fleksie – omówienie platformy • Nasłuchiwanie zdarzeń • Wiązanie danych – adnotacja Bindable • Struktura aplikacji pisanych w środowisku Flex • Języki ActionScript, XML, E4X • Definiowanie zmiennych i przestrzenie nazw • Obiekty, tablice oraz sterowanie przepływem • Dziedziczenie i inne pojęcia obiektowe w środowisku Flex • Składniki typu Spark • Stany widoku • Projektowanie stylów • Tworzenie animacji i efektów specjalnych • Wykorzystanie obiektów typu DataGrid • Zastosowanie pojemników nawigacyjnych oraz elementów wyskakujących • Projektowanie i tworzenie formularzy Rozpocznij przygodę z Flex 4 bez najmniejszych problemów! Spis treijci PRZEDMOWA 9 PODZIñKOWANIA 13 INFORMACJE NA TEMAT KSIÝœKI 17 INFORMACJE O SERII HELLO! 21 1 PIERWSZE KROKI 23 2 JñZYKI ACTIONSCRIPT 3, XML I E4X 51 3 WITAJ, SPARKU: OBIEKTY PIERWOTNE, SKęADNIKI, GRAFIKA FXG I MXML, A NAWET WIDEO 77 4 POJEMNIKI TYPU SPARK, STANY WIDOKU, EFEKTY I PROJEKTOWANIE STYLÓW 121 5 HALO FLEX 4: STOSOWANIE OBIEKTÓW DATAGRID, POJEMNIKÓW NAWIGACYJNYCH I ELEMENTÓW WYSKAKUJÝCYCH 157 6 TWORZENIE ęATWYCH W OBSęUDZE FORMULARZY ZA POMOCÝ FORMATERÓW I ANALIZATORÓW POPRAWNOIJCI W IJRODOWISKU FLEX 175 7 CAIRNGORM W AKCJI: SOCIALSTALKR (TWITTER + YAHOO! MAPS) 199 SKOROWIDZ 251 6 Tworzenie Ěatwych w obsĚudze formularzy za pomocÞ formaterów i analizatorów poprawnoijci w ijrodowisku Flex W tym rozdziale nauczymy się obsługi formaterów i analizatorów popraw- ności, dzięki którym tworzenie formularzy do wprowadzania danych staje się przyjemnością — przynajmniej w porównaniu z innymi środowiskami programistycznymi. Formatery środowiska Flex są używane głównie do formato- wania danych wyświetlanych użytkownikowi w kontrolkach takich jak przedsta- wiony w rozdziale 5. obiekt DataGrid. Mogą one również być wykorzystywane do pobierania danych wprowadzanych przez użytkownika i przekształcania ich w po- prawnie sformatowane dane wejściowe. Analizatory poprawności (ang. validator) służą w tym środowisku do sprawdzania poprawności wprowadzanych danych oraz wyświetlania odpowiednich komunikatów w przypadku wprowadzenia nie- prawidłowych informacji. Dokumentacja interfejsów API dotycząca formaterów i analizatorów poprawności jest pod wieloma względami znakomita, jednak jej słabym punktem zawsze było przedstawienie jednoczesnego zastosowania wspomnianych elementów dla jednej kontrolki wykorzystywanej przez użytkownika. Istnieje pewne dobre usprawiedli- wienie: wcale nie jest tak łatwo przeprowadzić taką czynność poprawnie! Jeżeli 176 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci jednak zależy nam, aby formularze były jak najbardziej przydatne, jest to droga, na którą prędzej czy później musimy wstąpić. Jeśli tak się stanie, czas, jaki zaoszczę- dzicie po przeczytaniu tego rozdziału, może być wart ceny całego podręcznika. Już od czasów środowiska Flex 1.0 obsługa formatowania była w nim przemyślana dobrze, a obsługa analizatorów poprawności — jeszcze lepiej. Największą innowacją od tamtej pory jest wprowadzenie do klas analizatorów poprawności właściwości id oraz możliwość powiązania danych z ich właściwościami. Zatem proces two- rzenia aplikacji integrującej formatowanie i analizę poprawności w tych samych składnikach został ułatwiony. Rozpoczniemy od utworzenia malutkiej aplikacji próbnej, która będzie bezpo- średnio wykorzystywała wbudowane formatery i analizatory poprawności. Na- szym zadaniem będzie zaobserwowanie, w jaki sposób te obiekty działają bez naszej dodatkowej pomocy. Przejdziemy następnie do nieco bardziej skomplikowanego zadania i napiszemy formularz AddressForm, w którym zostanie zaprezentowana współpraca formaterów i analizatorów poprawności w prawdziwej aplikacji. To zadanie wymaga z naszej strony nieco wysiłku: formularz AddressForm składa się z około 180 linijek kodu, więc jest to najbardziej złożony przykład, z jakim mieli- śmy dotychczas do czynienia. Nam to jednak nie przeszkadza — lepiej zakończyć ostatnie samodzielne sesje wielką eksplozją niż chlipaniem. Poza tym, chociaż omawiany kod może wydawać się nudny, dla wielu programistów aplikacji w śro- dowisku Flex może okazać się prawdziwym asem w rękawie podczas poszukiwania pracy. Nie wspominając o tym, że istnieje wiele możliwości strzelenia sobie w stopę na etapie wiązania danych podczas integracji formatowania z analizą poprawności, przez co ten rozdział okazuje się bardzo na miejscu. W następnym rozdziale wprowadzimy jeszcze dłuższy przykład, w którym przez około 50 stron będziemy tworzyć połączenie serwisów Twitter i Yahoo! Maps, zatem możemy uznać przeprawę przez kilka stron poświęconych kodowi for- Sesja 25. Formatery i analizatory poprawnoĵci 177 mularza za przystawkę przed głównym daniem. Wreszcie, będziemy korzystać w formularzu AddressForm ze składników Form i FormItem typu Halo — nie po- wiedzieliśmy więc jeszcze wszystkiego o tej architekturze. Na początek jednak, zgodnie z obietnicą, napiszmy niewielki przykład wykorzy- stujący wbudowane formatery i analizatory poprawności. SESJA 25. Formatery i analizatory poprawnoijci Obecną sesję rozpoczniemy od sprawdzenia możliwości wbudowanych formaterów i analizatorów poprawności w środowisku Flex. Mógłbym teraz zaprezentować ol- brzymi przykład wykorzystujący wszystkie standardowe formatery i analizatory poprawności, jednak nie ma to sensu, gdyż działają one na tej samej zasadzie (z wy- jątkiem analizatora CreditCardValidator; szczegóły znajdziemy w dokumentacji interfejsów API). Wszystkie formatery są podklasami węzła mx.formatters.Formatter. W środowisku Flex 4 znajdziemy w tej klasie następujące podklasy: CurrencyFormatter, Date ´Formatter, NumberFormatter, PhoneFormatter i ZipCodeFormatter. Klasa Formatter definiuje metodę format(), która musi zostać przesłonięta przez jej używane podklasy. W analogiczny sposób wszystkie analizatory poprawności stanowią podklasy węzła mx.validators.Validator, który pozwala na implementację analizy po- prawności wobec danego pola poprzez ustanowienie wartości true we właściwości required obiektu Validator. W środowisku Flex 4 mamy do czynienia z następują- cymi podklasami klasy Validator: CreditCardValidator, CurrencyValidator, 178 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci DateValidator, EmailValidator, NumberValidator, PhoneNumberValidator, RegExp ´Validator, SocialSecurityValidator, StringValidator, StyleValidator oraz ZipCodeValidator. Skoro więc mechanizm ich działania jest taki sam, w tej sesji przyjrzymy się jednemu formaterowi i jednemu analizatorowi poprawności: odpowiednio Currency ´Formatter i CurrencyValidator. Wybrałem je, ponieważ przedstawienie ich inte- rakcji nie stanowi problemu, a formatowanie walut może być przez Was bardzo pożądane. Zbudujemy niewielki programik, w którym obydwa obiekty będą wyko- rzystywane wobec tego samego pola TextInput typu Spark. Podczas tworzenia formularza adresowego w następnej sesji poznamy wiele innych rodzajów forma- terów i analizatorów poprawności. Wygląd tworzonej przez nas aplikacji podczas wprowadzania tekstu w pole Text ´Input został zaprezentowany na rysunku 6.1. Rysunek 6.1. Wprowadzanie tekstu w formularzu walutowym Po przeniesieniu aktywności (za pomocą klawisza Tab) obiekt CurrencyFormatter sformatuje tekst, co widać na rysunku 6.2. Rysunek 6.2. Sformatowanie wprowadzonego tekstu Jeżeli wprowadzimy niepoprawne dane i przeniesiemy aktywność, ich wartość me- rytoryczna zostanie zakwestionowana i analizator poprawności wyświetli komu- nikat widoczny na rysunku 6.3. Rysunek 6.3. OdpowiedŔ na wprowadzenie nieprawidĜowych danych Sesja 25. Formatery i analizatory poprawnoĵci 179 Widzimy tu implementację wielu funkcji, które w niektórych środowiskach pro- gramistycznych wymagałyby olbrzymiej ilości kodu. Spójrzmy, jak sobie z tym radzi środowisko Flex (listing 6.1). Listing 6.1. sesja25/src/Tester.mxml ?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 width= 100 height= 100 fx:Script ![CDATA[ n protected function moneyTIFocusOutHandler(event:FocusEvent):void { var formattedText:String = currencyFormatter.format(moneyTI.text); o if (formattedText != ) { moneyTI.text = formattedText; } } ]] /fx:Script fx:Declarations p mx:CurrencyFormatter id= currencyFormatter precision= 2 rounding= nearest / q mx:CurrencyValidator id= currencyValidator precision= 2 source= {moneyTI} property= text triggerEvent= focusOut / /fx:Declarations s:layout s:VerticalLayout paddingTop= 10 paddingLeft= 10 / /s:layout r s:TextInput id= moneyTI focusOut= moneyTIFocusOutHandler(event) / s:Button label= Tak naprawdÚ jestem tu po to, aby przenieĂÊ na mnie ´aktywnoĂÊ... / /s:Application n Ta funkcja formatuje tekst w reakcji na zdarzenie focusOut. o Przydzielamy tekst do obiektu moneyTI.text jedynie po jego pomyślnym sformatowaniu. p Formater CurrencyFormatter będzie zaokrąglał kwotę do pełnego centa. q Analizator poprawności CurrencyValidator analizuje wartość właściwości text obiektu moneyTI. r Tutaj obsługujemy zdarzenie focusOut pola textInput obiektu moneyTI. 180 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci Zwróćmy uwagę, że gdybyśmy nie wprowadzili instrukcji dozoru o wewnątrz procedury moneyTIFocusOutHandler n, formater CurrencyFormatter p przy- dzielałby tekst do obiektu moneyTI r w każdym przypadku. Wynik nie byłby satysfakcjonujący, ponieważ nawet w przypadku wyświetlenia przez analizator CurrencyValidator q błędu byłby to jedynie błąd polegający na braku wpisanych danych (ponieważ formater CurrencyFormatter zostałby uruchomiony przed ana- lizatorem). Widać to na rysunku 6.4. Rysunek 6.4. Komunikat o braku wpisanych danych Tak jest! Dowiedzieliśmy się, jak sprawić, aby formatery współpracowały z anali- zatorami poprawności, i mamy już pewność, że przy odrobinie ostrożności w sprawdzaniu danych wyjściowych formatera możemy utworzyć bardzo prak- tyczny interfejs użytkownika. ¸ Punkty do zapamiÚtania } Formatery służą do eleganckiego formatowania danych. } Analizatory poprawności są stosowane do sprawdzania, czy wartość odpowiada zdefiniowanym w nich kryteriom. Zazwyczaj są one używane wraz z polami TextInput, jednak mogą być również implementowane w takich obiektach jak DropDownList (przekonamy się o tym w następnej sesji). Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 181 } W razie niepowodzenia formatery zwracają pusty ciąg znaków, powinniśmy więc sprawdzać je pod tym kątem, zanim prześlemy ich wartość gdzieś dalej. W przeciwnym razie będzie analizowana zła wartość. } Jak dowiemy się z następnej sesji, możemy pisać własne formatery i analizatory poprawności. SESJA 26. Praktyczne formularze, formatery i analizatory poprawnoijci W tej sesji pogłębimy naszą znajomość formaterów i analizatorów poprawności poprzez zbudowanie formularza AddressForm, który będzie tak podobny do nor- malnego formularza używanego w rzeczywistości, jak to tylko możliwe. Oczywiście w prawdziwym świecie nic nie jest tak proste jak w przypadku książkowego przy- kładu, więc ta sesja również nie będzie łatwa. Wykorzystamy tu wiele rodzajów analizatorów poprawności, zwłaszcza NumberValidator, RegExpValidator, String ´Validator i ZipCodeValidator. Wprowadzimy również klasę ZipCodeFormatter. W tabeli 6.1 zostało wyjaśnione zastosowanie każdej z wymienionych klas w naszym przykładzie. Tabela 6.1. Klasy zastosowane w sesji 26. Klasa Zastosowanie w sesji NumberValidator RegExpValidator StringValidator ZipCodeValidator ZipCodeFormatter Sprawdzanie, czy obiekty DropDownList posiadajÈ wybrane wartoĂci. Przeprowadzanie niestandardowej analizy kanadyjskich kodów pocztowych. Sprawdzanie, czy w polach Ulica i Miasto zostaïa wprowadzona minimalna iloĂÊ tekstu. Sprawdzanie amerykañskich kodów pocztowych (ang. zip code). Formatowanie amerykañskich i kanadyjskich kodów pocztowych. Rysunek 6.5 przedstawia wygląd aplikacji budowanej w tej sesji. Tworzymy składnik AddressForm wielokrotnego użytku, element Address, który będzie w nim wykorzystywany, oraz aplikację Tester demonstrującą przełączanie się pomiędzy elementami Address i prawidłową odpowiedź formularza Address ´Form (podobnie jak pozostałe fragmenty kodu umieszczone w tej książce i ten jest objęty licencją MIT, możemy więc wprowadzić go do własnej aplikacji). 182 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci Rysunek 6.5. PrzykĜadowy formularz adresowy Jak zostało to pokazane na rysunku 6.6, po zaznaczeniu elementu Address umiesz- czonego w obiekcie List formularz AddressForm zostaje wypełniony danymi wy- branego adresu. Rysunek 6.6. Wprowadzenie do formularza gotowych danych adresowych Zachowanie naszej aplikacji będzie przedstawiane na kolejnych rysunkach podczas omawiania kodu. Tymczasem przyjrzyjmy się na listingu 6.2 aplikacji Tester. Listing 6.2. sesja26/src/Tester.mxml ?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 Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 183 xmlns:mx= library://ns.adobe.com/flex/mx xmlns:comp= components.* width= 100 height= 100 fx:Script ![CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; import model.Address; [Bindable] n private var _addresses:ArrayCollection = new ArrayCollection([ new Address( 1944 S El Camino Real , , San Mateo , Kalifornia , USA , 94403 ), new Address( 788 Denman Street , , Vancouver , Kolumbia Brytyjska , Kanada , V6G 2L5 ), new Address( 25 Oxford Street , , Londyn , , Wielka Brytania , W1D 2DW ), new Address( 21 Water Street , #400 , Vancouver , Kolumbia Brytyjska , Kanada , V6B 1A1 )]); o protected function submitClickHandler(event:MouseEvent):void { if (addressForm.validateAndSave()) { Alert.show( DostanÚ teraz numer karty kredytowej? , ´ Adres prawidïowy! ); } else { Alert.show( Dostrzegam bïÚdy , O nie! ); } } p private function enterNewAddress():void { addressList.selectedItem = null; } ]] /fx:Script s:layout s:VerticalLayout paddingLeft= 10 paddingTop= 10 gap= 5 / /s:layout q s:List id= addressList dataProvider= {_addresses} width= 380 height= 60 / s:Button label= Wprowadě nowy adres click= enterNewAddress() / s:Panel title= Adres s:layout s:VerticalLayout paddingLeft= 5 paddingTop= 5 gap= 10 / /s:layout comp:AddressForm id= addressForm r address= {addressList.selectedItem} / /s:Panel s s:Button label= WyĂlij click= submitClickHandler(event) / /s:Application 184 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci n Zmienna _addresses typu ArrayCollection przechowuje adresy, których będziemy używać (dwa pierwsze są adresami uwielbianych przeze mnie restauracji, odpowiednio Santa Ramen i Kintaro Ramen). o Funkcja submitClickHandler sprawdza i zapisuje wprowadzony adres, a także wyświetla odpowiedni alert w oparciu o wynik. p Funkcja enterNewAddress po prostu ustanawia wartość null dla elementu selectedItem i jednocześnie powoduje utworzenie wiązania z właściwością address. q Obiekt addressList posiada dostawcę dataProvider zmiennej _addresses. r Formularz addressForm zawiera właściwość address powiązaną z właściwością selectedItem obiektu addressList. s Zdarzenie typu click wobec przycisku WyĂlij powoduje uruchomienie procedury submitClickHandler. Rozpoczynamy od utworzenia tablicy ArrayCollection n dla zmiennej _addresses, która pełni funkcję dostawcy danych dataProvider z listy addressList q. Wartość właściwości selectedItem z tej listy zostaje przekazana do tworzonego przez nas formularza AddressForm r. Posiadamy także przycisk WyĂlij s, którego zdarzenie typu click jest obsługiwane przez funkcję wywołującą metodę validateAndSave o formularza AddressForm oraz który powoduje wyświetlenie jednego z dwóch alertów w zależności od wyniku. Możemy wybrać również przycisk Wprowadě nowy adres wywołujący funkcję enterNewAddress p, która powoduje wyczyszczenie pól z wprowadzonymi danymi. Rysunek 6.7 ilustruje zachowanie programu po wykryciu błędnych danych. Rysunek 6.7. Alert informujàcy o niewĜaĵciwych danych Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 185 W podobny sposób przedstawiamy na rysunku 6.8 informacje o wprowadzeniu danych zakończonym sukcesem. Rysunek 6.8. Informacja o wprowadzeniu poprawnego adresu Stworzymy teraz model klasy Address (listing 6.3). Listing 6.3. sesja26/src/model/Address.as package model { n [Bindable] public class Address { public var lineOne:String; public var lineTwo:String; public var city:String; public var zipCode:String; public var state:String; public var country:String; o public function Address( lineOne:String = , lineTwo:String = , city:String = , state:String = , country:String = , zipCode:String = ) { this.lineOne = lineOne; this.lineTwo = lineTwo; this.city = city; this.state = state; this.country = country; this.zipCode = zipCode; } 186 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci private function getAddrStr(str:String):String { return (str == null || str == ) ? : str + ; } p public function toString():String { return getAddrStr(lineOne) + getAddrStr(lineTwo) + getAddrStr(city) + getAddrStr(state) + getAddrStr(country) + getAddrStr(zipCode); } } } Model Address nie jest skomplikowany: chcemy, aby można było powiązać dane z każdą zmienną, zatem wprowadzamy adnotację [Bindable] n na początku klasy (tworzenie powiązanych danych generuje większą ilość kodu, zatem nie powinni- śmy go nadużywać). Po drugie, tworzymy konstruktor o posiadający domyślne wartości (puste ciągi znaków) dla wszystkich swoich parametrów. Możemy w ten sposób określić niektóre z tych parametrów (lub nie zdefiniować żadnego z nich) podczas tworzenia nowego obiektu Address. Wreszcie tworzymy funkcję toString p, która wykorzystuje metodę getAddrStr służącą do pomijania dodatkowych spacji w przypadku obiektów Address posiadających wypełnionych tylko kilka pól (tak, na samym końcu znajdzie się jedna niepotrzebna spacja; ćwiczeniem dla czytelników będzie pozbycie się jej). Podobnie jak w języku Java, metoda toString zostaje wywołana zawsze wtedy, gdy obiekt ma zostać zaprezentowany jako obiekt typu String, często natomiast jest przesłaniana w sposób umożliwiający bardziej użyteczne przedstawienie danych. Zwróćmy uwagę, że nie robię w tej metodzie toString nic złego, generalnie jednak kod modelu nie powinien definiować informacji dotyczących poziomu widoku. Zanim utworzymy formularz AddressForm, zaprezentuję kilka zrzutów ekranu przedstawiających różne jego funkcje oraz wyświetlanie błędów walidacji. Po pierwsze, rysunek 6.9 przedstawia sytuację, w której wpisywany jest kod pocztowy Stanów Zjednoczonych zamiast kanadyjskiego, co powoduje wyświe- tlenie odpowiedniej informacji (jest to niekonwencjonalne zachowanie analizato- ra ZipCodeValidator, które naprawiamy w tym przykładzie). Zwróćmy także uwagę, że dla Kanady etykiety formularza mają nazwy Prowincja i Kod poczt., a nie Stan i Kod pocztowy (zarezerwowane dla Stanów Zjednoczonych). Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 187 Rysunek 6.9. Efekt wpisania niewĜaĵciwego kodu pocztowego Odnotujmy teraz fakt, że jeżeli wpiszemy kanadyjski kod pocztowy w miejscu przeznaczonym na kod Stanów Zjednoczonych, zostanie wyświetlony błąd, a nie- prawidłowe dane nie zostaną wyczyszczone przez formater (rysunek 6.10). Rysunek 6.10. Kanadyjski kod pocztowy wpisany w miejsce amerykaĞskiego Po napisaniu tego przykładu ujrzycie formatery w akcji: będziecie mogli aktualizo- wać kody pocztowe Stanów Zjednoczonych do nowego stylu 5+4, pisać kody pocztowe Kanady od dużej litery i dodawać spacje pomiędzy ich segmentami. Tak, naprawdę jest to tak pasjonujące, jak się wydaje. 188 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci Wreszcie na rysunku 6.11 widzimy, że wykorzystujemy analizator poprawności również do wprowadzenia wymogu, aby użytkownik wybrał jeden ze stanów USA (lub prowincję w Kanadzie), a także wpisał odpowiedni kod pocztowy. Rysunek 6.11. Proĵba o wybór stanu Dla krajów innych niż Stany Zjednoczone lub Kanada nie wymagamy wyboru pro- wincji czy wpisania kodu pocztowego, co widać na rysunku 6.12. Rysunek 6.12. ObsĜuga paĞstwa innego niŖ USA lub Kanada Nie tylko zostają pominięte błędy, lecz także znikają czerwone gwiazdki oznaczające, że uzupełnienie danego pola jest wymagane. Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 189 Bez niepotrzebnego przedłużania przejdźmy do tworzenia formularza AddressForm (nareszcie!). Mamy tu do czynienia ze sporą ilością kodu, więc rozbijemy go na kilka części, z których każda zostanie dokładnie objaśniona. Zaczniemy od początku (listing 6.4). Listing 6.4. sesja26/src/components/AddressForm.mxml ?xml version= 1.0 encoding= utf-8 ? mx:Form xmlns:fx= http://ns.adobe.com/mxml/2009 xmlns:s= library://ns.adobe.com/flex/spark xmlns:mx= library://ns.adobe.com/flex/mx width= 400 fx:Script ![CDATA[ import mx.collections.ArrayCollection; import mx.events.ValidationResultEvent; import mx.validators.Validator; import model.Address; n private var _address:Address = new Address(); o public function validateAndSave():Boolean { if (isFormValid()) { address.lineOne = addressOneTI.text; address.lineTwo = addressTwoTI.text; address.city = cityTI.text; address.country = countryDDL.selectedItem; if (stateDDL.dataProvider.length == 0) { address.state = ; } else { p address.state = stateDDL.selectedItem; } address.zipCode = zipTI.text; return true; } else { return false; } } q private function isFormValid():Boolean { var validators:Array = [addressValidator, cityValidator, countryValidator, stateValidator]; var zipCodeValid:Boolean = validateAndFormatZipCode(); var results:Array = Validator.validateAll(validators); return results.length == 0 zipCodeValid; } r private function setFormFromAddress():void { 190 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci addressOneTI.text = address.lineOne; addressTwoTI.text = address.lineTwo; cityTI.text = address.city; countryDDL.selectedItem = address.country; var states:ArrayCollection = getStates(address.country); stateDDL.dataProvider = states; stateDDL.selectedIndex = states.source.indexOf(address.state); zipTI.text = address.zipCode; } … n Zmienna _address przechowuje obiekt Address edytowany w formularzu AddressForm. o Metoda validateAndSave jest wywoływana przez aplikację Tester. Wywołuje ona z kolei funkcję isFormValid, która sprawdza poprawność wszystkich składników formularza. Jeżeli składniki te są prawidłowe, adres zostaje zaktualizowany o umieszczone w nich wartości. Takie rozwiązanie zapobiega wprowadzeniu do obiektu Address nieprawidłowych lub tylko częściowo poprawnych danych. p Przydzielamy dla danego stanu wartość , jeśli wartość właściwości selectedItem jest równa null (nie wybraliśmy żadnego składnika), na przykład gdy lista stanów (prowincji) jest pusta dla danego kraju. q Metoda isFormValid uruchamia analizatory poprawności poprzez utworzenie ich tablicy Array i wywołanie wobec niej funkcji Validator.validateAll. Aktywuje ona również oddzielnie analizator kodu pocztowego poprzez wywołanie funkcji o nazwie validateAndFormatZipCode, którą w dalszej części opisu przeanalizujemy. Jeżeli w wywołaniu funkcji Validator.validateAll pojawią się jakiekolwiek błędy walidacji, wartość obiektu results.length będzie niezerowa. Zwróćmy uwagę, że stosujemy tymczasową zmienną dla obiektu zipCodeValid, ponieważ nie chcemy, aby w trakcie analizy poprawności nastąpiło uproszczenie skutkujące pominięciem metody validateAndFormatZipCode (mamy zamiar wywołać naraz wszystkie analizatory poprawności i wyświetlić wszystkie błędy walidacji). r Metoda setFormFromAddress aktualizuje stan formularza w oparciu o stan adresu. Ponieważ jest to przeprowadzane wewnątrz jednej metody, mamy pewność, że wybraliśmy właściwe państwo, zanim zaktualizujemy stany. Po przejrzeniu kodu formularza widocznego na listingu 6.5 znaczenie tego rozwiązania stanie się bardziej zrozumiałe. Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 191 Listing 6.5. sesja26/src/components/AddressForm.mxml (kontynuacja) … s public function set address(value:Address):void { if (value == null) { _address = new Address(); setFormFromAddress(); } else { _address = value; setFormFromAddress(); callLater(isFormValid); } } [Bindable] public function get address():Address { return _address; } t private static const EMPTY:ArrayCollection = new ArrayCollection([]); private static const COUNTRIES:ArrayCollection = new ArrayCollection([ USA , Kanada , Wielka Brytania , Francja ]); private static const STATES:ArrayCollection = new ArrayCollection([ Kalifornia , Oregon , Waszyngton ]); private static const PROVINCES:ArrayCollection = new ArrayCollection([ Kolumbia Brytyjska , Alberta , ´ Saskatchewan ]); u private function getStates(country:String):ArrayCollection { if (isUSA(country)) { return STATES; } else if (isCanada(country)) { return PROVINCES; } else { return EMPTY; } } v private function usaOrCanada(country:String):Boolean { return isUSA(country) || isCanada(country); } private function isUSA(country:String):Boolean { return country == USA ; } private function isCanada(country:String):Boolean { return country == Kanada ; 192 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci } private function getStateMsg(country:String):String { return isUSA(country) ? ProszÚ wybraÊ stan. : ProszÚ wybraÊ prowincjÚ. ; } … s Setter adresu tworzy nowy obiekt Address, jeżeli przekazana wartość wynosi null. W każdym przypadku po ustanowieniu tego adresu wywoływana jest funkcja setFormFromAddress, jednak tam, gdzie zostaje przekazana niezerowa wartość, wywołujemy także metodę isFormValid (została wcześniej zaprezentowana) poprzez wywołanie metody callLater. Za jej pomocą dajemy kontrolkom formularza czas na odzwierciedlenie nowych wartości, które zostały dla nich ustanowione (nie omawiałem w tym podręczniku metody callLater, gdyż stanowi ona zaawansowaną technologię. W ogólnym zarysie opóźnia ona uruchomienie funkcji — zostaje ona uruchomiona w następnym cyklu odświeżania ekranu — dzięki czemu wartości mogą zostać odzwierciedlone). Powodem przeprowadzania przez nas analizy poprawności jedynie w przypadku niezerowych wartości obiektu Address jest chęć uniknięcia wielu błędów walidacji w przypadku pustego formularza — wyglądałoby to po prostu brzydko (poza tym mogłoby być mylące, ponieważ użytkownik nie popełnił — jeszcze — żadnego błędu w pustym formularzu!). Tworzymy również pod metodą isFormValid getter adresu, który jest o wiele prostszy. t Te stałe stanowią oczywiście „podręcznikowy przykład”. Na świecie istnieje o wiele więcej państw, stanów i prowincji, niż przedstawiłem to w aplikacji. Właśnie uratowałem drzewo przed przerobieniem na papier. u Funkcja getStates zwraca wartość STATES dla Stanów Zjednoczonych, PROVINCES dla Kanady i EMPTY dla reszty świata. Jest to tak lubiane przez nas amerykocentryczne zachowanie; „międzynarodowi” czytelnicy mogą w razie potrzeby dowolnie modyfikować ten kod! v Te cztery wygodne funkcje są wykorzystywane w formularzu do ukazywania (chowania) gwiazdek przy polach wymagających uzupełnienia, obok potomków obiektów FormItem. Wprowadziłem je do kodu, ponieważ wykorzystuję je w wiązaniu danych oraz dlatego, że są w prosty sposób odczytywane. Czas na dalszą część kodu (listing 6.6). Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 193 Listing 6.6. sesja26/src/components/AddressForm.mxml (kontynuacja) … w private function validateAndFormatZipCode():Boolean { var unformattedText:String = zipTI.text.toUpperCase().replace(/W/g, ); var country:String = countryDDL.selectedItem; var result:ValidationResultEvent; var usa:Boolean = isUSA(country); var canada:Boolean = isCanada(country); zipCodeValidator.required = usa; postalCodeValidator.required = canada; if (usa) { postalCodeValidator.validate( ); result = zipCodeValidator.validate(unformattedText); } else if (canada) { zipCodeValidator.validate( ); result = postalCodeValidator.validate(unformattedText); } else { postalCodeValidator.validate( ); zipCodeValidator.validate( ); return true; } if (result.type == ValidationResultEvent.VALID) { if (usa) { zipTI.text = zipCodeFormatter.format(unformattedText); } else { zipTI.text = postalCodeFormatter.format(unformattedText); } return true; } else { return false; } } ]] /fx:Script fx:Declarations mx:StringValidator id= addressValidator minLength= 5 source= {addressOneTI} property= text required= true requiredFieldError= To pole jest wymagane. / mx:StringValidator id= cityValidator minLength= 2 source= {cityTI} property= text required= true requiredFieldError= To pole jest wymagane. / mx:NumberValidator id= countryValidator lowerThanMinError= ProszÚ wybraÊ kraj. source= {countryDDL} property= selectedIndex minValue= 0 / mx:NumberValidator id= stateValidator lowerThanMinError= {getStateMsg(countryDDL.selectedItem)} 194 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci source= {stateDDL} property= selectedIndex enabled= {usaOrCanada(countryDDL.selectedItem)} minValue= 0 / mx:ZipCodeFormatter id= zipCodeFormatter formatString= #####-#### / mx:ZipCodeFormatter id= postalCodeFormatter formatString= ### ### / mx:ZipCodeValidator id= zipCodeValidator listener= {zipTI} wrongUSFormatError= Kod pocztowy ZIP+4 musi mieÊ format 12345-6789 . requiredFieldError= To pole jest wymagane. / mx:RegExpValidator id= postalCodeValidator listener= {zipTI} expression= ^[A-Z]d[A-Z]d[A-Z]d$ noMatchError= Kod pocztowy jest nieprawidïowy. / /fx:Declarations … w Funkcja validateAndFormatZipCode zwraca wynik walidacji i analizy formatowania kodu pocztowego. Dla Stanów Zjednoczonych zostaje uruchomiona funkcja zipCodeValidator. Dla Kanady zostaje uruchomiona funkcja postalCodeValidator. Jeżeli otrzymamy wartość VALID, zostaną uruchomione formatery. Dla Stanów Zjednoczonych zostanie uruchomiony formater zipCodeFormatter; dla Kanady będzie to postalCodeFormatter (ponieważ kody pocztowe są sprawdzane tylko dla Stanów Zjednoczonych i Kanady, uzasadnione jest wprowadzenie przypadku else). Tworzymy wystąpienia analizatora StringValidator zapewniające zachowanie określonej minimalnej długości danych wejściowych. Obiekt source jest składnikiem przechowującym analizowaną właściwość. Analizatory countryValidator i stateValidator są wystąpieniami analizatora NumberValidator uruchamianymi wobec właściwości selectedIndex list DropDownList zawierających dany kraj i stan. Tak, jest to powszechnie uważane za najlepsze rozwiązanie. Analizator stateValidator jest dostępny wyłącznie dla Stanów Zjednoczonych lub Kanady. Formater zipCodeFormatter wykorzystuje amerykański format kodów pocztowych 5+4. Jakby poziom zagmatwania był zbyt mały, postalCodeFormatter jest formaterem ZipCodeFormatter. Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 195 Analizator zipCodeValidator wykorzystuje wbudowany analizator ZipCodeValidator. Analizator postalCodeValidator wykorzystuje wbudowany analizator RegExpValidator do sprawdzania kanadyjskich kodów pocztowych za pomocą wyrażeń regularnych. Przechodzimy do ostatniej części kodu (listing 6.7). Listing 6.7. sesja26/src/components/AddressForm.mxml (kontynuacja) … mx:FormItem label= Ulica required= true width= 100 s:TextInput id= addressOneTI width= 250 / s:TextInput id= addressTwoTI width= 250 / /mx:FormItem mx:FormItem label= Miasto required= true width= 100 s:TextInput id= cityTI width= 100 / /mx:FormItem mx:FormItem label= Kraj required= true s:DropDownList id= countryDDL width= 150 dataProvider= {COUNTRIES} prompt= Wybierz... change= validateAndFormatZipCode(); / /mx:FormItem mx:FormItem label= {isUSA(countryDDL.selectedItem) ? Stan : Prowincja } required= {usaOrCanada(countryDDL.selectedItem)} s:DropDownList id= stateDDL width= 150 dataProvider= {getStates(countryDDL.selectedItem)} prompt= Wybierz... enabled= {stateDDL.dataProvider.length 0} / /mx:FormItem mx:FormItem label= Kod {isUSA(countryDDL.selectedItem) ? pocztowy : poczt. } width= 100 required= {usaOrCanada(countryDDL.selectedItem)} s:TextInput id= zipTI width= 150 focusOut= validateAndFormatZipCode() / /mx:FormItem /mx:Form Składniki FormItem stanowią jedynie elementy układu graficznego, podobnie jak sam pojemnik Form. Pojemnik ten nie posiada żadnych dodatkowych funkcji — w przeciwieństwie do formularzy języka HTML obecne w środowisku Flex obiekty Form typu Halo są wyłącznie narzędziami układu graficznego. 196 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci Nazwy państw znajdują się w obiekcie countryDDL listy DropDownList. Podczas zmiany państwa wywołujemy metodę validateAndFormatZipCode() w celu sprawdzenia kodu pocztowego. Właściwość selectedItem obiektu countryDDL jest używana do sprawdzania, czy obiekty FormItem są wymagane. Jedynym skutkiem wprowadzenia tej właściwości jest wyświetlenie niewielkiej czerwonej gwiazdki. Nie ma ona żadnego wpływu na kontrolki znajdujące się we wnętrzu obiektu FormItem, chyba że jest wykorzystywana również przez te elementy. Właściwość dataProvider obiektu stateDDL jest określana przez właściwość selectedItem obiektu countryDDL. Właściwość selectedItem obiektu countryDDL jest używana do określenia etykiety obiektu FormItem dla pól Kod pocztowy (Kod poczt.) oraz Stan (Prowincja). Zdarzenie focusOut obiektu zipTI uruchamia funkcję validateAndFormat ´ZipCode, dzięki czemu błędy w kodzie pocztowym są natychmiast wychwytywane. Ufffff! To był bardzo długi przykład, przez który przewinęły się nawet wyrażenia regularne. Przepraszam za to — gdybym na samym początku powiedział, co Was tu czeka, moglibyście ominąć tę sesję! Całe szczęście w środowisku Flex znajduje się klasa RegExpValidator pozwalająca nam w bardzo łatwy sposób konstruować analizatory poprawności wykorzystujące wyrażenia regularne. Kto by się spodziewał, że kody pocztowe mogą być tak skomplikowane (co więcej, całkowicie zignorowaliśmy całą resztę świata, więc właściwy przebieg tego ćwiczenia mógłby wyglądać jeszcze gorzej!)? Sesja 26. Praktyczne formularze, formatery i analizatory poprawnoĵci 197 ¸ Punkty do zapamiÚtania } Środowisko Flex zawiera pewną liczbę przydatnych formaterów i analizatorów poprawności. } We Fleksie można (względnie) łatwo tworzyć niestandardowe składniki, które pozwalają na jednoczesne wykorzystywanie wbudowanych formaterów i analizatorów poprawności, dzięki czemu zwiększa się łatwość obsługi aplikacji. } Należy być ostrożnym podczas stosowania wiązania danych wobec współzależnych składników formularza, na przykład wobec list DropDownList zawierających nazwy państw i prowincji. Możemy utworzyć formularz właściwie działający podczas modyfikowania nowego modelu obiektowego, ale nie rozwiąże to problemu obsługi modelu obiektowego ustanowionego w zewnętrznym świecie. } W pewnych sytuacjach funkcja callLater może zostać wykorzystana do rozwiązania problemów z synchronizacją czasową interfejsu użytkownika. Rozwiązanie takie należy jednak stosować ostrożnie, ponieważ istnieje pokusa jego nadużywania przy jednoczesnym ignorowaniu leżących u podstaw problemów. } Obiekty Form i FormItem stanowią jedynie narzędzia układu graficznego. Nie ma potrzeby, aby stosować je do wysyłania formularzy — inaczej niż ma to miejsce w języku HTML. Uznajmy je za pojemniki VGroup pozwalające na ładne rozmieszczenie pól formularza. 198 ROZDZIAě 6. Tworzenie formularzy za pomocà formaterów i analizatorów poprawnoĵci Co dalej? Na przestrzeni całej książki staram się pokazać, że w środowisku Flex można w bardzo prosty sposób tworzyć niestandardowe składniki. W tej sesji zgłębiliśmy świat formaterów i analizatorów poprawności, tworząc między innymi własny ana- lizator poprawności i złożony, niestandardowy formularz. Nie wiem jak Wy, ale ja mam już zupełnie dość formularzy — pomimo ich przy- datności. W następnym rozdziale zrobimy coś z zupełnie innej beczki i będziemy się wreszcie bawić podczas budowania naszego połączenia serwisów Twitter i Yahoo! Maps. Dowiemy się, jak należy budować prawdziwą aplikację, w jaki sposób można projektować większe programy w środowisku Cairngorm, a także jak można poro- zumiewać się z serwerami za pomocą klasy HTTPService.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Hello! Flex 4
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ą: