Guia Prog Web Primefaces Mysql 3

GUIA DE PROGRAMACION
WEB
PRIMEFACES
Mysql + PrimeFaces + JSF
HECTOR DAVILA
2017
6 C La EARPRO
1
PRIME FACES
MYSQL + JSF
2 parte CREACION DE LA OPCION LISTA

El siguiente paso es crear un listado de las personas que estan en la agenda
Para esto creamos un metodo llamado listar y lo adicionamos a personaDAO
public List<Persona> listar() throws Exception{
List <Persona> lista;

ResultSet rs;
try {
this.Conectar();
PreparedStatement st = this.getCn().prepareCall("SELECT codigo, nombre, telefono FROM Persona");
rs = st.executeQuery();
lista = new ArrayList();
while(rs.next()) {
Persona per = new Persona();
per.setCodigo(rs.getInt("codigo"));
per.setNombre(rs.getString("nombre"));
per.setTelefono(rs.getString("telefono"));
lista.add(per);
}
}catch(Exception e){
throw e;
}finally {
this.cerrar();
return lista;
}
Con este metodo tenemos el acceso a la lista
En el controlador Bean hacemos unos cambios
Quedaria asi
package controlador;
import modelo.Persona;
2
import DAO.PersonaDAO;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
/**
*
* @author HEDY
*/
public class PersonaBean {
private Persona persona = new Persona();

private List<Persona> lstPersonas;
public Persona getPersona(){
return persona;
}
public void setPersona(Persona persona){
this.persona = persona;
}
public void registrar() throws Exception{
PersonaDAO dao;
try{
dao = new PersonaDAO();
dao.registrar(persona);
} catch(Exception e){
throw e; // aqui se puede colocar un mensaje de faces
}
public void listar() throws Exception{
PersonaDAO dao;
try{
lstPersonas = dao.listar();
}
En la vista creamos un boton llamado listar

Y agregamos un dataTable para mostrar la información
3
Si se presenta que no muestra nada hay que indicarle al ajax que lo refresque
El codigo final queda asi:
El index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Agenda Prime</title>
</h:head>
<h:body>
<p:growl id="msj" autoUpdate="true" />
<h:form>
<p:outputLabel for="txtNombre" value="Nombre"/>
4
<p:inputText id="txtNombre" value= "#{personaBean.persona.nombre}" />
<p:outputLabel for="txtTelefono" value="Telefono"/>
<p:inputText id="txtTelefono" value= "#{personaBean.persona.telefono}" />
<p:commandButton value="Registrar" actionListener="#{personaBean.registrar()}" />

<p:commandButton value="Listar" actionListener="#{personaBean.listar()}" update="data"/>
<p:dataTable id="data" value="#{personaBean.lstPersonas}" var="persona">

<p:column headerText="Nombre">
<p:outputLabel value="#{persona.nombre}">
</p:outputLabel>
</p:column>
<p:column headerText="Telefono">
<p:outputLabel value="#{persona.telefono}">
</p:outputLabel>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
personaDAO
package DAO;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
/**
*
* @author HEDY
*/
public class PersonaDAO extends DAO {
public void registrar(Persona per) throws Exception{
try{
this.Conectar();
PreparedStatement st = this.getCn().prepareStatement("INSERT INTO persona (nombre, telefono)
VALUES (?,?)");
st.setString(1,per.getNombre());
st.setString(2,per.getTelefono());
st.executeUpdate();
throw e;
}finally {
this.cerrar();
5
}
public List<Persona> listar() throws Exception{
List <Persona> lista;

ResultSet rs;
try {
this.Conectar();
PreparedStatement st = this.getCn().prepareCall("SELECT codigo, nombre, telefono FROM Persona");
rs = st.executeQuery();
lista = new ArrayList();
while(rs.next()) {
Persona per = new Persona();
per.setCodigo(rs.getInt("codigo"));
per.setNombre(rs.getString("nombre"));
per.setTelefono(rs.getString("telefono"));
lista.add(per);
}
throw e;
}finally {
this.cerrar();
return lista;
}
El controlador
package controlador;
import DAO.PersonaDAO;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
6
/**
*
* @author HEDY
*/
public class PersonaBean {
private Persona persona = new Persona();

private List<Persona> lstPersonas;
public Persona getPersona(){
return persona;
}
public void setPersona(Persona persona){
this.persona = persona;
}
public void registrar() throws Exception{
PersonaDAO dao;
try{
dao.registrar(persona);
}
public void listar() throws Exception{
PersonaDAO dao;
try{
lstPersonas = dao.listar();
}
public List<Persona> getLstPersonas() {

return lstPersonas;
}
public void setLstPersonas(List<Persona> lstPersonas) {

this.lstPersonas = lstPersonas;
}
7
3 parte LINK DE MODIFICACION
MODIFICACION O ACTUALIZACION DE DATOS DE LA
AGENDA
Lo primero que debemos realizar es modificar el archivo index.xhtml en el dataTable creamos una nueva
columna llamada modificar para esto utilizamos el atributo headerText colocamos como encabezado
modificar:
Dentro de esa columna agregamos un link con la etiqueta <p:commandLink >
Asi:
Esquema del dataTable en la pagina index.xhtml
Luego en la clase PersonaDAO creamos el método de acceso a datos para modificar un elemento.
Debemos crear un método que nos permita mostrar el elemento que hemos seleccionado
Traerlo por un id y otro que nos permita modificarlo por medio de un id.
También definimos en la fachad(vean) un método para poder leer o invocar lo acabamos de hacer.
Representa el objeto de la fila que estoy viendo
Para mostrar la información que se selecciona utilizamos una etiqueta dialogo para poder editarlo.
Para contruir un dialogo se necesita crear una etiqueta dialog
Widgetvar sirve para poder ocultar o mostrar datos
Si se va a trabajar comportamientos Ajax en el bean se utiliza el viewscope
8
El boton cancelar su objetivo principal es evitar que se realice alguna accion para esto utilizamos el atributo
immediate = true (le decimos que salte todo tipo de validacion dadas por la logica de java )
Por lo tanto despues que nosotros hagamos la actualizacion correspondiente debemos cerrar el dialogo y
refrescar la informacion del dataTable que contiene la vista de los datos
Para esconder el dialogo despues utilizamos el atributo oncomplete en lugar de show colocamos hide
CODIGO DE LA VISTA(ACTUALIZADO)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Agenda Prime</title>
</h:head>
<h:body>
<p:growl id="msj" autoUpdate="true" />
<h:form id="frm">
<p:outputLabel for="txtNombre" value="Nombre"/>
<p:inputText id="txtNombre" value= "#{personaBean.persona.nombre}" />
<p:outputLabel for="txtTelefono" value="Telefono"/>
<p:inputText id="txtTelefono" value= "#{personaBean.persona.telefono}" />
<p:commandButton value="Registrar" actionListener="#{personaBean.registrar()}" />

<p:commandButton value="Listar" actionListener="#{personaBean.listar()}" update="data"/>
<p:dataTable id="data" value="#{personaBean.lstPersonas}" var="personaT">

<p:column headerText="Nombre">
<p:outputLabel value="#{personaT.nombre}">
</p:outputLabel>
</p:column>
<p:column headerText="Telefono">
<p:outputLabel value="#{personaT.telefono}">
</p:outputLabel>
</p:column>
<p:column headerText="Modificar">
<p:commandLink value="Modificar" actionListener="#{personaBean.leerID(personaT)}"
oncomplete="PF('wdlgDatos').show()" update=":dlgDatos" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog header="Datos" widgetVar="wdlgDatos" id="dlgDatos">

<h:form>
<p:outputLabel value="Nombre"/>
<p:inputText value= "#{personaBean.persona.nombre}"/>
9
<p:outputLabel value="Telefono"/>
<p:inputText value= "#{personaBean.persona.telefono}"/>
<p:commandButton value="Modificar" actionListener="#{personaBean.modificar()}"

oncomplete="PF('wdlgDatos').hide()" update=":frm:data"/>
<p:commandButton value="Cancelar" immediate="true"/>
</h:form>
</p:dialog>
</h:body>
</html>
La vista quedara asi:
Grafico vista
Ahora si le damos click en el link de modificar aparecera la siguiente cuadro de dialogo:
10
En la clase PersonaDao incluimos el metodo leerID
Este metodo permitira devolver la informacion del registro seleccionado mediante el id.
Metodo modificar
Este metodo permite hacer una actulizacion del registro solicitado
En el controlador PersonaBean
Agregamos el metodo leerID que permitira trael la informacion relacionada con el registro seleccionado
11
Luego agregamos el metodo modificar al controlador tambien:
Este metodo permite que desde la pagina se pueda hacer el llamado de la modificacion
Note que despues que hagamos la modificacion debemos llamar el metodo listar para poder visualizar los datos
actualizados.
En el metodo modificar incluimos un listar despues de la actualizacion, esto con el fin de que podamos
visualizar los datos ya cambiados.
Ejemplo:
12
Vemos que la informacion ha cambiado:
TAREA
AGREGAR LA OPCION DE BORRADO DEL PROGRAMA CON UN NUEVO LINK QUE PERMITA AL
USUARIO SELECCIONAR EL REGISTRO BORRARLO Y REFRESCAR LA LISTA.
13

Guia Prog Web Primefaces Mysql 3

Cargado por

Copyright:

Formatos disponibles

Guia Prog Web Primefaces Mysql 3

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Prog Web Primefaces Mysql 3

Cargado por

Copyright:

Formatos disponibles

GUIA DE PROGRAMACION

2 parte CREACION DE LA OPCION LISTA

public List<Persona> listar() throws Exception{

List <Persona> lista;

Con este metodo tenemos el acceso a la lista

En el controlador Bean hacemos unos cambios

private Persona persona = new Persona();

public void listar() throws Exception{

En la vista creamos un boton llamado listar

El codigo final queda asi:

<p:commandButton value="Registrar" actionListener="#{personaBean.registrar()}" />

<p:dataTable id="data" value="#{personaBean.lstPersonas}" var="persona">

public void registrar(Persona per) throws Exception{

public List<Persona> listar() throws Exception{

List <Persona> lista;

private Persona persona = new Persona();

public void registrar() throws Exception{

public void listar() throws Exception{

public List<Persona> getLstPersonas() {

public void setLstPersonas(List<Persona> lstPersonas) {

Esquema del dataTable en la pagina index.xhtml

Representa el objeto de la fila que estoy viendo

Para contruir un dialogo se necesita crear una etiqueta dialog

Widgetvar sirve para poder ocultar o mostrar datos

Si se va a trabajar comportamientos Ajax en el bean se utiliza el viewscope

<p:commandButton value="Registrar" actionListener="#{personaBean.registrar()}" />

<p:dataTable id="data" value="#{personaBean.lstPersonas}" var="personaT">

<p:dialog header="Datos" widgetVar="wdlgDatos" id="dlgDatos">

<p:commandButton value="Modificar" actionListener="#{personaBean.modificar()}"

Ahora si le damos click en el link de modificar aparecera la siguiente cuadro de dialogo:

Este metodo permite hacer una actulizacion del registro solicitado

También podría gustarte