Aplicacion Con Acceso a Bases de Datos Java MySql y Patrones de Diseño Parte 5

Después de estar ausente por, mucho tiempo, aquí esta la 5ta, aprovechando todo el modelo anterior, la vista, la haremos con JSF 2, solo que esta vez con eclipse, así que manos a la obra:

lo primero a crear un proyecto web dinámico,

elegir las opciones correspondientes


por ultimo agregar las librerías extras que se desean utilizar

Como el modelo ya estaba realizado en Netbeans, hay que o reescribirlo en eclipse respetando la estructura anterior o el clasico copy & paste o como sea, el punto es tener la misma estructura,

Ahora bien vamos a crear una clase simple que sirva de base para las acciones a ejecutar, llámese crear un nuevo registro o actualizar, ademas de ser el encargado de gestionar los errores.



y aquí esta el código

package com.ezjamvc.view.beans;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

public class BaseBean {
        protected static final String ACC_CREAR = "CREAR";
        protected static final String ACC_ACTUALIZAR = "ACTUALIZAR";

        protected String accion;

        public BaseBean() {
        }

        protected void error(String idMensaje, String mensaje) {
                FacesContext.getCurrentInstance().addMessage(
                                idMensaje,
                                new FacesMessage(FacesMessage.SEVERITY_ERROR, mensaje,
                                                idMensaje));
        }

        public void setAccion(String accion) {
                this.accion = accion;
        }

        public String getAccion() {
                return accion;
        }

        public boolean isModoCrear() {
                if (accion != null) {
                        return accion.equals(ACC_CREAR);
                } else {
                        return false;
                }
        }

        public boolean isModoActualizar() {
                if (accion != null) {
                        return accion.equals(ACC_ACTUALIZAR);
                } else {
                        return false;
                }

        }
}

Ahora crearemos un Bean de tipo SessionScoped, que tenga la funcionalidad de controlador para cada una de las acciones que deseamos realizar: por lo tanto

  1. ir al nodo Web content
  2. mostrar los elementos de WEB-INF
  3. doble clic en faces-config.xml
  4. elegir ManagedBean
  5. Seguir los pasos del asistente para agregar una nueva clase del tipo ManagedBean con un scope de tipo session







Despues de haber creado la clase y antes de mostrar el código, voy a mostar una imagen en donde se represente cual es la funcionalidad que se espera obtener de las páginas:


Partiendo de la imagen anterior se puede deducir que habran dos paginas jsf, almacenadas en una carpeta/directorio/folder denominado articulos, y que a partir de un listado tendremos las acciones de dar de alta un nuevo articulo, lo que mostrar un formulario para tal efecto, una vez rellenado el formulario y aceptar/guardar/almacenar el registro regresara la vista a la lista de articulos mostrando el nuevo elemento agregado, funcionalidad similar para actualizar un registro, en el caso de eliminar, la vista permanecera en el listado de articulos, mostrando todos los elementos existentes, o dicho de otra manera, todos los articulos menos el recien eliminado.
ahora, si, la clase del ManagedBean encargado de esas acciones:

package com.ezjamvc.view.beans;

import com.ezjamvc.modelo.delegate.EzjaMVCDelegate;
import com.ezjamvc.modelo.dto.ArticuloDTO;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

/* @author Asuncion */
@ManagedBean(name = "ArticuloBean")
@SessionScoped
public class ArticuloBean extends BaseBean {

        private ArticuloDTO alumnoDTO;

        public ArticuloBean() {
        }

        public String nuevo() {
                alumnoDTO = new ArticuloDTO();
                setAccion(ACC_CREAR);
                return "/articulos/capturarArticulo.xhtml";
        }

        public String editar() {
                setAccion(ACC_ACTUALIZAR);
                return "/articulos/capturarArticulo.xhtml";
        }

        public String crear() {
                EzjaMVCDelegate escuelaDelegate = new EzjaMVCDelegate();
                try {
                        escuelaDelegate.crearArticulo(alumnoDTO);
                        return "/articulos/listadoArticulo.xhtml";
                } catch (Exception e) {
                        error("errorCrearArticulo", "Error al crear articulo");
                        return "/articulos/listadoArticulo.xhtml";
                }
        }

        public String actualizar() {
                EzjaMVCDelegate escuelaDelegate = new EzjaMVCDelegate();
                try {
                        escuelaDelegate.actualiza(alumnoDTO);
                        return "/articulos/listadoArticulo.xhtml";
                } catch (Exception e) {
                        error("errorCrearAlumno", "Error al crear articulo");
                        return "/articulos/listadoArticulo.xhtml";
                }
        }

