Creación de fragmentos de XSLT para transformaciones en el lado del servidor

Ejercicio: creación de un fragmento de XSLT

Mientras que una página XSLT genera una página Web completa a partir de un archivo XML, un fragmento de XSLT es un pedazo de código que genera solamente una parte de una página. Después del llenar el fragmento de XSLT con los datos XML, se hace referencia a él y a la fuente de datos XML dentro de un fragmento de XSLT insertado. Este archivo include se inserta a continuación en una página dinámica y se coloca en un servidor equipado con scripts para leer y transformar XML. Cuado alguien visita la página dinámica, el servidor Web inserta los datos del archivo XML en esta sección de la página.

Para empezar este tutorial, creará un fragmento de XSLT.

1. Descomprima y copie la carpeta del tutorial en un sitio que ejecute ASP, ASP.NET, ColdFusion o PHP. La carpeta del tutorial se encuentra en el archivo ZIP contenido en un vínculo al principio del tutorial.
2. Abra la página estática, specials.html, y cambie a la vista Código.
3. Seleccione las líneas 33 a 56 y presione la tecla Supr. Esta información estática no será necesaria, pues va a generar un fragmento de XSLT que volverá a crearla.

4. Coloque el punto de inserción después del paréntesis de cierre (>) de la etiqueta <div id="main"> y haga clic en el botón Seleccionar etiqueta padre, , en la barra de herramientas Codificación.

   Nota: la barra de herramientas Codificación es nueva en Dreamweaver 8. La encontrará en la parte derecha de la vista Código.

5. Seleccione Edición > Cortar. Utilizará este pedazo de código como base del fragmento de XSLT y lo volverá a insertar en una versión dinámica de esta página.
6. Seleccione Archivo > Guardar como. Si trabaja con un servidor que ejecute ASP, guarde esta página como specials.asp. Si trabaja con un servidor que ejecute ASP.NET, guarde esta página como specials.aspx. Si trabaja con un servidor que ejecute ColdFusion, guarde la página como specials.cfm. Si trabaja con un servidor que ejecute PHP, guárdela como specials.php.

7. Seleccione Archivo > Nuevo y, en el cuadro de diálogo Nuevo documento, seleccione XSLT (fragmento) y haga clic en Crear.

   

   Figura 2. Cuadro de diálogo Nuevo documento

   (+) Ampliar

8. A continuación, se le pedirá que especifique la ubicación del archivo XML. Esta archivo puede residir en su sitio o en Internet. Seleccione “Adjuntar un archivo local en mi equipo o en la red de área local” y haga clic en Examinar.

   

   Figura 3. Cuadro de diálogo Buscar origen XML

9. Abra la carpeta del tutorial, seleccione specials.xml y haga clic en Aceptar. Haga clic en Aceptar otra vez en el cuadro de diálogo Buscar origen XML.

10. En la vista Código, mueva el cursor hasta justo después de la etiqueta <xsl:template match=”/”>, presione Retorno. A continuación, seleccione Edición > Pegar. La etiqueta div que cortó de la página estática debería estar ahora en el fragmento, tal y como se muestra en la figura 4.

    

    Figura 4. Código del fragmento después de pegar la etiqueta div en él

    (+) Ampliar

11. Ahora debería ver el esquema XML en el panel Vinculaciones (Ventana > Vinculaciones). Guarde el fragmento de XSLT en la carpeta del tutorial como menu.xsl.

Si observa la primera línea de código del fragmento de XLST, verá un comentario después de la declaración de la versión XML:

<!-- DWXMLSource="specials.xml" -->

Nota: Dreamweaver utiliza este comentario para mostrar el esquema de specials.xml en el panel Vinculaciones. Como sólo es un comentario y no un vínculo real, no es lo mismo que adjuntar un vínculo a una página XSLT completa dentro de un archivo XML.

Descripción del archivo XML

El archivo specials.xml contiene el menú del día del Café Townsend. En un escenario típico, este archivo XML se genera desde una aplicación Web que el chef utiliza para introducir los aperitivos, entrantes y postres de un día concreto. Lo bonito de esta solución es que forma y contenido son independientes. La página Specials no necesita actualizarse manualmente y el chef actualiza el menú con una aplicación Web sencilla que el cliente nunca ve.

Observe el archivo XML en el panel Vinculaciones. Hay un elemento que se repite, menu_item, con dos atributos, id y course, y varios elementos que no se repiten: name, link, description y price.

Figura 5. Esquema XML de specials.xml

El diseño final del menú enumerará cada plato seguido de sus artículos. En cada artículo se muestra el nombre, el precio y la descripción del artículo y un vínculo a una página donde aparece. En los siguientes pasos vinculará estos elementos a etiquetas de encabezado y párrafo.

