3) Flex - Uso di Application e Components

Come destreggiarsi in Mxml

Una delle splendide caratteristiche di Flex è la capacità di spostarsi e interagire tra file Application (dal quale viene lanciata l'applicazione) e files Components. La facoltà di creare separatamente i vari componenti permette, oltre che rendere il codice più leggibile, il riutilizzo dello stesso e la gestione dei componenti grafici con una migliore sintonia.

Creiamo la nostra applicazione d'esempio per rendere chiaro questo concetto:

Create un nuovo Flex Project con Flex Builder, chiamatelo MyComponents e avrete il relativo file Application. Adesso create una nuova cartella sotto src e chiamatela View. Dentro la view cliccate con il destro e poi selezionate New MXML Component. Chiamatelo FirstView e dove vi viene chiesto "based of" selezionate VBOX (Conteiner di oggetti verticali allineati ).

Dentro il Vbox in modalità Design inseriamo una Label che sarà il titolo della nostra view e un'altra che stamperà un messaggio proveniente da un campo di input della nostra Application. Coloriamo la nostra view di verde per distinguerla da quella che andremo a creare in seguito.

Il codice di FirstView.mxml risulterà alla fine il seguente:

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox horizontalAlign="center" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" backgroundColor="#90F40E">

<mx:Script>

<![CDATA[

import mx.core.Application;

]]>

</mx:Script>

<mx:Label text="Prima view" width="403" height="27" textAlign="center" fontStyle="italic" fontWeight="bold" fontSize="15"/>

<mx:Label width="612" height="26" text="Ciao {Application.application.textInput.text}! Hai selezionato la prima view!"/>



</mx:VBox>



Da notate che facciamo riferimento alla nostra Application tramite le istruzioni Application.application e subentrando in tale nodo del file mxml possiamo accedere a qualsiasi suo componente indicandone l'id (nel nostro caso textInput) e le sue caratteristiche (nel nostro caso la 'text' che indica il contenuto del campo di testo).

A questo punto creiamo un altro Component VBOX, lo chiamiamo SecondView e imponiamo le stesse caratteristiche del precedente a parte il colore di sfondo (stavolta rosso) e il messaggio di saluto.

Eccovi il codice di SecondView.mxml :

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox horizontalAlign="center" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" backgroundColor="#FA2010">

<mx:Script>

<![CDATA[

import mx.core.Application;

]]>

</mx:Script>

<mx:Label text="Second view" width="403" height="27" textAlign="center" fontStyle="italic" fontWeight="bold" fontSize="15"/>

<mx:Label width="628" height="28" text="Ciao {Application.application.textInput.text}! Hai selezionato la seconda view!"/>



</mx:VBox>

Ora andiamo nel file Application e creiamo la logica per rendere dinamica la nostra applicazione: passiamo alla modalità design e inseriamo una Label descrittiva (per indicare all'utente di scrivere il suo nome) e un TextInput (con id= 'textInput') attaverso il quale passero il testo alle views per il messaggio di saluto.

Creiamo la maschera di visualizzazione delle views attraverso il componente ViewStack (conteiner che visualizza i componenti al suo interno uno per volta) che viene inizializzato con un Canvas (conteiner generico) vuoto. Andiamo nella modalità codice e all'interno dello stack inseriamo le nostre 2 view richiamandole con dei tag apparentemente simili a quelli del documento mxml ma accessibili solo dopo aver definito un altro namespace nel tag application con il seguente codice:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:views="views.*">

e inserendo i 2 componenti nel ViewStack nel seguente modo:

<views:FirstBox id="First"/>

<views:SecondBox id ="Second" />

A questo punto Creiamo 2 button che ci permettono di spostarci da una View all'altra determinando quale componente il ViewStack dovrà visualizzare attraverso la sua proprietà selectedChild.

Alla fine il codice del file MyComponent.mxml risulterà il seguente:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application creationComplete="{MyViewStack.selectedChild=start}" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:views="views.*">

<mx:Label x="40" y="10" text="Please insert your name e scroll views" width="263" height="28"/>

<mx:TextInput x="40" y="46" width="204" height="35" id="textInput"/>

<mx:ViewStack id="MyViewStack" x="342" y="46" width="700" height="285">



<mx:Canvas id="start" width="100%" height="100%">

<mx:Label x="0" y="10" text="Quale view vuoi selezionare?" width="321" height="67"/>

</mx:Canvas>

<views:FirstBox id="First"/>

<views:SecondBox id ="Second" />



</mx:ViewStack>



<mx:Button click="{MyViewStack.selectedChild=First}" x="40" y="89" label="First view" width="99"/>

<mx:Button click="{MyViewStack.selectedChild=Second}" x="147" y="89" label="Second view" width="97"/>



</mx:Application>

Da notare che nel tag Application ho aggiunto l'instruzione creationComplete="{MyViewStack.selectedChild=start}", per settare, al momento della creazione dell'applicazione, che lo stato iniziale del viewStack è sul Canvas vuoto ( in realtà vuoto del tutto non è avendo aggiunto una Label descrittiva).

Cliccate con il destro sul file MyComponent.mxml e lanciate la vostra applicazione.

Con questo tutorial spero di aver chiarito bene il legame fra i vari componenti in flex. Sono presenti anche altre metodologie di sviluppo tra componenti come l'uso dei moduli e degli swf, ma questi saranno probabili argomenti di prossime lezioni! :-)

Per qualsiasi dubbio sono a disposizione.

Davide Graziani