XSLT

Maneres de transformar un XML

XML està pensat sobretot per a emmagatzemar i intercanviar informació, de manera que si cal representar les dades d’una manera diferent per optimitzar un procés o per millorar-ne la visualització hi haurà diverses possibilitats:

• Desenvolupar un programa
  Com que és relativament senzill treballar amb XML, es podria desenvolupar un programa que agafi les dades XML i generi la sortida tal com la volem. Això té l’inconvenient que caldrà tenir coneixements de programació i que pot representar molta feina encara que el que calgui fer sigui trivial.
• Fer servir CSS
  En molts casos una solució senzilla seria fer servir CSS per representar la informació de manera més amigable fent servir un navegador. Però només serveix per canviar la visualització, no per canviar el document.
• Transformar el document
  Una solució alternativa consisteix a transformar el document en un altre que estigui pensat per ser visualitzat. Hi ha molt formats que estan pensats sobretot per ser visualitzats: PDF, HTML, XHTML, etc.

CSS

Mitjançant llenguatge CSS podem modificar la manera com es representa la informació que conté el fitxer XMl i adaptar-la a les nostres necessitats. Aquest mètode té la limitació que no ens permet modificar la seqüència d'aparició de la informació ni ens permet afegir informació extra a la que mostra el XML. Per exemple, si tenim un fitxer XML amb la següent informació:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="books.css"?>
<bookstore>  
    <book category="COOKING">  
        <title lang="en">Everyday Italian</title>  
        <author>Giada De Laurentiis</author>  
        <year>2005</year>  
        <price>30.00</price>  
    </book>  
    <book category="CHILDREN">  
        <title lang="en">Harry Potter</title>  
        <author>J K. Rowling</author>  
        <year>2005</year>  
        <price>29.99</price>  
    </book>  
    <book category="WEB">  
        <title lang="en">Learning XML</title>  
        <author>Erik T. Ray</author>  
        <year>2003</year>  
        <price>39.95</price>  
    </book>  
</bookstore>

I l'enllacem amb el següent fitxer CSS

bookstore{
    background-color: darkgray;
}
title{
    font-size: 30px;
    color:brown
}

book {
    display: block;
}
author{
    display: block;
    font-size: 15px;
    font-style:italic;
}

price {
    display: block;
    font-weight: bold;
    padding-bottom: 30px;
}

Com a resultat tindrem la següent pàgina web:

Resultat de XML + CSS

Tot i la modificació en la forma de presentació, CSS té moltes limitacions a l’hora de presentar la informació:

• La informació no pot ser reordenada con vulguem. L’única manera de simular el canvi d’ordre és fer servir posicionaments absoluts.
• Els atributs es poden mostrar però hi ha moltes limitacions per fer-ho.
• No es poden afegir estructures noves producte de càlculs o de procés de les dades del document.
• No té maneres senzilles de formatar les dades en pàgines de text per ser impreses.

Per tant, si l’objectiu final no és simplement decorar el fitxer sinó transformar-lo en un altre document totalment diferent, CSS no serveix. CSS no transforma el document sinó que simplement canvia la manera com es visualitza.

Transformacions

Per superar les mancances de CSS a l'hora de transformar documents va aparèixer un nou llenguatge :XSL

XSL és una família de llenguatges que ens permeten definir transformacions i presentacions de documents XML.

La família de llenguatges XSL està formada per tres llenguatges:

• XSL-FO(XSL Formatting Objects): és un llenguatge per definir el format que s'ha d'aplicar a un document.
• XSLT(XSL transformations): és un llenguatge per ens permet transformar documents XML.
• XPath: és un llenguatge que ens permet accedir a parts dels documents XML.

XSLT

XSLT (extensible stylesheet language for transformations) és un llenguatge de plantilles basat en XML que permet convertir l’estructura dels elements XML en altres documents.

Nosaltres l'utilitzarem per a partir de la informació que conté el fitxer XML generar un fitxer HTML per mostrar-ne la informació del mateix.

