Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Trasformazioni XSLT in Dreamweaver 8

Primo sguardo agli strumenti XML: trasformare un feed RSS
Primo sguardo agli strumenti XML: trasformare un feed RSS
Link copiato negli appunti

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:

Figura 1. Finestra Origine XML
Finestra 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.

Figura 2. Individua origine XML
Individua origine 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. 

Figura 3. Struttura XML
Struttura XML

Il simbolo 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 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 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)

Figura 4. Nodo title
Nodo title

e trascinatelo nel segmento XSLT corrente.

Figura 5. Trascinamento nell'area XSLT
Trascinamento nell'area XSLT

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.

Figura 6. Selezionare il file
Selezionare il file

Ecco come appare ora il frammento XSLT che state costruendo.

Figura 7. Anteprima del nodo
Anteprima del nodo

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.

Figura 8. Inserimento di un paragrafo
Inserimento di un paragrafo

Bene, guardate l'albero mostrato nel pannello associazioni: ogni item corrisponde a un post.

Figura 9. Vista dei singoli item del feed RSS
Vista dei singoli item del feed RSS

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.

Figura 10. Inserimento dell'item sulla pagina
Inserimento dell'item sulla pagina

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.

Figura 11. Inserimento altri elementi
Inserimento altri elementi

Per rendere più chiaro il tutto potreste aggiungere del testo per descrivere le informazioni come mostrato nella figura seguente.

Figura 12. Anteprima
Anteprima

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.

Figura 13. Selezione file
Selezione file

Premete Ok per tornare al frammento XSLT.

Figura 14. Visualizzazione frammento XSLT
Visualizzazione 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.

Figura 15. Anteprima
Anteprima

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.

Figura 16. Pulsante "Trasformazione XSL"
Pulsante

Apparirà il seguente pannello.

Figura 17. Pannello "Trasformazione XSL"
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.

Figura 18. Inserimento informazioni
Inserimento informazioni

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.


Ti consigliamo anche