quinta-feira, 5 de fevereiro de 2009

Criando componentes com JSF e Facelets

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.

9 comentários:

Jefim disse...

Uma dúvida consigo fazer auto-complete utilizando o eclipse das tags criadas?

flw

Samuel Martins Delfim disse...

Ainda não consegui realizar o auto-complete. Se alguém sabe como realizar por favor avisem.

0scar Costa disse...

Acredito que o auto-complete seja feito através do arquivo tld, pelo menos é assim que funciona no IntelliJ IDEA. Então basta definir o tld para a tag criada, mesmo que esta for somente utilizada com facelets.

jmsousa disse...

Sabes como utilizar FaceletFactory factory .

Estava a tentar contruir um CMS com Facelet .

Tenho varios Componentes (Html,Imagens,Links,etc) ,e estou com duvidas como posso por na pagina estes componentes dinamicamente.i.e a pagina inicialmente tem :

>div id="top" class="top"<
>ui: insert name="top"<
Top
>/ui:insert>
>/div>
>div id="left"<
>ui: insert name="left"<
Left
>/ui: insert<
>/div>
>div id="content" class="left_content"<
>ui: insert name="content"<
Content
>/ui: insert<
>/div<


Depois do Utilizador escolher:
Deveria ficar:

>ui:define name="content"<
>ui: include src="/html.xhtml"<
>ui: include src="/Links.xhtml"<
>ui: include src="/imag.xhtml"<

etc....


>/ui:define<

Obrigado.

Paradigmas disse...

Bom dia

Primeiramente parabéns Samuel exelente.
Segundo, quanto a autocomplet, fiz há um tempo atraz com o .tld do jsf, sem a descrition da class. Se não conseguirem me enviem um email que faço um exemplo... certo que não é o certo, mas funciona.

Unifeg-Wanderlei_Magri disse...

Opa, muito bom artigo, parabens, só uma dúvida voce sabe se tem como usar as mascaras do jquery no proprio xhtml do componente? E se tem como seria?To tentando aqui mas sem exito,flw

Samuel Martins Delfim disse...
Este comentário foi removido pelo autor.
Samuel Martins Delfim disse...

Tente implementar algom como mostrado em http://www.guj.com.br/posts/list/93498.java.

Qualquer problema avise...

Camilo lopes disse...

legal o post. Para auto-complete no eclipse com as tags de facelets eu estou usando o Jboss tools. coloquei ate um video no meu blog como instalar a ferramenta: http://www.camilolopes.com.

Parabens! samuel.