Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

E-mail:

Contraseña:

Inicio Quiénes somos Tutoriales Formación Comparador de salarios Nuestro libro Charlas Más

Deseo registrarmeHe olvidado mis datos de acceso

Entrar

Estás en: Inicio Tutoriales Selección múltiple de filas en un datatable con JSF: haciéndolo nosotros m...

Síguenos a través de:

Catálogo de servicios Autentia

Últimas Noticias

Hablando de coaching ágil,milagro nocturo y pruebas de

vida

XIII Charla Autentia - AOS y TDD- Vídeos y Material

Las metodologías ágiles como elcatalizador del cambio

XIV Charla Autentia - ZK

Informática profesional: Lasreglas no escritas para triunfar

en la empresa. 2ª EDICIÓNACTUALIZADA.

Histórico de NOTICIAS

Últimos Tutoriales

Selección múltiple de filas en undatatable con JSF: haciendo uso

de librerías de componentes.

Gestión del evento de cambio devalor en JSF2:

valueChangeListener.

Jackson y como deserializarobjetos JSON usando un

constructor

Obtención de la fila seleccionadaen un datatable con JSF2

Eclipse custom templates

Últimos Tutoriales del Autor

Selección múltiple de filas en undatatable con JSF: haciendo uso

de librerías de componentes.

Gestión del evento de cambio devalor en JSF2:

valueChangeListener.

Obtención de la fila seleccionadaen un datatable con JSF2

Eclipse custom templates

Zen-coding: una nueva forma deescribir código HTML

Últimas ofertas de empleo

2010-10-11Comercial - Ventas - SEVILLA.

Share |

DESARROLLADO POR:

Jose Manuel Sánchez SuárezConsultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo,factoría y formación

Somos expertos en Java/J2EE

Regístrate para votar

Selección múltiple de filas en un datatable con JSF: haciéndolo nosotros mismos.

0. Índice de contenidos.

1. Introducción.2. Entorno.3. Nuestra selección múltiple.4. Referencias.5. Conclusiones.

1. Introducción

Una vez analizadas la posibilidades que tenemos para añadir selección múltiple a nuestros listados en JSF, puede que los componentes queusamos no se adecúen totalmente a las necesidades de nuestros usuarios o puede que no estemos usando ninguna librería de terceros, queproporcione dicho soporte. Tanto en un caso como en el otro, la solución es añadir nosotros mismos dicha funcionalidad a nuestros dataTables.

En este tutorial vamos a examinar dicha posibilidad añadiendo, a un dataTable del estándar, una columna de selección múltiple que permita laselección de una, varias o todas las filas del listado, esto es, facturas para marcar como pagadas, a través de una casilla de verificación, esto es,un checkBox.

Como véis, la historia de usuario que intentamos resolver es la misma que en el tutorial anterior: selección múltiple de filas en un datatable conJSF: haciendo uso de librerías de componentes.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

Hardware: Portátil MacBook Pro 17' (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).Sistema Operativo: Mac OS X Snow Leopard 10.6.1JSF2 (Mojarra 2.0.4)Apache Tomcat 7.0.6

3. Nuestra selección múltiple.

Lo primero es el fuente de nuestro árbol de componentes JSF:

3Fecha de publicación del tutorial: 2009-02-26

Anuncios Google Java Manual De Java Java Code Examples PDF Java API

01 <h:form id="pForm">02 03 <h:panelGroup>04 05 <h:dataTable id="invoicesList"06 var="invoice"07 value="#{invoiceView.invoices}"08 rows="10"09 binding="#{invoiceView.invoicesDataTable}">10 11 <h:column>12 <f:facet name="header">13 <h:selectBooleanCheckbox id="selectAllEntities" value="#

{invoiceView.selectAllInvoices}" 14 immediate="true" valueChangeListener="#{invoiceView.selectAllInvoicesListener}">15 <f:ajax event="click" render="@form"/>16 </h:selectBooleanCheckbox>17 </f:facet>18 <h:selectBooleanCheckbox value="#{invoiceView.invoicesSelected[invoice]}"19 immediate="true" valueChangeListener="#{invoiceView.selectInvoiceListener}">20 <f:ajax event="click" render="@form"/>21 </h:selectBooleanCheckbox>22 </h:column>23 24 <h:column>25 <f:facet name="header">26 <h:outputText id="number_label"27 value="#{msg['Invoice.number']}"/>28 </f:facet>29 <h:outputText id="number"30 value="#{invoice.number}"/>31 </h:column>32 33 <h:column>34 <f:facet name="header">35 <h:outputText id="client_label"36 value="#{msg['Invoice.client']}"/>37 </f:facet>38 <h:outputText id="label"39 value="#{invoice.client}"/>40 </h:column>41 42 <h:column>43 <f:facet name="header">44 <h:outputText id="amount_label"45 value="#{msg['Invoice.amount']}"/>46 </f:facet>47 <h:outputText id="amount"48 value="#{invoice.amount}"/>49 </h:column>

