Pagine

martedì 17 marzo 2015

Informatica - Trasformazioni XSLT lato client

Nell'articolo Informatica - XML e trasformazioni XSLT abbiamo visto come sia possibile associare a un file dati in formato XML una trasformazione XSLT semplicemente aggiungendo una linea sotto la prima linea del file XML (quella che contiene la dichiarazione <?xml version="1.0"?>). La linea da aggiungere è (in rosso):

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="http://[percorso]/[nome del file]"?>

Ovviamente le parentesi quadre [ e ] vanno rimosse. Ad esempio potremmo scrivere:

<?xml-stylesheet type="text/xsl" href="http://www.w3schools.com/xsl/cdcatalog.xsl"?>

Molto spesso, tuttavia, è necessario decidere al volo (magari in base alle scelte dell'utente, o in funzione del tipo di dispositivo che richiede una pagina con i dati XML) la trasformazione XSLT più adatta. Questa trasformazione può essere eseguita sia lato server (elaborazione server-side) che lato client (elaborazione client-side). Oggi ci occuperemo del secondo caso, l'elaborazione client-side.

Nell'esempio che vi propongo, che potete testare a questo indirizzo, ho realizzato una semplice pagina html, contenente il seguente codice:

<html>
<head>

<script type="text/javascript" language="javascript" src="domXslt.js"></script>

</head>
<body>
<h2>La più grande collezione di dischi in vinile! Comprate peones, comprate! 
Acquisto con carta di credito prepagata.
</h2>

<select id="sel" onchange="displayResult(sel.value)">
  <option value="">Scegli il modello di formattazione</option>
  <option value="cdCatalog1.xsl">Modello ridotto</option>
  <option value="cdCatalog2.xsl">Modello esteso</option>
  <option value="cdCatalog3.xsl">Modello tabulare</option>
</select>

<div id="example"/>

</body>
</html>

Ho evidenziato in giallo tre parti della pagina che dobbiamo esaminare.

1) il tag "script".


Questo tag contiene un riferimento a un file (domXslt.js) che contiene il codice javascript che eseguirà la trasformazione. Questo codice viene richiamato dal browser nel momento in cui la pagina html viene caricata nella memoria del vostro dispositivo. Esso viene chiamato in esecuzione quando l'utente effettua una scelta tra le tre possibili che gli sono presentate (modello ridotto, modello esteso, modello tabulare).

2) il tag select


Questo tag ha l'effetto di creare nella pagina un elenco di scelta a discesa. L'utente può così selezionare il tipo di formattazione desiderata. Ogni voce del tag select (le quattro voci "option") ha un "value" (che è nascosto all'utente) e un'etichetta visibile. La prima voce "option" ha un value nullo, ad indicare che l'utente non ha effettuato nessuna scelta. In tal caso il risultato sarà una pagina vuota.

Si noti il fatto che il tag ha un attributo "id", il cui valore è posto uguale a "sel". Questo attributo serve ad identificare il tag in modo che ci si possa riferire ad esso. Il valore dell'attributo può essere scelto a piacere.

Si noti infine la presenza dell'attributo "onchange". Esso rappresenta il nome di un evento che viene generato dal browser quando l'utente effettua una selezione. Quando ciò accade viene eseguito il codice contenuto nella funzione  displayResult, alla quale viene passato il parametro sel.value, contenente il nome del file XSLT con cui effettuare la trasformazione.

3) il tag div


Questo tag crea un contenitore vuoto (quindi invisibile finché resta tale) nel quale verrà iniettato il risultato della trasformazione dell'XML in HTML, utilizzando il codice contenuto nel file XSLT selezionato dall'utente.

Quello che accade


Quando l'utente seleziona un modello di formattazione viene eseguita la funzione displayResult con l'opportuno parametro, e il risultato appare a schermo. Vi ricordo che la funzione displayResult è scritta in linguaggio javascript ed è contenuta nel file domXslt.js. E' decisamente troppo presto per esaminare questa funzione, ne riparleremo al momento opportuno. Quello che è importante osservare è che la realizzazione dell'intera procedura è stata divisa in tre parti. 
  • La scrittura della pagina HTML, contenete i tag opportuni.
  • La scrittura della trasformazione XSLT
  • La scrittura del codice javascript.
Per realizzare ognuna di esse, posto che i dati in formato XML siano disponibili (ad esempio perché provengono da un data-server) serve una specifica professionalità. In genere la scrittura della pagina HTML è curata da un grafico, mentre due distinti programmatori si occupano di scrivere la trasformazione XSLT e il codice javascript. Il tutto viene supervisionato da un sistemista.


Nota per i miei studentelli: con tutto il lavoro che faccio per voi, non vi passi per la testa di trattarmi così (Professore vittima dei bulli in classe - Cestino in testa e insulti contro di lui)! Vi stronco la carriera... ;-)

Nessun commento:

Posta un commento