        public String borrar() {
                EzjaMVCDelegate escuelaDelegate = new EzjaMVCDelegate();
                try {
                        escuelaDelegate.elimina(alumnoDTO);
                } catch (Exception ex) {
                        ex.printStackTrace();
                }
                return "/articulos/listadoArticulo.xhtml";
        }

        public List getLista() {
                EzjaMVCDelegate escuelaDelegate = new EzjaMVCDelegate();
                try {
                        return escuelaDelegate.listarArticulos();
                } catch (Exception e) {
                        e.printStackTrace();
                        error("ErrorListaArticulos", "Error al mostrar articulos");
                        return null;
                }
        }

        public void seleccionaArticulo(ActionEvent event) {
                EzjaMVCDelegate escuelaDelegate = new EzjaMVCDelegate();
                String claveArtSel = (String) FacesContext.getCurrentInstance()
                                .getExternalContext().getRequestParameterMap()
                                .get("claveArtSel");
                alumnoDTO = new ArticuloDTO();
                alumnoDTO.setClaveArticulo(claveArtSel);
                try {
                        alumnoDTO = escuelaDelegate.leerArticulo(alumnoDTO);
                } catch (Exception ex) {
                        ex.printStackTrace();
                }
        }

        public String getClaveArticulo() {
                return alumnoDTO.getClaveArticulo();
        }

        public void setClaveArticulo(String claveArticulo) {
                alumnoDTO.setClaveArticulo(claveArticulo);
        }

        public String getDescripcion() {
                return alumnoDTO.getDescripcion();
        }

        public void setDescripcion(String descripcion) {
                alumnoDTO.setDescripcion(descripcion);
        }

        public int getExistencias() {
                return alumnoDTO.getExistencias();
        }

        public void setExistencias(int existencias) {
                alumnoDTO.setExistencias(existencias);
        }

        public double getPrecio() {
                return alumnoDTO.getPrecio();
        }

        public void setPrecio(double precio) {
                alumnoDTO.setPrecio(precio);
        }
}

Despues de haber creado la clase procederemos a crear los archivos xhtml que le den soporte al listado y al formulario para realizar las clasica actividades CRUD ... manos a la obra, primero creamos un folder llamado artículos, solo por organizar


y ahora a crear las páginas que mostraran el listado de artículos y el formulario de registro/actualización respectivamente.

Asignar como nombre listadoArticulo y capturarArticulo respectivamente... y asegurarse que el tipo de archivo sea el mostrado en la figura siguiente:

a continuación se muestra el código para el listado de articulo:

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>
            Listado de Articulos
        </title>
        <link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/blitzer/skin.css"/>
    </h:head>
    <h:body>
        <center>
            <p:panel header="Listado de Articulos"
                     style="text-align: left;width: 650px;
                     vertical-align: middle;"
>
                <f:view>
                    <h:form id="frmArticulo">
                        <p:dataTable value="#{ArticuloBean.lista}"
                                     var="alumno"
                                     selectionMode="single"
                                     style="font-size:10px"
                                     paginator="true"
                                     rows="5"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15">
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="claveArticulo"/>
                                </f:facet>
                                <h:outputText value="#{alumno.claveArticulo}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Descripcion"/>
                                </f:facet>
                                <h:outputText value="#{alumno.descripcion}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Precio"/>
                                </f:facet>
                                <h:outputText value="#{alumno.precio}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Existencias"/>
                                </f:facet>
                                <h:outputText value="#{alumno.existencias}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Acciones"/>
                                </f:facet>
                                <p:commandButton
                                    action="#{ArticuloBean.editar}"
                                    value="Editar"
                                    immediate="true"
                                    actionListener="#{ArticuloBean.seleccionaArticulo}"
                                    ajax="false"
                                    image="ui-icon ui-icon-pencil"
                                    >
                                    <f:param
                                        name="claveArtSel"
                                        value="#{alumno.claveArticulo}" />
                                </p:commandButton>
                                <p:commandButton
                                    action="#{ArticuloBean.borrar}"
                                    value="Eliminar"
                                    immediate="true"
                                    actionListener="#{ArticuloBean.seleccionaArticulo}"
                                    ajax="false"
                                    image="ui-icon ui-icon-trash"
                                    >
                                    <f:param
                                        name="claveArtSel"
                                        value="#{alumno.claveArticulo}" />
                                </p:commandButton>

                            </p:column>
                        </p:dataTable>

                        <p:commandButton
                            value="Nuevo"
                            action="#{ArticuloBean.nuevo}"
                            ajax="false"
                            image="ui-icon ui-icon-disk"/>

                        <p:commandButton value="Gráfica" action="grafica"  ajax="false"/>
                        <p:commandButton value="Menu" action="menu"  ajax="false"/>
                    </h:form>
                </f:view>
            </p:panel>
        </center>
    </h:body>
