Skip to main content

Libro JEE7 Capítulo 0. Búsquedas

Capítulo 7. Búsquedas
Puedes descargarlo en pdf
https://www.dropbox.com/sh/yzivtufjce1h57g/AAAJzegPVBxFtiqzEOlIAdsoa?dl=0

Encuesta
https://docs.google.com/forms/d/1WG7uzOe17V4u36fC05V3ijYEPZ8fhJD1NPUrkNBS0Jk/alreadyresponded?usp=send_form




Formulario de Búsqueda con DialogFrame


Crearemos un formulario de búsqueda que se podrá invocar desde cualquier formulario o CDI/Beans.


al dar clic en buscar, nos llevará al diálogo para realizar las búsquedas








Para el manejo de registros, a veces no deseamos tener un datatable con todos los registros cargados, si no simplemente un formulario, en el cual podamos realizar búsquedas de manera rápida, cuando lo hacemos por la llave primaria es sencillo ya que solo tendremos un registro, cuando lo hacemos por otros atributos tendremos una lista de registros en los cuales podemos seleccionar uno de ellos, esta lista se mostrará en un dialog, para que el usuario seleccione el registro adecuado.

Crearemos un formulario para realizar búsquedas por cualquier atributo , por palabras exactas o mediante aproximación.


















Pasos:
  1. Editar el CDI Beans EstatusController, inyectar CDI Beans Globales,crear el método init() con la anotación @PostConstructor.


@Inject
   GestorImpresion gestorImpresion;

@PostConstruct
   public void init() {
       //nomnbre de la pagina a retornar
       globales.setUltimapagina("estatusinsert");
      // encontrado = false;
       if (globales.getEstatus().getIdestatus() != "") {
           estatus = globales.getEstatus();
       //    encontrado = true;
       }
   }




  1. Crear CDI EstatusSearchController.java que usaremos para realizar las búsquedas.


  • Desde menú File, seleccione New
  • en Categories, seleccione Java Server Faces
  • en File Types, seleccione JSF ManagedBeans
  • Class Name: EstatusSearchController
  • Package com.avbravo.scrumweb.controlller.net
  • Scope: ViewScoped


import com.avbravo.scrumweb.Estatus;
import com.avbravo.scrumweb.ejb.EstatusFacade;
import com.avbravo.scrumweb.generales.Globales;
import com.avbravo.scrumweb.generales.ResourcesFiles;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;


@Named
@ViewScoped
public class EstatusSearchController implements Serializable{

   @Inject
   EstatusFacade estatusFacade;
   @Inject
   ResourcesFiles rf;
   @Inject
   Globales globales;
   Estatus selected = new Estatus();
   private List<Estatus> filtered;
   List<Estatus> estatusList;

   private String nombreestatus;
   private String idestatus;
   private String esinicial;

   private Boolean usarlike = false;

   public String getIdestatus() {
       return idestatus;
   }

   public void setIdestatus(String idestatus) {
       this.idestatus = idestatus;
   }

   public String getEsinicial() {
       return esinicial;
   }

   public void setEsinicial(String esinicial) {
       this.esinicial = esinicial;
   }

   public List<Estatus> getFiltered() {
       return filtered;
   }

   public void setFiltered(List<Estatus> filtered) {
       this.filtered = filtered;
   }

   /**
    * Creates a new instance of EstatusDataController
    */
   public Estatus getSelected() {
       return selected;
   }

   public void setSelected(Estatus selected) {
       this.selected = selected;
   }

   public EstatusSearchController() {
       estatusList = new ArrayList<>();

   }

   public List<Estatus> getEstatusList() {
       return estatusList;
   }

   public void setEstatusList(List<Estatus> estatusList) {
       this.estatusList = estatusList;
   }

   public String getNombreestatus() {
       return nombreestatus;
   }

   public void setNombreestatus(String nombreestatus) {
       this.nombreestatus = nombreestatus;
   }

   public Boolean getUsarlike() {
       return usarlike;
   }

   public void setUsarlike(Boolean usarlike) {
       this.usarlike = usarlike;
   }

   @PostConstruct
   public void init() {

   }

   public void iniciar() {
       estatusList = estatusFacade.getEstatusList();
   }

