Ejemplo de Transformación XML a HTML con XSLT

Para proporcionar un ejemplo más concreto y detallado, tomemos un documento XML que describe una colección de películas y transformémoslo en una lista HTML estructurada. Este ejemplo incluirá el uso de plantillas, variables, ordenamiento y condicionales en XSLT.

Documento XML de Entrada

Supongamos que tenemos el siguiente documento XML que contiene información sobre varias películas:

<movies>
  <movie>
    <title>Inception</title>
    <director>Christopher Nolan</director>
    <year>2010</year>
    <genre>Sci-Fi</genre>
    <rating>8.8</rating>
  </movie>
  <movie>
    <title>The Matrix</title>
    <director>Lana Wachowski, Lilly Wachowski</director>
    <year>1999</year>
    <genre>Sci-Fi</genre>
    <rating>8.7</rating>
  </movie>
  <movie>
    <title>Interstellar</title>
    <director>Christopher Nolan</director>
    <year>2014</year>
    <genre>Adventure</genre>
    <rating>8.6</rating>
  </movie>
</movies>

Archivo XSLT para Transformación

Queremos transformar este documento XML en una lista HTML que muestre la información de las películas en una tabla, ordenadas por año de lanzamiento y destacando las películas dirigidas por «Christopher Nolan».

<?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" encoding="UTF-8" indent="yes"/>

  <!-- Plantilla principal que aplica a la raíz del documento XML -->
  <xsl:template match="/">
    <html>
      <head>
        <title>Movie Collection</title>
        <style>
          .highlight { background-color: yellow; }
        </style>
      </head>
      <body>
        <h2>Movie Collection</h2>
        <table border="1">
          <tr>
            <th>Title</th>
            <th>Director</th>
            <th>Year</th>
            <th>Genre</th>
            <th>Rating</th>
          </tr>
          <!-- Aplica plantillas a cada película y ordena por año -->
          <xsl:apply-templates select="movies/movie">
            <xsl:sort select="year" order="ascending"/>
          </xsl:apply-templates>
        </table>
      </body>
    </html>
  </xsl:template>

  <!-- Plantilla que aplica a cada película -->
  <xsl:template match="movie">
    <!-- Variable para determinar si el director es Christopher Nolan -->
    <xsl:variable name="isNolan" select="contains(director, 'Christopher Nolan')"/>
    <tr>
      <!-- Condicional para resaltar las películas de Christopher Nolan -->
      <xsl:if test="$isNolan">
        <xsl:attribute name="class">highlight</xsl:attribute>
      </xsl:if>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="director"/></td>
      <td><xsl:value-of select="year"/></td>
      <td><xsl:value-of select="genre"/></td>
      <td><xsl:value-of select="rating"/></td>
    </tr>
  </xsl:template>
</xsl:stylesheet>

Explicación del XSLT

  • Salida HTML: Utilizamos <xsl:output method="html" encoding="UTF-8" indent="yes"/> para especificar que la salida debe ser HTML con indentación adecuada.
  • Plantilla Principal: La plantilla que coincide con el nodo raíz (/) genera la estructura básica del HTML, incluyendo una tabla con encabezados para cada campo de la película.
  • Aplicación de Plantillas y Ordenamiento: Usamos <xsl:apply-templates select="movies/movie"> con <xsl:sort select="year" order="ascending"/> para aplicar plantillas a cada película y ordenarlas por el año de lanzamiento en orden ascendente.
  • Resaltado Condicional: Dentro de la plantilla de cada película, definimos una variable $isNolan que verifica si el director contiene «Christopher Nolan». Usamos <xsl:if test="$isNolan"> para agregar un atributo de clase «highlight» a la fila de la tabla si la condición es verdadera.

Resultado HTML

El resultado de aplicar este XSLT al documento XML de entrada será un documento HTML con una tabla de películas ordenadas por año y con las películas dirigidas por Christopher Nolan resaltadas en amarillo.

<!DOCTYPE html>
<html>
  <head>
    <title>Movie Collection</title>
    <style>
      .highlight { background-color: yellow; }
    </style>
  </head>
  <body>
    <h2>Movie Collection</h2>
    <table border="1">
      <tr>
        <th>Title</th>
        <th>Director</th>
        <th>Year</th>
        <th>Genre</th>
        <th>Rating</th>
      </tr>
      <tr class="highlight">
        <td>The Matrix</td>
        <td>Lana Wachowski, Lilly Wachowski</td>
        <td>1999</td>
        <td>Sci-Fi</td>
        <td>8.7</td>
      </tr>
      <tr class="highlight">
        <td>Inception</td>
        <td>Christopher Nolan</td>
        <td>2010</td>
        <td>Sci-Fi</td>
        <td>8.8</td>
      </tr>
      <tr class="highlight">
        <td>Interstellar</td>
        <td>Christopher Nolan</td>
        <td>2014</td>
        <td>Adventure</td>
        <td>8.6</td>
      </tr>
    </table>
  </body>
</html>

Conclusión

Este ejemplo muestra cómo utilizar XSLT para transformar un documento XML en HTML, aplicando técnicas como ordenamiento y resaltado condicional. Estas herramientas y técnicas permiten a los desarrolladores crear presentaciones dinámicas y personalizadas de datos XML, mejorando la capacidad de trabajar con XML en diversas aplicaciones. Con práctica y exploración, se pueden lograr transformaciones aún más complejas y sofisticadas utilizando XSLT.

macbook pro
Photo by Pixabay on Pexels.com
error: Content is protected !!

Descubre más desde InfoGonzalez - Blog de formador e informático

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo

Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad
Creative Commons License
Except where otherwise noted, the content on this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.