</html>

y el del formulario de articulo

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      >
    <h:head>
        <title>
            Formulario de Articulos
        </title>
        <link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/blitzer/skin.css"/>
    </h:head>
    <h:body>
        <center>
            <p:panel header="Formulario de Articulo"
                     style="text-align: left;width: 400px;
                     vertical-align: middle;"
>
                <f:view>
                    <h:form id="frmArticulo">
                        <h:inputHidden id="accion" value="#{ArticuloBean.accion}"/>
                        <h:panelGrid columns="2">
                            <h:outputText value="claveArticulo"/>
                            <p:inputText id="matricula" value="#{ArticuloBean.claveArticulo}"/>
                            <h:outputText value="Descripcion"/>
                            <p:inputText id="nombre" value="#{ArticuloBean.descripcion}"/>
                            <h:outputText value="precio"/>
                            <p:inputText id="precio" value="#{ArticuloBean.precio}"/>
                            <h:outputText value="existencia"/>
                            <p:inputText id="existencia" value="#{ArticuloBean.existencias}" />
                            <p:commandButton
                                value="Guardar"
                                action="#{ArticuloBean.crear}"
                                rendered="#{ArticuloBean.modoCrear}"
                                ajax="false"
                                image="ui-icon ui-icon-disk"
                                />
                            <p:commandButton
                                value="Guardar"
                                action="#{ArticuloBean.actualizar}"
                                rendered="#{ArticuloBean.modoActualizar}"
                                ajax="false"
                                image="ui-icon ui-icon-disk"/>

                            <p:commandButton
                                value="Regresar"
                                action="/articulos/listadoArticulo.xhtml"
                                ajax="false"
                                image="ui-icon ui-icon-arrow-1-w"/>
                        </h:panelGrid>
                    </h:form>
                </f:view>
            </p:panel>
        </center>
    </h:body>
</html>

otra modificación, a realizar es en el archivo web.xml, y solo es necesario buscar la entrada de archivos de bienvenida y agregar en primer lugar el archivo que se desea mostrar al inicio de la ejecución de nuestra aplicación

 <welcome-file-list>
        <welcome-file>faces/articulos/listadoArticulo.xhtml</welcome-file>
     .
     .
     .
  </welcome-file-list>

Despues de todo lo anterior obtendremos como resultado lo siguiente:


al dar clic sobre el botón Editar del primer articulo, muestra el formulario con los datos respectivos:

aquí es posible modificar los valores, para el ejemplo solo se modificará el precio, posteriormente al aceptar los cambios nos redireccionará al listado mostrando los cambios realizados:

A partir del listado es posible eliminar cualquier registro con solo clickear al boton eliminar, en el ejemplo d ela imagen siguiente se ha eliminado el art02,

A parte de estas acciones tiene 3 botones extras en la parte inferior (Nuevo, Grafica y Menu), la gráfica y el menú en otra ocasión los agregaré si el tiempo me lo permite, el boton nuevo muestra el formulario en blanco con opciones de guardar o regresar de nuevo al listado, mismas opciones aparecen al editar


bueno, para terminar aclaro que no se realiza validación alguna, eso ya es tarea aparte, lo realizaré luego, por el momento me desconecto nuevamente,,,, bye

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de Sr. Negativo

Sugerencia

Es un buen aporte, pero ¿Podrias explicar más? por ejemplo colocar el nombre de tus códigos y que hace cada uno.

?:)

Este es un post que está

Este es un post que está escribiendo jasunionez por partes.

Quizá valdría la pena ponerle "continuará..."

Estaba bloqueado como spam, a veces el antispam se dispara cuando encuentra algunos patrones medio raros ( quizá en este caso sean muchas imagenes ) pero la verdad es que no sé cual es el criterio.

Incluso alguna vez se disparó cuando alguien publicó un código que no compilaba.

Desbloqueado lo he...

Imagen de jasuncionez

grax OscarRyz

Pues en efecto he terminado, al fin y son muchas imágenes, y continuara.... grax