   public void iniciar(String value) {
       estatusList = estatusFacade.findByEsinicial(value);
   }

   public String buscar() {
       if (!usarlike) {
           estatusList = estatusFacade.findByEstatus(nombreestatus);
       } else {
           estatusList = estatusFacade.findByEstatusLike(nombreestatus);
       }

       return "";
   }

   public String buscarEsInicial() {

       estatusList = estatusFacade.findByEsinicial(esinicial);
       return "";
   }

   public String buscarIdEstatusList() {

       estatusList = estatusFacade.findByIdEstatusList(idestatus);
       return "";
   }

   public String showAll() {
       estatusList = estatusFacade.findAll();
       return "";
   }

   public String retornar() {
       globales.setEstatus(selected);
       return globales.getUltimapagina();
   }

}



  1. Editar estatusinsert.xml, agregamos un boton para buscar, uno para editar y otro para eliminar, ademas de un diálogo donde se confirmará si se eliminara o no el registro.  

  • Colocar el id=”form” para el form principal
<h:form rendered="#{menuBeans.estatusCrear}" id="form">
  • Indicar el alto y ancho del dialogo
height="175"  width="400"

<p:dialog visible="true" header="#{app['form.estatusnew']}" closable="true"
                                 height="175"  width="400"
        showEffect="clip" hideEffect="fade"   
         widgetVar="estatusinsertDialog">



  • Agregamos panelGroup con el botón buscar en el inputText estatus

  <h:outputLabel value="#{msg.idestatus}" for="idestatus" />
   <h:panelGroup>
             <h:inputText id="idestatus" value="#{estatusController.estatus.idestatus}" title="#{msg.idestatus}" required="true" requiredMessage="#{msg.idestatus} #{app['info.required']}"/>
            <p:commandButton immediate="true"   icon="ui-icon-search"  action="estatussearch"/>
   </h:panelGroup>


  • Agregar los botones de editar , imprimir y eliminar en el <f:facet name="footer">
             <f:facet name="footer">
                      <p:commandButton icon="ui-icon-disk" update="panel,growl"                                                    
rendered="#{menuBeans.estatusCrear}"
                                       action="#{estatusController.save()}"/>
                      <p:commandButton id="button_edit"
                                      update="form,growl"
rendered="#{menuBeans.estatusEditar}"
                                      icon="ui-icon-pencil" action="#{estatusController.edit()}"/>
                       <p:commandButton  id="printButton"
                                      action="#{estatusController.imprimir()}"
                                     icon="ui-icon-print" ajax="false" />
                       <p:commandButton  id="button_delete" update="form,growl" icon="ui-icon-trash"
rendered="#{menuBeans.estatusEliminar}"
                               onclick="PF('confirmationwidgetVar').show();" type="button" />
            </f:facet>










  • Agregar el diálogo para confirmar la eliminación debajo del otro diálogo

<p:dialog id="confirmDialog" modal="false"  header="Delete"  widgetVar="confirmationwidgetVar">
                           <h:panelGrid columns="2">
                               <p:outputLabel value="#{msg.estatus}"/>
                               <p:outputLabel value="#{estatusController.estatus.estatus}"/>

                           </h:panelGrid>

                           <f:facet name="footer">
                               <p:commandButton id="removeButton" value="si"
                                                update="form,growl"
                                                oncomplete="PF('confirmationwidgetVar').hide();"
                                                actionListener="#{estatusController.delete()}" />

                               <p:commandButton id="cancelButton" value="no" onclick="PF('confirmationwidgetVar').hide()" type="button" />
                           </f:facet>
                       </p:dialog>






















  1. Crear la página estatussearch.xhtml, usaremos un diálogo , donde colocaremos inputText para cada atributo y los commandButton para realizar las operaciones de búsqueda, los resultados los mostraremos en un datatable para que se seleccione el registro adecuado.

Ahora creamos un Facelets Template Client
  • Desde menú File, seleccione New
  • en Categories, seleccione Java Server Faces
  • en File Types, seleccione Facelets Template Client
  • En File Name: estatussearch
  • Folder colocamos /page/estatus/
  • Template seleccionamos template.xhtml

