2) Flex - La mia prima applicazione con Flex Builder

Uso degli alert

Rieccomi a spiegare ai neofiti di questo linguaggio come compiere i primi passi e creare la applicazione in Flex. In particolare in questo piccolo tutorial spiegherò come legare il risultato di un TextInput ad un Alert:

Innanzitutto aprite Flex Builder e create un un nuovo Flex Project chiamandolo MyFirstApplication.

Ora cliccate su Finish e avrete lo scheletro del vostro primo progetto con i sorgenti sotto la cartella src e il deploy dell'applicazione nella cartella bin-debug.

Noterete che si è creato nella cartella src un file MyFirstApplication.mxml. Fateci un doppio click e vi apparirà il contenuto in modalità source.

Qui avrete un Tag Application necessario per definire da dove parte la nostra applicazione e solo i componenti con questo tag posson essere mandati in esecuzione.

<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalalign="center"></mx:application>

Ora andiamo in modalità design e se non è definito di default aggiungiamo la vista "Components" dal menù "Window". Noterete qui la possibilità d'inserire i vari componenti grafici e i contenitori (Dedicherò un post in particolare su essi).

Facciamo un drag & drop sul componente Canvas (contenitore generico) trascinandolo dentro il nostro spazio di lavoro. Imponetegli come width 100 % e come height 100% (consiglio di switcharetra la modalità design e quella source in modo da vedere come viene trasformato in codice quello che disegnamo).

Ora inseriamo nel Canvas una Label, un TextInput e un Button come nella figura :

Ora andiamo nella parte source e rendiamo univoco ogni elemento con un id. Al click sul bottone imponiamo che venga chiamato un Alert al quale passiamo l'input del TextField (attributo text).

Il codice finale della nostra applicazione risulterà il seguente:

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

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

<mx:Script>

<![CDATA[

import mx.controls.Alert;

]]>

</mx:Script>

<mx:Label id="mylabel" x="174" y="33" text="Inserisci il tuo nome" width="120"/>

<mx:TextInput x="174" y="59" id="input"/>

<mx:Button id="button" x="174" y="99" label="Salutami" click="{Alert.show('Ciao '+input.text+'!', 'MyAlert')}"/>



</mx:Application>

Da notare che è necessario importare la Classe Alert all'interno del Tag Script (all'interno del quale è possibile inserire codice ActionScript).

Ora Cliccate con sul vostro file mxml con il destro e poi su Run Application.

La vostra prima Applicatione in Flex è pronta. ;-) Al prox post.

Davide Graziani