Introducción a XSL

¿Qué es XPath?

XSL utiliza XPath para identificar elementos individuales del árbol XML que necesitan procesarse. En pocas palabras, XPath es una herramienta de navegación para buscar elementos XML. Utiliza la misma sintaxis que las rutas de un sistema de archivos en los sistemas operativos (por ejemplo, C:\Archivos de programa\Macromedia\, o /usr/bin/perl). De forma parecida, company/department/employee es la expresión XPath que apunta al elemento employee en un documento XML que contiene datos sobre una empresa y sus departamentos. Dreamweaver 8 ofrece una interfaz de usuario de tipo arrastrar y soltar y crea automáticamente declaraciones XPath. De todas formas, debería conocer los principios básicos de XPath para ser capaz de manipular datos XML en hojas de estilos XSL.

Básicamente, la especificación de XPath sigue las mismas reglas que un sistema de archivos:

• Si la expresión XPath comienza con una barra inclinada (/), representa la ruta absoluta del elemento XML (empezando desde la raíz del documento XML).
• Si la expresión XPath comienza con dos barras inclinadas (//), se seleccionarán todos los elementos del documento actual que cumplen el criterio especificado, sin importar su posición en el documento XML. Por ejemplo, //employee busca todos los nodos employee en el documento XML.
• El asterisco (*) selecciona todos los elementos XML que se encuentran en la ruta anterior. Por ejemplo, /company/department/* selecciona todos los nodos hijo de un departamento, es decir, todos sus empleados.
• El punto (.) selecciona el nodo actual y los dos puntos (..) seleccionan el nodo padre. Por ejemplo, la expresión XPath que selecciona el departamento de un empleado es ../employee.
• Para seleccionar atributos, utilice el carácter @. Por ejemplo, /company/department/employee[@retired] selecciona todos los empleados que tienen especificado el atributo retired.

El contenido del elemento <xsl:template> es la regla que debe aplicarse. Normalmente corresponde a código HTML que se mostrará en el navegador.

¿Recuerda el documento company.xml de mi artículo anterior? Imagínese que necesita aplicar una regla al nodo employee para mostrar los empleados en una tabla como la siguiente:

Figura 3. Aplicación de una regla al nodo employee

<xsl:template match="/">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
  </table>
</xsl:template>

Observe que el contenido entre las etiquetas table es código HTML puro. Esto indica al navegador que los empleados se mostrarán como una tabla con los siguientes encabezados de columna: Name, Job y Salary.

El código <xsl:template> se utiliza para definir cómo se mostrará un nodo en el navegador. No obstante, para visualizar el contenido real de un nodo es necesario utilizar otra construcción XSL: <xsl:value-of>. Su nombre (valor de) es bastante intuitivo. El nodo cuyo valor se va a mostrar se indica mediante el atributo select, que tiene como valor una expresión XPath. Supongamos que necesita mostrar el nombre de un empleado del documento company.xml. El código sería así:

<xsl:value-of select="/company/department/employee/name"/>

Volviendo al ejemplo anterior (mostrar el documento company.xml como una tabla), para mostrar los valores de los nodos <name>, <job> y <salary> en la plantilla XSL, se necesita escribir el siguiente código:

<xsl:template match="/">
  <table boder="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
    <tr>
      <td><xsl:value-of select="company/department/employee/name"/></td>
      <td><xsl:value-of select="company/department/employee/job"/></td>
      <td><xsl:value-of select="company/department/employee/salary"/></td>
    </tr>
  </table>
</xsl:template>

Para ver cómo funciona el código en el navegador, siga estos pasos:

1. Descargue y descomprima los archivos de muestra de xsl_overview_samples.zip que aparecían en un vínculo al principio de este artículo.
2. Abra el archivo company.xml y localice la declaración del documento al principio del archivo:
   
   <?xml version="1.0" encoding="iso-8859-1"?>

3. Inserte una línea nueva vacía a continuación de esta declaración y pegue el siguiente código en la línea:

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

   Nota: en la sección anterior sobre las transformaciones en el lado del cliente ya hemos visto qué hace este código. Indica al navegador cuál es la hoja de estilos XSL que debe utilizar para procesar el documento XML. El atributo href especifica la ruta de la hoja de estilos XSL que debe utilizarse.

4. Guarde el archivo y presione F12 (Windows) u Opción+F12 (Macintosh) para obtener una vista previa en el navegador. Observe que sólo se muestra el primer empleado:

   

   Figura 4. La hoja de estilos XSL visualizada en un navegador sólo muestra un empleado

Para mostrar todos los empleados en la tabla, debe utilizar otro constructor XSL muy popular:

<xsl:for-each select=""> </xsl:for-each>

El valor del atributo select es una expresión XPath que especifica el conjunto de nodos que deben mostrarse. Si ya conoce otros lenguajes de programación, el constructor <xsl:for-each> realiza la misma función que un bucle for.

Vamos a mostrar todos los empleados de la empresa:

<xsl:template match="/">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
    <xsl:for-each select="company/department/employee">
    <tr>
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="job"/></td>
      <td><xsl:value-of select="salary"/></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>

Observe cómo las expresiones XPath para el nombre, el trabajo y el salario no necesitan incluir los nodos padre ni empezar en la raíz del documento. Esto se debe a que la ruta de estos elementos se calculará basándose en la expresión XPath especificada en el constructor <xsl:for-each>. Para ver cómo funciona el código en el navegador, abra el archivo company.xml de nuevo y cambie el valor del atributo href por ex_02.xsl. A continuación, obtenga una vista previa en el navegador. Debería obtener la siguiente tabla HTML:

Figura 5. La hoja de estilos XSL visualizada en un navegador muestra todos los empleados

Pág. 5 de 6

Página anterior

Página siguiente