Vous êtes sur la page 1sur 14

Sistemas UNI. Instructor: V. Carlos, Segura P.

LABORATORIO XML y Web Services en .NET – 2.

Derechos Reservados, solo para ser usados dentro de


la institución.
Derechos de Autor

El contenido de este laboratorio tiene todos los derechos reservados, por lo tanto no
se puede reproducir, transcribir, almacenar a un sistema de recuperación o de
alteración, asimismo la traducción a otro idioma de ninguna forma o por ningún
medio mecánico, manual, electrónico, magnético, óptico o de otro modo.

La persecución de una reproducción no autorizada tiene como


consecuencia la cárcel y/o multas.

UNIVERSIDAD NACIONAL DE INGENIERIA 1


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

2 XML y Web Services.NET

1 Trabajando con Archivos XSL.

1.1 XSL: eXtensible StyleSheet Language

Los archivos XSL o también XSLT Transformations (eXtensible StyleSheet Language), tienen por
funcionalidad la de transformar documentos XML en documentos XHTML u otros documentos XML. Las
normas y definiciones de los elementos en los XSL lo define el W3C que es el encargado de la definición de
especificaciones XSL.

Los archivos XSLT se basa en XPath para realizar la búsqueda de información a través del documento
XML. XPath definen cadenas con expresiones regulares, las cuales especifican una referencia a alguna
estructura dentro del documento XML.

Las transformaciones se basan en elementos identificadores para una estructura XML, a partir de la cual
se realizara la transformación (con XPath), se realiza recorrido de elementos, obtención de datos,
condicionales, contadores, etc.

Esto es posible debido que un documento XML lo podemos asociar con un archivo XSL, para la
transformación del documento.

Libro Html

head body
Titulo Autor ISBN Capitulo
XSLT

h1 h2 div div

Titulo Sumilla Párrafo

h2 p

Listado de Libros

Libro: La Fiesta del Chivo Serialization


Autor: Mario Vargas LLosa
ISBN: 8420441694
Capitulo: XXXxxxxx CSS
Detalles:
Titulo: XX
Sumilla: XX
Párrafo: XX

En resumen XPath, es un lenguaje que permite escribir expresiones para la búsqueda dentro de un
archivo XML.

UNIVERSIDAD NACIONAL DE INGENIERIA 2


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

El documento XSLT.

Los documentos XSLT se definen internamente con la siguiente estructura

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<!--
This is an XSLT template file. Fill in this area with the
XSL elements which will transform your XML to XHTML.
-->
</body>
</html>
</xsl:template>

</xsl:stylesheet>

En el cual se puede combinar tanto etiquetas Html como elementos del XPath, para poder realizar un
enlace del archivo XML con el XSL se debe agregar la siguiente etiqueta:

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

Comandos para el XSLT.

<xsl:template> y <xsl:value-of > :

El primer elemento que se encuentra en un archivo XSL es el <xsl:template match="/"> que


indica que una vez encontrado el elemento raíz “/” del documento base se ejecuten las
instrucciones indicadas, para el recorrido de los elementos en un XML, el elemento <xsl:template
match="/"> se define así:??????????????????

El valor del atributo match del elemento xsl:template es un patrón de búsqueda qué
nodos debe transformar la plantilla.

Dentro del archivo XSL el elemento xsl:template contiene un atributo llamado match. Dentro
del cual se le iguala a los nodos en el árbol (XML) de entrada que son comparados con los
patrones de los atributos match de los diferentes elementos "template" (plantilla). Cuando se
encuentra un match que coincide con el nodo, los contenidos de la plantilla se representan en la
salida.

Para obtener el valor de un nodo o elemento XML, ya que sus contenidos son textos, lo podemos
obtener con el elemento <xsl:value-of />, en el cual se le tiene que indicar cual es el bloque o
nodo a mostrar, mediante el atributo select igualado al nodo.

UNIVERSIDAD NACIONAL DE INGENIERIA 3


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Realicemos el siguiente ejemplo.


Crear el siguiente archivo XML, con el nombre Clientes.xml:

<?xml version="1.0" encoding="utf-8" ?>


<?xml-stylesheet type="text/xsl" href="Clientes.xsl"?>
<Listado>
<Cliente>
<Nombre>
<PrimerNombre>Juan </PrimerNombre>
<SegundoNombre>Carlos</SegundoNombre>
</Nombre>
<Apellido>Salas Torres</Apellido>
<Ciudad>Lima</Ciudad>
<Telefono>045-58 555 52</Telefono>
</Cliente>
</Listado>

Crear el siguiente archivo transformador XSL, con el nombre Clientes.xsl:

<?xml version="1.0" encoding="utf-8"?>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="Listado">
<html>
<body>
<xsl:value-of select ="Cliente"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Al visualizar el archivo XML en el browser nos presentara el siguiente resultado:

