Finalmente Dreamweaver fornisce degli strumenti per la gestione ad alto livello di fonti di dati XML. Infatti, nell'ultima versione, è possibile collegare pagine web a file XML locali o feed RSS remoti senza mettere mai mano al codice. In altre parole, la semplicità che prima permetteva di gestire i database ora è stata trasportata anche nell'ambito XML. E c'è già chi dice che questo sia solo l'inizio...
In questo turorial vedrete quanto è facile creare una pagina dinamica (potrete usare il linguaggio server side che preferiamo: PHP, ASP JavaScript, ASP VBScript, ASP.NET, JSP o ColdFusion) e inserire al suo interno delle istruzioni per interrogare una fonte di dati XML.
La fonte di informazioni che prenderemo in esame è il Feed di <edit>: il blog di HTML.it.
Creare una frammento XSLT
Aprite Dreamweaver e definite un sito locale dinamico (se volete usare la tecnologia ASP JavaScript può esservi di aiuto l'articolo ASP e Access in locale con Dreamweaver MX ma ripeto che potete scegliere la tecnologia server che preferite e continuare a seguire questo tutorial senza problemi).
Prima di tutto dovrete costruire un frammento XSLT specificando una fonte di informazioni RSS. Successivamente il frammento XSLT potrà essere incorporato in una qualsiasi pagina dinamica.
Dopo aver definito il sito locale e il server web locale aprite il menu File di Dreamweaver 8 e scegliete Nuovo. Nel riquadro Generale scegliete Pagina di base mentre nel riquadro Pagina di base selezionate XSLT (frammento), infine premete Crea.
Compare subito la seguente finestra Individua origine XML:
Siccome volete consultare il blog di HTML.it, quindi una fonte di informazioni remota, dovrete scegliere la voce Associa un file remoto su Internet e scrivere nella casella di testo il seguente percorso https://www.html.it/rss/blog.xml.
Bene, premete Ok e date uno sguardo al pannello Associazioni del gruppo Applicazione. In genere sarete abituati a trovare in questo pannello le informazioni che possono essere estratte da un database o dalle variabili accessibili. Questa volta il pannello mostra la struttura dei dati presenti nel file XML che avete specificato in precedenza e, come avete sempre fatto, potrete inserire nel documento le informazioni semplicemente trascinando la voce che le rappresenta.
Ma prima di procedere imparate a leggere la simbologia dell'albero mostrato nel pannello.
Leggere l'albero nel pannello associazioni
I dati di un blog o comunque in generale di una fonte RSS sono una lista di oggetti dello stesso tipo, ad esempio una lista di post.
Il pannello Associazioni al momento mostra "la forma" che hanno questi dati, un po' come accade quando collegate un database e il pannello associazioni mostra le tabelle che esso contiene e i vari attributi associati a ogni tabella.
Questa struttura viene rappresentata tramite un albero e ogni nodo dell'albero può avere quattro significati a seconda del simbolo con cui viene rappresentato.
Il simbolo 
indica un elemento che viene visualizzato solo una volta nell'ambito del nodo di origine. Ad esempio il nodo title equivale alla stringa "edit" che denota il nome del blog ed è unica.
Il simbolo 
indica un elemento che può essere visualizzato una volta o più nell'ambito del nodo di origine. L'elementi item rappresenta il generico post inserito nel blog e quindi possiamo aspettarci di trovare più oggetti di questo tipo (uno per ogni post).
Il simbolo 
indica un attributo.
Inserire le informazioni nel frammento XSLT
Inserite, finalmente, le informazioni nel frammento XSLT corrente. Immaginate di voler allestire una pagina dinamica che visualizzi le informazioni relative al blog di HTML.it (nome, link e descrizione) e soprattutto l'ultimo post inserito.
Dovrete procedere come segue (d'ora in poi con la notazione nodo1 > nodo2 > nodo3 intendo il nodo dell'albero presente nel pannello associazioni e raggiungibile partendo da nodo1 passando a nodo2 e infine a nodo3, attenzione dunque a non confondervi perché possono esistere più nodi con lo stesso nome e l'unico modo per identificarli con chiarezza è indicare la loro posizione).
Selezionate il nodo rss > channel > title (che vedete indicato anche nella figura seguente)
e trascinatelo nel segmento XSLT corrente.
Potete verificare subito il funzionamento del sistema lanciando l'anteprima nel browser (premendo F12). Nel browser dovrebbe apparire la parola edit.
In realtà un frammento XSLT non è una pagina web e dovrebbe essere prima incorporato in una vera pagina web prima di essere visualizzato tuttavia per eseguire l'anteprima Dreamweaver lo inserisce momentaneamente in una pagina HTML e lo passa al browser.
Vogliamo ora che il titolo sia in realtà un link al blog di HTML.it. Dovete selezionare l'elemento {rss/channel/title} all'interno del frammento XSLT e scegliere Elabora > Crea collegamento ipertestuale.
Siccome state lavorando con una fonte di dati scegliete Origine dati. Ancora una volta comparirà l'albero che definisce le informazioni presenti nel blog. Scegliete il nodo rss > channel > link che contiene il link al blog e premete Ok.
Ecco come appare ora il frammento XSLT che state costruendo.
Lanciando ancora una volta l'anteprima nel browser potrete verificare che la parole edit si è effettivamente trasformata in un link che punta al blog di HTML.it.
A questo punto potreste domandarvi qual è l'utilità di questo meccanismo: non sarebbe stato più semplice scrivere manualmente la parola edit e trasformarla in un link alla pagina del blog?
Indubbiamente si, sarebbe stato più semplice. Ma la potenzialità di questo meccanismo consiste nel fatto che il frammento XSLT ogni volta che viene mostrato si collega al blog di HTML.it ed estrare da questo il titolo e il link. Quindi se queste informazioni dovessero variare il frammento XSLT mostrerebbe le informazioni aggiornate e coerenti.
I vantaggi di questa tecnologia saranno ancora più evidenti nel prossimo paragrafo.
Inserire l'ultimo post nel frammento XSLT
Attualmente il frammento XSLT che avete creato contiene soltanto il titolo e il link al blog. Ora lo imposterete per mostrare anche l'ultimo post del blog.
Premete Invio in modo da posizionare il cursore in un nuovo paragrafo.
Bene, guardate l'albero mostrato nel pannello associazioni: ogni item corrisponde a un post.
Sempre guardando l'albero potete notare che il generico post (ovvero item) contiene i seguenti campi che sono unici per ogni post (item):
- title: il titolo di del post;
- description: la descrizione del post;
- link: URL del post;
- guid: identificativo univoco (corrisponde nel caso al permalink)
- category: la categoria a cui appartiene il post;
- pubDate: la data in cui è stato pubblicato il post;
- author: l'autore del post.
Notate che il nodo item è contrassegnato dal simbolo quindi significa che esistono più item (ed infatti nel blog troviamo più post). Tuttavia ogni nodo presente all'interno di item è contrassegnato dal simbolo e questo significa che questi valori sono unici per ogni oggetto item (ovvero per ogni post). Infatti ogni post ha uno ed un solo titolo, una sola descrizione e così via...
A questo punto potete trascinare il nodo rss > channel > item > title dentro il frammento XSLT.
Non resta che trascinare anche gli campi che vi interessano, ad esempio rss > channel > item > description, rss > channel > item > pubDate e rss > channel > item > author.
Per rendere più chiaro il tutto potreste aggiungere del testo per descrivere le informazioni come mostrato nella figura seguente.
Inoltre potrebbe essere utile trasformare il titolo del post in un link che punti direttamente al post nel blog.
Ricordate che il link al post è presente nell'elemento rss > channel > item > link. Il procedimento è analogo a quello visto in precedenza: selezionate {rss/channel/ item/title},scegliete Elabora > Crea collegamento ipertestuale, selezionate la voce Origine dati e infine l'elemento rss > channel > item > link.
Premete Ok per tornare al frammento XSLT.
Non rimane che lanciare ancora una volta l'anteprima nel browser e verificare che la pagina mostri tutte le informazioni che avete definito e soprattutto che sia aggiornata con il contenuto del blog di HTML.it.
Se tutto funziona correttamente il frammento XSLT è terminato. Salvatelo associandogli il nome frammento.
Inserire il frammento XSLT in una pagina dinamica
L'ultimo passo consiste nell'inserire il frammento XSLT in una pagina dinamica. Create una nuova pagina dinamica usando la tecnologia server che preferite e salvatela.
Poi posizionate il cursore nel punto della pagina web in cui volete inserire il frammento di dati XML, accedete al gruppo Applicazione della barra Inserisci e premete il pulsante Trasformazione XSL.
Apparirà il seguente pannello.
Premete il pulsante Sfoglia... superiore e andate a selezionare il file frammento.xsl. Dopo averlo selezionato il campo RI XML verrà compilato automaticamente da Dreamweaver che estrarrà l'informazione dal file frammenti.xsl.
Premete Ok per inserire il frammento XSLT nella vostra pagina dinamica. A questo punto potete lanciare l'anteprima e verificare quello che effettivamente vedranno i visitatori della vostra pagina dinamica.
Potrete pubblicare la pagina su un server remoto e ogni volta che un visitatore la visualizzerà essa mostrerà l'ultimo post pubblicato nel blog di HTML.it.
Modificare un frammento XSLT in una pagina dinamica
Non è possibile. Noterete che una volta che il frammento è stato inserito in una pagina dinamica non potrete più selezionare e manipolare gli elementi che lo costituiscono (da Dreamweaver). Tutte le modifiche andranno apportate direttamente sul file del frammento, vedrete che la pagina dinamica che incorpora il frammento si aggiornerà automaticamente.
Eliminare un frammento XSLT da una pagina dinamica
Se deciderete di togliere una frammento da una pagina dinamica non dovete cliccare su di esso e cancellarlo! In questo modo rimarranno delle porzioni di codice inutile nella vostra pagina web. Per eliminare correttamente il frammento aprite la pagina dinamica che lo incorpora, accedete al pannello Comportamenti server del gruppo Applicazioni, selezionate la voce che identifica il frammento e premete il pulsante -. Se sono presenti più voci potete individuare quella che rappresenta il vostro frammento facendo doppio click su ogni voce ed esaminandola nel dettaglio.
Conclusioni
Prima di concludere vorrei sottolineare alcuni dettagli:
Un frammento XSLT non è una pagina web, infatti non contiene i tag html, head o body. È semplicemente una porzione di codice pronta per essere facilmente inserita in una vera pagina HTML.
Quando inserite un frammento XSLT in una pagina dinamica e salvate, Dreamweaver crea la cartella includes (se non esiste) all'interno della quale inserisce la cartella MM_XSL_Transform che a sua volta contiene un file necessario al funzionamento della vostra pagina dinamica. Quando caricherete sul server remoto la vostra pagina dinamica sarà necessario caricare (oltre al frammento) anche questa cartella (naturalmente Dreamweaver lo farà per voi se risponderete Si alla domanda "Caricare i file dipendenti?").
Potete esercitarvi usando gli altri Feed RSS di HTML.it, li trovate in questa pagina, gli indirizzi dei Feed RSS corrispondono ai link dei pulsanti RSS azzurri che trovate in ogni sezione.
C'è ancora tanto da dire sulla simbiosi tra Dreamweaver e XML. L'obiettivo di questo tutorial era quello di mostrare una parte di ciò che è possibile fare e soprattutto di sottolineare la facilità con cui Dreamweaver riesce a gestire questi dati. Negli articoli successivi approfondiremo questi strumenti.