2010-08-30Otras - Electricidad -BARCELONA.

2010-08-24Otras Sin catalogar - LUGO.

2010-06-25T. Información - Analista /Programador - BARCELONA.

Jose Manuel Sánchezsanchezsuarezj

Join the conversation

Lo interesante se encuentra en el primer h:column en el que incluimos dos checkBoxes, uno en la cabecera y otro en cada fila (en cada item dellistado) de modo que produzcan dos eventos de cambio de valor:

al pulsar sobre el de la cabecera se seleccionarán o deseleccionarán todas las facturas,pulsando sobre el checkBox de cada una de las filas se hará lo propio con la factura seleccionada

Los eventos se producen a través de Ajax de modo que en la respuesta se rerenderiza todo el formulario (@form), a nosotros nos interesa que sererenderize el listado de la parte inferior en el que mostramos las facturas seleccionadas.

Hay un tercer evento en la vista, correspondinete al botón de "facturar" que marcará como facturadas todas las filas seleccionadas.

El soporte del lado del managedBean es el siguiente:

50 51 <h:column>52 <f:facet name="header">53 <h:outputText id="invoiced_label"54 value="#{msg['Invoice.invoiced']}"/>55 </f:facet>56 <h:outputText id="invoiced"57 value="#{invoice.invoiced}"/>58 </h:column>59 60 </h:dataTable>61 <h:panelGroup>62 <h:commandButton actionListener="#{invoiceView.markAsInvoicedListener}" value="#

{msg['components.datatableMultipleSelection.bill']}"/>63 </h:panelGroup> 64 </h:panelGroup>65 66 <h:panelGroup id="selectedInvoicesPanel">67 <h:outputText value="#{msg['components.datatableMultipleSelection.selectedInvoices']}" />68 <ul>69 <ui:repeat var="invoice" value="#{invoiceView.allInvoicesSelected}" >70 <li><h:outputText value="#{invoice.number} - #{invoice.client} - #{invoice.amount}" />

</li>71 </ui:repeat>72 </ul>73 </h:panelGroup>74 75 </h:form>

