XML: slide 10 di 20

Costruzione di un foglio di stile

La stesura di un foglio di stile XSL si può riassumere in questi punti:

associazione delle parti del documento XML che si vuole visualizzare a semplici tag di HTML (<P>, <B>, <DIV>, ecc.), attraverso gli elementi XSL;

aggiunta di testo che spieghi il significato dei dati (titoli, commenti, ecc.);

affinamento della visualizzazione ottenuta per mezzo dei tag di HTML dedicati alla formattazione (<FONT>, <TABLE>, <STYLE>, ecc);

inserimento di eventuali immagini ed elementi multimediali.

Si noti che gli elementi di XSL servono solo per il punto 1. Per le altre operazioni è sufficiente conoscere HTML ed eventualmente anche Javascript o DHTML, nel caso si voglia realizzare una pagina Web sofisticata.

Il linguaggio XSL consente di visualizzare i documenti XML non solo tramite i tag di HTML, ma anche utilizzando dei tag proprietari, chiamati oggetti di formattazione. Questi elementi di XSL costituiscono un linguaggio molto complesso, sulla cui utilità si è aperto un acceso dibattito nell'ambiente degli sviluppatori XML.

Foglio di stile per "dipartimento.xml"

È importante inserire nel foglio di stile le parti del documento HTML che avevamo soppresso nella conversione all'XML. In questo modo viene realizzata una delle caratteristiche più importanti di XML, cioè la separazione fra:

	i dati del documento, descritti formalmente dalla DTD e dalla struttura ad albero imposta da XML;
	la presentazione del documento, costituita da un foglio di stile XSL formato da elementi che stabiliscono le relazioni con il documento XML e tag di HTML. Nel foglio di stile devono comparire anche quelle parti di testo che rendono più leggibili i dati, ma che non fanno parte di essi.

Questo foglio di stile fornisce una visualizzazione al documento XML che si avvicina a quella del documento HTML dal quale eravamo partiti:

<?xml version="1.0" ?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<HEAD><TITLE> Università di QualchePosto - Docenti del dipartimento di Informatica </TITLE></HEAD>
<BODY>
<FONT COLOR="#0000ff">
<H1 ALIGN="CENTER">Università degli studi di QualchePosto</H1>
<H2 ALIGN="CENTER">Dipartimento di Informatica</H2>
</FONT>
<I><FONT COLOR="#ff00ff">
<H3 ALIGN="CENTER">Elenco dei docenti</H3>
</FONT></I>
<DIV STYLE="font-family:Times, helvetica, sans-serif; background-color:#EEEEEE">
<xsl:for-each select="DOCENTI/PERSONA">
  <DIV STYLE="background-color:red; color:white; padding:4px">
  <B COLOR="WHITE"><xsl:value-of select="NOME"/></B>:
  <xsl:value-of select="TITOLO"/>
  </DIV>
  <DIV STYLE="margin-left:15px;">
  Gruppo di ricerca: <I><xsl:value-of select="GRUPPO"/></I>
  </DIV>
  <P STYLE="margin-left:15px;">
  Curriculum vitae: <xsl:value-of select="CURRICULUM"/>
  </P>
  <P STYLE="margin-left:15px;">Elenco pubblicazioni:<UL>
  <xsl:for-each select="PUBBLICAZIONI/PUBBLICAZIONE">
    <LI><xsl:value-of/></LI>
  </xsl:for-each>
  </UL></P>
</xsl:for-each>
</DIV>
</BODY>
</HTML>

La visualizzazione che si ottiene è la seguente:

Per migliorare la presentazione della pagina, abbiamo aggiunto ad alcuni tag di HTML l'attributo STYLE, che ci consente di assegnare ai singoli tag gli attributi di formattazione di CSS (Cascading Style Sheet). Questa tecnica è detta CSS in linea.

Altre slides: