Personalizar un <p:autocomplete> en Java Server Faces para JMoordb
En algunas ocasiones deseamos personalizar componentes Java Server Faces nos ofrece esa facilidad.
Pasos:
En algunas ocasiones deseamos personalizar componentes Java Server Faces nos ofrece esa facilidad.
Pasos:
- Creamos un composite
- Personalizamos el autocomplete
- Agregarlo a la pagina Java Server Faces
Crear el componente dentro de la carpeta resources/extension
Clic derecho seleccionar --> New --> Java Server Faces --> JSF Composite Component
indicamos
- File Name: autocomple
- Folder: resources/extension
Se crea el componente que vamos a editar
Agregamos
- converter: para el converter
- completeMethod lo usaremos para un List<T> que sera en base al entity
<composite:attribute name="completeMethod"
method-signature="java.util.List complete(java.lang.String)" />
Código del componente
<?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>
IMPLEMENTARLO
- En la pagina .xhtml, agreamos en namespace
<ui:composition template="/layout/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:a="http://xmlns.jcp.org/jsf/composite/avbravo"
xmlns:e="http://xmlns.jcp.org/jsf/composite/extensions">
- Agregamos el componente
<p:outputLabel value="#{msg['field.idrol']}"/>
<e:autocomplete listener="#{rolController.handleSelect}"
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"/>
CONTROLLER
RolController.java
- Inyectar
@Inject
RolServices rolServices;
//Métodos set/get
- Crear metodo handleSelect
public void handleSelect(SelectEvent event) {
try {
} catch (Exception e) {
errorServices.errorMessage(nameOfClass(),nameOfMethod(), e.getLocalizedMessage());
}
}
SERVICES
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>
}
Comments