XSLT fa servir XPath per identificar les diferents parts de la informació del document XML. Un cop seleccionades les diferents parts del document XML, utilitzant XSLT, es segueixen una sèrie de patrons definits en el fitxer, que determinen com generar el document de sortida (HTML).

El fitxer XSLT actua de la mateixa manera com actua un fitxer CSS en HTML. Cal enllaçar el document XSLT amb el fitxer XML. Per crear aquest enllaç cal incloure en la capçalera del document XML la següent línia de codi:

  <?xml-stylesheet type="text/xsl" href="fitxerXSL.xsl"?>

Per tant, si volem enllaçar un full XSLT al document XML de l'exemple anterior aquest quedaria de la següent manera:

  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet type="text/xsl" href="fitxerXSL.xsl"?>
  <bookstore>  
    <book category="COOKING">  
        <title lang="en">Everyday Italian</title>  
        <author>Giada De Laurentiis</author>  
        <year>2005</year>  
        <price>30.00</price>  
    </book>  
    <book category="CHILDREN">  
        <title lang="en">Harry Potter</title>  
        <author>J K. Rowling</author>  
        <year>2005</year>  
        <price>29.99</price>  
    </book>  
    <book category="WEB">  
        <title lang="en">Learning XML</title>  
        <author>Erik T. Ray</author>  
        <year>2003</year>  
        <price>39.95</price>  
    </book>  
  </bookstore>

Funcionament XSLT

El fitxer XSLT intentarà fer les tranformacions utilitzant les plantilles definides per cada un dels elements seleccionats per les mateixes. Una plantilla selecciona utilitzant XPath l'element que ha de transformar, i aplica les transformacions definides dins seu.

Si hi ha algun element que no es pugui processar amb una plantilla aquest es transformarà amb el funcionament per defecte:

• Si el node té contingut es retornarà el contingut del node
• Si el node no té contingut no es retornarà cap contingut

Els fitxers XSLT es defineixen amb les etiquetes <xsl:stylesheet>. Per tant, l'estructura mínima d'un fitxer XSLT seria:

<?xml version="1.0" encoding="UTF-8"?>
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  
  </xsl:stylesheet>

La línia 1 és la capçalera de fitxer XML, en tant que es tracta d'un fitxer de llenguatge de marques XML. I la línia 2 és el node arrel que engloba tot el contingut del fitxer XSLT.

Per tant, si ara aquest fitxer el guardem amb el nom fitxerXSL.xsl, i el guardem en el mateix directori que el nostre XML, ja tindrem els dos fitxers enllaçats i el resultat seria alguna cosa semblant a això:

Resultat de XML + XSLT

Podem veure que únicament apareixen els valors que contenen cada un dels elements del XML. Això és degut a que encara no hem definit cap plantilla de transformació, i per tant cap dels elements és seleccionat per una plantilla i per tant tots estan sent processats amb el comportament per defecte abans comentat.

Anem a crear una primera plantilla per processar, per exemple, els nodes YEAR. Volem que cada element YEAR mostri el text Aqui hi haurà el valor de l'any. Ho fariem de la següent manera:

  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="//YEAR">
      Aqui hi haurà el valor de l'any 
    </xsl:template>
  </xsl:stylesheet>

Les etiquetes <xsl:template match=""> són les que defineixen una plantilla. Dins de l'atribut match hi hem d'incloure la sentència XPath que seleccionarà els elements als que s'aplicarà la plantilla. En aquest cas volem que s'apliqui sobre els elements YEAR per tant, el nostre XPath serà //YEAR

I ara si apliquem el XSLT sobre el XML el resultat serà:

Resultat de XML + XSLT

Podem comprovar que ara enlloc del valor de l'any, el que ha aparegut per pantalla ha estat el el text "Aquí hi haurà el valor de l'any". Per tant, l'element YEAR ha estat processat correctament i ha mostrar el valor que hem especificat a la plantilla.

Fixeu-vos que el text ha aparegut en cada una de les ocurrències de l'etiqueta YEAR. Per tant és com si féssim un bucle que passa per totes i cada una de les etiquetes.

Afegir contingut als elements

Serà habitual voler afegir contingut HTML dins la plantilla XSLT que hem creat. De fet, aquest és un dels objectius finals de fer les transformacions.

Per exemple, ens pot interessar mostrar el text Aquí hi haurà el valor de l'any en negreta.

Per fer-ho simplement haurem d'incloure dins la plantilla el codi HTML que necessitem per tal d'aconseguir el nostre objectiu de fer el text en negreta. Concretament quedaria de la següent manera:

  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" version="4.0"/>
    <xsl:template match="//YEAR">
      <b>Aqui hi haurà el valor de l'any </b>
    </xsl:template>
  </xsl:stylesheet>

I el resultat quedaria de la següent manera:

Resultat de XML + XSLT

I si volguéssim que a més ho fes dins un paràgraf HTML nou, fariem:

  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" version="4.0"/>
    <xsl:template match="//YEAR">
      <p><b>Aqui hi haurà el valor de l'any </b><p>
    </xsl:template>
  </xsl:stylesheet>

I quedaria de la següent manera:

Resultat de XML + XSLT

Fixeu-vos que cal afegir la línia <xsl:output method="html" version="4.0"/> per tal d'indicar que el fitxer de sortida serà HTML i que per tant s'interpretin les etiquetes b i p com a tals. En cas contrari s'entén que el resultat de la transformació és un XML i per tant no es reconeix l'etiqueta p com a paràgraf ni la b com a negreta.

Això canvia quan ja incloem les etiquetes html head body ja que el navegador amb aquestes etiquetes sí que entén que el document és un HTML i interpreta les etiquetes que trobi en el document com a tals.

Com crear una estructura HTML

Per crear l'estructura típica dels fitxers HTML:

  <html>
     <head>
     </head>
     <body>
     </body>
  </html>

el primer que hem de tenir en compte és que aquesta estructura només cal repetir-la una vegada. Si la tinguéssim més d'un cop dins el mateix document aquest no seria vàlid ja que no seguiria la sintaxis HTML. Cal buscar un element dins el fitxer XML d'origen que només estigui un cop dins el document i transformar-lo a l'estructura HTML

Quin element no es repeteix mai en un fitxer XML?

L'arrel. Els documents XML sempre contenene una i només una arrel dins el document. En cas contrari el document XML no estaria ben format i per tant no seria vàlid per fer una transformació. Aprofitant aquest fet habitualment el que tot document XSLT que vulgui transformar a HTML té és la següent plantilla:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <html>
    <head>
      <title>Titol de la pàgina</title>  
    </head>
      <body>
      
      </body>  
    </html>
  </xsl:template>
<xsl:stylesheet>

D'aquesta manera el document resultant de fer la transformació contindrà el codi mínim per crear una pàgina web. Fixeu-vos que ja no ha calgut incloure l'etiqueta xsl:output per indicar que el document resultant és HTML. I el resultat final és:

Resultat de XML + XSLT

Només ens queda afegir plantilles per cada un dels elements XML que volguem transformar. Per exemple:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <html>
    <head>
      <title>Títol de la pàgina</title>  
    </head>
      <body>
      
      </body>  
    </html>
  </xsl:template>
  <xsl:template match="//YEAR">
    <p><b>Aqui hi haurà el valor de l'any</b></p>
  </xsl:template>
</xsl:stylesheet>

Pero veurem que en aquest cas ens torna a mostrar exactament la manteixa pàgina HTML que en cas anterior. No ha implementat la plantilla de l'etiqueta YEAR.

Per què no ha interpretat la plantilla?

No ho ha fet per que totes les etiquetes ja han estat incloses i per tant suposadament transformades dins la plantilla arrel (/), i per tant ja no s'han executat les altres plantilles.

En aquest cas tindriem dues solucions:

• Tractar totes les etiquetes dins la plantilla de l'arrel.
• Incloure una línia de codi que faci interpretar les altres plantilles.