001 package com.autentia.jsf.showcase.view;002 003 import java.util.ArrayList;004 import java.util.HashMap;005 import java.util.Iterator;006 import java.util.List;007 import java.util.Map;008 009 import javax.annotation.PostConstruct;010 import javax.faces.bean.ManagedBean;011 import javax.faces.bean.ViewScoped;012 import javax.faces.component.UIData;013 import javax.faces.event.ActionEvent;014 import javax.faces.event.ValueChangeEvent;015 016 import org.apache.log4j.Logger;017 018 import com.autentia.jsf.showcase.core.AddSampleData;019 import com.autentia.jsf.showcase.core.Invoice;020 import com.autentia.jsf.showcase.core.FinancialService;021 022 @ManagedBean023 @ViewScoped024 public class InvoiceView {025 026 private static final long serialVersionUID = 5587527957231937424L;027 028 private static final Logger log = Logger.getLogger(InvoiceView.class.getName());029 030 private List<Invoice> invoices;031 032 private boolean selectAllInvoices;033 034 private UIData invoicesDataTable;035 036 @PostConstruct037 protected void init(){038 log.debug("init...");039 AddSampleData.initializeInvoices();040 }041 042 public List<Invoice> getInvoices(){043 if (invoices == null){044 invoices = FinancialService.getInstance().getAll();045 }046 log.debug("allInvoices: " + invoices);047 return invoices;048 }049 050 public void setInvoicesDataTable(UIData invoicesDataTable) {051 this.invoicesDataTable = invoicesDataTable;052 }053 054 public UIData getInvoicesDataTable() {055 return invoicesDataTable;056 }057 058 public void markAsInvoicedListener(ActionEvent event){059 final List<Invoice> invoicesSelected = getAllInvoicesSelected();060 log.debug("markAsInvoicedListener " + invoicesSelected);061 FinancialService.getInstance().markAsInvoiced(invoicesSelected); 062 }063 064 public void setSelectAllInvoices(boolean selectAllInvoices) {065 this.selectAllInvoices = selectAllInvoices;066 }067 068 public boolean isSelectAllInvoices() {069 return selectAllInvoices;070 }071 072 private Map<Invoice,Boolean> invoicesSelected = new HashMap<Invoice, Boolean>(){073 074 private static final long serialVersionUID = -3360838896781243282L;075 076 @Override077 public Boolean get(Object object) {078 if (isSelectAllInvoices()){079 invoicesSelected.put( (Invoice) object, Boolean.TRUE);080 return Boolean.TRUE;081 }082 if (!containsKey(object)){083 return Boolean.FALSE; 084 }085 return super.get(object);086 };087 088 };089 090 public Map<Invoice,Boolean> getInvoicesSelected() {091 return invoicesSelected;092 }093 094 public List<Invoice> getAllInvoicesSelected(){095 if (isSelectAllInvoices()){096 return getInvoices();

Salgo de la ducha y me encuentroa los críos usando el iPad con losdedos de los pies (y bien!)#elfuturoyaestáaquí4 hours ago · reply

JSF 2.0 - PrimeFaces add-on forSpring ROO.http://bit.ly/hBomRHyesterday · reply

Gestión del evento de cambio devalor en #JSF2:valueChangeListener:http://ow.ly/3TNE6. Vía@adictosaltrabaj23 hours ago · reply

Obtención de la fila seleccionadaen un datatable con #JSF2:http://ow.ly/3TuOC. Vía@adictosaltrabaj

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejorservicio.

Enviar comentario

(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Los aspectos destacados a comentar son los siguientes:

hacemos uso de una referencia al dataTable a través del binding al objeto UIData invoicesDataTable, para obtener la fila seleccionada en eldataTable en los eventos de cambio de valor, ya hemos visto que tenemos varias formas de acceder a la fila seleccionada de un dataTablenosotros hemos optado aquí por esta,invoicesSelected mantiene un mapa de facturas que indica las que están seleccionadas y las que no. Dicho mapa no se inicializa, de ahí lanecesidad de sobreescribir el método get del mismo, para evitar problemas de gestión en el evento de cambio de valor, en caso contrariose producirían N eventos de cambio de valor de null, que es lo que devolvería el método get de la clase HashMap, a false. En dicho métodose asigna el valor de seleccionado a las filas si se ha fijado la marca de "seleccionar todos" a través del evento correspondiente.¿por qué un mapa?, porque con el soporte de EL del que disponemos no podemos invocar a un método del controlador pasándole unparámetro, con lo que la única forma de obtener si se ha seleccionado o no una fila es obtener el valor de un mapa, value="#{invoiceView.invoicesSelected[invoice]}". Hay una segunda opción, que es mantenter un atributo selected a nivel de entidad, pero lodesaconsejamos porque si trabajamos con entidades persistibles estamos mezclando lógica de presentación con lógica de persistencia y suexistencia exige recorrer el listado de entidades más de lo debido con lo que incide en rendimiento.

El resultado a nivel de interfaz visual es el siguiente:

Aplicándole los estilos corporativos de nuestro cliente, tendríamos las necesidades del mismo cubiertas.

4. Referencias.

http://balusc.blogspot.com/2006/06/using-datatables.html#SelectMultipleRows

5. Conclusiones.

Lo ideal es que esta funcionalidad estuviera encapsulada en un componente de la vista que no supusiera implicaciones en el controlador, para ellotenemos dos opciones:

crear o extender un componente nativo,incluirlo en un componente más ligero, basado en componentes por composición de facelets, como lo que tenemos nosotros en wuija.

Recordad que si estáis interesados en el contenido de nuestros tutoriales y tenéis una necesidad formativa al respecto podéis poneros en contactocon nosotros. En Autentia nos dedicamos, además de a la consultoría, desarrollo y soporte a desarrollo, a impartir cursos de formación de lastecnologías con las que trabajamos.

Un saludo.

Jose

jmsanchez@autentia.com

097 }098 final List<Invoice> result = new ArrayList<Invoice>();099 final Iterator<?> iterator = invoicesSelected.keySet().iterator();100 while (iterator.hasNext()) {101 Invoice key = (Invoice) iterator.next();102 if (invoicesSelected.get(key)){103 result.add(key);104 }105 }106 log.debug("allInvoicesSelected " + result);107 return result;108 }109 110 public void clearEntitiesSelected(){111 selectAllInvoices = false;112 invoicesSelected.clear();113 }114 115 public void selectAllInvoicesListener(ValueChangeEvent event){116 selectAllInvoices = ((Boolean) event.getNewValue()).booleanValue();117 if (!selectAllInvoices){118 clearEntitiesSelected();119 }120 }121 122 public void selectInvoiceListener(ValueChangeEvent event){123 selectAllInvoices = false;124 invoicesSelected.put((Invoice)invoicesDataTable.getRowData(), (Boolean) event.getNewValue());125 }126 127 }

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5

COMENTARIOS

Copyright 2003-2011 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto