sábado, 1 de enero de 2011

Listado con DataTable - PrimeFaces

Hola , bueno aun no tengo seguidores pero quiero seguir lo prometido, a si que vamos con el listado usando el Datatable.
Necesitamos la Clase Cliente, por ello creamos un paquete al que llamaremos "crud.prime.model" y dentro de este nuestra clase Cliente.

package crud.prime.model;

import java.io.Serializable;

public class Cliente implements Serializable {

private int codigo;
private String nombre;
private String direccion;
private String tipoCliente; //  N:Natural J:juridica
private String documento;
private String telefono;

public Cliente(){
}

public Cliente(int codigo, String nombre, String direccion,
String tipoCliente, String documento, String telefono) {
this.codigo = codigo;
this.nombre = nombre;
this.direccion = direccion;
this.tipoCliente = tipoCliente;
this.documento = documento;
this.telefono = telefono;
}
public int getCodigo() {
return codigo;
}
public void setCodigo(int codigo) {
this.codigo = codigo;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getDireccion() {
return direccion;
}
public void setDireccion(String direccion) {
this.direccion = direccion;
}

public String getTipoCliente() {
return tipoCliente;
}
public void setTipoCliente(String tipoCliente) {
this.tipoCliente = tipoCliente;
}
public String getDocumento() {
return documento;
}
public void setDocumento(String documento) {
this.documento = documento;
}
public String getTelefono() {
return telefono;
}
public void setTelefono(String telefono) {
this.telefono = telefono;
}


}

Ahora nuestro Bean de igual manera creamos el paquete "crud.prime.view" y dentro de este la clase ClienteBean. en su constructor incializamos los valores del listado para que al cargar nos salga el listado lleno, ya que por ahora no estamos trabajando con alguna base de datos y un SelectItem para un Combobox para el Tipo de Persona.

package crud.prime.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.model.SelectItem;

import crud.prime.model.Cliente;


@ManagedBean
@ViewScoped
public class ClienteBean implements Serializable{
private Cliente cliente;
private List<Cliente> clientes;

//Tipo list para los combobox
private SelectItem[] cboTipoCliente;

public ClienteBean() {
// Llenamos SelectItem
cliente = new Cliente();
cboTipoCliente = new SelectItem[]{
new SelectItem("N", "Natural"),
new SelectItem("J", "Juridica")
};

clientes = new ArrayList<Cliente>();
LlenarClientes();
}

private void LlenarClientes() {
clientes.add(new Cliente(1, "Juan Perez", "Av. Salaverry", "N", "837363728", "726-73653"));
clientes.add(new Cliente(2, "Pepe Peña", "Av. Aviacion", "N", "6445334", "462-85757"));
clientes.add(new Cliente(3, "John Vasquez", "Av. Javier Prado", "N", "647236323", "726-73653"));
clientes.add(new Cliente(4, "Michael Vasquez ", "Av. Grau", "N", "83736434", "726-73653"));
clientes.add(new Cliente(5, "Oracle", "Av. abc", "J", "753463323", "2324-534534"));
clientes.add(new Cliente(6, "Aplee", "Av. abc", "J", "634634353", "8776-656465"));
clientes.add(new Cliente(7, "Intel", "Av. abc", "J", "225454443", "43453-6546546"));
}

public Cliente getCliente() {
return cliente;
}

public void setCliente(Cliente cliente) {
this.cliente = cliente;
}

public List<Cliente> getClientes() {
return clientes;
}

public void setClientes(List<Cliente> clientes) {
this.clientes = clientes;
}

public SelectItem[] getCboTipoCliente() {
return cboTipoCliente;
}

public void setCboTipoCliente(SelectItem[] cboTipoCliente) {
this.cboTipoCliente = cboTipoCliente;
}

}

Ahora Creamos nuestra xhtml en Webcontent/pg al que llamaremos frmCliente.xhtml que ira asi.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="../templates/plantilla.xhtml">
<ui:define name="head">:: Java Punto y Coma ::</ui:define>
<ui:define name="content">

<h1 class="title ui-widget-header ui-corner-all">Gestion de Cliente</h1>
<div class="entry" style="line-height:200%">
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:graphicImage value="../design/ajaxloading.gif" />
</f:facet>

<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<h:form id="frm">
<p:dataTable id="tbCliente" value="#{clienteBean.clientes}" var="row" rows="5"
paginator="true" paginatorPosition="bottom" selectionMode="single"
emptyMessage="No se encontraron resultados">
<p:column filterBy="#{row.nombre}" filterMatchMode="contains" headerText="Nombre">
<h:outputText value="#{row.nombre}" />
</p:column>
<p:column filterBy="#{row.tipoCliente}" filterMatchMode="contains" headerText="Tipo">
<h:selectOneMenu value="#{row.tipoCliente}"  disabled="true" >
<f:selectItems value="#{clienteBean.cboTipoCliente}" />
</h:selectOneMenu>
</p:column>
<p:column filterBy="#{row.documento}" filterMatchMode="contains" headerText="Documento">
<h:outputText value="#{row.documento}" />
</p:column>
<p:column filterBy="#{row.direccion}" filterMatchMode="contains" headerText="Direccion">
<h:outputText value="#{row.direccion}" />
</p:column>
<p:column filterBy="#{row.telefono}" filterMatchMode="contains" headerText="Telefono">
<h:outputText value="#{row.telefono}" />
</p:column>
</p:dataTable>
</h:form>
</div>

</ui:define>
</ui:composition>

las propiedades del Datatable son bastante intuitivas asi que me parece esta de mas explicarlas. y bueno lo que obtenemos es lo siguente.


Una grilla con busquedas y paginacion y efecto de seleccion.


Asi terminamos con esta segunda parte. Saludos

10 comentarios:

  1. Hola muy bueno tu tutorial pero mi pregunta es si puedes hacerlo en netbeans, me urge porq yo trabajo con netbeans...saludos y exitos .,,

    ResponderEliminar
  2. Execelente tutorial...Felicitaciones te estare siguiendo para ver mas aportes....yo tambien estoy entrando a investigar y trabajar en este framework....si puedes podriamos ir compartiendo conocimiento en lo que vayamos aprendiendo...

    ResponderEliminar
  3. Muy buen tutorial, ojala te animes a publicar más ya que esta publicación te quedó estupenda. Saludos y muchos exitos =D

    ResponderEliminar
  4. Que excellente amigo sube mas tambien esta pendiente, gracias

    ResponderEliminar
  5. Muy buen aporte amigo, me pase todo el día buscando la solución.

    Saludos.

    ResponderEliminar
  6. hola muy bien pero lo probé y te falto agregar [ rowKey="#{row.codigo}" ]en el [ ]

    ResponderEliminar
  7. Buenas !...........
    Muy bueno el aporte esperamos mas aportes así de interesantes

    Gracias Saludos

    ResponderEliminar
  8. no me salio el programa

    ResponderEliminar
  9. Seguí los pasos para configurar el pom, application-context y el web.xml y siempre me sale un error 404 al tratar de ver un index.xhtml, ayuda por favor.

    ResponderEliminar
  10. Casinos Near Casino Lake Tahoe (Stateline) - Mapyro
    A map showing 밀양 출장마사지 casinos 청주 출장샵 and other gaming facilities located near 세종특별자치 출장안마 Casino Lake 계룡 출장안마 Tahoe, located in Stateline 서귀포 출장안마 at: 1215 Highway 50, Stateline, Nevada,

    ResponderEliminar