Introducción a XSL

Utilización de condiciones, filtros y ordenación para mostrar el contenido de forma selectiva

XSL le permite filtrar y ordenar los elementos además de mostrar el contenido según ciertas condiciones.

Filtrado de elementos

Con el constructor <xsl:for-each> es posible filtrar los resultados basándose en una determinada condición. Imagínese que desea mostrar sólo los empleados que trabajan como programadores.

<xsl:template match="/">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
    <xsl:for-each select="company/department/employee[job='Programmer']">
    <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>

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_03.xsl. A continuación, obtenga una vista previa en el navegador. Podrá observar que sólo se muestran en la tabla HTML los empleados que figuran como programadores en el documento company.xml.

Figura 6. La hoja de estilos XSL filtrada y mostrada en el navegador

Para definir condiciones en nodos XML, puede utilizar los siguientes operadores:

• igual (=)
• no igual (!=). Por ejemplo, name!='Ben Walker'
• menor que (<). Por ejemplo, salary<2750
• menor o igual que (<=)
• mayor que (>)
• mayor o igual que (>=)

Ordenación de los elementos

También es posible ordenar elementos alfabéticamente. Para ello basta con utilizar el constructor <xsl:sort /> y especificar el nodo que va a usar para ordenar. El elemento <xsl:sort /> debe estar anidado dentro de un elemento <xsl:for-each> para garantizar que la aplicación recorre todos los elementos. A continuación se muestra un ejemplo de cómo mostrar los empleados por orden alfabético:

<xsl:template match="/">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
    <xsl:for-each select="company/department/employee">
    <xsl:sort select="name" />
    <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 que el elemento de ordenación (sort) no tiene su correspondiente etiqueta de cierre. 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_04.xsl. A continuación, obtenga una vista previa en el navegador. Podrá observar que los empleados del documento company.xml se muestran ordenados alfabéticamente en la tabla HTML:

Figura 7. La hoja de estilos XSL ordenada y mostrada en el navegador

Por supuesto, es muy sencillo cambiar entre el orden ascendente o el descendente si se añade un atributo adicional al elemento <xsl:sort />:

<xsl:sort select="/name" order="descending"/>

Observe que el código XSL anterior no modifica la estructura real del documento XML inicial. Los empleados sólo se muestran alfabéticamente en la tabla HTML generada que se envía al navegador, después de la transformación XSL.

Condiciones sencillas y múltiples

Como la mayoría de los lenguajes de programación, XSL también permite mostrar contenido basado en condiciones.

Una condición sencilla se define mediante la siguiente sintaxis:

<xsl:if test="expression">
</xsl:if>

Para aplicar la condición test a varios elementos, de forma que sólo se muestren los que cumplan la condición, el constructor xsl:if debe anidarse en un elemento xsl:for-each. El siguiente ejemplo muestra cómo enumerar en la lista únicamente los empleados cuyo sueldo sea superior a 2.700 dólares:

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

En el ejemplo anterior podrá observar que los caracteres menor que (<) y mayor que (>) han sido sustituidos por sus correspondientes secuencias de escape de HTML (< y > ). Si no fuera así, estos caracteres se podrían confundir con el comienzo o el final de una etiqueta. 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_05.xsl. A continuación, obtenga una vista previa en el navegador. Podrá comprobar que sólo aparecen en la tabla HTML los empleados que tienen un sueldo superior de 2.700 dólares:

Figura 8. La hoja de estilos XSL visualizada en el navegador sólo muestra los empleados con un sueldo superior a 2.700 dólares

Los operadores que puede utilizar en una expresión test son los típicos operadores condicionales:

• < (menor que)
• > (mayor que)
• = (igual)
• != (no igual)

Si necesita comparar un valor con una cadena, debe escribir la cadena entre comillas sencillas (por ejemplo, <xsl:if test="job = 'Software Analyst'">).

También puede definir condiciones más complejas, de forma parecida al constructor IF-ELSE que se utiliza en la mayoría de los lenguajes de programación. La sintaxis o precisa ninguna explicación adicional:

<xsl:choose>
  <xsl:when test="expression">

  </xsl:when>
  <xsl:otherwise>

  </xsl:otherwise>
</xsl:choose>

