Spis treci
Przykadowy rozdzia
Katalog ksiek
Hello! Flex 4
Autor: Peter Armstrong
Tumaczenie: Krzysztof Sawka
ISBN: 978-83-246-2881-0
Tytu oryginau: Hello! Flex 4
Format: 158235, stron: 272
Katalog online
Zamw drukowany
katalog
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online
Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912010
Spis treci
PRZEDMOWA
PODZIKOWANIA
13
17
21
23
51
77
121
7 CAIRNGORM W AKCJI:
SOCIALSTALKR (TWITTER + YAHOO! MAPS)
SKOROWIDZ
251
199
175
157
6
Tworzenie atwych
w obsudze formularzy
za pomoc
formaterw
i analizatorw poprawnoci
w rodowisku Flex
tym rozdziale nauczymy si obsugi formaterw i analizatorw poprawnoci, dziki ktrym tworzenie formularzy do wprowadzania danych staje
si przyjemnoci przynajmniej w porwnaniu z innymi rodowiskami
programistycznymi. Formatery rodowiska Flex s uywane gwnie do formatowania danych wywietlanych uytkownikowi w kontrolkach takich jak przedstawiony w rozdziale 5. obiekt DataGrid. Mog one rwnie by wykorzystywane do
pobierania danych wprowadzanych przez uytkownika i przeksztacania ich w poprawnie sformatowane dane wejciowe. Analizatory poprawnoci (ang. validator)
su w tym rodowisku do sprawdzania poprawnoci wprowadzanych danych
oraz wywietlania odpowiednich komunikatw w przypadku wprowadzenia nieprawidowych informacji.
176
jednak zaley nam, aby formularze byy jak najbardziej przydatne, jest to droga, na
ktr prdzej czy pniej musimy wstpi. Jeli tak si stanie, czas, jaki zaoszczdzicie po przeczytaniu tego rozdziau, moe by wart ceny caego podrcznika.
Ju od czasw rodowiska Flex 1.0 obsuga formatowania bya w nim przemylana
dobrze, a obsuga analizatorw poprawnoci jeszcze lepiej. Najwiksz innowacj
od tamtej pory jest wprowadzenie do klas analizatorw poprawnoci waciwoci
id oraz moliwo powizania danych z ich waciwociami. Zatem proces tworzenia aplikacji integrujcej formatowanie i analiz poprawnoci w tych samych
skadnikach zosta uatwiony.
Rozpoczniemy od utworzenia malutkiej aplikacji prbnej, ktra bdzie bezporednio wykorzystywaa wbudowane formatery i analizatory poprawnoci. Naszym zadaniem bdzie zaobserwowanie, w jaki sposb te obiekty dziaaj bez naszej
dodatkowej pomocy. Przejdziemy nastpnie do nieco bardziej skomplikowanego
zadania i napiszemy formularz AddressForm, w ktrym zostanie zaprezentowana
wsppraca formaterw i analizatorw poprawnoci w prawdziwej aplikacji. To
zadanie wymaga z naszej strony nieco wysiku: formularz AddressForm skada si
z okoo 180 linijek kodu, wic jest to najbardziej zoony przykad, z jakim mielimy dotychczas do czynienia. Nam to jednak nie przeszkadza lepiej zakoczy
ostatnie samodzielne sesje wielk eksplozj ni chlipaniem. Poza tym, chocia
omawiany kod moe wydawa si nudny, dla wielu programistw aplikacji w rodowisku Flex moe okaza si prawdziwym asem w rkawie podczas poszukiwania
pracy. Nie wspominajc o tym, e istnieje wiele moliwoci strzelenia sobie w stop
na etapie wizania danych podczas integracji formatowania z analiz poprawnoci,
przez co ten rozdzia okazuje si bardzo na miejscu.
W nastpnym rozdziale wprowadzimy jeszcze duszy przykad, w ktrym przez
okoo 50 stron bdziemy tworzy poczenie serwisw Twitter i Yahoo! Maps,
zatem moemy uzna przepraw przez kilka stron powiconych kodowi for-
177
178
Skoro wic mechanizm ich dziaania jest taki sam, w tej sesji przyjrzymy si
jednemu formaterowi i jednemu analizatorowi poprawnoci: odpowiednio Currency
Formatter i CurrencyValidator. Wybraem je, poniewa przedstawienie ich interakcji nie stanowi problemu, a formatowanie walut moe by przez Was bardzo
podane. Zbudujemy niewielki programik, w ktrym obydwa obiekty bd wykorzystywane wobec tego samego pola TextInput typu Spark. Podczas tworzenia
formularza adresowego w nastpnej sesji poznamy wiele innych rodzajw formaterw i analizatorw poprawnoci.
Wygld 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
Jeeli wprowadzimy niepoprawne dane i przeniesiemy aktywno, ich warto merytoryczna zostanie zakwestionowana i analizator poprawnoci wywietli komunikat widoczny na rysunku 6.3.
Rysunek 6.3.
Odpowied na
wprowadzenie
nieprawidowych
danych
179
Widzimy tu implementacj wielu funkcji, ktre w niektrych rodowiskach programistycznych wymagayby olbrzymiej iloci kodu. Spjrzmy, jak sobie z tym radzi
rodowisko Flex (listing 6.1).
Listing 6.1. sesja25/src/Tester.mxml
n
o
p
q
180
Tak jest! Dowiedzielimy si, jak sprawi, aby formatery wsppracoway z analizatorami poprawnoci, i mamy ju pewno, e przy odrobinie ostronoci
w sprawdzaniu danych wyjciowych formatera moemy utworzy bardzo praktyczny interfejs uytkownika.
Punkty do zapamitania
181
Zastosowanie w sesji
NumberValidator
RegExpValidator
StringValidator
ZipCodeValidator
ZipCodeFormatter
182
Rysunek 6.5.
Przykadowy
formularz
adresowy
Jak zostao to pokazane na rysunku 6.6, po zaznaczeniu elementu Address umieszczonego w obiekcie List formularz AddressForm zostaje wypeniony danymi wybranego adresu.
Rysunek 6.6.
Wprowadzenie
do formularza
gotowych danych
adresowych
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;
n
[Bindable]
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")]);
protected function submitClickHandler(event:MouseEvent):void {
if (addressForm.validateAndSave()) {
Alert.show("Dostan teraz numer karty kredytowej?",
"Adres prawidowy!");
} else {
Alert.show("Dostrzegam bdy", "O nie!");
}
}
183
184
185
package model {
[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;
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
Model Address nie jest skomplikowany: chcemy, aby mona byo powiza dane
z kad zmienn, zatem wprowadzamy adnotacj [Bindable] n na pocztku klasy
(tworzenie powizanych danych generuje wiksz ilo kodu, zatem nie powinnimy go naduywa). Po drugie, tworzymy konstruktor o posiadajcy domylne
wartoci (puste cigi znakw) dla wszystkich swoich parametrw. Moemy w ten
sposb okreli niektre z tych parametrw (lub nie zdefiniowa adnego z nich)
podczas tworzenia nowego obiektu Address. Wreszcie tworzymy funkcj toString
p, ktra wykorzystuje metod getAddrStr suc do pomijania dodatkowych
spacji w przypadku obiektw Address posiadajcych wypenionych tylko kilka
pl (tak, na samym kocu znajdzie si jedna niepotrzebna spacja; wiczeniem
dla czytelnikw bdzie pozbycie si jej).
Podobnie jak w jzyku Java, metoda toString zostaje wywoana zawsze wtedy, gdy
obiekt ma zosta zaprezentowany jako obiekt typu String, czsto natomiast jest
przesaniana w sposb umoliwiajcy bardziej uyteczne przedstawienie danych.
Zwrmy uwag, e nie robi w tej metodzie toString nic zego, generalnie jednak
kod modelu nie powinien definiowa informacji dotyczcych poziomu widoku.
Zanim utworzymy formularz AddressForm, zaprezentuj kilka zrzutw ekranu
przedstawiajcych rne jego funkcje oraz wywietlanie bdw walidacji.
Po pierwsze, rysunek 6.9 przedstawia sytuacj, w ktrej wpisywany jest kod
pocztowy Stanw Zjednoczonych zamiast kanadyjskiego, co powoduje wywietlenie odpowiedniej informacji (jest to niekonwencjonalne zachowanie analizatora ZipCodeValidator, ktre naprawiamy w tym przykadzie).
Zwrmy take uwag, e dla Kanady etykiety formularza maj nazwy Prowincja
i Kod poczt., a nie Stan i Kod pocztowy (zarezerwowane dla Stanw Zjednoczonych).
187
Rysunek 6.9.
Efekt wpisania
niewaciwego
kodu pocztowego
Po napisaniu tego przykadu ujrzycie formatery w akcji: bdziecie mogli aktualizowa kody pocztowe Stanw Zjednoczonych do nowego stylu 5+4, pisa kody
pocztowe Kanady od duej litery i dodawa spacje pomidzy ich segmentami.
Tak, naprawd jest to tak pasjonujce, jak si wydaje.
188
Dla krajw innych ni Stany Zjednoczone lub Kanada nie wymagamy wyboru prowincji czy wpisania kodu pocztowego, co wida na rysunku 6.12.
Rysunek 6.12.
Obsuga pastwa
innego ni USA
lub Kanada
Nie tylko zostaj pominite bdy, lecz take znikaj czerwone gwiazdki oznaczajce,
e uzupenienie danego pola jest wymagane.
189
190
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;
}
191
192
}
private function getStateMsg(country:String):String {
return isUSA(country) ? "Prosz wybra stan." :
"Prosz wybra prowincj.";
}
s Setter adresu tworzy nowy obiekt Address, jeeli przekazana warto wynosi
null. W kadym przypadku po ustanowieniu tego adresu wywoywana jest
funkcja setFormFromAddress, jednak tam, gdzie zostaje przekazana
niezerowa warto, wywoujemy take metod isFormValid (zostaa
wczeniej zaprezentowana) poprzez wywoanie metody callLater.
Za jej pomoc dajemy kontrolkom formularza czas na odzwierciedlenie
nowych wartoci, ktre zostay dla nich ustanowione (nie omawiaem
w tym podrczniku metody callLater, gdy stanowi ona zaawansowan
technologi. W oglnym zarysie opnia ona uruchomienie funkcji zostaje
ona uruchomiona w nastpnym cyklu odwieania ekranu dziki czemu
wartoci mog zosta odzwierciedlone). Powodem przeprowadzania przez
nas analizy poprawnoci jedynie w przypadku niezerowych wartoci obiektu
Address jest ch uniknicia wielu bdw walidacji w przypadku pustego
formularza wygldaoby to po prostu brzydko (poza tym mogoby by
mylce, poniewa uytkownik nie popeni jeszcze adnego bdu
w pustym formularzu!). Tworzymy rwnie pod metod isFormValid getter
adresu, ktry jest o wiele prostszy.
t Te stae stanowi oczywicie podrcznikowy przykad. Na wiecie istnieje
o wiele wicej pastw, stanw i prowincji, ni przedstawiem to w aplikacji.
Wanie uratowaem drzewo przed przerobieniem na papier.
u Funkcja getStates zwraca warto STATES dla Stanw Zjednoczonych,
PROVINCES dla Kanady i EMPTY dla reszty wiata. Jest to tak lubiane przez
nas amerykocentryczne zachowanie; midzynarodowi czytelnicy mog
w razie potrzeby dowolnie modyfikowa ten kod!
v Te cztery wygodne funkcje s wykorzystywane w formularzu do ukazywania
(chowania) gwiazdek przy polach wymagajcych uzupenienia, obok
potomkw obiektw FormItem. Wprowadziem je do kodu, poniewa
wykorzystuj je w wizaniu danych oraz dlatego, e s w prosty sposb
odczytywane.
Czas na dalsz cz kodu (listing 6.6).
193
194
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 nieprawidowy."/>
</fx:Declarations>
195
196
197
Punkty do zapamitania
}
198
Co dalej?