Un feed RSS è un file in formato XML contenente gli ultimi aggiornamenti di un sito o di un forum, solitamente include informazioni sul sito che fornisce i dati e, a seconda del tipo di servizio, link e testi inerenti l'argomento trattato dal sito. Poiché tutti i feed sono in formato XML possiamo sfruttare E4X per analizzarli con Actionscript 3.
La struttura del feed RSS
Come sorgente RSS, per il nostro esempio, useremo il feed del forum Flash di questo sito.
Esistono diverse versioni dei feed RSS, la più recente è la 2.0 e proprio questa è la versione usata dal feed del forum che andremo ad utilizzare. Per poterlo analizzare correttamente è necessario conoscerne la struttura, che è di questo tipo:
Listato 1. Feed RSS del forum Flash di HTML.it
<rss>
<channel>
<title>Forum Flash di HTML.it</title>
<link>http://forum.html.it/forum/forumdisplay.php?s=&forumid=2</link>
<description>Gli ultimi thread del forum Flash</description>
<language>it</language>
<copyright>Copyright 1997-2007 HTML.it</copyright>
<lastBuildDate>Mon, 17 Sep 2007 09:00:01 +0200</lastBuildDate>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
<managingEditor>developer@html.it </managingEditor>
<webMaster>developer@html.it</webMaster>
<image>
<url>http://rss.html.it/images/logo_feed.gif</url>
<title>HTML.it</title>
<link>http://www.html.it</link>
<width>140</width>
<height>33</height>
</image>
<item>
<title><![CDATA[ Poblema con loadvars ]]></title>
<link>http://forum.html.it/forum/showthread.php?s=&threadid=1163754</link>
<author>nedone</author>
<pubDate>Mon, 17 Sep 2007 08:56:59 +0200</pubDate>
<guid>http://forum.html.it/forum/showthread.php?s=&threadid=1163754</guid>
</item>
</channel>
</rss>
Notiamo, ad inizio file, le informazioni relative al feed tra cui in particolare notiamo titolo, link al sito, descrizione, linguaggio, copyright, ultimo aggiornamento. Queste informazioni sono solitamente presenti in tutti i feed; in questo caso sono anche presenti le informazioni sull'immagine che potremo utilizzare per far capire quale sia la fonte dei dati, quest'ultima informazione è però meno frequente negli XML dei feed RSS.
Dopo le informazioni si passa alla lista di elementi racchiusi tra i tag <item>: nel nostro feed ogni elemento ha come informazioni il titolo del thread, l'autore dell'ultima risposta, la data di pubblicazione e il link al thread stesso. A seconda del feed queste informazioni possono variare, ad esempio, gli elementi dei feed offerti da siti giornalistici solitamente hanno anche il tag <description> che contiene un breve testo di presentazione della notizia.
Preparazione dello stage in Flash
In base alla struttura del feed possiamo stabilire le operazioni da eseguire in Flash: imposteremo un campo di testo con il titolo del feed, un movieclip per il caricamento dell'eventuale immagine e infine avremo bisogno di un ulteriore movieclip contenente i campi di testo per il titolo, l'autore e la data del thread, che linkeranno poi alla risorsa indicata dal feed. Quest'ultima clip verrà duplicata dinamicamente in base al numero di elementi contenuti nel feed e la inseriremo all'interno di un ultimo movieclip che disporremo sullo stage.
Impostiamo uno stage di 200x300 pixel e creiamo un movieclip con nome istanza immagine_feed, un campo di testo dinamico con nome istanza titolo_feed e infine un movieclip contenente tre campi di testo dinamici con nomi istanza titolo_item, autore_item e data_item. Non posizioniamo istanza di questo movieclip sullo stage, ma lo lasciamo nella libreria.
Proprio dalla libreria selezioniamo questa clip con il tasto destro e clicchiamo sulla voce Linkage
Nel pannello che si aprirà spuntiamo la voce Export for Actionscript e inseriamo Item come nome dell'oggetto.
Questo ci serve per poter creare dinamicamente delle copie della clip usando il comando new di Actionscript 3.
Creiamo infine un ultimo movieclip con nome istanza lista e lo disponiamo sullo stage. In figura vediamo la disposizione degli elementi e il relativo nome istanza.
Analisi del file con Actionscript 3
Per prima cosa utilizziamo le classi URLLoader e URLRequest per caricare il file.
Listato 2. Carica il file XML
var dati:URLLoader = new URLLoader()
var url:URLRequest = new URLRequest("http://rss.html.it/rss_forum2.xml")
dati.load(url)
Quindi usando l'evento COMPLETE facciamo in modo che una volta caricato il file venga richiamata la funzione analizza.
Listato 3. Richiama la funzione analizza
dati.addEventListener(Event.COMPLETE,analizza)
Passiamo ora alla funzione, che analizzerà i dati e inserirà le informazioni negli appositi campi.
Per prima cosa memorizziamo in una variabile i dati del file XML, carichiamo l'immagine del feed nella clip immagine_feed e scriviamo il titolo del feed nel campo di testo titolo_feed.
Listato 4. Analizza i dati e inserisce le informazioni
function analizza(evt:Event){
var fileXML:XML = new XML(dati.data)
// Inserimento titolo del feed
titolo_feed.text = fileXML.channel.title
// Caricamento dell'immagine
var immagine:Loader = new Loader()
var url_immagine:URLRequest = new URLRequest(fileXML.channel.image.url)
immagine.load(url_immagine)
immagine_feed.addChild(immagine)
}
Notiamo come l'accesso ai dati del file corrisponda ai tag dell'XML.
Non resta che inserire i dati dei vari elementi <item> all'interno del nostro filmato:
Listato 5. Inserisce i dati all'interno del filmato
// Analisi degli item, duplicazione clip e inserimento dei dati
var numero_item:Number = fileXML..item.length()
for(var i:int = 0; i<numero_item; i++){
// Creazione di un nuovo elemento Item
var nuovo_item = new Item()
// Popolazione dei campi di testo
nuovo_item.titolo_item.text = fileXML..item[i].title.text()
nuovo_item.autore_item.text = "Autore: " + fileXML..item[i].author.text()
var data_elemento = fileXML..item[i].pubDate.text().split("+")
nuovo_item.data_item.text = "Il: " + data_elemento[0]
// Posizionamento della clip
nuovo_item.y = posY
// Inserimento della clip sullo stage
lista.addChild(nuovo_item)
posY += 50
}
Per prima cosa ricaviamo il numero di elementi presenti nel feed, quindi creiamo un ciclo che in base a questo valore creerà un determinato numero di copie dell'elemento Item (ricordiamo il linkage effettuato dalla libreria).
Ogni copia conterrà tre campi di testo che verranno popolati ricavando le proprietà dal file XML: vediamo l'utilizzo della notazione item[i], dove i avrà di volta in volta valori da 0 al numero di elementi del feed.
In questo caso abbiamo diviso la data prendendo solo le parti prima del segno +, infatti le date sono in questo formato: Mon, 17 Sep 2007 08:56:59 +0200 e ci basta la parte contenente data e ora (il +200 si riferisce alla differenza di orario rispetto al GMT).
Le ultime cose che possiamo evidenziare sono l'inserimento delle copie dentro alla clip lista e la variabile posY, che viene utilizzata per distanziare i vari elementi e il cui valore aumenta di 50 ad ogni esecuzione del ciclo.
Grazie a questo codice otterremo il risultato visibile in figura.
I dati ora vengono mostrati, tuttavia non sono ancora collegati al sito che li fornisce. Impostiamo quindi il codice per associare ad ogni clip una variabile link contenente l'URL del thread e per ogni clip impostiamo l'evento MouseEvent.CLICK, in questo modo:
Listato 6. Collega i dati al sito che li fornisce
nuovo_item.buttonMode = true nuovo_item.mouseChildren = false nuovo_item.link = fileXML..item[i].link.text() nuovo_item.addEventListener(MouseEvent.CLICK,linka)
Notiamo l'utilizzo della proprietà buttonMode che ci consente di far apparire la manina classica dei collegamenti e l'uso di mouseChildren = false che evita che i campi di testo all'interno della clip intercettino il click del mouse, così che questo sia valido solo per nuovo_item. Ogni oggetto nuovo_item avrà la sua variabile link contenente l'URL al relativo thread; la funzione linka avrà quindi il seguente codice:
Listato 7. Funzione linka
function linka(evt:MouseEvent){
var url_sito:URLRequest = new URLRequest(evt.target.link)
navigateToURL(url_sito)
}
Grazie alla proprietà target siamo in grado di risalire al movieclip che è stato cliccato e quindi ricavarne la variabile link ad esso associata durante il ciclo, utilizzando poi questo URL come parametro del comando navigateToURL, che in Actionscript 3 ha sostituito il vecchio getURL.
Scorrere i dati
Il funzionamento del lettore ora è corretto, tuttavia date le dimensioni ridotte dello stage vengono visualizzati solo i primi 4 dati mentre analizzando l'XML del feed possiamo notare che ne vengono forniti 10. La soluzione più rapida è quella di creare uno scorrimento per la clip lista, così da poter visualizzare tutti i dati.
Creiamo allora un livello maschera e facciamolo agire solo sulla clip lista, quindi accertiamoci di includere i caratteri nei campi di testo contenuti dentro al movieclip Item che abbiamo in libreria. A lato della maschera inseriamo quindi due pulsanti con nomi istanza up e down che useremo per far scorrere i dati.
Il codice che andremo ad associare ai pulsanti per lo scorrimento è:
Listato 8. Fa scorrere la lista di news
up.addEventListener(MouseEvent.CLICK,scorri_su)
down.addEventListener(MouseEvent.CLICK,scorri_giu)
function scorri_su(evt:MouseEvent){
lista.y -= 10
}
function scorri_giu(evt:MouseEvent){
lista.y += 10
}
Con questo codice alla pressione del tasto up il movieclip lista (che contiene i vari clip dei dati ricavati dal feed) verrà mosso verso l'alto mentre alla pressione del tasto down verrà mosso verso il basso.
Il nostro lettore di feed è concluso: il codice utilizzato ci permette di avere un lettore molto versatile, basterà infatti cambiare l'URL del feed RSS per poter attingere ad una diversa fonte di dati.