Como vemos, en este ejemplo nos muestra toda la información del bloque señalado, es decir lo que se
encuentra en: “Listado/Cliente”.

Podemos bajar de nivel y al cambiar de jerarquía el documento XSL, para “Cliente/Nombre” debería ser
como se muestra a continuación el archivo XSL:

<xsl:template match="Cliente">
<html>
<body>
<xsl:value-of select ="Nombre"/>
</body>
</html>
</xsl:template>

Y nuevamente el resultado seria la información que se encuentra dentro del bloque: “Cliente/Nombre”.

UNIVERSIDAD NACIONAL DE INGENIERIA 4


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

<xsl:for-each>
Se utiliza, junto a una instrucción select de XPATH, para recorrer todos los elementos o registros
del nodo XML especificado, se usa luego de un comando <xsl:template match="Nodo"> que
indica cual es nodo siguiente de recorrido.

Creamos un XML desde la tabla Employees de la base de datos NorthWind, con los siguientes
campos LastName, FirstName, Title, Address, City, Region, Country, HomePhone. El archivo XML
debería quedar como se muestra a continuación:

<?xml version="1.0" standalone="yes"?>


<?xml-stylesheet type="text/xsl" href="Employees.xsl"?>
<Employees>
<Employees>
<LastName>Davolio</LastName>
<FirstName>Nancy</FirstName>
<Title>Sales Representative</Title>
<Address>507 - 20th Ave. E.Apt. 2A</Address>
<City>Seattle</City>
<Region>WA</Region>
<Country>USA</Country>
<HomePhone>(206) 555-9857</HomePhone>
</Employees>
<Employees>
. . .
. . . . .

Luego el archivo XSL lo trabajamos de la siguiente forma, lo que vamos hacer es mostrar el
nombre de todos los empleados (Con el campo LastName), uno debajo del otro:

<xsl:template match="Employees">
<html> Realiza el recorrido por Employees
<body>
<xsl:for-each select="Employees">
<xsl:value-of select="LastName"/> Por cada iteración mostramos el campo LastName
<br/>
</xsl:for-each>
</body>
</html>
</xsl:template>

El resultado en el explorador seria el siguiente:

<xsl:sort>
Este comando te permite ordenar el archivo de salida por medio de una instrucción select del
comando XPATH. Asi en nuestro ejemplo para ordenar el archivo por el nombre del producto
deberías de incluir una instrucción como se muestra a continuación

<xsl:template match="Employees">
<html>
<body>
<xsl:for-each select="Employees">
<xsl:sort select ="LastName"/>
<xsl:value-of select="LastName"/>

UNIVERSIDAD NACIONAL DE INGENIERIA 5


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

<br/>
</xsl:for-each>
</body>
</html>
</xsl:template>

El resultado de este ejemplo será el siguiente:

Combinado con HTML


Al mostrar elementos de un XML, y darle forma a veces es necesario combinarlo con elementos de
HTML, por ejemplo si queremos mostrar todo los nodos del XML dentro de una tabla haríamos lo
siguiente:

<h2>Listado de Empleados</h2>
<table border="1">
<tr style="background-color: lightyellow;font-weight: bold;" >
<td>Nombre</td>
<td>Apellido</td>
<td>Cargo</td>
<td>Telefono</td>
</tr>
<xsl:for-each select="Employees">
<xsl:sort select ="FirstName"/>
<tr>
<td> <xsl:value-of select="FirstName"/> </td>
<td> <xsl:value-of select="LastName"/> </td>
<td> <xsl:value-of select="Title"/> </td>
<td> <xsl:value-of select="HomePhone"/> </td>
</tr>
</xsl:for-each>
</table >

El resultado de este ejemplo será el siguiente:

UNIVERSIDAD NACIONAL DE INGENIERIA 6


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

<xsl:if>
Dentro de los comandos de XPATH, nos permite realizar condiciones de muestra de
datos para aquellos registros que satisfagan con una condición dada, para esto se utiliza
el atributo test <xsl:if test =" Condicional "> y se finaliza con </xsl:if>.

Para este ejemplo crearemos un XML con el nombre Productos.xml, el cual va a contener
información de la tabla Products, que contiene los siguientes campos: ProductID, CategoryID,
ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder

Una vez generado el XML, el archivo asociado para poder mostrar la información será
Productos.xsl, el cual consistirá en la muestra solo de las categorías Meat/Poultry y Produce,
como se muestra a continuación:

<table border="1" bordercolor="purple" cellpadding="0" cellspacing="0">