1. Cambie a la vista Diseño en el archivo XSL que acaba de crear.
2. Coloque el cursor después de la última palabra en el encabezado de nivel 1, Specials of the day, y presione Intro (Windows) o Retorno (Macintosh).
3. Presione Control + 3 (Windows) o Comando + 3 (Macintosh) para crear un encabezado de nivel 3. El nombre y el precio del artículo utilizarán este formato.
4. En el panel Vinculaciones, haga doble clic en el elemento no repetido, name. Se creará un marcador de posición de datos XML en la página mediante XPath (Lenguaje de rutas XML). La ruta indica la ubicación de los datos en el árbol o esquema XML. Cuando cree una región que se repita, esta ruta se acortará porque la región repetida establecerá el contexto o el punto de partida de los datos.
5. Si el marcador de posición sigue seleccionado, presione la tecla derecha del cursor para mover el punto de inserción a la derecha del marcador de posición. Los marcadores de posición de datos se seleccionan de forma predeterminada tras la inserción, de modo que resulta sencillo aplicarles formato con etiquetas HTML y reglas CSS.
6. Presione la barra espaciadora.
7. Inserte un guión, o guión largo, seleccionando Insertar > HTML > Caracteres especiales > Guión. El guión se utilizará para separar el nombre de los artículos del menú de su precio. Si observa la vista Código de esta página, verá que el guión se describe mediante la entidad HTML y que hay entidades definidas en la sección DTD en la parte superior de la página en la vista Código. Lo menciono porque algunas veces deseará utilizar un carácter especial y, si no está definido, es posible que el analizador XML del servidor de aplicaciones no pueda procesar la página. Después de insertar el guión, puede aparecer un cuadro de diálogo de advertencia. Si aparece, ignórelo. Le sugiero que lea el tema “Specifying a missing character entity*” (Especificación de una entidad de carácter que falta) en la Ayuda de Dreamweaver 8.
8. Presione la barra espaciadora. Haga doble clic en el elemento que no se repite, price. La ruta XPath correspondiente a price se encuentra ahora a la derecha del guión.
9. Anule la selección del marcador de posición de los datos del precio presionando la tecla de flecha derecha en el teclado y presione Intro (Windows) o Retorno (Macintosh) para crear un nuevo párrafo.

10. Haga doble clic en el elemento que no se repite, description, para insertarlo en la página. De esta forma, el marcador de posición de los datos de la descripción se insertará en el párrafo que acaba de crear. Debería ver algo similar al ejemplo de la figura 6:

    

    Figura 6. Fragmento XSLT en curso

Adición de un vínculo al elemento

El archivo XML también incluye un elemento no repetido correspondiente a un vínculo. Este vínculo es una URL a una página que muestra el aperitivo, el entrante o el postre. Aplicar un vínculo a un marcador de posición de datos XML es algo más complicado que establecer un vínculo normalmente para texto estático ordinario. Los pasos a seguir son:

1. Seleccione el marcador de posición de los datos correspondientes al nombre (name).
2. En el inspector de propiedades, haga clic en el icono Carpeta que se encuentra a la derecha del campo Vínculo.
3. En el cuadro de diálogo Seleccionar archivo, seleccione Fuentes de datos, elija el elemento link y haga clic en Aceptar.

Figura 7. Seleccione la opción Fuentes de datos para ver el esquema XML

En el inspector de propiedades, el campo Vínculo tendrá {specials/menu_item/link} especificado como el atributo link del elemento name. Las llaves son importantes porque indican al analizador XSL de un servidor o de un navegador Web que inserte el elemento link del esquema XML como fuente de este texto de vínculo.

Figura 8. La manera correcta de especificar un vínculo mediante un elemento de un esquema XML es incluirlo entre llaves

Creación de la región repetida

Ahora creará una región repetida para que la página final enumere los elementos de menú de cada plato.

1. En la vista Código, seleccione el encabezado de nivel 3 que contiene el nombre y el precio, y e párrafo que contiene la descripción.

   

   Figura 9. Selección de la base de la región repetida

2. En la barra de herramientas Insertar, seleccione XSLT y haga clic en el botón Repetir región, . Aparecerá el Creador de expresiones XPath.

   

   Figura 10. Cuadro de diálogo Creador de expresiones XPath

3. Seleccione el elemento repetido, menu_item, y haga clic en Aceptar.

4. Cambie a la vista Diseño. Debería ver ahora una región de tabuladores alrededor del encabezado de nivel 3 y el párrafo. Si no ve la región de tabuladores, asegúrese de que Elementos invisibles está seleccionado en el menú Ver > Ayudas visuales y de que no está seleccionada la opción Ocultar todo. Observe además cómo se ha acortado cada marcador de posición de datos, que muestra ahora solamente el nombre del elemento. Esto ha sucedido porque ha establecido el inicio del contexto en menu_item, de modo que la ruta entre éste y cada elemento ya no es necesaria.

   

   Figura 11. La región repetida visualizada en la vista Diseño

5. Seleccione Archivo > Guardar.

6. Obtenga una vista previa de la página en un navegador; seleccione Archivo > Vista previa en el navegador (F12 en Windows y Opción + F12 en Mac). El navegador no realiza la transformación en este caso y Dreamweaver no envía el archivo al servidor de prueba para obtener una vista previa. Dreamweaver realiza la transformación y crea un archivo temporal que pueda mostrarse en el navegador.

   

   Figura 12. Vista previa del fragmento en una ventana de navegador

   (+) Ampliar

Pág. 3 de 7

Página anterior

Página siguiente