Programmare i componenti Flex 3 con Actionscript 3: la progress bar

(scritto da , il giorno 05-02-2008 01:10)
add to my flexgala

Utilizzare i componenti in applicativi Flex 3 è molto importante come abbiamo visto in questi tempi. E\' possibile creare componenti personalizzati, customizzare quelli esistenti, tuttavia il loro uso e quasi sempre necessario. Tra questi oggi ne proviamo uno abbastanza utile: la progress bar. In questo tutorial caricheremo un file MP3 dalla rete usando la progressBar per monitorare lo status.

Per la reazlizzazione di questo progetto utilizzeremo Adobe Flex 3, attualmente in versione BETA 3, scaricabile gratuitamente dal sito internet labs.adobe.com

Creare un nuovo progetto Adobe Flex o Adobe AIR:
Dal menu "File" andiamo su "New" quindi su "Flex Project" sia che vogliate creare un progetto Flex che Adobe Air.
Nel pannello successivo inseriamo il nome del progetto nel box "Project name". Nel box "Project location" scegliamo invece il percorso della cartella principale del nostro lavoro.  In "Application type" selezionate "Web application" se desiderate creare un lavoro in Flex, "Desktop application" se desiderate creare un lavoro in AIR. Lasciate invariato il pannello "Serve Technology". Nei due successivi pannelli lasciate invariate le cartelle di destinazione del progetto. Al termine cliccate su "Finish".

Creare un file MXML
Dal menu "File" andiamo su "New" quindi "MXML Application". Nel box "FileName" inserite il nome che volete dare al file. Lasciate invariata l\'eventuale indicazione della cartella "src" come destinazione del nuovo documento MXML. Cliccate su "Finish".

Con il nuovo file aperto, modifichiamo il tag iniziale nella seguente maniera:

<codice Flex 2/Actionscript 3>

  1. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="showInfo()" >


Quindi inseriamo il componente adatto:
<codice Flex 2/Actionscript 3>

  1. <mx:ProgressBar x="253" y="200" id="aPb" labelPlacement="center" mode="polled"/>


Ora tra il tag del componente e "WindowedApplication" se lavorate in progetti AIR o "Application" in progetti Flex, scrivete quanto segue:
<codice Flex 2/Actionscript 3>

  1. <mx:Script>
  2.         <![CDATA[
  3.  
  4.  
  5.                 import flash.events.ProgressEvent;
  6.                 import flash.media.Sound;
  7.  
  8.             private function showInfo():void
  9.             {
  10.                 var aSound:Sound = new Sound();
  11.                 var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
  12.                 var req:URLRequest = new URLRequest(url);
  13.  
  14.                 aSound.load(req);
  15.  
  16.                 aPb.source = aSound;
  17.                 aSound.addEventListener(ProgressEvent.PROGRESS, laodSound);
  18.                 aSound.addEventListener(Event.COMPLETE, suona);
  19.  
  20.                 function loadSound(event:ProgressEvent):void {
  21.                     var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100;
  22.                 }
  23.  
  24.                 function suona(e:Event):void
  25.                 {
  26.                     aSound.play();
  27.                     aPb.visible=false;
  28.                 }            
  29.             }
  30.  
  31.         ]]>
  32.     </mx:Script>

Dopo aver inserito le classi necessarie, istanziato la classe Sound e caricato il brano, abbiamo impostato una funzione per l'azione di scaricamento: loadSound.
Quindi ne abbiamo aggiunta una da usare al momento del compoletamento, (souna) dove facciamo partire l'audio e sparire la progress bar (è vero che è utile, ma alla fine del download non è più necessaria!!!)

Proviamo il nostro applicativo:




Per testare l'applicativo clicchiamo sul tasto di scelta rapida CTRL+F11 oppure cliccate su "Run nomeApplicazione" dal menu "Run".


