Etiquetas para los formularios jsf

0

Por admin | Para la categoría de jsf (java server faces) | noticia del 05-02-2010

En este post vamos a ver una serie de etiquetas que pueden ser la más utilizadas a la hora de crear un
formulario, con jsf

Código de la clase bean encargada del tratamiento de los datos del formulario

Se necesita una clase bean para la recogida de los datos y después la diferentes páginas web jsp, la configuración tanto del los bean como de las acciones en el archivo faces-config.xml

Bean encargado de tratar los datos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

package beans;
 
import java.util.ArrayList;
 
public class Etiquetas {
 
	private String nombre;
	private String apellidos;
	private String password;
	private String comentario;
	private Boolean fumador;
	private ArrayList <String> aficiones;
	private String profesion;
 
	private ArrayList <String> lenguajes;
 
 
	public String getProfesion() {
		return profesion;
	}
	public void setProfesion(String profesion) {
		this.profesion = profesion;
	}
 
	public ArrayList<String> getLenguajes() {
		return lenguajes;
	}
	public void setLenguajes(ArrayList<String> lenguajes) {
		this.lenguajes = lenguajes;
	}
	public ArrayList<String> getAficiones() {
		return aficiones;
	}
	public void setAficiones(ArrayList<String> aficiones) {
		this.aficiones = aficiones;
	}
	public Boolean getFumador() {
		return fumador;
	}
	public void setFumador(Boolean fumador) {
		this.fumador = fumador;
	}
	public String getComentario() {
		return comentario;
	}
	public void setComentario(String comentario) {
		this.comentario = comentario;
	}
	public String getNombre() {
		return nombre;
	}
	public void setNombre(String nombre) {
		this.nombre = nombre;
	}
	public String getApellidos() {
		return apellidos;
	}
	public void setApellidos(String apellidos) {
		this.apellidos = apellidos;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
 
 
}

formulario para mostrar los campos al usuario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<f:loadBundle  basename="propiedades.message" var="mensaje"/>
<title>Utilizaci&oacute;n de etiquetas</title>
 
<link rel="stylesheet" href="../css/estilo.css" type="text/css"/>
</head>
<body>
 
 
  <div id="contenedor">
 
   <div id="contenido">
 
   <h2> Etiquetas html jsf </h2>
 
   <div id="imagen">
   <h:graphicImage  value="../imagenes/mundo.png" title="imagen"/>
   </div>
 
    <h:form>   
 
    <div class="campo">
   <h:outputText value="#{mensaje.nombre}"/>
    <br/>    
    <h:inputText value="#{etiquetasBean.nombre}"/>    
    </div>
 
    <div class="campo">  
    <h:outputText value="#{mensaje.apellidos}"/>    
    <br/>    
    <h:inputText value="#{etiquetasBean.apellidos}" maxlength="30" size="30" />
    <br/>
    </div>
 
    <div class="campo">    
    <h:outputText value="#{mensaje.password}"/>
    <br/>
    <h:inputSecret value="#{etiquetasBean.password}" maxlength="8" size="8"/>    
    </div>
 
    <div class="campo">    
    <h:outputText value="#{mensaje.comentario}"/>
    <br/>
    <h:inputTextarea rows="3" cols="10" value="#{etiquetasBean.comentario}"/>
    </div>
 
    <div class="campo">    
    <h:outputText value="#{mensaje.fumador}"/>
    <br/>
    <h:selectBooleanCheckbox value="#{etiquetasBean.fumador}"/> 
    </div>
 
 
 
    <div class="campo">
 
    <h:outputText value="#{mensaje.profesion}"/>    
    <br/>       
 
    <h:selectOneMenu value="#{etiquetasBean.profesion}">
 
    <f:selectItem itemValue="estudiante" itemLabel="Estudiante"/>
    <f:selectItem itemValue="programador" itemLabel="Programador"/>
    <f:selectItem itemValue="analista" itemLabel="Analista"/>
    <f:selectItem itemValue="diseñador" itemLabel="Diseñador"/>
 
