Tutorial: Aplicación CRUD con JPA y JSF en NetBeans (2da Parte)

Publicado por el

Hola! en esta segunda parte del tutorial crearemos las paginas web, para el proyecto que dejamos en la primera parte 
  • Ahora crearemos un paquete com.controladores, damos clic derecho y escogemos la opción New/Other.. Se desplegara una ventana como la siguiente:
new file


  • Vamos a crear un JSFManagedBean, como se observa en la imagen anterior, le damos clic en Next y le pondremos RegistroBeanProducto.java
  • A la clase creada agregaremos el siguiente código:

    private String descripcion;
    private String marca;
    private double precio;
    private double stock;
    private long id;
    @Inject
    private ProductoFacade registrofacade;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getDescripcion() {
        return descripcion;
    }

    public void setDescripcion(String descripcion) {
        this.descripcion = descripcion;
    }

    public String getMarca() {
        return marca;
    }

    public void setMarca(String marca) {
        this.marca = marca;
    }

    public double getPrecio() {
        return precio;
    }

    public void setPrecio(double precio) {
        this.precio = precio;
    }

    public double getStock() {
        return stock;
    }

    public void setStock(double stock) {
        this.stock = stock;
    }

     public String guardar()
    {
           Producto p = new Producto();
           p.setDescripcion(descripcion);
           p.setMarca(marca);
           p.setPrecio(precio);
           p.setStock(stock);
           this.registrofacade.create(p);
           this.id = p.getId();
           return "ProductoCreate";
          
    }
    public List<Producto> getProductos()
    {
        return this.registrofacade.findAll();
        
    }            
    public String prepareList() {
        return "ProductoLista";
    }
    public String prepareCreate() {
        return "ProductoCreate";
    }
    public String Eliminar(Long id)
    {
        Producto p =  this.registrofacade.find(id);       
        this.registrofacade.remove(p);
       return "ProductoLista";
    }
    public String Editar(Long id)
    {
        Producto p =  this.registrofacade.find(id);       
        this.id = p.getId();
        this.descripcion = p.getDescripcion();
        this.marca = p.getMarca();
        this.precio = p.getPrecio();
        this.stock = p.getStock();
        return "ProductoEdit";
    }
    public String GuardarEdicion(RegistroBeanProducto bp, Long id)
    {
       Producto p = new Producto();
       p.setId(id);
       p.setDescripcion(bp.descripcion);
       p.setMarca(bp.marca);
       p.setPrecio(bp.precio);
       p.setStock(bp.stock);
       this.registrofacade.edit(p);
       return "ProductoLista";
    }

  • Vamos a explicar un poco lo que tenemos en el código anterior, primero hemos definido las mismas propiedades que teníamos en nuestra entidad con sus respectivos métodos get y set. También hemos definido una propiedad de tipo ProductoFacade que como recordamos es la que tiene los métodos que accesarán a la base de datos  y la inyectamos a nuestra clase con la notación @inject
  • Luego tenemos los métodos guardar, eliminar y GuardarEdicion, estas funciones si te das cuenta usan los métodos de la propiedad registrofacade y todos retornan lo que parecería un string pero que en realidad esto hará referencia a las pagina JSF, que crearemos a continuación. Fíjate por ejemplo en la función GuardarEdicion, primero creo un objeto de tipo Producto, al cual lleno todas sus propiedades con lo que me envían en el RegistroBeanProducto, llamo al método edit del ProductoFacade, y luego de editar se llamara a la pagina  "ProductoLista"
  • Ahora procederemos a crear las paginas. Para ello en la carpeta WebPages del proyecto, pondrás la opción New -> JSF Pages, y vas a crear el archivo llamado "ProductoLista"
  • Remplaza el código de la pagina con el código que pongo a continuación.

 
<?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:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>                      
    <h:form>
        <p:dataTable var="pro" value="#{registroBeanProducto.productos}">
    <p:column headerText="Id">
        <h:outputText value="#{pro.id}" />
    </p:column> 
    <p:column headerText="Descripcion">
        <h:outputText value="#{pro.descripcion}" />
    </p:column>
 
    <p:column headerText="Marca">
        <h:outputText value="#{pro.marca}" />
    </p:column>
 
    <p:column headerText="Precio">
        <h:outputText value="#{pro.precio}" />
    </p:column>
    <p:column headerText="Stock">
        <h:outputText value="#{pro.stock}" />
   </p:column>
    <p:column headerText="Editar">
        <h:commandButton  value="Editar" action="#{registroBeanProducto.Editar(pro.id)}"/>
    </p:column>
    <p:column headerText="Eliminar">
        <h:commandButton  value="Eliminar" action="#{registroBeanProducto.Eliminar(pro.id)}"/>
    </p:column>
</p:dataTable>
   <h:commandButton id="registroCommand" value="Crear Nuevo Producto" action="#{registroBeanProducto.prepareCreate()}"/>
    </h:form>        
    </h:body>
</html>

  • Revisemos el código anterior , en la parte de la etiqueta html hemos agregado lo siguiente: xmlns:p="http://primefaces.org/ui", esto nos permitirá usar las etiquetas del primefaces, y la letra p se volverá como un alias para las etiquetas. Puedes ver todos los controles disponibles en el siguiente link: http://www.primefaces.org/showcase/
  • Para esta pagina lo que te mostrara es la lista de los productos creados, y lo haremos con el control dataTable en la propiedad value asignamos nuestro bean de la siguiente forma: "#{registroBeanProducto.productos}" esto lo que quiere decir es que de la clase registroBeanProducto, se retornara lo que devuelve el método getProductos que es una lista de productos.
  • También te puedes dar cuenta que hemos incluido dos columnas, la columna "Editar" y la columna "Eliminar", estas contendrán botones, y usamos la etiqueta action que llamara a los métodos Editar y Eliminar, de nuestro registroBeanProducto y al que mandaremos como parámetro el id del producto que vamos a modificar.


Para las otras paginas puedes descargar el proyecto completo dando clic AQUI!, el código que se usa en las otras operaciones es muy similar al que hemos visto en esta primera pagina.

Espero que este pequeño tutorial, te haya sido de ayuda, y te invitamos a seguirnos en Facebook.

Hasta la próxima!! 

Comentarios

  1. Anónimo23 de mayo de 2015, 8:23

    muy incompleto

    ResponderEliminar
  2. Airbit10 de enero de 2016, 12:14

    Buen tutorial. Saludos!!

    ResponderEliminar
  3. Anónimo24 de febrero de 2016, 13:27

    Gracias, buen tutorial

    ResponderEliminar
  4. Unknown10 de noviembre de 2016, 10:27

    disculpa, pero tengo problemas con la conexion glashfish me dice que el recurso es invalido que hago

    ResponderEliminar
  5. Unknown24 de noviembre de 2016, 5:05

    Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Mig31 de octubre de 2018, 9:49

    Buenas tardes y la conexion a BD donde se configura

    ResponderEliminar
  7. Anónimo1 de junio de 2020, 16:05

    Con todo respeto se le agradece y se le tiene en cuenta al querer compartir este tipo de informacion, pero se debe de ser profesional al realizar este tipo de post, demasiado imcompleto, confuso y mal explicado, no orienta a una persona que por primera vez quiere aprender a realizar un crud como estos...

    porfavor, toma clase de pedagogia.

    ResponderEliminar

Publicar un comentario