<tr style="font-weight: bold;">
<td colspan="4">Ordenado por Categorias</td>
</tr>
<tr style="font-weight: bold;">
<td >Categoria Producto </td>
<td >Producto </td>
<td >Precio x Cantidad </td>
<td >Precio Unitario </td>
</tr>
<xsl:for-each select="Products">
<xsl:sort select ="CategoryID"/>
<xsl:if test ="CategoryID=6">
<tr style="background-color: lightyellow">
<td>Meat/Poultry</td>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="QuantityPerUnit"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
</tr>
</xsl:if>
<xsl:if test ="CategoryID=7">
<tr style="background-color: #cccccc">
<td> Produce </td>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="QuantityPerUnit"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
</tr>
</xsl:if>
</xsl:for-each>
</table>

Aquí el resultado:

UNIVERSIDAD NACIONAL DE INGENIERIA 7


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Debido a que este es un lenguaje de etiquetas, para los operadores menor y mayor se deben
utilizar otra simbología, sino causaría error al hacer la interpretación por el depurador.

Para evitar esto utilizaremos la siguiente tabla estudiada en el capitulo anterior:

Entidad Carácter
&amp; &
&lt; <
&gt; >

Así para el operador mayor usaremos &gt; “greater to” y para el operador menor usamos
&lt; “lower than”. Modificando el ejemplo anterior:

<xsl:if test="UnitPrice &lt; 30" >


<xsl:if test ="CategoryID=6">
<tr style="background-color: lightyellow">
<td> Meat/Poultry </td>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="QuantityPerUnit"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
</tr>
</xsl:if>
</xsl:if>

<xsl:choose>
Para realizar condicionales múltiples tenemos el siguiente comando, con <xsl:choose > que indica
el inicio de una instrucción condicional. Para agregar condiciones múltiples se debe de usar las
etiquetas when acompañadas de la instrucción o atributo test para indicar la condicional
<xsl:when test="Condicional">.

Luego al final se puedes elegir una instrucción <xsl:otherwise> para referirte al resto de
registros que no cumplen ninguna condición.
Veamos el ejemplo siguiente:

<table border="1" bordercolor="sienna" cellpadding="0" cellspacing="0">


<tr style="font-weight: bold;background-color:lightyellow">
<td colspan="4">Ordenado por Categorias</td>
</tr>
<tr style="font-weight: bold; background-color:lightyellow">
<td >Producto</td> <td >Precio</td> <td >Stock</td> <td>Accion</td>
</tr>
<xsl:for-each select="Products">
<xsl:sort select ="UnitsInStock"/>
<xsl:choose >
<xsl:when test ="UnitsInStock &lt; 20">
<tr>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
<td> <xsl:value-of select="UnitsInStock"/> </td>
<td>Solictar nuevos pedidos</td>
</tr>

UNIVERSIDAD NACIONAL DE INGENIERIA 8


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

</xsl:when>
<xsl:when test ="UnitsInStock &lt; 70">
<tr>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
<td> <xsl:value-of select="UnitsInStock"/> </td>
<td>Estado Nomal</td>
</tr>
</xsl:when>
<xsl:otherwise>
<tr>
<td> <xsl:value-of select="ProductName"/> </td>
<td> <xsl:value-of select="UnitPrice"/> </td>
<td> <xsl:value-of select="UnitsInStock"/> </td>
<td>Estado Full</td>
</tr>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</table>

El resultado de este ejemplo seria el siguiente:

1.2 XSL con Hoja de Estilos de HTML.

Para agregar la referencia a una hoja de estilos se suele usar la siguiente sentencia dentro de las etiquetas Html
y Body como se muestra a continuación.

<xsl:template match="/">
<html>
<head>
<link href="HojadeEstilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Referencia a una hoja de Estilos</h1>
</body>
</html>
</xsl:template>

UNIVERSIDAD NACIONAL DE INGENIERIA 9


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Veamos el siguiente ejemplo, primero crearemos una hoja de estilo con el nombre EstiloEmpleados.css con los
siguientes elementos:

body
{
font-size: 9pt;
color: #330066;
font-family: Arial;
background-color: beige;
}

TABLE.border
{
BORDER-BOTTOM: gold thin solid;
BORDER-LEFT: gold thin solid;
BORDER-RIGHT: gold thin solid;
BORDER-TOP: gold thin solid
}
TD.filaTitulo
{
BACKGROUND-COLOR: #ffcc00;
COLOR: black;
FONT-FAMILY: Arial, Verdana;
FONT-SIZE: 11px;
FONT-WEIGHT: bold
}
TD.inputbut
{
font-size: 7pt;
color: #330066;
font-family: Arial;
font-weight :normal
}
TD.filaPie
{
BACKGROUND-COLOR: #ffcc00;
COLOR: black;
FONT-FAMILY: Arial, Verdana;
FONT-SIZE: 9px;
FONT-WEIGHT: normal
}
TD.filaCampo
{
background-color: khaki;
color: black;
font-family: Arial, Verdana;
font-size: 10px;
font-weight: normal;
}
SELECT
{
BORDER-BOTTOM: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
font-size: 7pt;
font-family: Arial;
font-weight :normal;
color: #330066;
HEIGHT: 14px;
LINE-HEIGHT: 8px;
background-color: lemonchiffon
}

