XSLT, Ajax & DOM - Parte 0 - Introduzione e definizioni

[linot...@gmail.com]

Vi introduco una serie di tutorial su come unire diverse teconologie.
Lo scopo di questi thread è quello di unire teconogie web
differenti,allo scopo di aumentare il look and feel, la coerenza e
soprattutto l'integrazione con i sistemi lato server. Da qui in avanti
l'approccio dello sviluppatore è rivolto solo ed esclusivamente alla
presentazione dei dati. Quindi non verranno utilizzati framework
integrati con tecnologie lato server (come Ajax.NET o simili).

Seguono un po' definizioni prese direttamente da wikipedia:

L'XSLT (eXtensible Stylesheet Language Transformations) è il
linguaggio di trasformazione dell'XML; deriva direttamente dal
linguaggio XSL, infatti i file di questo formato sono essenzialmente
file di testo, contengono elementi ed attributi ed hanno l'estensione
".xsl".
(fonte: http://it.wikipedia.org/wiki/XSLT)

Ajax, acronimo di Asynchronous JavaScript and XML, è una tecnica di
sviluppo web per creare applicazioni web interattive. L'intento di
tale tecnica è quello di ottenere pagine web che rispondono in maniera
più rapida, grazie allo scambio in background di piccoli pacchetti di
dati con il server, così che l'intera pagina web non debba essere
ricaricata ogni volta che l'utente effettua una modifica. Questa
tecnica riesce, quindi, a migliorare l'interattività, la velocità e
l'usabilità di una pagina web.
AJAX è asincrono nel senso che i dati extra sono richiesti al server e
caricati in background senza interferire con il comportamento della
pagina esistente. Normalmente le funzioni richiamate sono scritte con
il linguaggio JavaScript.
(fonte: http://it.wikipedia.org/wiki/AJAX)

Il Document Object Model (spesso abbreviato come DOM), letteralmente
modello a oggetti del documento, è una forma di rappresentazione dei
documenti strutturati come modello orientato agli oggetti.
DOM è lo standard ufficiale del W3C per la rappresentazione di
documenti strutturati in maniera da essere neutrali sia per la lingua
che per la piattaforma. DOM è inoltre la base per una vasta gamma
delle interfacce di programmazione delle applicazioni; alcune di esse
sono standardizzate dal W3C.
(fonte: http://it.wikipedia.org/wiki/Document_Object_Model)

A queste teconolige chiaramente aggiungiamo CSS:
I fogli di stile a cascata (dall'inglese CSS Cascading Style Sheets),
detti semplicemente fogli di stile, vengono usati per definire la
rappresentazione di documenti HTML e XHTML. Le regole per comporre i
fogli di stile sono contenute in un insieme di direttive
(Recommendations) emanate a partire dal 1996 dal W3C. L'introduzione
dei fogli di stile si è resa necessaria per separare i contenuti dalla
formattazione e permettere una programmazione più chiara e facile da
utilizzare, sia per gli autori delle pagine HTML che per gli utenti.
(fonte: http://it.wikipedia.org/wiki/Foglio_di_stile).

Al termine di ogni thread verrà redatta una pagina che sarà
disponibilie presso al sezione pagine, che raccoglierà tutto il
sapere, gli esempi e le considerazioni di tutta la comunità.
Aderire alla stesura è abbastanza semplice, basta rispondere al thread
con esempi/risposte/considerazioni.

Per tutto ciò che riguarda gli esmpi pratici consiglio di utilizzare :
Eclipse o Aptana come IDE di sviluppo (con opportuni plugins) per
milgiorare la scrittura del codice.
Tomcat e XAMPP / LAMPP come Application server.

Ho dimenticato qualcosa?

[linot...@gmail.com]

Cominciamo quindi a predisporre l'ambiente di sviluppo idoneo. Occorre
però prima focalizzare l'attenzione sul flusso dei dati che proviene
dal server e arriva al client, nel nostro caso il browser web. In
questo modo possiamo sapere con esattezza cosa e come realizzare tutte
le singole parti che compongono il sistema della UI logic.

Di seguito sono riportati alcuni esempi di realizzazione delle
componenti UI dalla più semplice all più complessa. (vi prometto che
al termine dell'opera le avremo viste tutte).

Interfaccia statica:
Server -> XML -> browser -> XSLT

Interfaccia Dinamica
Server -> XML -> browser -> XSLT
-> start Framework UI ->
rendering

Server -> XML Navigazione -> XSLT
-> parsing Widget
-> loading data (Ajax call)
-> start Widget -> rendering


Quindi parliamo di 3 tipi di approcci: XSLT, XSL e js framework, WOA
(Widget Oriented Application).
L'ulitmo dei 3 è abbastanza complesso, dato che richiede una certa
conoscenza pratica dei widget, che banalmente possiamo de

Per cominciare
Scarichiamo un buon Web Server (tipo apache):
http://www.apache.org/

Attraverso l'editor preferito (per la vostra integrità psico-fisica vi
consiglio qualcosa che possiede almeno la colorazione della sintassi),
creiamo una directory "static" e dentro di essa creiamo il primo file
xml:

<?xml version="1.0" ?>
<doc>

</doc>