Adsense Banner

Giovedì, 24 Novembre 2011 18:58

Sviluppare Flex Gratis: impostare Flex 4.5 SDK su Eclipse In evidenza

Scritto da 
Vota questo articolo
(0 Voti)

eclipse + adobe flexPer sviluppare applicazioni flash (actionscript) senza dover acquistare Flash Builder, esistono poche alternative, una di queste è Flash Develop, un IDE completo e open source già impostato per lavorare con la sitassi di action script, ma che purtroppo funziona solo sotto Windows, mentre se si vuole sviluppare anche sotto Linux ci si può appoggiare a Eclipse, un IDE completo anch'esso e open source, ma orientato alla programmazione in Java, anche se proprio Flash Builder è in sostanza Eclipse con incorporata una plug-in progettata per assistere lo sviluppatore sulla programmazione della piattaforma Adobe Flex; è la plug-in in sostanza ad essere a pagamento. 

Tornado alla seconda alternativa, cioè Eclipse nudo e crudo, si può affermare che con un paio di accorgimenti è possibile sviluppare a costo zero anche su piattaforma Flex.

Innanzi tutto è necessario procurarsi Eclipse e lo si può fare qui, oppure per alcune distribuzioni Linux è possibile scaricane i pacchetti direttamente dai repository inclusi alla distribuzione e installiamolo.

Dopodichè bisogna procurarsi la SDK di Adobe Flex, che giunta alla versione 4.5 e la si può trovare qui. Una volta scaricato il file ZIP contenente la SDK estraiamola in una directory che ci risulti in seguito comda da raggiungere.

Ora che abbiamo tutto ciò che ci occorre avviamo Eclipse, che ci chiederà di creare un workspace (per iniziare vabene quello suggerito).

Creiamo un nuovo progetto  cliccandoclicking File -> New -> Project. La finestra “New Project” dovrebbe aprirsild open. Selezioniamo “Project” dal gruppo “General” nella lista e clicchiamo sul pulsante Next.creazione nuovo progetto

Consiglio per iniziare di dare al progetto un nome generico, capirete poi il perchè, tipo “Flex Project” scrivetelo nella casella “Project name” lasciando “Use default location” selezionatocosì si creerà in automatico la cartella del nostro progetto e che conterra tutti i suoi files. Clicchiamo il pulsante Finish per concludere l'operazione.

nome del progetto

Eclipse dovrebbe creare il nuovo progetto e aggiungerlo alla finestra Project Explorer. Creeremo ora a mano un mirror di una struttura standard diuna cartella di un normale progetto Flex come farebbe Flesh Builder che solitamente aggiunge tre cartelle ad ogni progetto: “bin,” “libs” and “src”. Clicchiamo sul tasto destro del mouse sulla cartella del progetto puntando su “New,” e quindi su “New Folder”. Inseriamo “bin” nel campo “Folder name” e clicchiamo sul pulsante Finish. Ripetiamo questo procedimento anche per le altre due cartelle pocanzi menzionate. Una volta fatto ciò noteremo le tre sottocartelle nella cartella del progetto, come da figura.

sottocartelle progetto flex

La cartella bin è dove viene salvato il file Flash .swf compilato e pronto alla pubblicazione. La cartella libs è dove viene scaricato ogni file di libreria .swc che il progetto userà. Infine la cartella src è dove vengono depositati tutti i sorgenti del nostro progetto pronti per la compilazione o lo sviluppo. Prima di proseguire raccomando di apportare un piccolo trick aggiungendo un editor per i files *.as associandoli al Java editor di Eclipse dato che ActionScript 3 è molto simile nella sintassi. Per fare ciò clicchiamo il menu “Window” se usiamo Linux o Windows, oppure “Eclipse” se usiamo un Macintosh e quindi clicchiamo Preferences. Questo ci porterà nella finestra di dialogo Eclipse Preferences. Espandiamo il nodo “General” e quindi espandiamo “Editors”. Clicchiamo su “File Assocations” per vedere il pannello di associazione dei files. Ora clicchiamo il pulsante “Add…” quindi associamo dalla lista "File types”.

2011-11-25-194402_1280x1024_scrot

Inseriamo “*.as” ne campo “File type” e clicchiamo il pulsante OK. Il tipo di file è ora inserito e apparirà nella lista “File types”. Clicchiamoci sopra per selezionarlo.

2011-11-25-194427_1280x1024_scrot

Quindi clicchiamo il pulsante “Add…” della lista “Associated editors” la quale dovrebbe essere vuota. selezioniamo “Java Editor” dalla lista e clicchiamo su OK.

2011-11-25-194442_1280x1024_scrot

Il risultato finale dovrebbe essere come il seguente:

2011-11-25-194233_1280x1024_scrot

Ora siamo pronti per creare il nostro file MXML, il quale definisce l'aspetto della nostra applicazione. Inoltre servirà come partenza per il compilatore dal quale partirà per la compilazione. Tasto destro del mouse sulla cartella src puntando su “New,” e quindi cliccando su “File”.  La finestra “New File” dovrebbe apparire. Come in precedenza diamogli un nome generico tenendo presete che la compilazione del progetto partirà da qui, un nome tipo main.mxml che ricorda quello del file principale di Flash Develop.

2011-11-25-201027_1280x1024_scrot

Il file main.mxml dovrebbe apparire ora nella cartella src e viene aperto automaticamente nell'editor. Inseriamo le righe di codice seguente nella finestra dell'editor di main.mxml:

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<s:application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="My Application">
<s:Label text="Hello World" fontWeight="bold" fontSize="24"/>
</s:Panel>
</s:Application>

Ora siamo pronti per compilare questo progetto. Tasto destro del mouse sulla cartella del progetto (in questo caso, “Flex Project”) e quindi clicchiamo su “Properties” nella parte bassa del menu popup. Questo aprirà la finestra delle proprietà del progetto ed è valida solo per questo progetto. Clicchiamo su “Builders” nella lista sul lato sinistro senon fosse già selezionata Questo pannello è dove viene definito il compilatore per il tuo progetto e gli attributi necessari.

builders

Clicchiamo il bottone “New…”  sul lato destro per creare una nuova build factory.  Una finestra apparirà e selezioneremo la voce “Program” all'interno di una lista. clicchiamo il bottone OK per confermare.

program

Questa operazione apre la finestra di “Edit Configuration”. Inseriamo il nome del nostro costruttore ne campo “Name”. questo è un procedimento da ripetere ad ogni procedimento, Raccomando quindi di dargli lo stesso nome del progetto su cui stiamo lavorando, nel nostro caso “Flex_Project”. Clicchiamo “Browse File System…” sotto al campo “Location”. Raggiungiamo la cartella che contiene i files di Flex 4 SDK che abbiamo estrato   e andiamo alla sottodirectori bin. Selezioniamo il file mxmlc.exe se siamo su Windows o solo il file mxmlc senza estensionise siamo su MacOS o Linux. Nel mio caso /home/ubuntu/flex_sdk_4.5.1/bin/mxmlc. Clicchiamo ora il bottone “Browse Workspace…” sotto al campo "Working Directory”. Se la cartella del progetto non è ancora selezionata, selezioniamola e clicchiamo OK. Ora non ci resta che definire gli attributi da inviare al compilatore mxmlc. Inseriamo la stringa seguente nel campo “Arguments”.

src/main.mxml -output=bin/main.swf -library-path+=libs/ -target-player=10.2.0

Essenzialmente ciò che diciamo al compilatrore è di prendere il file main.mxml dalla cartella src, compilarlo utilizzando le librerie disponibili nella cartella libs e usare  la piattaforma Flash 10.2 come targhet (richiesta per i progetti Flex 4.5, quindi valutimo poi caso per caso che piattaforma e SDK utilizzare per quel particolare progetti, alcuni utenti sono restii ad aggiornare alla ultima relase il player flash), e salva il file compilato SWF come main.swf nella cartella bin. Ci sono molte altre opzioni possibili da usare con questo compilatore, ma esula dall'obbiettivo di quest'articolo.

il compilatore

Prima di premere il pulsante OK, c'è ancora qualcosa da fare e cioè cliccare sul tab  “Build Options” e poi controllare che le opzioni “Launch in background” e “During auto builds” siano attive. questo farà si che il progetto venga compilato ogni volta che viene salvato un file. Questo è utile per avere un feedback immediato dal compilatore visto che non abbiamo un correttore dedicato al linguaggio. Se però stiamo lavorando su files molto grandi la compilazione ad ogni salvataggio impiegerà molto tempo e quindi conviene disattivare queste opzioni.

opzioni per il compilatore

Clicchiamo OK e il nostro progetto dovrebbe venir compilato. Se abbiamo fatto tutto per bene dovrebbero apparire i messaggi di compilazione con il risultato positivo. Non dovesse partire la compilazione in automatico è possibile effettuarla in manuale premendo Project -> Build Project dal menù principale e dovrebbe avviarsi.

Hello World

Se non appaiono errori neIla finestra in basso della console (messaggi rossi) vuol dire che è andato a buon fine, avendo raggiunto l'obbiettivo di avere un una soluzione di sviluppo Flex e Actinon Script funzionate con Eclipse.

Letto 12014 volte Ultima modifica il Sabato, 23 Giugno 2012 22:53

© copyright 2011

Porcari Filippo studio grafico - p.iva 01985590023

Tutti i diritti riservati.