Esempio di formattazione

In questa lezione sviluppiamo un semplice esempio per esercitarci con i formattatori. Creiamo una applicazione Flex di tipo Web e, in modalita design, impostiamo il layout dell'applicazione a HorizontalLayout ed inseriamo
due controlli Panel affiancati.

Ora impostiamo in quello di sinistra la proprietà title ad "Esempio Formatter", in quello di destra a "Risultato Formatter".

Nel pannello di sinistra inseriamo un oggetto Form e vincoliamolo al pannello impostando a 0 i constraint su tutti gli spigoli.

Figura 34. Allineare il form al contenitore

Nel form inseriamo un controllo DateField, e due controlli TextInput. Impostiamo l'id DateField a "dataField" e nella label del del FormItem scriviamo "Data". In Design mode possiamo anche impostare la proprietà formatString a "DD/MM/YYYY".

Scriviamo "Qnt" nella label della prima casella di testo e al TextInput diamo come id "qnt", poi inseriamo nella casella dell'evento On change il codice :

lblQnt.text = numberFormatter.format(qnt.text)

L'id del secondo TextInput sarà "price" e la sua Label "Price".

Inseriamo nel form un Button, scriviamo nella sua Label "Formatta" e aggiungiamo un event handler all'evento click.

Nel secondo pannello, impostiamo il layout a VerticalLayout ed inseriamo tre Label. Alla prima Label assegnamo l'id a "lblData", ed colleghiamo la proprietà text al DataField:

{dateFormatter.format(dataField.selectedDate)}

L'id della seconda Label è "lblQnt" e quello della terza "lblPrice". Lasciamo vuote le altre proprietà.

Il codice dovrebbe apparire come il seguente:

<s:Panel title="Esempio Formatter" x="10" y="10" width="250" height="200" >
  <mx:Form bottom="0" right="0" top="0" left="0">
    <mx:FormItem label="Data">
      <mx:DateField id="dataField" enabled="true" formatString="DD/MM/YYYY" />
    </mx:FormItem>
    <mx:FormItem label="Qnt">
      <s:TextInput id="qnt" change="lblQnt.text = numberFormatter.format(qnt.text)"/>
    </mx:FormItem>
    <mx:FormItem label="Price"><s:TextInput id="price" /></mx:FormItem>
    <mx:FormItem>
      <s:Button label="Formatta" click="button1_clickHandler(event)"/>
    </mx:FormItem>
  </mx:Form>
</s:Panel>
<s:Panel title="Risultato Formatter" width="250" height="200"  x="278" y="10">
  <s:Label id="lblData" text="{dateFormatter.format(dataField.selectedDate)}" />
  <s:Label id="lblQnt"/>
  <s:Label id="lblPrice"/>
  <s:layout><s:VerticalLayout/></s:layout>
</s:Panel>

Figura 35. Disposizione pannelli

Finalmente inseriamo i tre Formatter utilizzando il seguente codice :

<fx:Declarations>
  <mx:DateFormatter formatString="EEEE DD MMMM YYYY" id="dateFormatter" />
  <mx:NumberFormatter id="numberFormatter" precision="2"
                      useThousandsSeparator="true" useNegativeSign="true"
                      decimalSeparatorFrom="." decimalSeparatorTo=","
                      thousandsSeparatorFrom="," thousandsSeparatorTo="." />
  <mx:CurrencyFormatter id="currencyFormatter" decimalSeparatorFrom="."
                        decimalSeparatorTo="," thousandsSeparatorFrom=","
                        thousandsSeparatorTo="." precision="2"  currencySymbol="€" />
</fx:Declarations>

Concludiamo con il codice dell'event handler del click del bottone:

Mandiamo in esecuzione e facciamo qualche osservazione:

• quando inseriamo una data con il DateField la label corrispondete sul pannello destro viene valorizzata, questa valorizzazione avviene tramite il binding;
• la valorizzazione della lblQnt nel pannello destro avviene, invece, attraverso l'invocazione del codice corrispondente all'evento change della casella di testo di input;
• attraverso il bottone applicchiamo la formattazione alle a tutte le proprietà text delle label, passando stavolta per l'invocazione di codice ActionScript.