Pasos:
  1. Comentamos las opciones del menú
  2. Agregar view,form, growl, messages, y un dialogo global
  3. Agregamos un panelGrid con los atributos que deseamos usar para buscar y un botón al lado de cada uno
  4. Creamos un dataTable que contendrá el resultado de la búsqueda con un botón para seleccionar la fila adecuada. Con dos botones, retornar y mostrar todos.
Agregamos en el    <ui:define name="center">
<f:view>
<h:form id="form" rendered="#{menuBeans.estatusListar}">
<p:messages autoUpdate="true"/>
<p:growl id="growl"/>
<p:dialog  header="search"
                                  closable="true" showEffect="clip"
                                  visible="true"
                                  hideEffect="fade"                                 
                                  height="235"  width="550"
                                  widgetVar="searchDialogWidgetVar">
                           <p:ajax event="close" update="growl"  listener="#{loginBean.irInicio()}"/>  

Colocar un panelGrid colocamos los componentes y los botones de buscar.

<h:panelGrid columns="2">
                               
                               <h:outputLabel value="#{app['form.estatussearch']}" />
                               <h:outputLabel value=""/>
                              
                               <h:outputLabel value="#{msg.idestatus}" for="idestatus" />
                               <h:panelGroup>
                                   <h:inputText id="idestatus" value="#{estatusSearchController.idestatus}" title="Idestatus" />
                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscarIdEstatusList()}"/>
                               </h:panelGroup>
                               
                               <h:outputLabel value="#{msg.estatus}" for="estatus" />
                               <h:panelGroup>
                                   <h:inputText  id="estatus" value="#{estatusSearchController.nombreestatus}" title="#{msg.estatus}" />

                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscar()}"/>
                                   <h:outputLabel value="Like"  />
                                   <p:selectBooleanCheckbox   value="#{estatusSearchController.usarlike}" />  
                               </h:panelGroup>

                               <h:outputLabel value="#{msg.esinicial}" for="esinicial" />
                               <h:panelGroup>
                                   
                                   <p:selectOneMenu id="esinicial" value="#{estatusSearchController.esinicial}"
                                                    requiredMessage="#{msg.esinicial} #{app['info.notnull']}">
                                       <f:selectItem itemLabel="#{app['boton.yes']}" itemValue="si" />
                                       <f:selectItem itemLabel="#{app['boton.no']}" itemValue="no" />
                                   </p:selectOneMenu>
                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscarEsInicial()}"/>
                               </h:panelGroup>
                               <f:facet name="footer">

                               </f:facet>
                           </h:panelGrid>


Agregamos un dataTable basado en estatusSearchController,
  • colocamos dos botones uno para retornar a la página que lo invoco y otro para mostrar todos los registros.
  • Una columna contendrá un botón de selección. Y en el header colocamos el botón de regresar y un botón para mostrar todo.
  • Colocar el id=”datatable”, rows=”7”, utilizar los mensajes de los archivos properties.
  • Colocamos dos botones en el header, retornar y mostrar todo.
  • Cambiar de <h:datatable> y <h:columns> a <p:datatable> y <p:columns>
  <p:dataTable id="datatable" rows="7" value="#{estatusSearchController.estatusList}" var="item">
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Idestatus"/>
                                   </f:facet>
                                   <h:outputText value="#{item.idestatus}"/>
                               </p:column>
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Estatus"/>
                                   </f:facet>
                                   <h:outputText value="#{item.estatus}"/>
                               </p:column>
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Esinicial"/>
                                   </f:facet>
                                   <h:outputText value="#{item.esinicial}"/>
                               </p:column>
                               <p:column >  
             <p:commandButton id="selectButton" update=":form:display"
oncomplete="PF('widgetVarSearch').show()" icon="ui-icon-search" title="View">  
                                       <f:setPropertyActionListener value="#{item}" target="#{estatusSearchController.selected}" />  
             </p:commandButton>  
                               </p:column>
                               <f:facet name="header">
<p:commandButton icon="ui-icon-circle-arrow-w"  action="#{estatusSearchController.retornar()}"/>
<p:commandButton value="All" update ="datatable" action="#{estatusSearchController.showAll()}"/>
                               </f:facet>
                           </p:dataTable>

Cambiamos los textos fijos para usar las etiquetas de los archivos de propiedades.






Agregamos un diálogo debajo del datatable

