| Registrar a un usuario en un sitio Web con Struts 1.2 |
| Paso 7: Operativa |
Vista - registroForm.jsp - Añadir casillas de verificación al formulario
Ahora vamos a ampliar el formulario
- con la pregunta ¿Qué gneros de cine te gustan más?
- con dos casillas de selección Comedia y Musical
Ahora ampliamos el código de la página JSP registroForm.jsp teniendo en cuenta que estamos utilizando Hojas de estilo en Cascada (CSS) y recursos multilenguaje.
Nota: Para recordar el funcionamiento de la sentencia switch podemos hacer clic sobre el siguiente vínculo Fundamentos - Sentencia de ramificación múltiple switch
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formulario Registro usuario Struts 1.2</title>
<link rel="stylesheet" href="/proregusuariostruts/css2/estilos.css" type="text/css">
</head>
<body>
<html:form action="registro">
<html:hidden property="submitRealizado" value="true" />
<div style="left: 210px; top: 10px; font-size: 24px;
font-weight: bold; position: absolute">
<bean:message key="literal.registroUsurario" />
</div>
<div style="left: 250px; top: 40px; font-size: 10px; position: absolute">
*<bean:message key="literal.camposRequeridos" />
</div>
<div style="left: 28px; top: 80px; position: absolute">
<bean:message key="literal.nombre" />*
</div>
<div style="left: 28px; top: 100px; position: absolute">
<html:text property="nombre" size="40" />
</div>
<div style="left: 28px; top: 123px; position: absolute">
<html:errors property="nombre" />
</div>
<div style="left: 320px; top: 80px; position: absolute">
<bean:message key="literal.apellido" />*
</div>
<div style="left: 320px; top: 100px; position: absolute">
<html:text property="apellido" size="40" />
</div>
<div style="left: 320px; top: 123px; position: absolute">
<html:errors property="apellido" />
</div>
<div style="left: 28px; top: 140px; position: absolute">
<bean:message key="literal.email" />*
</div>
<div style="left: 28px; top: 160px; position: absolute">
<html:text property="email" size="40" />
</div>
<div style="left: 28px; top: 183px; position: absolute">
<html:errors property="email" />
</div>
<div style="left: 320px; top: 140px; position: absolute">
<bean:message key="literal.codigoPostal" />*
</div>
<div style="left: 320px; top: 160px; position: absolute">
<html:text property="codigoPostal" size="5" />
</div>
<div style="left: 320px; top: 183px; position: absolute">
<html:errors property="codigoPostal" />
</div>
<div style="left: 28px; top: 200px; position: absolute">
<bean:message key="literal.login" />*
</div>
<div style="left: 28px; top: 220px; position: absolute">
<html:text property="login" size="40" />
</div>
<div style="left: 28px; top: 243px; position: absolute">
<html:errors property="login" />
</div>
<div style="left: 28px; top: 260px; position: absolute">
<bean:message key="literal.password" />*
</div>
<div style="left: 28px; top: 280px; position: absolute">
<html:password property="password1" size="40" />
</div>
<div style="left: 28px; top: 303px; position: absolute">
<html:errors property="password1" />
</div>
<div style="left: 320px; top: 260px; position: absolute">
<bean:message key="literal.confirmarPassword" />*
</div>
<div style="left: 320px; top: 280px; position: absolute">
<html:password property="password2" size="40" />
</div>
<div style="left: 320px; top: 303px; position: absolute">
<html:errors property="password2" />
</div>
<div style="left: 28px; top: 330px; position: absolute">
<bean:message key="literal.consulta.generoCine" />
</div>
<% int i = 0;%>
<logic:iterate id="generoCine" name="RegistroActionForm" property="generoCinePosibles" >
<% i++;
switch (i) {
case 1:%>
<div style="left: 28px; top: 350px; position: absolute">
<%
break;
case 2:%>
<div style="left: 220px; top: 350px; position: absolute">
<%}%>
<html:multibox property="generoCineSeleccionados">
<bean:write name="generoCine" />
</html:multibox>
<%
switch (i) {
case 1:
%>
<bean:message key="literal.comedia" />
<%
break;
case 2:%>
<bean:message key="literal.musical" />
<%}%>
</div>
</logic:iterate>
<div style="left: 230px; top: 440px; position: absolute">
<html:reset>
<bean:message key="literal.restaurar" />
</html:reset>
</div>
<div style="left: 320px; top: 440px; position: absolute">
<html:submit>
<bean:message key="literal.enviar" />
</html:submit>
</div>
</html:form>
</body>
</html> |
En el fichero literales/ApplicationResource.properties añadimos las llaves
- literal.consulta.generoCine, literal.comedia y literal.musical
literal.registroUsurario=Registro de usuario
literal.camposRequeridos=Campos requeridos
literal.nombre=Nombre
literal.apellido=Apellido
literal.email=E-Mail
literal.codigoPostal=Código Postal
literal.login=Login
literal.password=Password
literal.confirmarPassword=Confirmar Password
literal.consulta.generoCine=¿Qué géneros de cine te gustan más?
literal.comedia=Comedia
literal.musical=Musical
literal.enviar=Enviar
literal.restaurar=Restaurar
error.nombre.requerido=Nombre obligatorio
error.apellido.requerido=Apellido obligatorio
error.email.requerido=Email obligatorio
error.email.incorrecto=Email incorrecto
error.codigoPostal.requerido=Código postal obligatorio
error.codigoPostal.incorrecto=Código postal incorrecto
error.login.requerido=Login obligatorio
error.password.requerido=Password obligatorio
error.password.incorrecto=Longitud mínimo 8 carcateres
error.confirmarPassword.requerido=Confirmar password obligatorio
error.confirmarPassword.incorrecto=Los dos passwords no coinciden
errors.header=
errors.prefix=<span style="font-size: 10px; color: red" >
errors.suffix=</span>
errors.footer= |
Y ahora al formulario le vamos a añadir 4 géneros de cine más con las siguientes posiciones
- aventura left: 420px; top: 350px;
- policiaco left: 28px; top: 370px;
- clasico left: 220px; top: 370px;
- melodrama left: 420px; top: 370px;
Este es el código de la página JSP registroForm.jsp con todos los géneros de cine del formulario
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formulario Registro usuario Struts 1.2</title>
<link rel="stylesheet" href="/proregusuariostruts/css2/estilos.css" type="text/css">
</head>
<body>
<html:form action="registro">
<html:hidden property="submitRealizado" value="true" />
<div style="left: 210px; top: 10px; font-size: 24px;
font-weight: bold; position: absolute">
<bean:message key="literal.registroUsurario" />
</div>
<div style="left: 250px; top: 40px; font-size: 10px; position: absolute">
*<bean:message key="literal.camposRequeridos" />
</div>
<div style="left: 28px; top: 80px; position: absolute">
<bean:message key="literal.nombre" />*
</div>
<div style="left: 28px; top: 100px; position: absolute">
<html:text property="nombre" size="40" />
</div>
<div style="left: 28px; top: 123px; position: absolute">
<html:errors property="nombre" />
</div>
<div style="left: 320px; top: 80px; position: absolute">
<bean:message key="literal.apellido" />*
</div>
<div style="left: 320px; top: 100px; position: absolute">
<html:text property="apellido" size="40" />
</div>
<div style="left: 320px; top: 123px; position: absolute">
<html:errors property="apellido" />
</div>
<div style="left: 28px; top: 140px; position: absolute">
<bean:message key="literal.email" />*
</div>
<div style="left: 28px; top: 160px; position: absolute">
<html:text property="email" size="40" />
</div>
<div style="left: 28px; top: 183px; position: absolute">
<html:errors property="email" />
</div>
<div style="left: 320px; top: 140px; position: absolute">
<bean:message key="literal.codigoPostal" />*
</div>
<div style="left: 320px; top: 160px; position: absolute">
<html:text property="codigoPostal" size="5" />
</div>
<div style="left: 320px; top: 183px; position: absolute">
<html:errors property="codigoPostal" />
</div>
<div style="left: 28px; top: 200px; position: absolute">
<bean:message key="literal.login" />*
</div>
<div style="left: 28px; top: 220px; position: absolute">
<html:text property="login" size="40" />
</div>
<div style="left: 28px; top: 243px; position: absolute">
<html:errors property="login" />
</div>
<div style="left: 28px; top: 260px; position: absolute">
<bean:message key="literal.password" />*
</div>
<div style="left: 28px; top: 280px; position: absolute">
<html:password property="password1" size="40" />
</div>
<div style="left: 28px; top: 303px; position: absolute">
<html:errors property="password1" />
</div>
<div style="left: 320px; top: 260px; position: absolute">
<bean:message key="literal.confirmarPassword" />*
</div>
<div style="left: 320px; top: 280px; position: absolute">
<html:password property="password2" size="40" />
</div>
<div style="left: 320px; top: 303px; position: absolute">
<html:errors property="password2" />
</div>
<div style="left: 28px; top: 330px; position: absolute">
<bean:message key="literal.consulta.generoCine" />
</div>
<% int i = 0;%>
<logic:iterate id="generoCine" name="RegistroActionForm" property="generoCinePosibles" >
<% i++;
switch (i) {
case 1:%>
<div style="left: 28px; top: 350px; position: absolute">
<%
break;
case 2:%>
<div style="left: 220px; top: 350px; position: absolute">
<%
break;
case 3:
%>
<div style="left: 420px; top: 350px; position: absolute">
<%
break;
case 4:
%>
<div style="left: 28px; top: 370px; position: absolute">
<%
break;
case 5:
%>
<div style="left: 220px; top: 370px; position: absolute">
<%
break;
case 6:
%>
<div style="left: 420px; top: 370px; position: absolute">
<%}%>
<html:multibox property="generoCineSeleccionados">
<bean:write name="generoCine" />
</html:multibox>
<%
switch (i) {
case 1:
%>
<bean:message key="literal.comedia" />
<%
break;
case 2:%>
<bean:message key="literal.musical" />
<%
break;
case 3:
%>
<bean:message key="literal.aventura" />
<%
break;
case 4:
%>
<bean:message key="literal.policiaco" />
<%
break;
case 5:
%>
<bean:message key="literal.clasico" />
<%
break;
case 6:
%>
<bean:message key="literal.melodrama" />
<%}%>
</div>
</logic:iterate>
<div style="left: 230px; top: 440px; position: absolute">
<html:reset>
<bean:message key="literal.restaurar" />
</html:reset>
</div>
<div style="left: 320px; top: 440px; position: absolute">
<html:submit>
<bean:message key="literal.enviar" />
</html:submit>
</div>
</html:form>
</body>
</html> |
y este es el fichero literales/ApplicationResource.properties con las sguientes llaves añadidas
- literal.aventura, literal.policiaco, literal.clasico y literal.melodrama
literal.registroUsurario=Registro de usuario
literal.camposRequeridos=Campos requeridos
literal.nombre=Nombre
literal.apellido=Apellido
literal.email=E-Mail
literal.codigoPostal=Código Postal
literal.login=Login
literal.password=Password
literal.confirmarPassword=Confirmar Password
literal.consulta.generoCine=¿Qué géneros de cine te gustan más?
literal.comedia=Comedia
literal.musical=Musical
literal.aventura=Aventura
literal.policiaco=Policiaco
literal.clasico=Clásico
literal.melodrama=Melodrama
literal.enviar=Enviar
literal.restaurar=Restaurar
error.nombre.requerido=Nombre obligatorio
error.apellido.requerido=Apellido obligatorio
error.email.requerido=Email obligatorio
error.email.incorrecto=Email incorrecto
error.codigoPostal.requerido=Código postal obligatorio
error.codigoPostal.incorrecto=Código postal incorrecto
error.login.requerido=Login obligatorio
error.password.requerido=Password obligatorio
error.password.incorrecto=Longitud mínimo 8 carcateres
error.confirmarPassword.requerido=Confirmar password obligatorio
error.confirmarPassword.incorrecto=Los dos passwords no coinciden
errors.header=
errors.prefix=<span style="font-size: 10px; color: red" >
errors.suffix=</span>
errors.footer= |
