Adobe Flash Builder: sviluppare con Flex SDK

Adobe Flash Builder 4 (precedentemente noto come Adobe Flex Builder) è stato progettato per consentire agli sviluppatori di creare rapidamente rich Internet application (RIA) e contenuti multipiattaforma mediante il framework open source Flex. Esso è stato sviluppato sulle basi di Eclipse quindi molte delle sue funzionalità ritorneranno familiari a chi è gia avvezzo a questo IDE.

Flex, invece, è stato introdotto da Adobe per lo sviluppo di interfacce utente usando un linguaggio XML chiamato MXML. Flex è provvisto di componenti e caratteristiche come web services, remote objects, drag and drop, sortable columns, charting/graphing, built in animation effects e altre semplici interazioni.  Il linguaggio Flex e la sua strutturazione in sorgenti MXML per la GUI ed ActionScript per la Business Logic sono studiati per distinguere la logica della programmazione dal design implementando di fatto il Design pattern MVC.

L’SDK Flex è Open Source e può essere utilizzato sia tramite linea di comando che tramite un IDE, Flash Builder invece è a pagamento o scaricabile in versione di prova dal sito:

https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=it

Scaricato ed installato l’IDE iniziamo col creare un progetto cliccando su File -> New -> Flex Project a questo punto inseriamo il nome del progetto e lasciamo il resto come default.

Nuovo progetto di test

Come output folder lasciamo quello di default e clicchiamo ancora avanti, ci ritroveremo con questa schermata:

Configurazione del nuovo progetto

Nella parte alta viene richiesto quale component set utilizzare: spark+ mx o solo mx, spark è il nuovo set di componenti (per l’esattezza 20 componenti)  che è stato sviluppato appositamente per la release 4 di Flex ma non include ancora tutti i componenti sviluppati nel set mx (50 componenti).  Come consigliato da Adobe stessa è sempre meglio scegliere un componente Spark se esso è disponibile, al posto di uno mx. Scegliamo entrambi come proposto di default e se non vogliamo cambiare la directory per i sorgenti ed il  Main file  clicchiamo Finish.

Otteniamo il seguente progetto:

Il nuovo progetto generato ed il main file

Proviamo ad aggiungere qualche componente alla nostra applicazione, ad esempio un pannello con all’interno un messaggio di testo. Per ottenere ciò ci sono essenzialmente due vie: scrivere a mano il codice aiutati dall’IDE che suggerisce il codice da inserire (ponendosi nella vista Source del file) oppure molto più semplicemente facendo drag and drop dal pannello Components (visibile impostando la vista View del file).

Ad esempio generiamo un codice del tipo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel x="10" y="10" width="250" height="200">
<s:RichText x="10" y="10" text="Ciao benvenuto su appuntisoftware.it" width="228" height="119"/>
</s:Panel>
</s:Application>
 Clicchiamo ora sulla freccina verde (Run) e poi su Test per poter eseguire la nostra semplice applicazione:
Avviamo la nostra applicazione con Run -> Test
Si aprirà il nostro browser di default con la nostra applicazione inserite in una pagina html.
La nostra applicazione all'interno del browser