Continuamos con la elaboración de nuestra capa vista.
Fichero alta.xhtml
Este es el fichero que trata de las altas de nuevos usuarios, grabando los datos del formulario en la base de datos:<?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"
xmlns:f="http://java.sun.com/jsf/core">
<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>Alta usuarios</title>
</h:head>
<h:body >
<div class="indexBody">
<h:form>
<h1>Creación de nuevo usuario</h1>
<h:panelGrid columns="2">
<h:outputLabel>Nombre</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Usuario</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Contraseña</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Email</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Sector</h:outputLabel>
<h:selectOneMenu value="">
<f:selectItem itemLabel="Industria" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Comercio" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="Agricultura" itemValue="3"></f:selectItem>
<f:selectItem itemLabel="Servicios" itemValue="4"></f:selectItem>
<f:selectItem itemLabel="Otros" itemValue="5"></f:selectItem>
</h:selectOneMenu>
<h:outputLabel>Profesión</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Antiguedad</h:outputLabel><h:inputText value=""></h:inputText>
</h:panelGrid>
<div class="buttonForm">
<h:commandButton value="Grabar" ></h:commandButton>
<h:commandButton value="Volver" ></h:commandButton>
</div>
<div class="message">
<h:outputText value=""></h:outputText>
</div>
</h:form>
</div>
</h:body>
</html>
El aspecto de la página de altas:
Fichero personales.xhtml
Este es el fichero que muestra en pantalla, una vez identificado, los datos personales del usuario:<?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" xmlns:f="http://java.sun.com/jsf/core">
<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: 20px;
margin-top: 20px;
width: 100px;
}
.buttonExit {
margin-left: 400px;
}
.message{
font-size: 1.5em;
color: red;
}
</style>
<title>Datos usuario</title>
</h:head>
<h:body >
<div class="indexBody">
<h:form>
<h:commandButton class="buttonExit" value="Salir" ></h:commandButton>
<h1>Datos personales</h1>
<h:panelGrid columns="2">
<h:outputLabel>Nombre</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Usuario</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Contraseña</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Email</h:outputLabel><h:inputText value=""></h:inputText>
</h:panelGrid>
<div class="buttonForm">
<h:commandButton value="Modificación" ></h:commandButton>
<h:commandButton value="Borrar" ></h:commandButton>
<h:commandButton value="Profesionales" ></h:commandButton>
</div>
<div class="message">
<h:outputText value=""></h:outputText>
</div>
</h:form>
</div>
</h:body>
</html>
Mediante los correspondientes botones, se puede modificar los datos, borrar el usuario completo, pasar a los datos profesionales, o salir de forma segura de la aplicación. Los errores y/o advertencias se mostrarán en rojo debajo de los botones, al igual que el resto de las páginas de la vista.
Fichero profesionales.xhtml
Al igual que el anterior, muestra los datos profesionales del usuario identificado.<?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"
xmlns:f="http://java.sun.com/jsf/core">
<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: 20px;
margin-top: 20px;
width: 100px;
}
.buttonExit {
margin-left: 400px;
}
.message{
font-size: 1.5em;
color: red;
}
</style>
<title>Datos usuario</title>
</h:head>
<h:body >
<div class="indexBody">
<h:form>
<h:commandButton class="buttonExit" value="Salir" ></h:commandButton>
<h1>Datos profesionales</h1>
<h:panelGrid columns="2">
<h:outputLabel>Sector</h:outputLabel>
<h:selectOneMenu value="">
<f:selectItem itemLabel="Industria" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Comercio" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="Agricultura" itemValue="3"></f:selectItem>
<f:selectItem itemLabel="Servicios" itemValue="4"></f:selectItem>
<f:selectItem itemLabel="Otros" itemValue="5"></f:selectItem>
</h:selectOneMenu>
<h:outputLabel>Profesión</h:outputLabel><h:inputText value=""></h:inputText>
<h:outputLabel>Antiguedad</h:outputLabel><h:inputText value=""></h:inputText>
</h:panelGrid>
<div class="buttonForm">
<h:commandButton value="Modificación" ></h:commandButton>
<h:commandButton value="Borrar" ></h:commandButton>
<h:commandButton value="Personales" ></h:commandButton>
</div>
<div class="message">
<h:outputText value=""></h:outputText>
</div>
</h:form>
</div>
</h:body>
</html>
Este es el aspecto de la pantalla:
Al igual que la pantalla de datos personales, permite modificar, borrar el usuario, navegar hacia datos personales y salir de la aplicación de forma segura.
RESUMEN:
Hemos creado las páginas de nuestra capa vista. En estos momentos son básicamente vistas html, porque no reciben ni transmiten información hacia la capa de negocio, pero cuando hayamos construido la capa de negocios volveremos a modificar estos ficheros, inyectaremos el código correspondiente en campos de texto y/o botones, y le daremos plena funcionalidad a nuestra aplicación.
Pero ahora toca construir la capa de negocio.
Anterior tema Siguiente tema
No hay comentarios:
Publicar un comentario