XML e Dreamweaver CS3: come creare contenuti dinamici

Grazie all’introduzione dei cosidetti Spry di Dreamweaver CS3, oggi è possibile, sfruttare le potenzialità di Javascript ed XML per creare pagine dal contenuto dinamico senza doversi finalmente più preoccupare di fastidiosi aggiornamenti. Certo, la soluzione migliore sarebbe conoscere linguaggi server-side, come PHP, ASP.NET, Coldfusion, ecc… .

Vediamo comunque come intervenire.

Prendiamo un classico caso di aggiornamento quasi obbligatorio: un catalogo di prodotti che in breve potrebbe anche essere la pagina dei “servizi” di un’agenzia.

Per prima cosa in Dreamweaver CS3 inseriamo nella parte esatta della nostra pagina del testo generico che sostituisca momentaneamente quello effettivo. Più o meno come nell’esempio sottostante:
Ora, questa sezione composta da “titolo”, “tipo” e descrizione dovrebbe essere ripetuta orientativamente per il numero degli elementi contenuti nel file XML. Andiamolo a vedere:

Ecco un esempio, scaricabile da qui se volete utilizzarlo come esempio.
Come potete vedere il file XML altro non è che una sequenza di dati gestiti da codice di marcatura (tag) come l’HTML. Solo che i nomi dei nodi sono personalizzati.
L’importante è che la struttura (dvd-titolo-anno) rimanga sempre uguale per ciascun lavoro.

Così facendo, i dati saranno salvati sull’XML, la pagina HTML li formatterà da un punto di vista grafico e il codice Javascript che Dreamweaver aggiungerà, gestirà la loro ripetizione all’interno del documento in funzione del numero di nodi “lavoro” contenuti nel documento XML.

Quindi per elaborare le nostre informazioni e posizionarle al posto giusto, dovremo utilizzare il framework Spry di Dreamweaver, raggiungibile cliccando sul menu alla voce “Spry“.
Da questa voce, clicchiamo sul primo pulsante a sinistra: “Dataset XML Spry“.
Nel pannello successivo impostiamo i seguenti valori in questa maniera:
Nome dataset: rs1
Origine XML: catalogo.xml
Elemento di riga: scegliamo il nodo principale “dvd”(se state usando l’esempio di prima).
XPath: catalogo/dvd
Il resto lasciamo pressapoco invariato. Confrontate con l’immagine sottostante per testare la prova.
L’immagine sottostante sintetizza quanto detto finora:
Confermiamo cliccando su “ok”.
Così facendo abbiamo stabilito una connessione tra la nostra pagina e il file XML.
Salviamo il nostro documento e Dreamweaver ci chiederà di salvare dei file Javascript all’interno della nostra applicazione. Confermiamo.
Ora, su Dreamweaver selezioniamo la porzione di pagina che vogliamo venga ripetuta per il numero di nodi “dvd” contenuti nel file XML, cioè la sezione precedenemtente inserita con i testi generici.

Ora non faremo altro che selezionare questa sezione e chiedere a Dreamweaver CS3 di ripetere questa parte (anche se ancora con i testi generici).

Quindi evidenziamo le varie : “titolo”, “tipo” e “descrizione dalla pagina”.
Clicchiamo sul terzo pulsante degli strumenti “Spry”, cioè “Ripetizione Spry“. Con ciò confermiamo che l’area selezionata è quella da ripetere. Per concludere la corretta ripetizione, dobbiamo apportare delle leggere modifiche al codice.
Andiamo in vista codice di Dreamweaver e cambiamo la riga corrispondente a quella selezionata e modifichiamo il codice in modo tale da aggiungere all’attributo (in arancione) “spry:repeat” anche il “spry:region=”id”.
Ora se provassimo a salvare e guardare in anteprima di Internet Explorer 7 o Firefox 2 vedremo che l’area viene ripetuta esattamente quanti sono i nodi “dvd” dell’XML ma sempre col testo “di appoggio”.
Concludiamo quindi sostituendo quel testo con quello corretto. Durante il nostro lavoro, Dremweaver dovrebbe aver reso agibile un ulteriore pannello “Applicazioni”–>”Associazioni” (vedi foto):
Ora selezioniamo sulla pagina la parola “titolo”, cancelliamola e sostituiamola nel punto esatto (tramite appunto drag&drop) con la voce “titolo” presente nel pannello “Associazioni”. Così facendo sostituiamo tutte le voci.
Al termine salviamo e testiamo la nostra pagina in Internet Explorer (7 possibilmente) o Firefox od Opera.
Come vedrete il file inserisce automaticamente tutti i film estratti dal file XML.
Ora per fare modifiche o aggiornamenti, basterà prendere il file XML e aggiungere o togliere quanto serve.

SCARICA L’ESEMPIO COMPLETO



Lascia un Commento

8N5Mw

Please type the text above: