In questo tutorial imparerai come creare la tua applicazione di lettore di feed Flex. In questo caso, il risultato finale sarà un semplice lettore di feed che può essere utilizzato nel tuo blog o sito per visualizzare i tuoi feed preferiti.
Prerequisiti
Per completare questo tutorial avrai bisogno di alcune cose:
Una copia di Flex Builder 3.x, è possibile scaricare gratuitamente una versione di prova dal sito di Adobe.
La libreria opensource as3syndicationlib (Non reinventerò la ruota creando una lib di syndication!) Che può essere scaricata qui.
Immagini che ho usato nel progetto. Puoi scaricarli qui.
La classe XMLUtil.as per convalidare la struttura XML, disponibile dal pacchetto di corelib.
Un po 'di tempo libero!
Passaggio 1: crea un nuovo progetto
Beh, probabilmente questo è qualcosa che sai già come fare, ma solo per ricordarti e assicurarti che stiamo lavorando sulla stessa pagina:
Inizia eseguendo Flex Builder quindi crea un nuovo progetto (Menu File> Nuovo> Progetto Flex). Assicurati di inserire le stesse proprietà nella finestra di dialogo come mostrato qui:
Basta inserire come nome del progetto: WFlexibleFeed. Tutto il resto rimane come è! Premi il pulsante "Fine"! Il tuo progetto è stato creato!
Passaggio 2: impostazione delle richieste necessarie
Apri la lib di xmlsyndication-.85.zip scaricata dall'origine di download fornita, sfoglia l'archivio xmlsyndicationlib / bin / ed estrai xmlsyndication.swc nella cartella libs del tuo progetto flex. Dovrebbe risultare nella seguente struttura:
Questo file di libreria verrà caricato automaticamente perché si trova nella cartella libs. Non devi fare nient'altro per caricare questa libreria, devi solo importarne le classi prima dell'uso. (Nota, se non hai la cartella di rilascio del cestino non preoccuparti, questo non è importante per ora!).
Passaggio 3: definizione dei dettagli del progetto
In questo passaggio, imposterai alcune cartelle che utilizzeremo insieme al nostro progetto. Il primo è una cartella "assets" nella root del progetto (cartella src). Per crearlo basta fare clic con il tasto destro del mouse sulla cartella src, quindi andare su (Nuovo> Cartella) e chiamarlo "risorse".
Ripeti le stesse azioni per una cartella "com".
Al termine, estrarre le immagini fornite nel file images.zip nella cartella delle risorse (è possibile selezionarle e trascinarle nella cartella delle risorse in Flex Builder). Ora dovresti avere la seguente struttura nel progetto flex navigator:
Passaggio 4: creazione di un layout semplice
Questo "layout semplice" può essere quello che vuoi, deve solo contenere un datagrid, un textinput con indirizzo di feed, un pulsante da caricare e un altro da aggiornare. Per ottenere il mio layout:
dovrai inserire il seguente codice in WFlexibleFeed.mxml all'interno del file tags:
Come puoi vedere, ho già apportato alcune modifiche in alcuni argomenti dei componenti, come dare un DP variabile su dataGrid dataProvider, inserendo l'indirizzo del feed ... beh ... puoi vedere tu stesso. Questi sono i componenti principali del progetto, useremo un po 'di codice CSS (sì, Flex supporta CSS) per renderlo più bello.
Passaggio 5: creazione di un foglio di stile
Questo processo è molto semplice. Copia il mio codice css qui per renderlo simile. Se vuoi altri colori, prova l'esploratore in stile Flex 3 e crea i tuoi stili css personalizzati.
Copia questo css nella tua applicazione, subito dopo etichetta:
Questo produrrà un aspetto migliore del widget, giusto?
Passaggio 6: creare il gestore di feed
Sì, anche con la lib xmlsyndication dovrai codificare una classe per gestire l'output del parser, altrimenti non avrai niente a che fare. Quindi, dovrai creare una nuova classe Action Script, vai al menu File> Nuovo> Action Script Class e inserisci le impostazioni come mostrato nell'immagine qui sotto. Avremo anche bisogno di una classe (da Corelib) per convalidare il formato XML. Basta scaricare la lezione qui e inserirla nella cartella "com".
Questo creerà una nuova cartella "feed" nella cartella "com" e anche in un file "FeedParser.as". L'editor Action Script verrà ora aperto.
Passaggio 7: codificare la classe parser
Basta copiare questo codice nella classe FeedParser.as:
pacchetto com.feed // importazioni necessarie import com.XMLUtil; // utile per il corretto formato XML XMLUtil.as da corelibPackage import com.adobe.xml.syndication.atom.Atom10; // importa da xmlsyndicationlib da adobe import com.adobe.xml.syndication.atom.Entry; import com.adobe.xml.syndication.rss.Item20; import com.adobe.xml.syndication.rss.RSS20; // alcune importazioni flash necessarie per lavorare con il feed import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.events.SecurityErrorEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; // due classi utilizzate nel processo import mx.collections.ArrayCollection; import mx.controls.Alert; public class FeedParser estende Sprite private var feedURI: String = "http://feedproxy.google.com/flashtuts/"; // feed predefinito private var feedLoader: URLLoader; // il caricatore di feed pubblico var FEED_DATA: ArrayCollection = null; // la funzione pubblica dei dati del feed FeedParser (url: String) feedURI = url; // su initiate, imposta l'URL del feed public function loadFeed (): void // aggiungi gli eventi listener e carica il feed feedLoader = new URLLoader (); var req: URLRequest = new URLRequest (feedURI); req.method = URLRequestMethod.GET; feedLoader.addEventListener (Event.COMPLETE, completeHandler); feedLoader.addEventListener (IOErrorEvent.IO_ERROR, errorHandler); feedLoader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, errorHandler); feedLoader.load (req); // funzione di gestione degli errori funzione privata errorHandler (e: Event): void if (e.type == SecurityErrorEvent.SECURITY_ERROR) Alert.show ("Errore di sicurezza durante la lettura dell'URI del feed!"); else if (e.type == IOErrorEvent.IO_ERROR) Alert.show ("Errore I / O durante la lettura dell'URI del feed!"); else Alert.show (e.type + "Errore durante la lettura dell'URI del feed!"); // sulla funzione dei risultati funzione privata completeHandler (evt: Event): void var feedData: String = feedLoader.data; // recupera i contenuti del feed var feed_type: String = "RSS"; var entrys: Array; var tempObj: Object; // vecchio modo per rilevare il tipo di feed e la versione se (feedData.search ("rss version = \" 2.0 \ "")> - 1) trace ("FEED RSS 2.0"); else if (feedData.search ("rss version =")> - 1) trace ("FEED RSS <=1.0"); else if(feedData.search("Atom")>-1) trace ("FEED ATOM"); if (feedData.search ("xmlns = \" http://www.w3.org/2005/Atom ")> - 1) feed_type =" ATOM "; // controlla se è un feed ATOM // se è un RSS feed if (feed_type == "RSS") var rss: RSS20 = new RSS20 (); prova rss.parse (feedData); // analizza catch (e: Errore) Alert.show ("Errore durante l'analisi del feed ! \ nInvalid link? "); return void; entrys = rss.items; // ottieni gli elementi FEED_DATA = new ArrayCollection (); // avvia arrayCollection // convalida il feed if (! XMLUtil.isValidXML (feedData)) Alert.show ("URI o struttura del feed non valida o errata!"); Return void; // ha creato una raccolta di array con i risultati per ciascuna (voce var: Item20 in entrys) tempObj = new Object (); tempObj. title = entry.title; tempObj.link = entry.link; tempObj.desc = entry.description; tempObj.author = entry.creator; FEED_DATA.addItem (tempObj); else se (feed_type == "ATOM") // else se è un feed ATOM, esegui lo stesso processo var rssA: Atom10 = new Atom10 () prova rssA.parse (feedData); catch (e: Error) Alert.show ("Errore durante l'analisi del feed! \ nInvalid link? "); return void; var e ntrysA: Array = rssA.entries; var tempObj2: Object; FEED_DATA = new ArrayCollection (); if (! XMLUtil.isValidXML (feedData)) Alert.show ("URI o struttura feed non valida / errata!"); return void; per ogni (var entryA: Entry in entrysA) tempObj2 = new Object (); tempObj2.title = entryA.title; tempObj2.link = entryA.links [0] .href; tempObj2.desc = entryA.content; tempObj2.author = entryA.authors; FEED_DATA.addItem (tempObj2); else // impossibile trovare il tipo di feed ... Alert.show ("Impossibile rilevare il tipo di feed \ nInvalid link?") return void; this.dispatchEvent (new Event ("DataReady")); // i dati sono ora pronti per essere utilizzati! ascolta questo evento per accedere ai dati!
Salva il tuo file ora!
Passaggio 8: informazioni sul parser dei feed
Semplice, leggi i commenti nel codice e sarai in grado di capirlo. Se non vuoi, devi solo sapere cosa scrivere per usarlo:
Bene, questa è una versione semplificata di come lavorare con la nostra classe. Lo vedremo in uso ... continua a seguire il tutorial ...
Step 9: Fai una pausa
Questo è un passaggio rilassante, forse quello era troppo codice in una volta, lasciatemi spiegare il flusso di lavoro:
Abbiamo un syndicationlib responsabile della lettura del feed e del posizionamento del contenuto in una classe di oggetti. Lo scopo principale della nostra classe FeedParser è di preparare, chiamare e gestire l'output della classe di syndication.
Poi c'è la nostra applicazione principale, che chiamerà la classe FeedParser e attenderà l'evento DataReady per caricare gli elementi del feed nel datapadider datagrid.
Passaggio 10: codice prima funzione di caricamento
Questa è la funzione che farà funzionare il nostro lettore di feed. Codificheremo una funzione init () che verrà chiamata sull'evento creationComplete della nostra applicazione.
Scrivi le importazioni necessarie:
import mx.collections.ArrayCollection; import mx.controls.Alert; import com.feed.FeedParser; parser di private var: FeedParser; private var currentFeed: String; [Privata] private var DP: ArrayCollection;
La nostra funzione iniziale:
funzione privata init (): void DP = null; Security.allowDomain (feedURI.text); // utile qualche volta, cerca di evitare errori di accesso al dominio Security.allowInsecureDomain (feedURI.text); // utile qualche volta, cerca di evitare gli errori di accesso al dominio // in alcuni casi avrai bisogno (se possibile) di caricare un file crossdomain.xml esterno ... parser = new FeedParser (feedURI.text); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed ();
Passaggio 11: codificare gli Event Handler
Consente di codificare i 3 gestori di eventi necessari.
Il gestore degli errori:
funzione privata dataErrorHandler (evt: Event): void Alert.show ("Errore durante la lettura dei dati dal feed! \ n \ nPossibili cause: \ nInput feed non valido \ nTipo di feed non valido (non RSS 2.0) \ nValore di feed non valido");
Il gestore del successo:
funzione privata dataHandler (evt: Event): void DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; // salviamo il feedURL in una variabile, necessario per aggiornare il feed ed evitare richiami
Ora abbiamo i nostri elementi di feed in arrayCollection DP, pronti per l'uso in dataGrid. Voglio anche avere un meccanismo di autoaggiornamento (quindi gli aggiornamenti delle voci del feed vengono inviati a datagrid), lo creeremo ora.
Passaggio 12: codifica di un meccanismo di autoaggiornamento
Il processo è molto semplice, avremo bisogno di un timer per eseguire una nuova chiamata per ottenere i contenuti del feed, quindi ...
Dichiara il timer accanto al nostro pars pars:
private var updateTimer: Timer = new Timer (600000); // significa 600 secondi = 10 minuti
Scrivi loadAutoUpdate (); sulla funzione dataHandler in basso:
funzione privata dataHandler (evt: Event): void DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; // salviamo il feedURL in una variabile, necessario per aggiornare il feed ed evitare richiami loadAutoUpdate (); // carica il motore di aggiornamento
e codifichiamo la funzione di aggiornamento:
funzione privata loadAutoUpdate (): void try updateTimer.stop (); // proviamo a fermare un possibile timer avviato updateTimer.removeEventListener (TimerEvent.TIMER, onTime); // remove the eventListener catch (e: Error) trace ("Errore sul timer!") // gestisce possibili errori updateTimer.addEventListener (TimerEvent.TIMER, onTime); // aggiungi nuovamente il listener updateTimer.start (); // avvia il timer
Infine, abbiamo bisogno della funzione onTime per gestire gli eventi temporali ogni 10 minuti:
funzione privata onTime (evt: TimerEvent): void feedURI.text = currentFeed; dentro();
Poiché le persone possono modificare il campo feedURI, lo salviamo in una variabile currentFeed fino a quando non viene analizzato un nuovo feed.
Passaggio 13: Comprensione del meccanismo di autoaggiornamento
Il flusso di lavoro è semplice. Quando viene chiamata la funzione init (), viene caricato feedParser.
In questa funzione resettiamo il DP (fornitore di dati), impostiamo le politiche di sicurezza (per evitare alcuni errori di accesso al dominio) e carichiamo il feed:
(...) parser.loadFeed (); (...)
Infine, il feed viene analizzato e il DP viene popolato con voci di feed:
(...) DP = new ArrayCollection (); DP = parser.FEED_DATA; (...)
e carichiamo il meccanismo di aggiornamento che verrà caricato ogni 10 minuti (~ 600 secondi / 600 000 millisecondi):
(...) private var updateTimer: Timer = new Timer (600000); (...) updateTimer.start (); (...)
Ciò chiamerà la funzione onTime ogni 10 minuti e richiamerà la funzione init per ricaricare il feed.
funzione privata onTime (evt: TimerEvent): void feedURI.text = currentFeed; dentro();
Il sistema principale è codificato, ora abbiamo solo bisogno di aggiungere altre azioni.
Passaggio 14: Azioni del pulsante codice
In questo passaggio avremo bisogno di codificare le funzioni per passare a un nuovo feed e aggiornare quello corrente.
La funzione di aggiornamento è abbastanza semplice:
private function refresh (): void feedURI.text = currentFeed; // per evitare modifiche su textInput init (); // ricarica il feed
e la funzione di modifica del feed:
private function switchFeed (): void if (currentFeed == feedURI.text) Alert.show ("Modifica l'URL del feed e riprova!"); // non cambieremo il feed con lo stesso! else init (); // carica il feed perché feedURI.text non è uguale all'URI del feed effettivo.
Passo 15: carica le cose e li test
Abbiamo bisogno di caricare l'intero processo sull'evento creationComplete dell'applicazione, basta aggiungere al tuo tag mx: application:
(...) creationComplete = "init ()" (...)
Prova ad eseguire l'applicazione ora! Funziona, giusto? Ora miglioreremo l'interazione dell'applicazione ...
Passo 16: Capire gli elementi DP
Il fornitore di dati DP è una copia dalla raccolta di array FeedParser.FEED_DATA, quindi è necessario aggiungere la struttura FEED_DATA alla classe FeedParser.as:
Qui possiamo vedere ogni elemento contiene un titolo, link, desc (ription) e autore (s) elementi. Questo sarà utile se vuoi visualizzare quell'informazione sul datagrid, anche se per il momento vogliamo solo visualizzare il titolo (usando dataField):
Se abbiamo bisogno di visualizzare il disc o collegamento, abbiamo solo bisogno di fornire il campo disc come parametro dataField in una nuova colonna.
Passaggio 17: carica la pagina web dell'oggetto
Certo, questo è molto utile! Abbiamo solo bisogno di abilitare il doppio click nel dataGrid scrivendo quanto segue nel tag mx: Table:
funzione privata loadURL (): void if (dataGridItems.selectedIndex> -1) navigateToURL (new URLRequest (dataGridItems.selectedItem.link), "_blank"); // se c'è un indice selezionato, carica l'URL in un'altra finestra.
Abbastanza facile, quindi abbiamo quasi finito feedReader, ora di rivedere il codice.
Molte persone prenderanno il file WFlexibleFeed.swf generato dalla cartella bin-debug e lo metteranno nell'ambiente di produzione finale, ma questo è un errore!
Innanzitutto, usa il framework (vicino a 200kb) come RSL (Libreria condivisa di runtime). Questo verrà scaricato una volta sola sulla macchina dell'utente, la prossima volta non verrà caricato (quindi diminuendo il tempo di caricamento). Per fare ciò, vai a Progetto> Proprietà> Percorso di costruzione flessibile> Percorso libreria e fai clic su Collegamento quadro. Passare da "Unita nel codice" a "Libreria condivisa di runtime (RSL)", quindi fare clic su ok. Il framework verrà ora esportato come file separato.
Siamo pronti per esportare l'applicazione.
Passaggio 20: Esportazione della versione di rilascio
Ogni applicazione dovrebbe essere esportata come build di rilascio (ecco perché il percorso del progetto contiene la cartella di rilascio del cestino). Hai solo bisogno di cliccare sul pulsante di generazione del rilascio dell'esportazione, mostrato in giallo qui:
L'intero progetto verrà esportato nella cartella "bin-release". Questi sono i contenuti da inserire sul tuo sito o blog!
Step 21: Gioca con esso
Ora hai tempo per giocare con il risultato finale, modificare alcuni dettagli css, creare un altro tipo di commutatore di feed, ci sono molte cose che puoi migliorarlo. Puoi persino portarlo sul desktop usando Adobe AIR. Fatti ispirare! Una bellissima applicazione per questo feedReader è quella di inserire il proprio URL del feed, disabilitare l'edizione del testo, disabilitare la modifica e aggiornare i pulsanti e distribuirli ad altri siti come widget per leggere le voci del blog ...
Conclusione
In questo tutorial hai imparato come analizzare, gestire e visualizzare le voci dei feed in un DataGrid all'interno di Flash. Hai appreso un po 'della fantastica libreria xmlsyndication e hai anche scoperto alcuni trucchi per migliorare i tuoi progetti. Sfoglia il codice, scarica i file sorgente e divertiti!
Nota: utilizzare il menu File> Importa> archivio Flex Project per importare i file sorgente; sono pronti per l'uso!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Share
Accentsconagua
