DataTable estilos de tabla

0

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

Ejemplo para el tratamiento de datos con dataTable de jsf

Declaramos el bean, con el nombre deportesBean y el path de la clase beans.Deportes y el ámbito de petición request

1
2
3
4
5
    <managed-bean>
    <managed-bean-name>deportesBean</managed-bean-name>
    <managed-bean-class>beans.Deportes</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>    
    </managed-bean>

Declaramos la navegación del formulario desde formulariosdeportes enviando una petición de accion deportesaction para devolver el resultado en resultadodeportes

1
2
3
4
5
6
7
 <navigation-rule>
     <from-view-id>/pages/formulariodeportes.jsp</from-view-id>
     <navigation-case>
     <from-outcome>deportesaction</from-outcome>
     <to-view-id>/pages/resultadodeportes.jsp</to-view-id>  
     </navigation-case>
    </navigation-rule>

Declaramos el bean deportes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package beans;
 
import java.util.ArrayList;
 
public class Deportes {
 
	private ArrayList <String> listaDeportes;
 
	public ArrayList<String> getListaDeportes() {
		return listaDeportes;
	}
 
	public void setListaDeportes(ArrayList<String> listaDeportes) {
		this.listaDeportes = listaDeportes;
	}
 
 
 
 
}

Estilo.css

1
2
3
4
5
6
7
8
9
10
 
  .cabeceratabla {
   color:#ff2223;
   text-align:center;
  }
 
  .pietabla {
   color:#208123;
   text-align:center;
   }

formulariodeportes.jsp

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
<%@ 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">
<link rel="stylesheet" type="text/css" href="../css/estilo.css"/>
<title>vistas</title>
 
</head>
<body>
   <div id="contenedor">
 
    <h2> Selecciona tus deportes favoritos </h2>
 
    <h:form>
 
     <h:outputText value="Selecciona tus deportes favoritos"/>
     <br/>
 
     <h:selectManyListbox value="#{deportesBean.listaDeportes}">
     <f:selectItem itemValue="baloncesto" itemLabel="baloncesto"/>
     <f:selectItem itemValue="balonmano" itemLabel="balonmano"/>
     <f:selectItem itemValue="fútbol" itemLabel="fútbol"/>
 
     </h:selectManyListbox>
 
     <br/>
 
     <h:commandButton value="enviar" action="deportesaction" styleClass="boton"/>
 
    </h:form>
 
    <div id="pie">
     <p>www.railsymas.com</p>
    </div>
   </div>
</body>
</f:view>
</html>

Código de resultadodeportes.jsp hacemos referencia en el datatable de los estilos en el header y footer de la tabla

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
<%@ 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">
<title>Resultado deportes</title>
<link rel="stylesheet" type="text/css" href="../css/estilo.css"/>
</head>
<body>
 
  <div id="contenedor">
 
  <h2> Resultado de Deportes </h2>
 
  <h:dataTable styleClass="tabla"  value="#{deportesBean.listaDeportes}" var="deporte" 
   headerClass="cabeceratabla" footerClass="pietabla">
  <h:column>
  <f:facet name="header">
   <h:outputText>Listado de Deportes Seleccionados</h:outputText>
  </f:facet>
 
 
  <h:outputText value="#{deporte}"/>
 
 
  <f:facet name="footer" >
   <h:outputText> pie de tabla</h:outputText>
  </f:facet>
  </h:column>  
  </h:dataTable>
 
 
  <div id="pie">
   <p>www.railsymas.com</p>
  </div>
 
  </div>
</body>
</f:view>
</html>

Comentarios cerrados automáticamente al pasar más de un año