Creare un lettore di Feed RSS in Adobe AIR 1.0 con Dreamweaver CS3

Inserito da bernardi il Mar, 01/01/2008 - 14:40

Immagini

Immagine 1 Immagine 2 Immagine 3 Immagine 4 Immagine 5

Adobe AIR non è ancora una tecnologia ufficiale, ma sta già facendo parlare molto di sé, vista l’enorme possibilità che introduce nel mondo dello sviluppo di applicazione per il Desktop. Grazie a AIR, tutti coloro che conoscono i linguaggi del Web possono finalmente realizzare applicazioni per “desktop”. Per fare questo possiamo usare Flex 3, Flash CS3 e ovviamente, Dreamweaver CS3, sarà proprio quest’ultimo che useremo qui.
In questo tutorial che andremo ad illustrare  come creare un semplicissimo lettore di Feed RSS (utilizzeremo un link al file RSS di FlexGALA), lavorando prettamente con i classici strumenti del Web: HTML, CSS e XML e Javascript.   Introdurremo inoltre per la gestione del materiale XML,  anche l’uso dei nuovi framework che Dreamweaver mette a disposizione: gli Spry Widget.

Per svolgere questo lavoro procuriamoci l’occorrente per lavorare:

  • Dreamweaver CS3 (sia in italiano che in inglese), scaricabile gratuitamente in prova per 30 giorno dal sito internet Adobe
  • L’estensione Adobe AIR gratuita per Dreamweaver CS3 scaricabile dal sito labs.adobe.com
  • L’aggiornamento del framework “Spry Ajax” scaricabile sempre gratuitamente dal sito labs.adobe.com
  • Il Runtime di Adobe AIR, scaricabile gratuitamente dal seguente link di labs.adobe.com

Prima di iniziare, concentriamoci sul formato RSS che andremo ad utilizzare.
Con la nascita dei blog e quindi della necessità di veicolare una mole di informazioni sempre maggiore in sempre minor tempo, si è cercato di creare (o rimodellare) tecnologie adatte a questo scopo. L’XML (Extensible Markup Language) era quello che faceva a questo caso!
Un formato semplice, intellegibile da ogni tipo di sistema operativo (cross platform), quindi praticamente universale. Bisognava solo dare un’organizzazione univoca. Fare cioè in modo che tutti i file RSS fossero uguali nella struttura, altrimenti non ci si sarebbe mai coordinati. Ecco nascere il formato RSS.
Introdotto con “My Netscape” questo formato, che permetteva di veicolare informazioni e gestirle senza grandi problemi, riscosse molto successo.

Ed eccoci a oggi. Ogni blog, servizio di informazioni o quant’altro sfrutta questo formato. Vediamo un estratto di un feed rss:

