In questa lezione ci occuperemo di alcuni semplici strumenti di formattazione, messi a disposizione dal Flex Framework e utilizzabili con Flash Builder.
Dare un formato alle informazioni significa renderle più leggibili, più comprensibili e semplici da manipolare, basti pensare ad un numero molto grande che risulta di gran lunga più leggibile con i punti per separare le migliaia, oppure alla rappresentazione delle date, che può cambiare a seconda della lingua o del contesto culturale: una data in italiano è espressa nel formato GG/MM/AAAA, mentre per gli inglesi la stessa data è meglio comprensibile con il formato MM/GG/AA.
Esaminiamo i componenti che ci fornisce il Flex Framework a proposito:
| Componente | Dati da formattare |
|---|---|
CurrencyFormatter |
Valute (euro, dollaro, etc.) |
DateFormatter |
Date |
NumberFormatter |
Numeri generici |
PhoneFormatter |
Numeri di telefono |
ZipCodeFormatter |
Codici postali (CAP) |
Tutti questi oggetti derivano dalla classe Formatter, che può essere utilizzata come superclasse per costruire un formattatore custom.
Tutti i formattatori possono essere usati dichiarativamente in una pagina MXML o via codice in ActionScript e tutti espongono il metodo format() che prende in input un oggetto, tipicamente del tipo specificato dal nome, e ritorna una stringa formattatta secondo una specifica che viene impostata in modo diverso da formattatore a formattatore.
Come abbiamo visto per i validatori, anche i componenti per la formattazione agiscono a seconda della lingua impostata nella applicazione, per default l'Inglese. È comunque possibile impostare la lingua e la cultura italiana dalle impostazioni locali del compilatore, come abbiamo fatto nelle lezioni precedenti.
Le similitudini con i validatori non sono finite: anche i Formatter, che non sono controlli visuali, vanno inseriti nel tag <fx:Declaration>.
Infine possiamo personalizzare i messaggi, in caso di errori di formattazione, grazie alla proprietà error.
Ricapitolando, per utilizzare un formattatore occorre: dichiararlo (MXML o ActionScript), impostare i parametri di formattazione specifici, impostare la proprietà error, poi attivarlo invocarndo il metodo format(), cui si passa l'oggetto da formattare.
<fx:Declarations>
<mx:DateFormatter formatString="EEEE DD MMMM YYYY" id="dateFormatter" />
<mx:NumberFormatter id="numberFormatter" precision="4"
useThousandsSeparator="true" useNegativeSign="true"
decimalSeparatorFrom="." decimalSeparatorTo=","
thousandsSeparatorFrom="," thousandsSeparatorTo="." />
<mx:PhoneFormatter formatString="(####) ######" id="phoneFormatter"/>
</fx:Declarations>Collegare le proprietà ai dati
Volendo il metodo format è bindable ad una certa proprietà di un controllo. Vediamo questo esempio:
<mx:label id="lblData" text="{dateFormatter.format(dataField.selectedDate)}" />Inotre possiamo specificare la proprietà al verificarsi di un evento:
<s:TextInput id="qnt" change="lblQnt.text=numberFormatter.format(qnt.text)" />