Olá pessoal,
Muita gente tem falado sobre a dificuldade de implementar componentes usando JSF. Resolvi então montar um pequeno tutorial sobre como criar componentes utilizando Facelets e JSF. Para o exemplo utilizei JSF com RichFaces e Facelets.
Para este exemplo estou considerando que seu projeto JSF já está configurado utilizando as tecnologias descritas acima.
A primeira coisa a ser feita é adicionar o seguinte trecho no arquivo web.xml.
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/facelets/facelets.taglib.xml</param-value>
</context-param>
Depois de definido no arquivo web.xml deve-se então criar o arquivo "facelets.taglib" assim como mostrado abaixo.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<facelet-taglib>
<namespace>http://facelets.bionexo.com</namespace>
<tag>
<tag-name>inputText</tag-name>
<source>../../taglibs/inputText.xhtml</source>
</tag>
</facelet-taglib>
Criamos então o arquivo inputText.xhtml assim como descrito abaixo:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
xmlns:rich="http://richfaces.org/rich">
<ui:composition>
<c:if test="${empty required}">
<c:set var="required" value="false" />
</c:if>
<c:if test="${empty rendered}">
<c:set var="rendered" value="true" />
</c:if>
<c:if test="${not empty label}">
<c:choose>
<c:when test="${required}">
<h:outputLabel value="${label} *:" for="${id}"
rendered="${rendered}" />
</c:when>
<c:otherwise>
<h:outputLabel value="${label}:" for="${id}"
rendered="${rendered}" />
</c:otherwise>
</c:choose>
</c:if>
<h:panelGroup>
<h:inputText id="${id}" value="${value}" onkeypress="${onkeypress}"
onkeyup="${onkeyup}" onblur="${onblur}" required="${required}"
maxlength="${maxlength}" rendered="${rendered}"
readonly="${readonly}" disabled="${disabled}" />
<rich:message id="mensagem${id}" for="${id}" style="color:darkred;"
rendered="${(required or message) and rendered}" />
</h:panelGroup>
</ui:composition>
</html>
Note que utilizamos acima a taglib c para setar os valores default para as propriedades utilizadas no componente.
Para utilizar o componente então é simples. Basta primeiro importar a taglib que acabamos de criar com adicionando o seguinte trecho no início do nosso arquivo xhtml
xmlns:comp="http://facelets.bionexo.com"
E aonde queremos utilizar simplesmente chamamos o componente, assim como mostrado abaixo:
<comp:inputText id="razaoSocial"
label="#{msgs.campo_geral_razao_social}"
value="#{empresaBean.objetoPesquisa.dadosEmpresa.razaoSocial}"
maxlength="100" />
É isto aí pessoal. Boa sorte com os novos componentes e qualquer dúvida perguntem.