2.- Generar el XML con la siguiente información, la tabla Employees con los siguientes Campos:
EmployeeID, LastName, FirstName, Title, BirthDate, HireDate, Address, City, Region, PostalCode,
Country.

UNIVERSIDAD NACIONAL DE INGENIERIA 10


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

3.- Crear el archivo XSL con el nombre ListaEmpleados.xsl y realizar la referencia dentro del XML, dentro
del archivo XSL crearemos lo siguiente:

<table border="0" cellspacing="0" cellpadding="0" class="border">


<tr >
<td align="center" colspan="5" >Listado de Empleados</td>
</tr >
<tr >
<td >Nombre</td>
<td >Apellido</td>
<td >Cargo</td>
<td >F.Nac</td>
</tr>
<xsl:for-each select="ListaEmpleados/ListaEmpleados">
<xsl:sort select ="FirstName"/>
<tr>
<td style="width: 60px">
<xsl:value-of select="FirstName"/>
</td>
<td style="width: 60px">
<xsl:value-of select="LastName"/>
</td>
<td style="width: 120px">
<xsl:value-of select="Title"/>
</td>
<td style="width: 150px">
<xsl:value-of select="BirthDate"/>
</td>
</tr>
</xsl:for-each>
</table >

Realizar el enlace con la hoja de estilos para proyectar el siguiente cuadro, agregar una columna más con
el nombre País. Dentro del cual colocar un elemento Select de Html en el cual se debe de cargar los dos
países USA y UK.

UNIVERSIDAD NACIONAL DE INGENIERIA 11


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

1.3 Uso de Controles HTML con XSL.

Para el uso de controles HTML como los Textbox, Links, Image y Button se utiliza el elemento variable del
XSL para la construcción de un elemento HTML, tanto su parte declarativa como sus atributos y los valores
que este puedan tener, por ejemplo la definición de una variable de HTML se da con el elemento:

Esta línea define un elemento HTML “h3”

<xsl:variable name ="h3" >h3</xsl:variable>

Para la asignación de los valores para las etiquetas HTML se define anteponiendo el carácter $ antes de la
variable y dentro de él, el valor asignado.

<xsl:element name ="{$h3}">Mi Valor</xsl:element>

Para la construcción de un elemento HTML mas complicado con atributos por ejemplo un Textbox:

<input id="Text1" type="text" value ="Hola .NET" />

Defino el elemento Input:

<xsl:variable name="text">input</xsl:variable>

Uso de la variable:

<xsl:element name="{$text}">

Dentro de él agregamos los atributos, tipo text:

<xsl:attribute name="type">text</xsl:attribute>

Dentro de él agregamos los atributos, el valor a mostrar en el text:

<xsl:attribute name="value">
Hola .NET
</xsl:attribute>
</xsl:element>

UNIVERSIDAD NACIONAL DE INGENIERIA 12


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Laboratorio Calificado 02

1.- Utilizar para este ejemplo la tabla Customers, en la cual hay que generar un archivo XML con los
siguientes campos y solo se debe mostrar los clientes de los países France, Germany, UK y USA:

CustomerID,
CompanyName,
ContactName,
ContactTitle,
Address,
City,
Region,
Country,
PostalCode
Phone,
Fax

Realizar el siguiente Diseño, para la muestra de los clientes separado por país:

2.- Utilizar la tabla Employees y realizar la siguiente modificación:

Alter Table Employees


Add Imagen Varchar(80)

Update Employees set imagen='persona1.jpg'


where EmployeeID= 1

Update Employees set imagen='persona2.jpg'


where EmployeeID= 2

Update Employees set imagen='persona3.jpg'


where EmployeeID= 3

Update Employees set imagen='persona4.jpg'


where EmployeeID= 4

Update Employees set imagen='persona5.jpg'


where EmployeeID= 5

Update Employees set imagen='persona6.jpg'

UNIVERSIDAD NACIONAL DE INGENIERIA 13


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

where EmployeeID= 6

Update Employees set imagen='persona7.jpg'


where EmployeeID= 7

Update Employees set imagen='persona8.jpg'


where EmployeeID= 8

Update Employees set imagen='persona9.jpg'


where EmployeeID= 9

3.- Agregar las imágenes correspondientes del proyecto.

4.- Realizar el siguiente diseño para la muestra de los empleados.

UNIVERSIDAD NACIONAL DE INGENIERIA 14


FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS