Ahora vamos a generar nuestra capa vista.
La capa vista, en una aplicación JSF, tiene como objetivo generar las respuestas a las solicitudes del usuario, y más concretamente, a través del procesamiento de la información que se llevará a cabo en la capa de negocio, elaborar los html hacia el navegador del usuario-cliente.
Lógicamente, esta capa vista debe estar construida con un lenguaje dinámico, en nuestro caso JSF y nuestro servidor de aplicaciones se ocupará de procesar los JSF y construir los HTML que serán enviados al cliente.
7 - Fichero Web.xml y capa vista
Debido a la sencillez del ejemplo que estamos manejando, nuestra capa vista se compondrá solamente de cuatro ficheros, la pantalla de identificación, la pantalla de alta de usuarios, la pantalla de datos personales y la pantalla de datos profesionales.Pero previamente debemos construir el fichero web.xml. Hasta la versión 3.0, el fichero web.xml era un fichero imprescinble para el mapeo de la aplicación javaEE. A partir de esta versión, el uso es opcional.
Web.xml
Desde el fichero de configuración web.xml se pueden configurar muchos parámetros de la aplicación, así como configurar su funcionamiento. Uno de los puntos más interesantes y útiles consiste en indicar las direcciones de navegación hacia los ficheros o servlets correspondientes, así como el punto de entrada en la aplicación.<?xml version = '1.0' encoding = "UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<display-name>ejemploJSF</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_VIEW_MAPPINGS</param-name>
<param-value>*.xhtml</param-value>
</context-param>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
</web-app>
Este fichero web.xml, entre otras cosas, lo que hace es:
- Redireccionar las peticiones a nuestra web hacia el fichero index.xhtml
- Mapear peticiones de ficheros hacia extensiones xhtml.
Fichero index.xhtml
Ahora procedemos a construir el fichero index.xhtml:<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<style>
body {
width: 600px;
margin: 0 auto 0 auto;
background-color: #ffffff;
}
.indexBody {
margin-top: 25px;
}
table {
margin-left: 60px;
}
.buttonForm input {
margin-left: 70px;
margin-top: 20px;
width: 100px;
}
.message{
font-size: 1.5em;
color: red;
}
</style>
<title>Identificación</title>
</h:head>
<h:body >
<div class="indexBody">
<h:form>
<h1>Identificación de usuario</h1>
<h:panelGrid columns="2">
<h:outputLabel>Usuario</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Contraseña</h:outputLabel><h:inputSecret value=""></h:inputSecret>
</h:panelGrid>
<div class="buttonForm">
<h:commandButton value="Login" ></h:commandButton>
<h:commandButton value="Nuevo" ></h:commandButton>
</div>
<div class="message">
<h:outputText value=""></h:outputText>
</div>
</h:form>
</div>
</h:body>
</html>
Y este es el aspecto de la página...
Comento un poco el código...
Bueno, nos olvidamos del código css, ya que nos centraremos en JSF.
Lo primero, observar que hemos declarado un espacio de nombres arriba en <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> Esta etiqueta nos permitirá acceder a las etiquetas especiales de jsf. Estas etiquetas nos aparecen, cuando estamos en modo edición, empezando por una h, que es con la letra que la que la hemos designado en xmlns:h="http://java.sun.com/jsf/html". Si hubieramos puesto j, pues las etiquetas empezarían por <j:
Bueno, declarado el espacio de etiquetas de JSF, pues lo primero que hemos de hacer, cuando programamos una página JSF, es declarar el head y el body con las etiquetas JSF <h:head> y <h:body>.
Los elementos de la página JSF también son elementos especiales, empezando por <h:form>. Esta etiqueta, al contrario que su correspondiente de html, no contiene la redirección de la página que se producirá cuando se envíe el formulario. Esa información irá en los botones.
<h:PanelGrid> es el equivalente al elemento table de html. En PanelGrid definiremos el número de columnas, y el propio PanelGrid irá creando filas de ese número de columnas, por lo que nos ahorramos muchos de los tediosos tr y td.
Aparecen <h:outputLabel> <h:inputText ><h:inputSecret value=""> que equivalen a label, input type="text" e input type="password".
<h:commandButton> equivale a input type="submit", o sea, es un botón que lanza el formulario; además contendrá un elemento llamado "action" donde alojaremos, en su momento, la dirección (el método en el ManagedBean) hacia donde se enviará la información de la página.
Tanto commandButton, inputText como inputSecret quedan DE MOMENTO EN BLANCO, en los aspectos fundamentales, en espera de construir las clases java de negocio. Entonces volveremos sobre nuestras páginas y añadiremos el código necesario.
Debajo de los botones, hemos creado un contenedor div para mostrar los mensajes de error, advertencia, etc.etc. No es que esto sea un excelente diseño, claro, pero no quiero complicar el código con advertencias javascript, ni tampoco es mi intención aproximarme al uso de mensajes en JSF. Nos bastará con una simple línea de advertencia, si procede.
Por lo tanto, aunque son páginas JSF, ahora mismo son meras cáscaras huecas sin funcionamiento, hasta que las rellenemos con el código EL de JSF que permitirá interactuar con los ManagedBeans.
Anterior tema Siguiente tema
No hay comentarios:
Publicar un comentario