Tractar totes les etiquetes dins l'arrel és possible, i de fet molts desenvolupadors treballen així. Però el codi resultant és molt llarg i brut i costa realitzar modificacions. Quan es comencen amb les transformacions és més senzill i net utilitzar la segona opció.

La línia a incloure per tal que la resta de plantilles siguin interpretades és: <xsl:apply-templates></xsl:apply-templates> I la inclourem dins l'etiqueta body de la plantilla de l'arrel:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <html>
    <head>
      <title>Títol de la pàgina</title>  
    </head>
      <body>
         <xsl:apply-templates></xsl:apply-templates>
      </body>  
    </html>
  </xsl:template>

  <xsl:template match="//YEAR">
    <p><b>Aqui hi haurà el valor de l'any</b></p>
  </xsl:template>

</xsl:stylesheet>

Si ara executem el següent codi, tindriem:

Resultat de XML + XSLT

Veiem que tornen a aparèixer els nodes que no tenen una plantilla definida, això és a causa de la instrucció <xsl:apply-templates></xsl:apply-templates> que fa que es tornin a interpretar les etiquetes i per tant les que no tenen plantilla tornen a executar-se pel mètode per defecte comentat anteriorment.

Obtenir valors

En molts casos ens interessarà mostrar el valor de l'etiqueta en el nostre fitxer HTML generat. Ho haurem de fer utilitzant la següent etiqueta:

  <xsl:value-of select="XXXXX"></xsl:value-of>

Aquesta etiqueta XSLT ens retorna el valor de l'element seleccionat dins l'atribut select utilitzant una sentència XPath. Hem de tenir en compte que com que estem dins una plantilla de transformació on ja s'ha seleccionat un element, el de la plantilla, la selecció en l'etiqueta xsl:select es farà a partir de l'element seleccionat en la plantilla. En el nostre exemple si canviem la frase "Aquí hi haurà el valor de l'any" per l'etiqueta <xsl:value-of select="."></xsl:value-of> tenint en compte que en el select hem inclòs la sentència XPath "." que fa referència a l'etiqueta YEAR. Ens quedarà un codi com aquest:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" version="4.0"/>
  <xsl:template match="/">
    <html>
    <head>
      <title>Titol de la pàgina</title>  
    </head>
      <body>
          <xsl:apply-templates></xsl:apply-templates>
      </body>  
    </html>
  </xsl:template>
  <xsl:template match="//YEAR">
    <p><b><xsl:value-of select="."></xsl:value-of></b></p>
  </xsl:template>
</xsl:stylesheet>

Que mostrarà el següent:

Resultat de XML + XSLT

Exemple de creació de transformació

Quan volem fer una transformació, una de les primeres coses que hem de tenir clares és des d'on partim i on volem arribar. La primera de les preguntes la tindrem clara, doncs sempre disposarem del fitxer XML amb les dades que haurem de transformar. El que és més important tenir en compte és on volem arribar. Hem de tenir clar quin HTML hem d'acabar generant a partir de les dades XML. Per tant, la primera cosa que hem de tenir és un exemple de l'HTML a crear.

Seguint amb l'exemple que hem anat treballant, podem esperar arribar a un fitxer HTML com el que es mostra a continuació:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Títol de la pàgina</title>
</head>
<body>
    <h1>Llistat de CD's</h1>
    <h2>Titol</h2>
    <h3>Autor</h3>
    <ul>
        <li>Pais:UK</li>
        <li>Companyia:CBS Records</li>
        <li>Preu:9,70€</li>
        <li>Any:1985</li>
    </ul>

    <h2>Titol</h2>
    <h3>Autor</h3>
    <ul>
        <li>Pais:UK</li>
        <li>Companyia:CBS Records</li>
        <li>Preu:9,70€</li>
        <li>Any:1985</li>
    </ul>
</body>
</html>

I quedaria un resultat similar al que es mostra:

Resultat de XML + XSLT