Flex 4 SDK ed Eclipse su Windows 7

Introduzione alla guida Flex 4 ed Eclipse su Windows 7

Abbiamo parlato nei giorni scorsi, di come installare e configurare Apache Ant su Windows 7, argomento che ci servirà riprendere per utilizzare Adobe Flex 4 con Eclipse, l’editor di sviluppo più rinomato nel mondo dell’opensource.
Chi si avvicina per la prima volta a Flex, magari non sarà a conoscenza dei vari editor di sviluppo messi a disposizione dalla stessa Adobe o da altri sviluppatori.
Tra i più conosciuti elenchiamo:

- Adobe Flash Builder (Windows, Mac OSX)
- FlashDevelop (Windows)
- Powerflasher FDT (Windows, Mac OSX, Linux)

Vi sorgerà spontaneo porvi il quesito: “Perchè utilizzare Eclipse e non le alternative precedentemente elencate?”. In realtà la scelta dell’editor di sviluppo, dovrebbe essere affrontata individualmente e solo ed esclusivamente testando i vari editor. Naturalmente, dobbiamo in qualche modo analizzare anche altri aspetti, quali i costi e la compatibilità tra i vari sistemi operativi.

Adobe Flash Builder non è opensource, ha un costo non indifferente (249$ per la versione standard) e non supporta tutti i sistemi operativi più diffusi.

Powerflasher FDT supporta tutti i sistemi operativi più diffusi, anche se su Linux offre esclusivamente un plug-in da integrare ad Eclipse, ed ha un costo base per la versione “pure” di 129$.

FlashDevelop è invece l’alternativa totalmente gratuita ed opensource, ma con un neo non indifferente. FlashDevelop infatti, non supporta nè Mac OSX nè Linux.
In questa guida ho preferenziato l’utilizzo di Eclipse come editor di sviluppo per i nostri applicativi in Flex, non solo perchè fosse compatibile anche su Linux e quindi ci offre la possibilità di migrare da un sistema operativo all’altro, ma perchè inevitabilmente riusciremo a comprendere meglio anche com’è strutturato l’SDK di Flex 4 durante la lettura della guida e la configurazione di Apache Ant ed Eclipse.

L’installazione di Adobe Flex 4 ed Eclipse

Prima di procedere con l’installazione e il download di Adobe Flex 4 SDK ed Eclipse, è necessario installare e configurare Apache Ant.
Non a caso avevo precedentemente parlato di una guida scritta qualche giorno fa dal titolo: “Guida installazione Apache Ant su Windows 7“. Apache Ant ci servirà per affrontare il processo di compilazione degli applicativi in Flex.

Abbiamo installato Apache Ant, ora è necessario scaricare Eclipse (per la guida qui proposta ho scaricato Eclipse Classic 3.6.1 32 bit) dal sito eclipse.org: http://www.eclipse.org/downloads/

La versione d’Eclipse che abbiamo scaricato non prevede nessun installer per windows e pertanto necessita solo di essere scompattato in una qualunque cartella del nostro Windows 7.
Scarichiamo infine Flex 4 SDK dal sito: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 .
La versione scaricata e configurata al momento della scrittura di questa guida, è la versione Open Source 4.1.0.16076. Completato il download, sarà necessario scompattare l’archivio in una cartella su C:\ con il nome di flex.

Se abbiamo eseguito tutti i passi della guida, avremo le due cartelle: “C:\ant“, “C:\flex“.
Come ultima operazione sui files, dobbiamo selezionare il file flexTasks.jar, posizionato su C:\flex\ant\lib\ e copiarlo su C:\ant\lib\.

Test Finale: Il nostro primo progetto in Flex 4

Precedentemente avevamo scaricato Eclipse Classic 3.6.1 in una cartella a nostra scelta, adesso è venuto il momento di eseguirlo per la prima volta.
Eseguiamo quindi Eclipse e come destinazione del workspace selezioniamo C:\workspace.

Si aprirà la schermata di benvenuto: “Welcome to Eclipse”. Clicchiamo in alto a destra su Workbench ed impostiamo il nostro progetto in Flex 4: File -> New-> Project, e successivamente selezioniamo General -> Project.

Nel campo “Project name” inseriamo “Flex Test” e clicchiamo sul pulsante “Finish”. Verrà creata automaticamente una cartella “Flex Test” all’interno di “C:\workspace\“.

Ci siamo quasi! Ora che abbiamo impostato il nostro progetto di base, possiamo procedere con la scrittura del codice d’esempio e la compilazione del nostro progetto interfacciandoci ad Apache Ant.

Ci troviamo all’interno dell’editor e sulla destra abbiamo la finestra del “Package Explorer“, con al suo interno una cartella intitolata “Flex Test“. Cliccando con il tasto destro sulla cartella, possiamo creare un nuovo file: New -> File, con File Name: “build.xml“.
Inseriamo pertanto il codice all’interno del file appena creato:

[code lang="xml"]

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

<project name='MyApp' default='main'>
<property name="ANT_HOME" value="C:/ant/"/>
<property name="FLEX_HOME" value="C:/flex/"/>
<taskdef resource="flexTasks.tasks" classpath="${ANT_HOME}/lib/flexTasks.jar"/>

<target name="main">
<mxmlc file="example.mxml" keep-generated-actionscript="true" static-link-runtime-shared-libraries="true">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
<source-path path-element="${FLEX_HOME}/frameworks"/>
</mxmlc>
</target>

</project>
[/code]

Adesso, sempre come spiegato in precedenza, creaiamo un ulteriore file con il nome “example.mxml“, nonchè il file dichiarato nell’xml del file precedente con il codice: mxmlc file=”example.mxml”.
All’interno di questo file incolliamo il seguente codice:

[code lang="xml"]
<?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>
</fx:Declarations>

<s:Label text="Hello Word"/>
</s:Application>
[/code]

Infine salviamo i files e per verificare che il tutto è stato configurato ed installato correttamente, selezioniamo il file “build.xml” attraverso il Package Explorer e clicchiamo su “Run -> Run” o “CTRL+F11“.
Selezioniamo infine “Ant Build” quando richiesto e clicchiamo su “OK“.

Se la procedura di Building attraverso Apache Ant è andata a buon fine, nella finestra di debug comparirà il messaggio: “BUILD SUCCESSFUL“.
Su “C:\workspace\Flex Test\“, troverete il file compilato con il nome di “example.swf“. Eseguiamo quindi “example.swf”, e ci apparirà come output “Hello World“.

Complimenti! La nostra prima applicazione in Flex è stata generata correttamente.

Articoli Simili

• Guida installazione Apache Ant su Windows 7