L'obiettivo in questo tutorial è quello di creare un elenco di contatti che carichi dinamicamente da un file XML esterno. Quando l'utente seleziona un contatto diverso, i dati verranno automaticamente aggiornati per essere visualizzati correttamente. Applicheremo anche alcune modifiche al foglio di stile di base ai risultati e daremo al progetto un tocco più personalizzato.
Anteprima del risultato finale
Diamo un'occhiata a uno screenshot del risultato finale su cui lavoreremo:
Nota: come realizzerai rapidamente, non utilizzo l'SDK per creare file Flex 3. Mentre questo tutorial è insegnato dal punto di vista di Flex 3 Builder, il codice sottostante è lo stesso. Utenti SDK, dovrai semplicemente sostituire i passaggi secondo necessità. Non userò la vista di progettazione in questo tutorial, quindi sei fortunato.
Passaggio 1: gratuito per l'istruzione
Flex è una grande piattaforma di sviluppo. È meglio quando hai il Builder Flex 3 completo. Fortunatamente per studenti e docenti idonei, Adobe offre gratuitamente una licenza Education Flex 3 Builder completa
Considera questo un promemoria amichevole. Se qualcuno con legami educativi deve ancora approfittare dell'offerta "Free Flex 3 for Education", vai avanti e fallo ora. Ti aiuterà enormemente.
Ora che abbiamo finito con l'evangelizzazione del "prodotto Adobe gratuito", costruiamo un'applicazione Flex!
Passaggio 2: impostare i file di progetto
Inizia creando un nuovo progetto Flex per il web. Chiamalo come vuoi, questo passaggio non avrà alcun impatto sui risultati.
All'interno del progetto, avvia una nuova applicazione MXML (File> Nuovo> Applicazione MXML). Denominare il file "contactManager".
Per motivi di layout, consiglio di cambiare il layout predefinito in "verticale". Questo centrerà tutti i componenti figlio immediati sulla pagina, che funzioneranno molto meglio con il nostro obiettivo finale.
Passaggio 3: scarica le immagini
Ogni contatto mostrerà un'immagine del profilo quando selezionato. Per questo esempio, utilizzeremo Bill Gates e Barack Obama come contatti. La foto per la stampa di Steve Jobs è stata semplicemente terribile
Ho ritagliato le loro foto per la stampa (recuperate qui e qui) in dimensioni più piccole per questo tutorial. Prendi qui le versioni modificate e passeremo al file XML.
Passaggio 4: Introduzione al file XML
Tutte le informazioni visualizzate verranno estratte da un file XML esterno. La struttura di base è la seguente:
Come puoi vedere, ci sono quattro campi principali per ogni voce. Il nome del contatto, la loro posizione, la posta elettronica e l'URL di un'immagine del profilo.
Scarica il file e saremo pronti a organizzare tutti i file che hai scaricato nelle cartelle di asset per Flex.
Passaggio 5 - Disporre la struttura del file di progetto
Assicurati che i file del tuo progetto siano disposti come nell'immagine qui sotto. Sarà necessario creare la cartella "assets" per user-data.xml e una cartella "images" per i colpi del profilo (File> Nuovo> Cartella con cartella "src" selezionata).
Importare i file scaricati nei passaggi 4 e 5 nelle rispettive cartelle. Con la cartella di destinazione selezionata, selezionare File> Importa> Altro e utilizzare il prompt per selezionare un file. Risciacquare e ripetere per ciascuno fino a quando non si sono tutti e tre a posto.
Passaggio 6: Effettua richiesta per file XML
In Flex MXML, i file esterni sono più comunemente caricati con il tag HTTPService. Pensa a come preparare una busta per la posta. Contiene una destinazione target e include istruzioni su cosa fare con i contenuti.
Crea un tag HTTPService per richiedere il nostro file XML inserendo il tag seguente immediatamente sotto il tag dell'applicazione di apertura.
Questo HTTPService ha un ID di "userData" e carica il nostro file xml di dati utente. I dati risultanti sono formattati come E4X e passati alla funzione contentHandler che verrà eseguita a breve per l'elaborazione.
Prendi nota comunque, perché semplicemente facendo un tag HTTPService non si invia la richiesta. Proprio come una busta ha bisogno di una cassetta postale per viaggiare, la richiesta HTTPService deve essere effettivamente inviata.
Passaggio 7: invia richiesta su creazione completata
Per poter inviare questa richiesta, è necessario attivarla una volta caricato correttamente il progetto. Lo facciamo usando l'evento creationComplete nel tag dell'applicazione.
Mentre potremmo semplicemente inserire direttamente il metodo userData.send () qui, useremo una funzione più espandibile init () per inviare invece la richiesta. Questa funzione sarà responsabile delle azioni attivate dopo il caricamento del progetto Flex e apre la possibilità di eventi di carico multipli. Riempiremo il contenuto di questa funzione in un secondo momento.
Passaggio 8: impostare per Actionscript
L'actionscript di questo progetto sarà responsabile della gestione del file XML caricato, della memorizzazione dei filtri e dell'aggiornamento dei componenti secondo necessità. Questo sarà realizzato con tre funzioni separate.
Ricordatelo Flex è un framework per ActionScript, molto simile a jQuery è JavaScript. Ciò significa che anche se i tag Flex sono progettati per semplificare gli usi comuni di ActionScript, può anche gestire anche gli script diretti. Per questo, dovremo designare un'area per lo scripting.
Ed è qui che entra in gioco il tag Script. Inserisci il tag direttamente sotto il tag di apertura dell'applicazione. Questo è dove verrà scritto tutto il codice di azione; tenuto separato dal MXML di seguito. Se sei nel Builder, il tag aggiungerà automaticamente il markup CDATA:
Inizieremo importando il pacchetto ResultEvent richiesto per il tag HTTPService. (Ricorda che tutto il codice in questa sezione va tra i tag script di cui sopra)
import mx.rpc.events.ResultEvent;
Passaggio 9: dichiarare le variabili
Per creare filtri XML, sarà necessario definire alcune variabili. Entrambi sono definiti come bindable, che ci consente di collegare direttamente il contenuto a un componente Flex (ad esempio Label).
// Mantiene completo il contenuto del file RAW XML [Bindable] private var userList: XMLList; // Modifiche ai dati XML del contatto selezionato [Bindable] private var selectedData: XML;
L'elenco XML Elenco utenti conterrà i risultati formattati E4X dal file XML caricato. Lo useremo per popolare il componente della griglia di dati in un passaggio successivo.
La variabile XML Data selezionata manterrà il risultato attualmente selezionato nel componente della griglia di dati. Sarà responsabile della compilazione dei campi di informazione e dell'immagine del profilo.
Passaggio 10: crea la funzione init
La funzione init () a cui abbiamo fatto riferimento nell'ultimo passaggio farà due cose.
Invia la richiesta per il file XML di dati utente.
Imposta l'etichetta del nome (ancora da creare) su un testo predefinito "Nessun contatto selezionato"
Il codice seguente completerà entrambi. Ignora eventuali avvisi relativi a componenti inesistenti per ora, creeremo l'etichetta di riferimento nel passaggio successivo.
// Funzione di creazione eventi completi init (): void userData.send (); profileName.text = "Nessun contatto selezionato";
Passaggio 11: crea la funzione contentHandler
La funzione successiva è contentHandler chiamata dall'evento result del tag HTTPService. Questa funzione accetta l'evento passato e quindi assegna la variabile Elenco XML userList ai dati XML risultanti come filtrati al livello "utente".
funzione privata contentHandler (evt: ResultEvent): void userList = evt.result.user;
Passaggio 12: crea la funzione showProfile
L'ultima funzione (showProfile) viene attivata quando viene selezionato un nome dall'elenco dei contatti. Assegna semplicemente i contenuti della voce XML attualmente selezionata alla variabile selectedData. Questa è la variabile che verrà associata alle etichette e ai contenitori di immagini per gli aggiornamenti in tempo reale.
private function showProfile (evt: Event): void // Assegna i dati all'elemento attualmente selezionato selectedData = contactList.selectedItem as XML;
Ora che l'actionscript è pronto, siamo pronti a mettere insieme il design.
Passaggio 13: bloccare il layout
Il layout dell'elenco contatti sarà costituito da una serie di contenitori HBox e VBox (rispettivamente orizzontali e verticali). Il blocco qui sotto illustra la struttura del progetto finale.
Passaggio 14 - Creare componenti di layout
Tutti questi contenuti che abbiamo caricato avranno bisogno di una casa. Ecco da dove provengono i componenti del layout. Incolla la seguente struttura sotto il tag HTTPService.
MXML ha un buon vantaggio di essere relativamente semplice da leggere. L'unica componente che può essere lanciare qualcuno nuovo a Flex è la griglia dati. Essenzialmente la griglia di dati è una tabella. Il tag delle colonne tra il tag DataGrid specifica il testo dell'intestazione e i campi per le singole colonne.
Questi sono i componenti che verranno utilizzati per caricare i dati dal file XML. Nel passaggio successivo, inseriremo ognuno con i dati pertinenti.
Passaggio 15: compilare i componenti
Patching nei dati dalle voci XML è sorprendentemente semplice. Copia nelle seguenti modifiche al codice e torna indietro per un riepilogo.
Ecco una ripartizione di ciò che sta succedendo:
La griglia di dati viene popolata collegando l'elenco XML della lista utenti ad essa. La colonna carica il campo dati "nome" da ciascuna voce.
Quando l'elemento selezionato nella griglia dei dati cambia, chiama la funzione showProfile per aggiornare il XML Data selezionato.
Le etichette sono ciascuna impostata per visualizzare un campo della voce selezionata.
Nella colonna di destra, l'origine dei contenitori di immagini viene caricata dall'URL nel file XML.
Passaggio 16: modificare i colori di sfondo
Se lavori con Flex per un po ', è facile ammalarsi della combinazione di colori predefinita. Facciamo alcune soluzioni rapide per rendere le cose più interessanti.
Inizieremo cambiando lo sfondo in un gradiente nei neri. Aggiorna il tag dell'applicazione di apertura per includere le proprietà del gradiente di seguito:
Lo svantaggio di uno sfondo nero è che nessuno del testo predefinito sarà visibile. Lo risolveremo utilizzando il CSS di Flex per cambiare i colori dei caratteri.
Passaggio 17: stile i risultati
Sapevi che Flash e Flex supportano il proprio marchio di CSS? Useremo alcune formattazioni di base per migliorare la leggibilità di questa applicazione. Inizia inserendo un tag di stile direttamente sotto il tag di apertura dell'applicazione.
/ * CSS va qui * /
Il CSS offerto in Flex è limitato, ma possiamo ancora apportare modifiche visive efficaci. Nel CSS qui sotto, ho modificato tutte le etichette in un font bianco per renderlo leggibile. L'HBox contenente tutto è stato fornito con uno sfondo nero e imbottitura di 20 px su ciascun lato per la spaziatura.
* Nota che devi inserire in maiuscolo i nomi dei componenti nel CSS affinché faccia riferimento correttamente.
Passaggio 18: codice sorgente per il progetto
Se non ti sei mai innamorato di Flex, questa prossima funzione potrebbe spingerti oltre il limite. Flex rende la condivisione del codice sorgente di un progetto non solo facile, ma davvero di bell'aspetto. Dai un'occhiata ai risultati, in un design sorprendentemente browser-friendly.
Step 19 - Conclusioni e ulteriori applicazioni
Quello che dovresti avere ora è un elenco di contatti basato su XML in Flex. Fai un test e assicurati che tutto funzioni correttamente.
Flex, come suggerisce il nome, è incredibilmente flessibile. Ciò significa che puoi prendere il framework dal tutorial sopra e continuare ad aggiungere. Il componente della griglia di dati si espanderà se necessario.
Flex ha una grande varietà di effetti di transizione, come sfocatura e ridimensionamento, che possono essere applicati ad ogni modifica. I risultati di questo tutorial potrebbero essere un ottimo punto di partenza per sperimentare più opzioni visive come queste.
Vai avanti e sperimenta! Se trovi qualche aggiunta interessante, assicurati di condividerli con noi nei commenti.
Share
Accentsconagua
