Creare e utilizzare un MXML Component

Immagini

Si possono creare components usando MXML o Actionscript. L’uso di un linguaggio rispetto ad un altro porta agli stessi risultati. Infatti all’atto di compilare Flex si occuperà di creare la classe Actionscript prima di passare al file SWF. In questa prima soluzione vedremo come creare un MXML Component da utilizzare successivamente all’interno di un progetto Flex.
 
Sono poche le regole da seguire per definire un componente. Invece di usare il tag Application come root tag, viene utilizzato un elemento diverso. Questo perchè un’applicazione Flex può contenere solo una dichiarazione di tag Application. I nostri MXML Components verranno invocati ed importati all’interno del main application file (dove si trova il tag Application). Quindi per un MXML component si dovrà scegliere su quale oggetto basarlo. Si può usare qualsiasi  container o un control. A questo punto posso inserire all’interno del MXML Component tutto il codice che mi serve per svolgere le funzionalità da includere all’interno del componente.
In questa soluzione andremo a sviluppare un MXML Component per gestire una procedura di login con un modulo per l’inserimento di Log In e Password.

Come realizzarlo
Cominciamo dal creare un nuovo Flex Project dal Flex Builder 2 che useremo durante tutto il secondo capitolo:

1. Aprire Flex Builder 2 e creare un Flex Project con il nome: Chapter_2_Flex_2_Components. Cliccare sul tasto Next 

2. In Flex Builder si possono creare MXML Component dalla voce di menu File > New > MXML Component. La dialog window che si apre è differente dalla classica finestra per creare un MXML Application. Potete vederlo nella figura che segue. Dobbiamo infatti impostare oltre che il file name anche l’elemento che fungerà da root tag, selezionandolo da un menù a tendina. Nel nostro esempio scegliamo un Panel.

3. Assegniamo al file il nome Chapter_2_Sol_1.mxml e facciamo click su Finish.
The MXML Component avrà quindi il seguente codice :

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400” height=”300”>
</mx:Panel>

La prima linea di codice specifica la dichiarazione di XML document type, seguita dal tag Panel che per questo MXML Component assume il valore di root tag.
Nonostante i componenti non comincino con il tag Application è necessaria la dichiarazione dell’attributo xmlns che definisce il suffisso mx all’interno del root tag. Se venisse omessa questa dichiarazione Flex non riconoscerebbe validi i tag utilizzati nel codice :

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400” height=”300”>

Adesso andiamo ad aggiungere gli oggetti e le funzionalità all’interno del file.

4. Aggiungiamo un titolo al Panel andando a settare la proprietà title con il valore “Sign In”

5. Inseriamo un Form tag che conterrà il seguente codice:

<mx:Form x=”10” y=”10” width=”360” height=”240”>
  <mx:FormHeading label=”Insert your information:”/>
  <mx:FormItem label=”User”>
   <mx:TextInput/>
  </mx:FormItem>
  <mx:FormItem label=”Password”>
   <mx:TextInput/>
  </mx:FormItem>
  <mx:FormItem label=”Remember me”>
   <mx:CheckBox label=”Checkbox”/>
  </mx:FormItem>
  <mx:FormItem>
   <mx:Button label=”Button”/>
  </mx:FormItem>
 </mx:Form>

Il form contiene gli InputText per inserire  i dati per l’accesso autenticato, un checkbox per la funzione Remeber me e un bottone per l’invio dei dati immessi. Salviamo l’MXML Component.

Non eseguite il run del progetto in quanto Flex per poter usare gli MXML Component li deve lanciare dal main application file. Quando abbiamo creato il Flex Project in Flex Builder, è stato creato automaticamente il main application file a cui è stato assegnato il nome del progetto. Se guardate dentro il Navigator View in Flex Buidler, trovere il file Chapter_2_Flex_2_Components.mxml con il seguente codice:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 
</mx:Application>

Per invocare un MXML Component esterno all’interno di un main applciation è sufficiente seguire due step:

1. dichiarare un custom namespace che punta al package che contiene il MXML Component

2. invocare il componente usando il custom namespace ed il suo nome di file senza l’estensione .mxml

Inseriamo quindi il seguente codice per invocare il MXML Component:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
    xmlns:comp = “*”>
   
    <comp:Chapter_2_Sol_1 />
 
</mx:Application>

Nel tag Application abbiamo aggiunto la dichiarazione di un custom namespace denominato “comp”. Avremmo potuto usare qualsiasi altro valore. Questo namespace definisce il package che contiene i componenti da importare:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
    xmlns:comp = “*”>

Avendo nel nostro caso creato un MXML Component sulla root principale del progetto, basta usare il valore “*”, che include tutti i file all’interno della cartella principale del progetto.
Utilizzando il custom namespace posso andare ad invocare il MXML Component facendo riferimento al suo nome di file senza l’estensione .mxml: <comp:Chapter_2_Sol_1 />
Salvando il file ed il run the application il mio componente sarà caricato e visualizzato all’interno del mio application file.

Expert Tips
Un Flex  Project può essere composto da molti MXML Component. Alcuni di questi possono anche essere importati da altri progetti. Per questo motivo la gestione dei package è un aspetto molto importante.
Il consiglio è quello di creare gli MXML Component all’interno di una folder. In questo modo posso usare differenti folder per suddividere differenti tipi di custom components ed evitare conflitti di duplicazione di nomi. La cosa importante è che in fase di definizione del custom namespace all’interno del main application file, riporto il package corretto. Supponiamo per esempio che i miei MXML Component siano stati salvati tutti all’interno della folder “myComp”, il custom namespace avrebbe dovuto puntare a questo package:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
    xmlns:comp = “myComp.* “>

Definire un custom namespace comporta anche la presenza dei nostri MXML Components definiti all’interno di quel package, nella Component  View di Flex Builder.

Questa view si trova solo nella quando vi trovate nella modalità Design di Flex Builder e vi permette di trascinare con un drag and drop il custom component dalla folder Custom all’interno del progetto, come mostrato dalla figura 2.2. In questo modo verrà automaticamente scritto il codice necessario all’invocazione del component.