PDF de programación - II. JSP, JSTL y XML: Tecnologías en la capa de Presentación - Ingeniería del Software II

Ingeniería del Software II. Curso 07-08. ESI-UCLM

II. JSP, JSTL y XML: Tecnologías en la capa de
Presentación
Macario Polo,
Daniel Villafranca


CONTENIDO:
1. CSS: Hojas de estilo................................................................................................................. 2
Incluir estilos para todo un sitio web ................................................................................... 2
2. JSP y XML en la tecnología Web............................................................................................ 4
Presentar Documentos XML................................................................................................ 4
Generar documentos XML desde JSP y JavaBeans ............................................................ 7
3. JSTL y desarrollar Etiquetas JSP Personalizadas .................................................................... 8
Ventajas e inconvenientes del uso de JSTL frente a scriptlets ............................................ 8
Un ejemplo de JSTL ............................................................................................................ 9
4. Breve introducción a AJAX................................................................................................... 10
5. Ejercicios prácticos ................................................................................................................ 12
Próximas sesiones ...................................................................................................................... 13
Anexo I. Atributos de la Hoja de estilos (CSS) ......................................................................... 14
Referencias................................................................................................................................. 17



1

Ingeniería del Software II. Curso 07-08. ESI-UCLM

1. CSS: Hojas de estilo

CSS (Cascading Style Sheets, Hojas de estilo en Cascada), es una tecnología que nos permite
crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de
los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer
utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores...

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en
casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo.
En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la
página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la
primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en
casi todas las etiquetas HTML: style.


Ejemplos:

<p style="color:green;font-weight:bold">El párrafo saldrá con color
verde y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por
punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los
dos primeros que hemos visto aquí son:

Color: indica el color del contenido la etiqueta donde estemos utilizándolo,
generalmente indica el color del texto.

Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.
(Ver más ejemplos en las referencias)



Incluir estilos para todo un sitio web

Una de las características más potentes de la programación con hojas de estilo consiste en
definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo
colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con
ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y,
por tanto, si la cambiamos, cambiarán todas las páginas. El proceso para incluir estilos con un



2

Ingeniería del Software II. Curso 07-08. ESI-UCLM

fichero externo, sería:

1- Creamos el fichero con la declaración de estilos: Es un fichero de texto normal, que puede
tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo
de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es
un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir
código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación:

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos: Para ello vamos a colocar la etiqueta
<LINK> con los atributos

rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
type="text/css" porque el archivo es de texto, en sintaxis CSS.

•
•
• href="estilos.css" indica el nombre del fichero fuente de los estilos.

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>



</html>

<head>


</head>
<body>



</body>

<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>

<h1>Página que lee estilos</h1>
<p> Esta página tiene en la cabecera la etiqueta necesaria
para enlazar con la hoja de estilos. Es muy fácil.
</p>



3

Ingeniería del Software II. Curso 07-08. ESI-UCLM

2. JSP y XML en la tecnología Web
El "Extensible Markup Language" (XML) se ha convertido en el formato estándar de facto
para la representación de datos en Internet. Los datos XML se pueden procesar e interpretar en
cualquier plataforma (ej. desde el dispositivo portátil a un servidor central).

XML es un metalenguaje usado para definir documentos que contienen datos estructurados.
Las características y beneficios del XML se pueden agrupar en estas áreas principales:

o Extensibilidad: como metalenguaje, XML puede usarse para crear sus propios
lenguajes de marcas. Hoy en día existen muchos lenguajes de marcas basados en XML,
incluyendo "Wireless Markup Language" (WML).

o Estructura precisa: HTML sufre de una pobre estructura que hace dificil procesar
eficientemente documentos HTML. Por otro lado, los documentos XML están bien
estructurados, cada documento tiene un elemento raíz y todos los demás elementos
deben estar anidados dentro de otros elementos.

o Dos tipos de documentos: hay dos tipos principales de documentos XML.

1. Documentos Válidos: un documento XML válido está definido por una
"Document Type Definition" (DTD), que es la gramática del documento que
define qué tipos de elementos, atributos y entidades podría haber en el
documento. El DTD define el orden y también la ocurrencia de elementos.

2. Documentos Bien-Formateados: un documento XML bien formateado no tiene
que adherirse a una DTD. Pero debe seguir dos reglas: 1) todo elemento debe
tener una etiqueta de apertura y otra de cierre. 2) debe haber un elemento raíz
que contenga todos los otros elementos.

o Extensión Poderosa: Como se mencionó anteriormente, XML sólo se usa para definir
la sintaxis o el contenido. Para definir la semántica, el estilo o la presentación,
necesitamos usar "Extensible Stylesheet Language" (XSL). Observa que un documento
podría tener múltiples hojas de estilo que podrían ser usadas por diferentes usuarios.

Presentar Documentos XML

Los documentos XML contienen datos portables. Esto significa que el ejemplo 1 puede
procesarse como salida para diferentes navegadores (navegadores de escritorio para PC,
micronavegadores para dispositivos de mano). En otras palabras, un documento XML puede
ser transformado en HTML o WML o cualquier otro lenguaje de marcas.



4

Ingeniería del Software II. Curso 07-08. ESI-UCLM

Si cargamos un documento xml en un navegador que soporte XML (como IE de Microsoft),
veríamos algo similar lo siguiente:



A la hora de mostrar documentos XML se suele aplicar una transformación sobre el documento
XML, para extraer los datos o para crear un nuevo formato (como transformar datos XML a
HTML). Esta transformación se puede hacer usando un lenguaje de transformación como
"Extensible Stylesheet Language Transformation" (XSLT), que forma parte de XSL. XSL
permite que escribamos el vocabulario XML para especificar la semántica del formato. Es
decir hay dos partes de XSL, que son parte de la actividad de estilo del World Wide Web
Consortium (W3C).

o Lenguaje de Transformación (XSLT)
o Lenguaje de Formateo (objetos de formateo XSL)

Para generar las marcas HTML y extrae datos de los elementos del documento xml anterior
haremos lo siguiente:

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl=
"http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<html>
<head>
<title>Stocks</title>
</head>
<body bgcolor="#ffffcc" text="#0000ff">
<xsl:apply-templates/>



5

Ingeniería del Software II. Curso 07-08. ESI-UCLM

</body>
</html>
</xsl:template>

<xsl:template match="portfolio">

<table border="2" width="50%">
<tr>
<th>Stock Symbol</th>
<th>Company Name</th>
<th>Price</th>
</tr>
<xsl:for-each select="stock">
<tr>
<td>
<i><xsl:value-of select="symbol"/></i>
</td>
<td>
<xsl:value-of select="name"/>
</td>
<td>
<xsl:value-of select="price"/>
</td>

</tr>
</xsl:for-each>
</table>
</xsl:template>

</xsl:stylesheet>


So