Introducción a XSL

Täiendavad nõudmised

Dreamweaver MX 2004 o posterior (opcional)

• Probar
• Comprar

• Para completar los ejemplos de este tutorial, es recomendable que tenga instalado Dreamweaver. No obstante, puede usar cualquier otro editor de texto, pero no podrá beneficiarse de la compatibilidad nativa para XSL que ofrece Dreamweaver.
• No se necesitan conocimientos previos de XSL. El objetivo de este artículo es explicar cómo puede usar XSL para procesar datos XML.
• Es recomendable tener conocimientos previos de HTML, WWW y creación de páginas Web.

También es necesario que haya leído mi artículo anterior: Introducción a XML.

Como recordará de mi artículo anterior, Introducción a XML, XML se diseñó con la finalidad de almacenar datos. Sin embargo, la mayoría de las aplicaciones Web se diseñan pensando en el usuario final. Por tanto, la información debería ser presentada en un formato legible. En este punto es donde XSL entra en juego: toma los datos de los árboles XML y los procesa para generar una salida legible. Por supuesto, también podría usar Perl, Java o PHP para transformar documentos XML. Sin embargo, a medida que XML se vuelve cada vez más popular, le resultará conveniente aprender el funcionamiento de XSL.

Afortunadamente, Dreamweaver 8 utiliza un enfoque visual para las transformaciones XSL, lo cual permite procesar datos basados en XML sin necesidad de escribir ni una línea de código. Para entender cómo XML y XSL se pueden utilizar de forma conjunta para procesar y mostrar información, este artículo explica XSL y algunos ejemplos de sus aplicaciones en la vida real. Describiré las reglas básicas de sintaxis XSL, ofreceré algunos ejemplos de cómo usar XSL para aplicar estilos a los datos y explicaré la diferencia entre una transformación en el lado del servidor y una en el lado del cliente.

XSL es para XML lo que CSS es para HTML. Es un acrónimo en inglés de EXtensible Stylesheet Language (Lenguaje de hojas de estilo ampliable). Es un lenguaje diseñado para presentar datos XML en un formato legible. XSL consta realmente de dos partes:

• XSLT: un lenguaje para transformar documentos XML
• XPath: un lenguaje para navegar en documentos XML

XSLT significa Transformaciones XSL y es la parte más importante de XSL.

XSLT transforma un documento XML en otro documento XML, en una salida XHTML o en texto sencillo. Esto se suele hacer transformando cada elemento XML en un elemento HTML. El uso de XSL es imprescindible, ya que las etiquetas XML han sido definidas por el usuario y, por tanto, los navegadores no saben cómo interpretarlas o representarlas. Su significado se ha diseñado para ser entendido por las personas, no por las máquinas.

XSLT también puede realizar las siguientes operaciones en un árbol XML:

• añadir y eliminar elementos
• añadir y eliminar atributos
• reorganizar y ordenar elementos
• ocultar o mostrar determinados elementos
• encontrar o seleccionar elementos específicos

Si necesita revisar la sintaxis XML, le recomiendo que lea la sección Sintaxis XML de mi artículo anterior sobre XML.

Sintaxis XSL

Como recordará del artículo Introducción a XML, todos los documentos XML empiezan con una declaración XML. Lo mismo ocurre con las hojas de estilos XSL. La primera línea de cualquier documento XSL es una declaración XML:

¿Es lo mismo XSL que XML?

Sí y no. Sí porque ambos siguen las mismas reglas de sintaxis (con unas pocas diferencias que mencionaré más adelante). No, porque tienen distintas funciones: XML almacena datos y XSL les aplica formato.

Después de la declaración XML hay una declaración XSL, como se muestra a continuación:

o bien

No obstante, en la mayoría de las aplicaciones reales, la declaración XSL tiene un aspecto un poco más complejo:

El motivo es que también incluye el espacio de nombres y la versión de la especificación XSL, según las recomendaciones del W3 Consortium.

A diferencia de la declaración XML, la cual se escribe en una única línea y no tiene etiqueta de cierre, la declaración XSL debe tener una etiqueta de cierre, que sirve para marcar el final de la hoja de estilos XSL:

Observe que lo anterior no infringe las reglas de sintaxis XML: una hoja de estilos XSL es un documento XML perfectamente válido, ya que tiene un único elemento raíz que viene especificado por la etiqueta <xsl:stylesheet>.

¿Dónde debería usar XSL?

XSL ha sido diseñado para unas funciones determinadas. Por eso resulta la solución perfecta para algunos casos de desarrollo, mientras que puede ser inútil para otros.

• XSL ha sido diseñado para procesar documentos XML y para cumplir con la sintaxis XML. Por tanto, sólo debería usarlo con aplicaciones XML o con aplicaciones sensibles a XML. Las aplicaciones ideales para usar XML y XSL son: portales Web, agregadores de noticias, sitios Web de comunidades o cualquier otra aplicación Web que necesite enviar información a diversos dispositivos y a un gran número de clientes.
• XSLT es un lenguaje basado en la correspondencia de patrones. Busca nodos que coincidan con una determinada condición y les aplica las reglas correspondientes. Por tanto, XSLT carece de la versatilidad de la mayoría de los lenguajes de programación. Por ejemplo, XSL no puede cambiar los valores de las variables en tiempo de ejecución. No se debería usar para calcular valores de fuentes de datos dinámicos mediante fórmulas complicadas (como, por ejemplo, en una tienda en línea). Para este tipo de aplicaciones, los lenguajes de programación Web son una opción mejor.
• XSL no ha sido diseñado para sustituir o complementar CSS. No se debería usar (y, de hecho, no se puede) para aplicar estilos a HTML. No obstante, puede utilizarse en sitios Web que necesitan ser rediseñados con frecuencia, que cambian su diseño a menudo y que necesitan manipular datos en un formato flexible.
• XSL no es una herramienta de administración de contenido. No debería usarse (y, de hecho, no se puede) para cambiar el contenido de documentos XML o para editar información. Sin embargo, se puede utilizar XML y XSL en un sistema de administración de contenido que requiera manejar documentos de varias formas distintas.

¿Cómo encaja XSL en el contexto global? Para producir las páginas HTML finales que verán los visitantes del sitio Web, necesita aplicar una hoja de estilos XSL a la fuente de datos XML. La transformación puede realizarla el servidor Web o el navegador del cliente. El resultado final puede ser una página HTML completa o solamente una parte de ella que se utiliza en distintas páginas.

El lado del servidor frente al lado del cliente

Los enfoques del lado del servidor y del lado del cliente tienen sus ventajas e inconvenientes. Las transformaciones en el lado del servidor permiten procesar documentos XML desde el propio servidor o desde cualquier otro sitio en Internet. En este caso, es el servidor el que realiza el trabajo, generando resultados HTML que cualquier navegador puede cargar, independientemente de lo antiguo o nuevo que sea. Por otro lado, para llevar a cabo una transformación XSL en el lado del servidor, debe tener un servidor de aplicaciones configurado correctamente, que admita XML y XSL. Y no todos los servidores de alojamiento están preparados para esto. Por este motivo, en uno de mis próximos artículos explicaré cómo instalar y configurar las bibliotecas XML/XSL necesarias para servidores PHP. Dreamweaver 8, a punto de salir al mercado, admite transformaciones XSL para páginas de ColdFusion, ASP, ASP.NET y PHP.

El flujo de trabajo de la transformación en el lado del servidor se describe en esta figura:

Observe que el documento XML no tiene por qué ubicarse en el servidor Web. También puede estar en un servidor Web remoto, en cuyo caso se cargaría en su servidor cuando fuera necesario.

En una transformación en el lado del cliente, el navegador del cliente realiza todo el trabajo. El inconveniente de este enfoque es que no todos los navegadores admiten XML/XSL, por lo que es posible que alguno de sus clientes no sea capaz de ver sus páginas. Si desea consultar una lista de navegadores modernos que incluyen funciones XML/XSL, visite esta página* en el sitio Web del W3 Consortium. Además, cuando se utiliza el enfoque del lado del cliente, sólo es posible procesar archivos XML locales. Si necesita, por ejemplo, utilizar un agregador RSS de otro sitio Web, tiene que descargar una copia del mismo y cargarla en el servidor. Si el archivo RSS original en el sitio Web remoto cambia, deberá descargar el archivo de nuevo y reenviarlo a su servidor Web.

Para indicar al navegador cuál es la hoja de estilos XSL que debe utilizar para procesar el documento XML, debe incluir la siguiente declaración en el archivo XML, justo después de la declaración XML:

El atributo href especifica la ruta de la hoja de estilos XSL que debe utilizarse. Este mecanismo se parece a la forma de llamar a una hoja de estilos CSS al principio de una página HTML. En la siguiente figura se explica el flujo de trabajo de las transformaciones XSL en el lado del cliente:

Como ya he explicado antes, en la declaración XSL se incluye el espacio de nombres del documento. Un espacio de nombres es exactamente lo que su nombre indica: un sitio para nombres. En él se especifica el conjunto de nombres de elementos y de atributos que se pueden utilizar en un determinado documento. La función del espacio de nombres es evitar conflictos de nombres. Los conflictos de nombres pueden surgir en XML y otros lenguajes relacionados con XML, ya que estos lenguajes están definidos por el usuario. Por ejemplo, <table> puede referirse a una tabla de base de datos, a una tabla de diseño, a un mueble o a un lugar en un restaurante. Como la mayoría de las aplicaciones procesan más de un documento XML a la vez, con frecuencia se mezclan documentos XML en los que un mismo elemento tiene distintos significados. El uso del mismo espacio de nombres para varios documentos garantiza que un determinado elemento tenga el mismo significado en todos los documentos. Desde el punto de vista contrario, el uso de distintos espacios de nombres garantiza que los elementos tengan distintos significados.

En XML, los espacios de nombres se especifican mediante el atributo xmlns de la declaración del documento. Se componen de un URI (Indicador universal de recursos), es decir, una dirección de un sitio Web (como http://www.w3.org/1999/XSL/Transform). El motivo de elegir un URI para identificarlo es que un URI es un dato único y, por tanto, es de esperar que sus correspondientes espacios de nombres sean también únicos.

Nota: en la declaración del documento, el URI se utiliza solamente como un nombre. No se pretende que sea un vínculo a un esquema XML o una indicación del propietario del documento (la empresa o el sitio Web donde se originó el documento).

Ahora que ya tiene una idea de lo que es un espacio de nombres, volveré a la sintaxis XSL. De la misma forma que los documentos XML están formados por una colección jerárquica de elementos, los documentos XSL se componen de un conjunto de plantillas o reglas. Cada plantilla define las reglas que se aplican a un determinado nodo de XML. Una plantilla XSL tiene el siguiente aspecto:

El atributo match asocia una plantilla XSL con un elemento XML. El nodo correspondiente se indica como una expresión XPath. Hablaré de XPath en la siguiente sección.

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:

La regla XSL tendría el siguiente aspecto:

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í:

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:

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:

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:

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

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:

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:

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.

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.

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:

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:

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

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:

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:

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:

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:

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:

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:

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:

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.