<p:dialog header="#{app['dialog.search']}" widgetVar="widgetVarSearch" resizable="false" id="searchDialog"  
                                 showEffect="fade" hideEffect="explode"
                                 height="135"  width="250"
                                 modal="false">  

                           <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                               <h:outputLabel value="#{msg.estatus}" for="idestatus" />
                               <h:outputLabel value="#{estatusSearchController.selected.estatus}" />

                               <f:facet name="footer">

                                   <p:commandButton ajax="false"  value="#{app['boton.return']}" action="#{estatusSearchController.retornar()}"/>

                               </f:facet>
                           </h:panelGrid>  

                       </p:dialog>  



Código de estatussearch.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:ui="http://xmlns.jcp.org/jsf/facelets"
     xmlns:h="http://xmlns.jcp.org/jsf/html"
     xmlns:f="http://xmlns.jcp.org/jsf/core"
     xmlns:p="http://primefaces.org/ui">

   <body>

       <ui:composition template="./../../template.xhtml">
           <!--
                       <ui:define name="top">
                           top
                       </ui:define>
           
                       <ui:define name="bottom">
                           bottom
                       </ui:define>
           
                       <ui:define name="left">
                           left
                       </ui:define>
           -->
           <ui:define name="center">
               <f:view>
                   <h:form id="form" rendered="#{menuBeans.estatusListar}">
                       <p:messages autoUpdate="true"/>
                       <p:growl id="growl"/>
                       <p:dialog  header="search"
                                  closable="true" showEffect="clip"
                                  visible="true"
                                  hideEffect="fade"                                 
                                  height="235"  width="550"
                                  widgetVar="searchDialogWidgetVar">
                           <p:ajax event="close" update="growl"  listener="#{loginBean.irInicio()}"/>  

                           <h:panelGrid columns="2">
                               
                               <h:outputLabel value="Search:"  />
                               <h:outputLabel value=""/>
                              
                               <h:outputLabel value="#{msg.idestatus}" for="idestatus" />
                               <h:panelGroup>
                                   <h:inputText id="idestatus" value="#{estatusSearchController.idestatus}" title="Idestatus" />
                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscarIdEstatusList()}"/>
                               </h:panelGroup>
                               
                               <h:outputLabel value="#{msg.estatus}" for="estatus" />
                               <h:panelGroup>
                                   <h:inputText  id="estatus" value="#{estatusSearchController.nombreestatus}" title="Estatus" />

                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscar()}"/>
                                   <h:outputLabel value="Like"  />
                                   <p:selectBooleanCheckbox   value="#{estatusSearchController.usarlike}" />  
                               </h:panelGroup>

                               <h:outputLabel value="#{msg.esinicial}" for="esinicial" />
                               <h:panelGroup>
                                   
                                   <p:selectOneMenu id="esinicial" value="#{estatusSearchController.esinicial}"
                                                    requiredMessage="#{msg.esinicial} #{app['info.notnull']}">
                                       <f:selectItem itemLabel="#{app['boton.yes']}" itemValue="si" />
                                       <f:selectItem itemLabel="#{app['boton.no']}" itemValue="no" />
                                   </p:selectOneMenu>
                                   <p:commandButton  icon="ui-icon-search"  update=":form:datatable" action="#{estatusSearchController.buscarEsInicial()}"/>
                               </h:panelGroup>
                               <f:facet name="footer">

                               </f:facet>
                           </h:panelGrid>

                           <p:dataTable id="datatable" rows="7" value="#{estatusSearchController.estatusList}" var="item">
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Idestatus"/>
                                   </f:facet>
                                   <h:outputText value="#{item.idestatus}"/>
                               </p:column>
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Estatus"/>
                                   </f:facet>
                                   <h:outputText value="#{item.estatus}"/>
                               </p:column>
                               <p:column>
                                   <f:facet name="header">
                                       <h:outputText value="Esinicial"/>
                                   </f:facet>
                                   <h:outputText value="#{item.esinicial}"/>
                               </p:column>
                               <p:column >  
                                   <p:commandButton id="selectButton" update=":form:display" oncomplete="PF('widgetVarSearch').show()" icon="ui-icon-search" title="View">  
                                       <f:setPropertyActionListener value="#{item}" target="#{estatusSearchController.selected}" />  
                                   </p:commandButton>  
                               </p:column>
                               <f:facet name="header">
                                   <p:commandButton icon="ui-icon-circle-arrow-w"  action="#{estatusSearchController.retornar()}"/>
                                   <p:commandButton value="All" update ="datatable" action="#{estatusSearchController.showAll()}"/>
                               </f:facet>
                           </p:dataTable>



                       </p:dialog>

                       <p:dialog header="#{app['dialog.search']}" widgetVar="widgetVarSearch" resizable="false" id="searchDialog"  
                                 showEffect="fade" hideEffect="explode"
                                 height="135"  width="250"
                                 modal="false">  

                           <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                               <h:outputLabel value="#{msg.estatus}" for="idestatus" />
                               <h:outputLabel value="#{estatusSearchController.selected.estatus}" />

                               <f:facet name="footer">

                                   <p:commandButton ajax="false"  value="#{app['boton.return']}" action="#{estatusSearchController.retornar()}"/>

                               </f:facet>
                           </h:panelGrid>  

                       </p:dialog>  
                   </h:form>
               </f:view>

           </ui:define>

       </ui:composition>

   </body>
</html>
















Comments

dafecesa said…
HOLA UNA PREGUNTA PUEDES COMPARTIR LA BASE DE DATOS PARA TRABAJARLO LOCALMENTE SALUDOS
Arvind said…
Nice post. Thanks

Popular posts from this blog

Apache NetBeans

Apache NetBeans
https://wiki.apache.org/incubator/NetBeansProposal

Si, algo que se esperaba desde hace muchos años, una liberación de NetBeans, para convertirlo en un IDE más abierto, y que permita mayor contribución de la comunidad y de otras empresas, ya inicio su primera etapa en la incubadora de la Fundación Apache.
Las implicaciones que esto conlleva son múltiples por una parte esta la evolución de NetBeans, al permitir que más contribuyentes puedan aportar a sus mejoras, también garantiza que aquellas instituciones no sientan que es una sola organización la que controla la evolución. A las comunidades les permite sentirse que participan de un proyecto con todas las garantías que ofrece la Fundación Apache.

Muchos pensaran que Oracle esta dejando morir el proyecto, la realidad es diferente, hay muchos ingenieros que están participando del proyecto en la fundación Apache.
Es una noticia excelente para los desarrolladores, instituciones, empresas que utilizan NetBeans , se estima qu…

Un ejemplo sencillo de Refactorización y Genericos

Un ejemplo sencillo de Refactorización y Genericos

public class Refactorizador<K, V> {

    public V copyFromBeans(K k, V v) {
        try {
            Class claseK = k.getClass();
            Class claseV = v.getClass();

            Method[] metodosK = claseK.getMethods();

            for (Method method : metodosK) {
                if (isGetter(method)) {
                    Method metodoGetK = claseK.getDeclaredMethod(method.getName());
                    Method metodoSetV = claseV.getDeclaredMethod(changeGetBySet(method.getName()), method.getReturnType());
                    metodoSetV.invoke(v, metodoGetK.invoke(k));
                }

            }

        } catch (Exception e) {
            System.out.println("refactorizador() " + e.getLocalizedMessage());
        }
        return v;
    }

     public  boolean isGetter(Method method) {

        if (!method.getName().startsWith("get")) {
            return false;
        }
        if (method.getName().startsWith("getCla…

FileUpload con Primefaces

FileUpload con Primefaces

Si queremos subir imagenes a nuestra aplicación usaremos el componente FileUpload Debemos realizar los siguientes pasos:
Agregar al archivo web.xml

   <filter>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <filter-class>            org.primefaces.webapp.filter.FileUploadFilter        </filter-class>    </filter>    <filter-mapping>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <servlet-name>Faces Servlet</servlet-name>    </filter-mapping>



Crear dentro de resources el directorio donde deseamos almacenar las imagenes En este ejemplo: resources/fotos/clinicas y agregue una imagen llamada fotos.png que se usará como imagen inicial.



En JSFUtil u otro @Named Beans que usemos agregamos tres métodos uno para obtener el path de la aplicación web , otro para obtener el path relativo a /fotos/clinicas y el otro para copiar los archivos. /*