Para probar las condiciones en varios nodos XML, el constructor <xsl:choose> debe anidarse en un bucle <xsl:for-each>.

Imagínese que desea resaltar en verde todos los empleados que ganan menos de 2.700 dólares y resaltar en azul todos aquellos que ganan más de 2.700:

<xsl:template match="/">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
    <xsl:for-each select="company/department/employee">
    <xsl:choose>
    <xsl:when test="salary > 2700">
    <tr bgcolor="#66CCFF">
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="job"/></td>
      <td><xsl:value-of select="salary"/></td>
    </tr>
    </xsl:when>
    <xsl:otherwise>
    <tr bgcolor="#00CC99">
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="job"/></td>
      <td><xsl:value-of select="salary"/></td>
    </tr>
    </xsl:otherwise>
    </xsl:choose>
    </xsl:for-each>
  </table>
</xsl:template>

El elemento <xsl:otherwise> especifica las reglas que deben aplicarse de forma predeterminada si el nodo XML no cumple la condición test inicial.

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_06.xsl. A continuación, obtenga una vista previa en el navegador. Debería obtener la siguiente tabla HTML:

Figura 9. La hoja de estilos XSL visualizada en el navegador muestra los empleados que ganan menos de 2.700 dólares en color verde y los que ganan más de 2.700 dólares en color azul

Observe que los empleados que ganan menos de 2.700 dólares se resaltan en verde y los que ganan más de 2.700 dólares se resaltan en azul.

El constructor <xsl:choose> puede ampliarse fácilmente para probar condiciones múltiples si se añaden uno o más elementos <xsl:when>. Independientemente del número de elementos <xsl:when>, siempre debe tener un único elemento <xsl:otherwise>, el cual se encarga de procesar los casos que no cumplen las condiciones test iniciales. A modo de ejercicio, intente mostrar la lista de empleados con los siguientes colores de resaltado:

• Amarillo para los empleados que ganan menos de 2.500 dólares.
• Verde para los empleados que ganan entre 2.500 y 3.000 dólares.
• Azul para los empleados que ganan más de 3.000 dólares.

Un adelanto de Dreamweaver 8: Sugerencias para el código

Una de las funciones nuevas en Dreamweaver 8 es que permite escribir código con mayor rapidez y facilidad gracias a las sugerencias para el código. Cuando empieza a escribir <xsl: Dreamweaver muestra una lista en la que le sugiere opciones para completar el texto:

Figura 10. La nueva función de sugerencias para el código XSL de Dreamweaver 8

Para seleccionar el nodo o la función que desea, selecciónela y presione Intro (Windows) o Retorno (Macintosh). Puede desplazarse por la lista de sugerencias con las teclas de flecha. Las sugerencias para el código le permiten escribir o editar código sin errores.

Más información

En este artículo he presentado una breve introducción a XSL y he ofrecido algunas directrices sobre cómo y dónde utilizarlo en sus proyectos de desarrollo Web. Este artículo también incluye algunos adelantos de las funciones de creación XML de Dreamweaver 8, que, con toda seguridad, resultarán una herramienta muy útil de desarrollo para las aplicaciones basadas en XML. Le animo a explorar las enormes posibilidades que XML y XSL le pueden ofrecer.

• Para obtener más información sobre las nuevas funciones XML/XSL de Dreamweaver 8, consulte la sesión de MAX de Alexandru Costin: Using the Power of XML with Dreamweaver* (Utilización de la capacidad de XML en Dreamweaver). Si lo desea, puede unirse a él y a otros desarrolladores en MAX 2005* para adquirir algo de práctica con el nuevo producto Macromedia Studio 8.
• Aprenda a dominar las expresiones XPath en este tutorial de W3 Schools*.
• Para poner en práctica sus conocimientos de XSL, visite este tutorial interactivo en ZVON.org*.

En mis dos próximos artículos, le enseñaré cómo utilizar un agregador RSS en su sitio Web mediante Dreamweaver 8 y cómo configurar su servidor para transformaciones XSL en el lado del servidor. Ya es posible reservar el producto Dreamweaver 8. Si realiza la reserva a través del programa de afiliación de Macromedia en InterAKT Online*, recibirá gratuitamente el producto ImpAKT*.

Pág. 6 de 6

Página anterior