DISTRIBUIRE UN'APPLICAZIONE ADOBE AIR
Se volete procedere alla creazione del file *.air seguite le seguenti istruzioni : andate sulla voce di menu "Project" quindi su "Export Release Version".
Controllate che i valori inseriti nei box "Project" ed "Application" corrispondano ai file che avete lavorato fino ad ora. Quindi cliccate su "Next". Eventualmente scegliete una destinazione diversa per il file AIR finale nel box "Export to file".
Nel pannello successivo premete sul tasto "Create" per creare una firma digitale. Quindi nell'ulteriore schermata impostate tutti i valori necessari al riconoscimento della versione, autore, ecc... impostando una password. Questa servirà a protezione del vostro lavoro ovviamente.
Concludete con "Finish" ed aspettate la creazione del file AIR. 


Commenti (0)

Registrati ed esegui il login se vuoi lasciare un commento

Visualizza l'articolo in formato pdfScarica o stampa l'articolo "Programmare i componenti Flex 3 con Actionscript 3: la progress bar" in formato PDF

Torna indietro
Per collaborazioni, proposte, segnalazioni scrivete a:

Javaday 2010




  •  
    Articoli
     
  •  
    Blogs
     
  •  
    Eventi
     
  •  
    Layout
     
  •  
    in più
     
 

Utilizzare i Charts components in Flex 3 - I° parte (07-01-2010)
Una delle potenzialità messe a disposizione nel Flex Builder, nelle Flex SDK e nel futuro Flash Builder, è la possibilità di utilizzare i Charts...

JavaDay a Roma il 30 gennaio 2010 (11-12-2009)
Anche quest'anno si terrà a Roma - presso l'Università di Roma Tre - l'attesissimo evento JAVADAY oggi giunto alla 4° edizione. Una full...

Adobe AIR 2 beta su Adobe Labs (09-12-2009)
Già da qualche giorno è disponibile la nuova versione beta di Adobe AIR. Molte sono le novità che questa release presenta. Anzitutto, dato il...

FITC 2010: pronti per la 3° edizione! (22-11-2009)
Nel 2010 si terrà ad Amsterdam il 22 e 23 febbraio: segnate queste date sulla vostra agenda, mi raccomando! E' assolutamente vietato mancare! E...

Verso la creazione di Rich Web Applications con le novità di Spring 3.0 e l'integrazione con Adobe Flex (18-11-2009)
Un evento unico, completamente gratutito, condensato in 3 ore dense di contenuti e anteprime. Per la prima volta in Italia verrà presentata...

Nuovi e-seminar per FlexGALA in calendario (09-11-2009)
Come preannunciato lo scorso settembre, alla ripresa post-vacanze, eccoci con il primo appuntamento al quale faranno seguito altri eventi in...

Working on New and Legacy topics in the same time.
Author : Flexblog by Faratasystems

This very long weekend I was working on my presentations for upcoming Flex symposium in New York City. I have two topics there that should have...


continua...

Microsoft SharePoint 2010 Administrator's Companion
Author : O'Reilly New Books

Get comprehensive information to plan, deploy, administer, and support SharePoint 2010. With this ADMINISTRATOR'S COMPANION, you get...


continua...

apri dettaglio news Programming Windows Identity Foundation
Author : O'Reilly New Books


apri dettaglio news Steal This Computer Book 4.0
Author : O'Reilly New Books


JavaDay IV edizione

Data di svolgimento: 30-01-2010

A day in a differtent universe è quello che si...

Rich Web Applications con Spring Training

Data di svolgimento: 30-11-2009

Un evento unico, completamente gratutito, conde...

WorkCity ospite allo SMAU 2009

Data di svolgimento: 21-10-2009

WorkCity, nato da un'idea del nostro collaborat...

Integrare LiveCycle DS nelle architetture Enterprise

Data di svolgimento: 27-11-2008

Livecycle DS e Flex 3 sono le soluzioni di ...

Live Cycle DS best practices: creare architetture per RIA

Data di svolgimento: 05-11-2008

Livecycle DS e Flex 3 rappresentano insieme il ...

Adobe e l\'Open Source: usare le tecnologie aperte di Adobe

Data di svolgimento: 28-10-2008

Non solo licenze a pagamento: Adobe ha detto sÃ...