    </h:selectOneMenu>    
    </div>
 
 
    <div class="campo">
    <h:outputText value="#{mensaje.aficiones}"/>
    <br/>
    <h:selectManyCheckbox value="#{etiquetasBean.aficiones}" layout="pageDirection">
    <f:selectItem itemValue="leer" itemLabel="Leer"/>
    <f:selectItem itemValue="cine" itemLabel="Cine"/>
    <f:selectItem itemValue="musica" itemLabel="Música"/>
    </h:selectManyCheckbox>      
    </div>
 
 
    <div class="campo">
 
    <h:outputText value="#{mensaje.lenguajes}"/>
 
    <br/>
 
    <h:selectManyListbox value="#{etiquetasBean.lenguajes}" >
 
    <f:selectItem itemValue="c" itemLabel="C"/>
    <f:selectItem itemValue="java" itemLabel="Java"/>
    <f:selectItem itemValue="struts" itemLabel="Struts"/>
    <f:selectItem itemValue="jsf" itemLabel="Jsf"/>
 
    </h:selectManyListbox>
 
 
    </div>
 
    <h:commandButton action="etiquetasaction"  styleClass="boton" value="enviar"/>
    </h:form>     
 
 
 
 
   </div>   
 
 
   <div id="pie">
    <p> www.railsymas.com </p>
   </div>
  </div>
 
 
</body>
</f:view>
</html>

jsp que muestra los resultados, se parecen al html tradicional, mencionar dataTable que sirve para mostrar datos como arrays colecciones maps etc.. . Cada valor individual viene representado por el atributo var.

Otra cosa a mencionar relevante, es el campo fumador que se saca en pantalla o no, según los datos introducidos,
un mensaje mediante jstl se aplica la lógica a la vista

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<f:loadBundle basename="propiedades.message" var="mensaje"/>
<link rel="stylesheet" type="text/css" href="../css/estilo.css"/>
<title><h:outputText value="#{mensaje.resultado}"/></title>
</head>
<body>
 
  <div id="contenedor">
 
  <div id="contenido">
 
  <h2> <h:outputText value="#{mensaje.resultado}"/> </h2>
 
  <div class="campo">
 
  <h:outputText value="nombre:"/>
 
  <h:outputText value="#{etiquetasBean.nombre}"/>  
 
  </div>
 
 
  <div class="campo">
  <h:outputText value="apellidos:"/>
 
  <h:outputText value="#{etiquetasBean.apellidos}"/>
  </div>
 
 
  <div class="campo">
 
  <h:outputText value="comentario:"/>
 
  <h:outputText value="#{etiquetasBean.comentario}" />
 
  </div>
 
  </div>
 
  <div class="campo">
 
 
  <h:outputText value="fumador:" />
 
 
 
  <c:if test="${requestScope.etiquetasBean.fumador == true}">
 
  <h:outputText value="es fumador "/>
 
  </c:if>
 
  <c:if test="${requestScope.etiquetasBean.fumador == false }">
 
 
  <h:outputText value="no es fumador"/>
 
  </c:if> 
 
  </div>
 
  <div class="campo">
 
  <h:outputText value="#{mensaje.aficionesr}"/>  
 
 
  <h:dataTable value="#{etiquetasBean.aficiones}" var="aficion" >
 
   <h:column>
 
   <h:outputText value="#{aficion}"/>
 
   </h:column>
 
  </h:dataTable>
 
  </div>
 
 
  <div class="campo">
 
  <h:outputText value="#{mensaje.profesionr}"/>
 
  <br/>
 
  <h:outputText value="#{etiquetasBean.profesion}"/> 
 
  </div>
 
 
  <div class="campo">
 
   <h:outputText value="#{mensaje.lenguajesr}"/>
 
   <h:dataTable value="#{etiquetasBean.lenguajes}" var="lenguaje">
 
   <h:column>
 
   <h:outputText value="#{lenguaje}"/>
 
   </h:column>
 
   </h:dataTable> 
 
 
  </div>
 
 
  <div id="pie">
    <p> www.railsymas.com </p>
  </div>
  </div>
 
</body>
</f:view>
</html>

Escribe un comentario