<rss version=”2.0”>
 <channel>
 <title>Example Channel</title>
 <link>http://example.com/</link>
 <description>an example feed</description>
 <language>en</language>
 <rating>(PICS-1.1 “http://www.classify.org/safesurf/” l r (SS~~000 1))</rating>
 <textInput>
 <title>Search this site:</title>
 <description>Find:</description> [...]

Essendo un formato basato sull’XML, il codice è abbastanza intellegibile.
Ovviamente non dobbiamo preoccuparci del codice del feed RSS che andremo ad inserire, questo infatti verrà ripreso direttamente dal link che aggiungeremo al momento dovuto.
Prima di cominciare ovviamente, dobbiamo installare le due estensioni che abbiamo indicato in apertura di questo articolo, subito dopo, apriamo Dreamweaver CS3 ed incominciamo a creare la nostra pagina da un punto di vista grafico. Quindi creiamo dove vogliamo la cartella che conterrà il nostro lavoro. Il nostro progetto, essendo destinata ad essere un’applicazione desktop, avrà misure di larghezza e altezza fisse. Per questo lavoro saranno: 780 pixel di larghezza per 600 pixel di altezza.

E’ fondamentale ricordare che per poter utilizzare gli strumenti di sviluppo in Adobe AIR dobbiamo impostare un sito in Dreamweaver. Selezioniamo su DW la voce Sito dal menu, quindi Gestisci siti.

Dal successivo pannello Sito scegliamo Nuovo, da ultimo ancora Sito.
Nella prima pagina delle impostazioni che troverete successivamente basterà semplicemente indicare un nome al progetto. Nella seconda schermata lasciamo invariate le impostazioni, cioè su Non voglio utilizzare una tecnologia server-side. Nella terza schermata lasciamo inalterata la prima opzione di lavoro su Modificando le copie locali sul proprio computer. Nel pannello sottostante invece indichiamo il percorso esatto della cartella del nostro progetto che abbiamo creato pochi passi sopra.
Nell’ultimo pannello invece non impostiamo un server di prova, semplicemente perchè non utilizzeremo un server di prova! Quindi chiudiamo il pannello SITO cliccando su FINE.
Con la nostra pagina vuota, scriviamo il codice necessario:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:spry=”http://ns.adobe.com/spry”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>FLEX GALA FEED READER</title>
<link href=”reader.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”container”>
 <div id=”header”>FlexGALA - Feed Reader</div>
    <div id=”menu”>| <a href=”http://www.usermatter.com” target=”_blank”>USERMATTER(S) Home Page</a> | <a href=”http://blog.augitaly.com” target=”_blank”>AUGItaly Blog</a> |</div>
  <div id=”bodySite”>
    <span class=”titoloBlog”>titolo news</span> - [<span class=”myData”>data pubblicazione</span>] <br />
    <span class=”testoBlog”>testo news</span><br /><br />
  </div>
  <div id=”footer”>Powered by F.Bernardi | USERMATTER(S) Sample | 2008</div>
</div>
</body>
</html>

Salvate la pagina appena creata come “home.html” all’interno della cartella del progetto. Ora vediamo invece il file CSS che accompagnerà questo documento:

File CSS:
@charset “UTF-8”;
#header {
 background-image: url(img/cloud_header.jpg);
 height: 80px;
 width: 780px;
 color: #FFFFFF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: bold;
 text-indent: 15px;
 padding-top: 10px;
}
#bodySite {
 height: 426px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
 padding-left: 15px;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 10px;
 overflow: auto;
 visibility: visible;
}
.myData {
 font-style: italic;
 color: #0066FF;
}
.testoBlog {
 color: #CCCCCC;
}
#footer {
 background-color: #537EB9;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
 text-align: right;
 padding-right: 15px;
 height: 20px;
 line-height: 20px;
}
#container {
 width: 780px;
 border: 1px dotted #FFFFFF;
}
body {
 background-color: #333333;
 margin: 0px;
 padding: 0px;
}
a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: underline;
}
a:hover {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: underline overline;
}
a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #CCCCCC;
 text-decoration: none;
 margin: 0px;
 padding: 0px;
}
#menu {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 font-size: 12px;
 background-color: #537EB9;
 text-indent: 15px;
 height: 20px;
 line-height: 20px;
}
.titoloBlog {
 font-size: 12px;
 font-weight: bold;
}

A questo punto la nostra pagina è “graficamente” pronta. Dobbiamo solo gestire i valori del file XML, caricarli nella pagina ed esportare il tutto per Adobe AIR. Per fare ciò, come abbiamo già anticipato all’inizio, utilizzeremo il framework “Spry Widget” di Dreamweaver CS3.
Nella scheda degli strumenti di Dreamweaver (posta in alto sullo schermo sotto le voci di menu) cerchiamo e apriamo il pannello “Spry”. Come da immagine 1.

Ora, se avete copiato correttamente il codice della pagina “home.html”, posizionatevi con il mouse prima della parola “Titolo news”. Sinceratevi di questa posizione controllando in “Vista Codice” di trovarvi esattamente prima di “titolo” e subito dopo il tag “span”.
Questo ovviamente perchè dovremo inserire in questo punto esatto le informazioni estratte dal file RSS. Impostiamo adesso la connessione col file per estrarre i dati. Clicchiamo sul primo pulsante del pannello “Spry” denominato “Dataset XML Spry”. Ora riempite il pannello come nell’immagine 2.

Per quanto riguarda il parametro di “Origine XML”, scrivete quanto segue:

http://www.augitaly.com/flexgala/rss.php?t=mixed

Per visualizzare lo schema, basterà cliccare sul pulsante “Recupera Schema”.
NB: Per selezionare tra tutti i nodi, quelli necessari: cliccate sul nodo “item” posto sotto “generator” come quello selezionato in blu nella foto. Quello è il nostro nodo principale.
Cliccando su “Anteprima” avremo un anteprima dei dati richiesti. Controllate cliccando appunto su “Anteprima”. Se i dati sono corretti, confermate con “OK”. Altrimenti controllate il vostro pannello con l’immagine sovrastante.
Confermando con “OK”, abbiamo stabilito una connessione tra noi e il file XML. Appena salverete la pagina, Dreamweaver vi chiederà di salvare due ulteriori file Javascript all’interno della cartella, “Spry Assets”. Confermate anche quest’azione. Ora apriamo la nostra pagina HTML in vista “Codice” e selezioniamo la seguente porzione di codice:

<span class=”titoloBlog”>titolo news</span> - [<span class=”myData”>data pubblicazione</span>] <br />
    <span class=”testoBlog”>testo news</span><br /><br />

Questa sarà la porzione di codice interessata dagli Spry Widget che sarà ripetuta allo stesso tempo per tutti gli articoli inseriti nel file RSS.

Con la selezione attiva del testo indicato sopra, clicchiamo sul pulsante “Area Spry” del pannello “Spry” (il secondo in ordine a partire da sinistra).
Nel pannello che si aprirà, lasciate inalterati i valori e controllate che l’opzione “Inserisci” sia posizionata su “Applica intorno alla selezione”. Confermate con “OK”. Con il codice ancora visibile, modifichiamo la stringa:

<div spry:region=”ds1”>

in:

<div spry:region=”ds1” spry:repeat=”ds1”>

Quest’ultima azione ci permette di ripetere, in base al file RSS, il contenuto del tag “div” per il numero degli articoli. Dobbiamo però sostituire i valori generici scritti a mano con quelli corrispondenti del file RSS.
Dal pannello “Applicazione” posto alla destra del monitor, scegliamo l’opzione “Associazioni”, come da immagine 3.

Come vedete in questo pannello ci sono tutti i valori strutturali del nostro file RSS. Dovremo sostituire la scritta “titolo pagina” con “title”, “data pubblicazione” con “pubDate” e “testo news” con “descrizione”, in modo tale da inserire i corretti valori al posto giusto. Per fare ciò basterà selezionare le voci scritta a mano (“titolo pagina”, “testo news” e “descrizione”), quindi cliccare sul pulsante “inserisci” del pannello “associazioni”.
Una volta fatto ciò, salviamo la pagina e testiamo l’applicativo. Per  testare l’applicativo andiamo sul menu “File” , “Visualizza Anteprima nel Browser” quindi, “Preview in Adobe AIR”. Se tutto risulta corretto, possiamo salvare il nostro lavoro in Adobe AIR. Dalla voce di menu “Sito”, clicchiamo su “AIR Application Settings..”.
Impostiamo i valori secondo l’immagine 4:

Nota: E’ molto importante ricordare come nel progetto vadano inserite tutte quelle cartelle, file e quant’altro il progetto necessiti (comprese quindi le cartelle “SpryAssets” create in precedenza), eventuali immagini, ecc.... cliccando sul “+” o sulla cartella della voce “Included files”.
Inoltre Adobe AIR necessita di una firma digitale (segnata in rosso nella foto). Per impostarne una basterà cliccare su “Set..”. Se è la prima volta che create una firma digitale cliccate sulla voce “Create” e seguite le impostazioni richieste. Chiudete il pannello di settings di Adobe AIR cliccando sul pulsante “Create AIR File”.
Un messaggio di processo completato vi avviserà della riuscita del nostro lavoro.
Andiamo nella cartella del progetto e troveremo il nostro file AIR pronto per essere installato.

Ultima nota: per visualizzare prodotti AIR, il nostro utente necessita ovviamente del runtime scaricabile gratuitamente dal link indicato in apertura di questo articolo, oltre che ovviamente del nostro lavoro.
Il lavoro finale apparirà come nell'immagine 5.