Tipo di pagina visualizzata nel browser
Utilizzate XML e XSLT con le pagine web di Dreamweaver.
L’interfaccia utente di Dreamweaver e versioni successive è stata semplificata. Di conseguenza, potreste non trovare alcune delle opzioni descritte in questo articolo in Dreamweaver e versioni successive. Per ulteriori informazioni, consultate questo articolo.
Utilizzare XML e XSL con le pagine web
Extensible Markup Language (XML) è un linguaggio che consente di strutturare le informazioni. Come HTML, XML consente di strutturare le informazioni utilizzando tag, ma i tag XML non sono predefiniti come quelli HTML. XML consente invece di creare tag che definiscono al meglio la struttura dei dati (schema). I tag sono annidati all'interno di altri per creare uno schema di tag principali e secondari. Come la maggior parte dei tag HTML, tutti i tag in uno schema XML hanno un tag di apertura e uno di chiusura.
L'esempio seguente illustra la struttura di base di un file XML:
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
In questo esempio, ogni tag principale <book> contiene tre tag secondari: <pubdate>, <title> e <author>. Ma ogni tag <book> è anche un tag figlio del tag <mybooks>, che si trova un livello più alto nello schema.Puoi denominare e strutturare i tag XML in qualsiasi modo, purché li annidi di conseguenza all'interno di altri e assegni a ogni tag di apertura un tag di chiusura corrispondente.
I documenti XML non contengono alcuna formattazione: sono semplicemente contenitori di informazioni strutturate. Una volta creato uno schema XML, puoi utilizzare Extensible Stylesheet Language (XSL) per visualizzare le informazioni. Nel modo in cui i Fogli di stile a cascata (CSS) consentono di formattare HTML, XSL consente di formattare i dati XML. Puoi definire stili, elementi della pagina, layout e così via in un file XSL e allegarlo a un file XML in modo che quando un utente visualizza i dati XML in un browser, i dati risultino formattati secondo quanto hai definito nel file XSL.Il contenuto (i dati XML) e la presentazione (definita dal file XSL) sono completamente separati, offrendoti un maggiore controllo su come le informazioni vengono visualizzate su una pagina web. In sostanza, XSL è una tecnologia di presentazione per XML, dove l'output principale è una pagina HTML.
Extensible Stylesheet Language Transformations (XSLT) è un linguaggio sottoinsieme di XSL che consente effettivamente di visualizzare i dati XML su una pagina web e «trasformarli», insieme agli stili XSL, in informazioni leggibili e formattate sotto forma di HTML.Puoi usare Dreamweaver per creare pagine XSLT che ti consentono di eseguire trasformazioni XSL usando un server applicazioni o un browser. In una trasformazione XSL lato server, il server trasforma XML e XSL e li visualizza sulla pagina.In una trasformazione lato client, un browser (come Internet Explorer) esegue il lavoro.
L'approccio che scegli (trasformazioni lato server versus trasformazioni lato client) dipende da quello che stai cercando di ottenere come risultato finale, dalle tecnologie a tua disposizione, dal livello di accesso che hai ai file di origine XML e da altri fattori. Entrambi gli approcci hanno vantaggi e svantaggi. Ad esempio, le trasformazioni lato server funzionano in tutti i browser mentre le trasformazioni lato client sono limitate solo ai browser moderni (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). Le trasformazioni lato server consentono di visualizzare i dati XML dinamicamente dal proprio server o da qualsiasi altro punto sul web, mentre le trasformazioni lato client devono utilizzare dati XML ospitati localmente sul proprio server web.Infine, le trasformazioni lato server richiedono di distribuire le pagine su un server applicazioni configurato, mentre le trasformazioni lato client richiedono solo l'accesso a un web server.
Per un'esercitazione sull'uso di XML, vedete www.adobe.com/go/vid0165_it.
Trasformazioni XSL server-side
Dreamweaver fornisce metodi per creare pagine XSLT che ti consentono di eseguire trasformazioni XSL lato server. Quando un server applicazioni esegue la trasformazione XSL, il file contenente i dati XML può risiedere sul tuo server, o in qualsiasi altro posto sul web. Inoltre, qualsiasi browser può visualizzare i dati trasformati. Distribuire pagine per trasformazioni lato server, tuttavia, è piuttosto complesso e richiede che tu abbia accesso a un server applicazioni.
Quando lavori con trasformazioni XSL lato server, puoi usare Dreamweaver per creare pagine XSLT che generano documenti HTML completi (pagine XSLT intere), o frammenti XSLT che generano una porzione di un documento HTML. Una pagina XSLT intera è simile a una normale pagina HTML. Contiene un tag <body> e un tag <head>, e ti consente di visualizzare una combinazione di dati HTML e XML sulla pagina. Un frammento XSLT è un pezzo di codice, usato da un documento separato, che visualizza dati XML formattati. A differenza di una pagina XSLT intera, è un file indipendente che non contiene tag <body> o <head>. Se vuoi visualizzare dati XML su una pagina a sé stante, dovresti creare una pagina XSLT intera e collegare i dati XML ad essa. Se, d'altra parte, vuoi visualizzare dati XML in una particolare sezione di una pagina dinamica esistente—ad esempio, una home page dinamica per un negozio di articoli sportivi, con punteggi sportivi da un feed RSS visualizzati su un lato della pagina—dovresti creare un frammento XSLT e inserire un riferimento ad esso nella pagina dinamica. La creazione di frammenti XSLT e il loro utilizzo insieme ad altre pagine dinamiche per visualizzare dati XML è lo scenario più comune.
Il primo passo nella creazione di questi tipi di pagine è creare il frammento XSLT. È un file separato che contiene il layout, la formattazione e così via dei dati XML che successivamente si desidera visualizzare nella pagina dinamica.Una volta creato il frammento XSLT, inserisci un riferimento ad esso nella tua pagina dinamica (ad esempio, una pagina PHP o ColdFusion). Il riferimento inserito al frammento funziona in modo molto simile a un Server Side Include (SSI): i dati XML formattati (il frammento) risiedono in un file separato, mentre nella vista Progettazione, un segnaposto per il frammento appare sulla pagina dinamica stessa.Quando un browser richiede la pagina dinamica contenente il riferimento al frammento, il Server elabora l'istruzione inclusa e crea un nuovo documento in cui i contenuti formattati del frammento appaiono al posto del segnaposto.
A. Il browser richiede una pagina dinamica. B. Il server web trova la pagina e la passa al server applicazioni C. Il server applicazioni analizza la pagina alla ricerca di istruzioni e ottiene il frammento XSLT. D. Il server applicazioni esegue la trasformazione (legge il frammento XSLT, ottiene e formatta i dati xml). E. Il server applicazioni inserisce il frammento trasformato nella pagina e lo restituisce al server Web. F. Il server web invia al browser la pagina terminata.
Utilizzi il comportamento Server XSL Transformation per inserire il riferimento a un frammento XSLT in una pagina dinamica. Quando inserisci il riferimento, Dreamweaver genera una cartella includes/MM_XSLTransform/ nella cartella principale del sito che contiene un file di libreria di runtime. Il server applicazioni utilizza le funzioni definite in questo file durante la trasformazione dei dati XML specificati.Il file si occupa del recupero dei dati XML e dei frammenti XSLT, dell'esecuzione della trasformazione XSL e della visualizzazione dei risultati sulla pagina web.
Il file contenente il frammento XSLT, il file XML contenente i tuoi dati e il file di libreria di runtime generato devono tutti essere sul Server perché la tua pagina venga visualizzata correttamente. (Se selezioni un file XML remoto come origine dati—uno da un feed RSS, ad esempio—quel file deve ovviamente risiedere da qualche altra parte su Internet.)
Puoi anche utilizzare Dreamweaver per creare intere pagine XSLT da utilizzare con trasformazioni lato server.Un'intera pagina XSLT funziona esattamente nello stesso modo di un frammento XSLT, solo che quando inserisci il riferimento all'intera pagina XSLT utilizzando il comportamento Server XSL Transformation, stai inserendo l'intero contenuto di una pagina HTML. Pertanto, la pagina dinamica (la pagina .cfm, .php o .asp che funge da pagina contenitore) deve essere svuotata di tutto l'HTML prima di inserire il riferimento.
Dreamweaver supporta le trasformazioni XSL per le pagine ColdFusion, ASP e PHP.
Il tuo Server deve essere configurato correttamente per eseguire trasformazioni lato Server. Per altre informazioni, consultate l'amministratore del server.
Trasformazioni XSL client-side
Potete eseguire trasformazioni XSL client-side senza ricorrere a un server applicazioni. Dreamweaver consente di creare una pagina XSLT intera che svolge questa operazione, ma per le trasformazioni client-side è richiesta la modifica del file XML contenente i dati da visualizzare. Inoltre, le trasformazioni client-side funzionano solo con i browser più recenti (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2).
In primo luogo, create una pagina XSLT intera e associatela a un'origine dati XML. (Dreamweaver richiede che l'origine dati venga collegata nel momento in cui si crea la nuova pagina.) Potete creare una pagina XSLT da zero oppure convertire una pagina HTML in una pagina XSLT. Quando si converte una pagina HTML in una pagina XSLT è necessario collegare un'origine dati XML per mezzo del pannello Associazioni (Finestra > Associazioni).
Una volta creata la pagina XSLT, dovete collegarla al file XML contenente i dati XML inserendo un riferimento alla pagina XSLT nel file XML stesso (nello stesso modo in cui si inserisce un riferimento a un foglio di stile CSS esterno nella sezione <head> di una pagina HTML). I visitatori del sito devono visualizzare in un browser il file XML non la pagina XSLT. Quando la pagina viene aperta dai visitatori, il browser effettua la trasformazione XSL e visualizza i dati XML, formattati mediante la pagina XSLT collegata.
Anche se vi sono alcune differenze, la relazione tra le pagine XSLT e XML collegate tra loro è concettualmente simile al modello CSS/HTML. All'interno di una pagina HTML, si utilizza un foglio di stile esterno per la formattazione di contenuti come il testo. La pagina HTML determina il contenuto e il codice CSS esterno, che non viene mai visualizzato dall'utente, ne definisce la presentazione. Con XSLT e XML, la situazione è invertita. Il file XML (che l'utente non vede mai nella sua forma grezza) determina il contenuto, mentre la pagina XSLT determina la presentazione. La pagina XSLT contiene le tabelle, il layout, la grafica e gli altri elementi normalmente inclusi nelle pagine HTML standard. Quando un utente visualizza il file XML in un browser, la pagina XSLT determina la formattazione del contenuto.
A. Il browser richiede il file XML. B. Il server risponde inviando il file XML al browser. C. Il browser legge la direttiva XML e chiama il file XSLT. D. Il server invia il file XSLT al browser. E. Il browser trasforma i dati XML e li visualizza nel browser.
Quando utilizzi Dreamweaver per collegare una pagina XSLT a una pagina XML, Dreamweaver inserisce il codice appropriato nella parte superiore della pagina XML. Se possiedi la pagina XML a cui ti stai collegando (cioè, se il file XML risiede esclusivamente sul tuo server web), tutto quello che devi fare è utilizzare Dreamweaver per inserire il codice appropriato che collega le due pagine.Quando possiedi il file XML, le trasformazioni XSL eseguite dal client sono completamente dinamiche.Cioè, ogni volta che aggiornisci i dati nel file XML, qualsiasi output HTML che utilizza la pagina XSLT collegata verrà automaticamente aggiornato con le nuove informazioni.
I file XML e XSL che utilizzi per le trasformazioni lato client devono risiedere nella stessa directory. Se non lo fanno, il browser leggerà il file XML e troverà la pagina XSLT per la trasformazione, ma non riuscirà a trovare le risorse (fogli di stile, immagini e così via) definite dai collegamenti relativi nella pagina XSLT.
Se non possiedi la pagina XML a cui ti stai collegando (ad esempio, se vuoi utilizzare dati XML da un feed RSS da qualche parte sul web), il flusso di lavoro è un po' più complicato. Per eseguire trasformazioni lato client utilizzando dati XML da un'origine esterna, devi prima scaricare il file di origine XML nella stessa directory dove risiede la tua pagina XSLT. Quando la pagina XML è nel tuo sito locale, puoi utilizzare Dreamweaver per aggiungere il codice appropriato che la collega alla pagina XSLT e pubblicare entrambe le pagine (il file XML scaricato e la pagina XSLT collegata) sul tuo Server web. Quando l'utente visualizza la pagina XML in un browser, la pagina XSLT formatta il contenuto, proprio come nell'esempio precedente.
Lo svantaggio nell'eseguire trasformazioni XSL lato client su dati XML provenienti da un'origine esterna è che i dati XML sono solo parzialmente "dinamici". Il file XML che scarichi e modifichi è semplicemente un'"istantanea" del file che si trova altrove sul web. Se il file XML originale sul web cambia, devi scaricare nuovamente il file, collegarlo alla pagina XSLT e ripubblicare il file XML sul server web. Il browser esegue il rendering solo dei dati che riceve dal file XML sul server web, non dei dati contenuti nel file XML di origine.
Dati XML ed elementi ripetuti
L'oggetto XSLT Area ripetuta ti permette di visualizzare elementi ripetuti da un file XML all'interno di una pagina. Qualsiasi area contenente un segnaposto per dati XML può essere trasformata in un'area ripetuta. Tuttavia, le aree più comuni sono una tabella, una riga di tabella o una serie di righe di tabella.
L'esempio seguente mostra come l'oggetto XSLT Area ripetuta viene applicato a una riga di tabella che visualizza informazioni di menu per un ristorante. La riga iniziale visualizza tre elementi diversi dallo schema XML: elemento, descrizione e prezzo. Quando l'oggetto XSLT Area ripetuta viene applicato alla riga della tabella e la pagina viene elaborata da un'applicazione server o da un browser, la tabella si ripete con dati univoci inseriti in ogni nuova riga della tabella.
Quando applichi un oggetto XSLT Area ripetuta a un elemento nella finestra Documento, attorno all'area ripetuta viene visualizzato un contorno grigio sottile e con linguette.Quando visualizzi l'anteprima del lavoro in un browser (File > Anteprima nel browser), il contorno grigio scompare e la selezione si espande per mostrare gli elementi ripetuti specificati nel file XML, come nell'illustrazione precedente.
Quando aggiungi l'oggetto XSLT Area ripetuta alla pagina, la lunghezza del segnaposto per dati XML nella finestra Documento viene troncata.Questo perché Dreamweaver aggiorna l'espressione XPath (XML Path Language) per il segnaposto dei dati XML in modo che sia relativa al percorso dell'elemento ripetuto.
Ad esempio, il codice seguente è per una tabella che contiene due segnaposto dinamici, senza un oggetto XSLT Area ripetuta applicato alla tabella:
<table width="500" border="1">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
Il codice seguente è per la stessa tabella con l'oggetto Area ripetuta XSLT applicato:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
Nell'esempio precedente, Dreamweaver ha aggiornato l'XPath per gli elementi che rientrano nell'Area ripetuta (titolo e descrizione) per essere relativi all'XPath nei <xsl:for-each> tag di inclusione, piuttosto che al documento completo.
Dreamweaver genera espressioni XPath relative al contesto anche in altri casi. Ad esempio, se trascini un segnaposto di dati XML su una tabella a cui è già stato applicato un oggetto XSLT Area ripetuta, Dreamweaver visualizza automaticamente XPath relativo a XPath esistente nei tag <xsl:for-each> di inclusione.
Anteprima dati XML
Quando usi Mostra anteprima nel browser (File > Mostra anteprima nel browser) per visualizzare in anteprima i dati XML inseriti in un frammento XSLT o in un'intera pagina XSLT, il motore che esegue la trasformazione XSL varia da situazione a situazione. Per le pagine dinamiche che contengono frammenti XSLT, il server applicazioni esegue sempre la trasformazione. In altri casi, Dreamweaver o il browser potrebbero eseguire la trasformazione.
La seguente tabella riassume le situazioni durante l'uso di Mostra anteprima nel browser e i motori che eseguono le rispettive trasformazioni:
|
|
Trasformazione dati eseguita da |
|---|---|
|
Pagina dinamica contenente il frammento XSLT |
Server applicazioni |
|
Frammento XSLT o pagina XSLT intera |
Dreamweaver |
|
File XML con collegamento a una pagina XSLT intera |
Browser |
Gli argomenti seguenti forniscono linee guida utili per determinare i metodi di anteprima appropriati, in base alle tue esigenze.
Anteprima di pagine per trasformazioni server-side
Nel caso di trasformazioni lato server, il contenuto che il visitatore del sito vede alla fine viene trasformato dal server applicazioni.Durante la creazione di XSLT e pagine dinamiche da usare con trasformazioni lato server, è sempre preferibile visualizzare in anteprima la pagina dinamica che contiene il frammento XSLT invece del frammento XSLT stesso. Nel primo scenario, usi il server applicazioni, che garantisce che l'anteprima sia coerente con quello che i visitatori del sito vedranno quando visitano la pagina. Nel secondo scenario, Dreamweaver esegue la trasformazione e potrebbe fornire risultati leggermente incoerenti. Puoi usare Dreamweaver per visualizzare in anteprima il frammento XSLT mentre lo crei, ma potrai vedere i risultati più accurati del rendering dei dati se usi il server applicazioni per visualizzare in anteprima la pagina dinamica dopo aver inserito il frammento XSLT.
Anteprima di pagine per trasformazioni client-side
Nel caso di trasformazioni lato client, il contenuto che il visitatore del sito vede viene trasformato da un browser.Puoi farlo aggiungendo un collegamento dal file XML alla pagina XSLT. Se apri il file XML in Dreamweaver e ne visualizzi l'anteprima in un browser, forzi il browser a caricare il file XML ed eseguire la trasformazione. In questo modo ottieni la stessa esperienza del visitatore del sito.
L'uso di questo approccio, tuttavia, rende più difficile eseguire il debug della pagina perché il browser trasforma XML e genera HTML internamente. Se selezioni l'opzione Visualizza origine del browser per eseguire il debug di HTML generato, vedrai solo XML originale ricevuto dal browser, non l'HTML completo (tag, stili e così via) responsabile del rendering della pagina. Per vedere l'HTML completo durante la visualizzazione del codice origine, devi visualizzare in anteprima la pagina XSLT in un browser.
Anteprima di pagine XSLT intere e di frammenti XSLT
Durante la creazione di pagine XSLT complete e frammenti XSLT, ti consigliamo di visualizzare in anteprima il lavoro per assicurarti che i dati vengano visualizzati correttamente. Se usi Mostra anteprima nel browser per visualizzare un'intera pagina XSLT o un frammento XSLT, Dreamweaver esegue la trasformazione usando un motore di trasformazione integrato. Questo metodo offre risultati rapidi e semplifica la creazione e il debug incrementali della pagina. Consente inoltre di visualizzare l'HTML completo (tag, stili e così via) selezionando l'opzione Visualizza origine nel browser.
Questo metodo di anteprima è usato comunemente quando inizi a creare pagine XSLT, indipendentemente dal fatto che usi il client o il server per trasformare i dati.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.