Componente autocomplete

Componente autocomplete

A veces no queremos que nuestro código sea muy extenso y usamos componentes

  • se pasa el converter como parámetro

  • se pasa el metodo complete

  • se indican los labeltip1 hasta labeltip6

En la pagina list.xhtml

  <p:outputLabel value="#{msg['field.idrol']}"/>
   <e:autocompleterol listener="#{rolController.handleAutocompleteOfListXhtml}"
                       value="#{rolController.rolSelected}"
                       itemLabel="#{p.idrol}"
                       field="idrol"
                       converter="#{rolConverter}"
                       completeMethod="#{rolController.rolServices.complete}"
                       labeltip1="#{msg['field.idrol']} #{p.idrol}"
                       labeltip2="#{msg['field.rol']} #{p.rol}"
                       update=":form:dataTable"/>

En una pagina new.xthml / view.xhtml de un formulario Usuario

  • Múltiple

  • o Simple

  <e:autocompleterol listener="#{usuarioController.handleSelect}"
                      value="#{usuarioController.rolList}"
                      itemLabel="#{p.rol}"
                      dropdown="true"
                      multiple="true"
                      required="true"
                      minQueryLength="0"
                      field="idrol"                                                                                                                                                      
                      converter="#{rolConverter}"
                      completeMethod="#{rolController.rolServices.complete}"
                      labeltip1="#{msg['field.idrol']} #{p.idrol}"
                      labeltip2="#{msg['field.rol']} #{p.rol}"   
    />

Controller

  • Inyectar el services

  @Inject
    RolServices rolServices;
  • Método para invocar desde los list.xtml para busquedas

handleAutocompleteOfListXhtml(SelectEvent event)
   public void handleAutocompleteOfListXhtml(SelectEvent event) {
        try {
         rolList.removeAll(rolList);
            rolList.add(rolSelected);
            rolFiltered = rolList;
            rolDataModel = new RolDataModel(rolList);

            lookupServices.setIdrol(rolSelected.getIdrol());
            loginController.put("searchro", "idrol");

        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(),nameOfMethod(), e.getLocalizedMessage());
        }
    }// </editor-fold>
  • handleSelect para invocar desde los new.xhtml y view.xhtml

  public void handleSelect(SelectEvent event) {
        try {


        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(),nameOfMethod(), e.getLocalizedMessage());
        }
    }// </

RolServices.java

@Stateless
public class RolServices {

    @Inject
    RolRepository repository;
    @Inject
    UsuarioRepository usuarioRepository;
    List<Rol> rolList = new ArrayList<>();

// <editor-fold defaultstate="collapsed" desc="complete">
    public List<Rol> complete(String query) {
        List<Rol> suggestions = new ArrayList<>();
        try {
            suggestions = repository.complete(query);
        } catch (Exception e) {
            JsfUtil.errorMessage("complete() " + e.getLocalizedMessage());
        }
        return suggestions;
    }// </editor-fold>

    }

Componente

Para invocar el método handleSelect, definimos method-signature "void handleSelect(org.primefaces.event.SelectEvent)"

<?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:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <composite:interface >
        <composite:attribute name="value" />
        <composite:attribute name="disabled" default="false" />
        <composite:attribute name="multiple" default="false" />
        <composite:attribute name="dropdown"  default="false"/>
        <composite:attribute name="minQueryLength"  default="1"/>
        <composite:attribute name="itemLabel" />
        <composite:attribute name="update" />

        <composite:attribute name="rendered"/>
        <composite:attribute name="field"/>
        <composite:attribute name="converter"/>
          <composite:attribute name="columnpaneltip" default="1"/>
        <composite:attribute name="labeltip1" />

        <composite:attribute name="labeltip2" default=""/>
        <composite:attribute name="labeltip3" default=""/>
        <composite:attribute name="labeltip4" default=""/>
        <composite:attribute name="labeltip5" default=""/>
        <composite:attribute name="labeltip6" default=""/>

        <composite:attribute name="fromstart" default="true"/>
        <composite:attribute name="required" default="false" />
        <composite:attribute name="size"  default="25"/>
        <composite:attribute name="listener"  
                             method-signature="void handleSelect(org.primefaces.event.SelectEvent)" />
        <composite:attribute name="completeMethod"  
                            method-signature="java.util.List complete(java.lang.String)" />

    </composite:interface>
    <composite:implementation>

        <p:autoComplete     dropdown="#{cc.attrs.dropdown}" 
                            disabled="#{cc.attrs.disabled}"    
                            scrollHeight="250"   
                            size="#{cc.attrs.size}" 
                            multiple="#{cc.attrs.multiple}" 
                            emptyMessage="#{app['info.nohayregistros']}" 
                            value="#{cc.attrs.value}"  
                            completeMethod="#{cc.attrs.completeMethod}"    
                            var="p"
                            required="#{cc.attrs.required}"
                            itemLabel="#{cc.attrs.itemLabel}"
                            itemValue="#{p}" forceSelection="true"> 
            <f:converter binding="#{cc.attrs.converter}"/>
            <f:attribute name="field" value="#{cc.attrs.field}"/>
            <f:attribute name="fromstart" value="#{cc.attrs.fromstart}"/>
            <f:attribute name="fielddropdown" value="#{cc.attrs.dropdown}"/>
            <f:attribute name="fieldminquerylength" value="#{cc.attrs.minQueryLength}"/>
            <p:ajax event="itemSelect" listener="#{cc.attrs.listener}"
                    update="#{cc.attrs.update}" />  
            <f:facet name="itemtip">
                <h:panelGrid columns="#{cc.attrs.columnpaneltip}" cellpadding="5">
                    <h:outputText value="#{cc.attrs.labeltip1}"/>
                    <h:outputText value="#{cc.attrs.labeltip2}" />
                    <h:outputText value="#{cc.attrs.labeltip3}" />
                    <h:outputText value="#{cc.attrs.labeltip4}" />
                    <h:outputText value="#{cc.attrs.labeltip5}" />
                    <h:outputText value="#{cc.attrs.labeltip6}" />


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

    </composite:implementation>

</html>

Last updated