Cómo implementar un datatable editable con el soporte de primefaces

Cómo implementar un datatable editable con el soporte de primefaces

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno
• 3. CellEditor Component
• 4. Comportamiento datatable en modo edición
• 5. Permitiendo la eliminación de registros
• 6. Conclusiones

1. Introducción

Esta mágnifica librería de componentes nos proporciona todo lo necesario para llevar a cabo una solución sencilla y elegante a la hora de editar los registros de un datatable. En en showcase de primefaces nos muestran un ejemplo DataTable – InCell Editing aunque hoy veremos como ampliar la funcionalidad del mismo con un simple commandLink y css. De esta manera podrémos eliminar los registros del datatable además de poder editarlos con lo que obtenemos un datatable editable completo.

Podéis descargar los fuentes del ejemplo que veremos a continuación desde aqui. El aspecto de nuestro datatable es el siguiente:

2. Entorno

El tutorial está escrito usando el siguiente entorno:

• Hardware : Portátil Mac Book Pro 15″ (2,6 Ghz Intel Core i7, 4 GB DDR3).
• Sistema Operativo:Mac OS X Snow Leopard 10.6.7
• Eclipse Helios
• Primefaces 2.2.1
• JSF 2 – Mojarra-2.0.3
• Java 1.6
• Tomcat 7.0.14

3. CellEditor Component

Este componente de primecafaces es un componente de ayuda para el datatable permitiendole editar en contenido de las celdas de cada una de sus filas. Sus atributos son:

• id: Identificador único del componente –
  Default=null Type=String

• rendered: Boolean value que especifíca si el componente se renderiza –
  Default=TRUE Type=Boolean

• binding:Expresión EL que indica la instancia de UIComponent en el backing bean-
  Default=null Type=Object

Ninguno de los atributos son obligatorios. A continuación vemos como hacer uso del CellEditor:

...
  
      
          
              
          
          
              
          
      
  
...

Podemos observar que la columna del datatable se define como siempre. La diferencia esta en que en su interior estamos definiendo un contenido editable a través de
<p:cellEditor> . Hemos de tener en cuenta que aunque el contenido de la celda sea editable el componente debe saber que se tiene que pintar en esa celda cuando la fila no esta en modo edición. Para conseguirlo tenemos dos <f:facet> uno con el nombre input indicando que esto es lo que se renderizará cuando el la fila este en modo edición y otro con el nombre output indicando lo contrario. Si os fijáis para modo edición pintamos un <p:inputText> y para el caso contrario un <h:outputText> .

4. Comportamiento datatable en modo edición.

En este punto explicaré dos aspectos importantes:

• 1. <p:rowEditor> : Componente de ayuda para indicar al datatable que sus filas son editables. Con este componente contruimos la columna de edición :

  ...
    
        
            
                
            
            
                
            
        
   
  ...
  	

  Mediante el styleClass ui-editable-column-options indicamos los iconos necesarios para el componente <p:rowEditor> . En este caso el lápiz cuando no estamos editando y el check y el aspa para el modo de edición.

  

• 2. Atributos del datatable y su correspondiente respaldo en el backing bean: A la hora de definir el datatable es importante tener en cuenta los siguientes atributos.

  • rowEditListener: Nos permite indicar el método del backing bean que estara escuchando el evento de modificacón de fila cuando se pulse el icono de check.

    Con su correspondiente método de respaldo en el backin bean:

    ...   	
    public void rowEditListener(RowEditEvent event){
    	final Computer computer=(Computer) event.getObject();
    	// Realizaremos las operaciones que correspondan
    }				 
    ...
       	

    En este método realizaremos las operaciones oportunas con el row que estamos editando en ese momento como por ejemplo persistir los cambios en base de datos.

  • selection: Nos permite indicar donde se guardará el valor del registro seleccionado en el backing bean. Necesitaremos tener en el controlador el corresponiente objeto con su getters y setter.
  • selectionMode: Nos permite indicar que el datatable solo permite las selección de un único registro de manera simultanea

5. Permitiendo la eliminación de registros.

En este punto veremos como con un simple commandLink y mediante css incluiremos un icono en la columna de edición que nos permita borrar los registros del datatable.Así
quedaría la columna de edición:

Como veis solo hemos incluido el commandLink con un span con el style ui-icon ui-icon-remove donde le indicamos el icono de borrado y la posición del mismo. Además hemos incluido un popUp de confirmación al pulsar sobre el icono.

En en popUp de confirmación es donde incluimos el actionListener correspondiente para indicar el método del backing bean que será en el encargado de realizar las operaciones oportunas para borrar el registro del datatable

6. Conclusiones.

En la mayoría de las ocasiones no es necesario complicarse la vida reinventando la rueda y por experiencia os puedo decir que las cosas más sencillas son las que al final nos resuelven los probelmas más complejos. Solo es necesario estar despiertos y como siempre conocer al máximo el funcionamieto de las tecnologías con las que estamos trabajando para poder sacarles el máximo partido adaptandolas a nuestras necesidades de la mejor manera posible como ha sido el caso que nos ocupa.

Espero que les pueda servir de utilidad.

Un saludo.

Saúl

sgdiaz:@autentia.com