Facelets � Visão Geral Conceitos, Utilização e Criação de Componentes

Facelets � Vis�o Geral

Conceitos, Utiliza��o e Cria��o de Componentes

Julio Cezar F. Oliveira
http://sites.google.com/site/joliveiranet/home/Facelets.pdf

D� os primeiros passos na utiliza��o do framework que ir� se tornar o mecanismo padr�o para a descri��o de p�ginas em aplica��es Web com JSF.

Introdu��o

O Facelets � uma linguagem de descri��o de p�ginas (PDL � Page Description Language) criada especificamente para JSF. Ele estabelece uma linguagem de templates que suporta a cria��o da �rvore de componentes das telas JSF, o que permite o reuso de padr�es de telas e a composi��o de componentes JSF para formar novos componentes.

Java Server Faces (JSF) � um framework que possibilita o uso de um modelo de componentes para a defini��o e renderiza��o de telas de aplica��es Web.

Quando Java Server Faces (JSF) foi criado, a inten��o era utilizar JSP como a principal tecnologia para criar p�ginas, uma vez que este j� era um padr�o na comunidade web.

A id�ia foi simplificar a aprova��o de Java Server Faces usando uma linguagem de tags familiar que j� possu�a uma grande aceita��o em meio � comunidade Java.

Infelizmente, JSP e JSF n�o s�o naturalmente complementares. JSP � usado para criar conte�do est�tico ou din�mico na web, mas n�o para criar componentes em �rvores. Seus elementos s�o processados em uma p�gina de cima para baixo com o objetivo fundamental de criar uma resposta a um pedido. JSF, por�m, tem um ciclo de vida mais complexo em que a gera��o do componente e a sua renderiza��o acontecem em fases claramente separadas.

O Facelets surgiu como uma alternativa ao JSP para facilitar a constru��o das interfaces JSF, tornando essa tarefa mais simples e mais produtiva.

Este artigo tem o objetivo de mostrar os recursos do Facelets a partir da constru��o de uma aplica��o simples. Al�m disso, ser�o apresentados os fundamentos necess�rios para a constru��o de componentes utilizando essa tecnologia.

Por que usar Facelets

Existem v�rias raz�es para usar Facelets para criar p�ginas JSF:

� Primeiro, Facelets n�o depende de um container web, assim � poss�vel usar JSF sem ter que usar o JEE ou um container que j� tenha o JSP.

� Facelets pode trabalhar com qualquer implementa��o e vers�o do JSF.

� Al�m disso, Facelets fornece templating, tornando poss�vel reutilizar o c�digo para simplificar o desenvolvimento e manuten��o de aplica��es de grande escala.

� Permite a cria��o de componentes leves, que s�o f�ceis de desenvolver, em compara��o com os componentes JSF puros.

� Outro ponto positivo � que Facelets tem suporte a Unified Expression Language (EL), incluindo o suporte para fun��es EL e valida��o EL em tempo de compila��o. A EL tem as caracter�sticas da JSP EL e acrescenta mais capacidades, tais como avalia��o de express�es, JSTL iteration tags, e invoca��o de m�todos dentro de uma express�o.

� Facelets tamb�m fornece um relat�rio preciso de erros, mostrando informa��es detalhadas sobre a linha onde ocorre a exce��o.

� � poss�vel usar o atributo jsfc (que � o equivalente ao jwcid do Tapestry) para fornecer integra��o com editores HTML existentes.

Outro ponto que deve ser levado em considera��o � que Facelets � uma tecnologia de c�digo aberto e uso livre, sob a licen�a CDDL 1.0 que em breve ser� incorporado ao JSF, tornando-se ent�o o mecanismo preferencial para a descri��o da camada de apresenta��o.

O que s�o templates?

Ao longo do processo de desenvolvimento de uma aplica��o Web, percebe-se que v�rias p�ginas t�m uma estrutura semelhante. Visando promover o reuso desta estrutura comum e facilitar a futura manuten��o do padr�o visual do sistema, s�o utilizados um ou mais modelos de p�ginas (templates).

Um template define um desenho padr�o para as telas e �reas substitu�veis para a troca de conte�do durante a renderiza��o da interface com o usu�rio.

Usando templates � poss�vel reunir alguns dos principais objetivos de desenvolvimento de aplica��es web. Templates permitem a reutiliza��o de c�digo, reduzindo assim, o tempo de desenvolvimento e os custos de manuten��o de uma aplica��o. Al�m disso, templates nos auxiliam na obten��o de uma apar�ncia comum em p�ginas que possuem uma estrutura semelhante.

Um template define pontos onde o conte�do pode ser substitu�do. O conte�do a ser usado nesses locais, � definido pelo cliente do template (Template Client). O Template define as diferentes �reas usando a tag <ui:insert>, e os clientes utilizam os modelos com as tags: <ui:component>, <ui:composition>, <ui:fragment>, ou <ui:decorate>. Veja a descri��o das principais custom tags do Facelets na Tabela 1.

Templating em Facelets n�o � limitado a apenas um n�vel. � poss�vel ter multin�veis, onde um cliente pode ser um template para outros clientes. Dessa forma, Facelets pode ser considerado um poderoso apoio na cria��o de aplica��es complexas.

Os templates de tela definidos em Facelets possibilitam o reuso e facilitam a manuten��o do layout e padr�o visual das interfaces web. Atualmente existem diversas op��es de Templating Frameworks, por�m a grande maioria n�o foi projetada para trabalhar com JSF, ou seja, eles n�o foram projetados para trabalhar com o ciclo de vida das requisi��es processadas pelo JSF. Os exemplos mais comuns s�o o Struts Tiles e o Sitemesh, ambos funcionam bem com Struts mas apresentam problemas com JSF.

Criando uma Aplica��o Web com JSF e Facelets

Criando um projeto JSF com a ajuda do Maven

Para agilizar o nosso trabalho, vamos usar o Apache Maven. O Maven, � uma ferramenta para gerenciamento e automa��o de projetos Java. Com ele � poss�vel gerenciar com mais facilidade as depend�ncias do projeto. Ele � similar ao Ant, mas � mais f�cil de ser configurado, pois � baseado em XML. O Maven utiliza uma constru��o conhecida como Project Object Model (POM). No arquivo pom.xml � descrito todo o processo de constru��o do projeto, suas depend�ncias com outros m�dulos e componentes e a sua sequ�ncia de constru��o. O download do Maven pode ser realizado a partir da p�gina do projeto: http://maven.apache.org/.

O Maven n�o possui instalador, basta descompactar o arquivo de distribui��o e acrescent�-lo ao Path (Maven_Home\bin).

Feito isso, vamos criar o nosso projeto.

Para essa tarefa, iremos utilizar um arqu�tipo do Maven que � um modelo pr�-definido que cria a estrutura b�sica necess�ria ao projeto. Os arqu�tipos que geram projetos JSF podem ser encontrados na seguinte p�gina: http://wiki.apache.org/myfaces/MyFaces_Archetypes_for_Maven.

Vamos criar o nosso projeto utilizando um archetype Maven.

1. Entre no prompt de comandos: clique no menu Iniciar e escolha o item de menu Run (Executar). Na janela que ir� aparecer, digite cmd e clique em Ok.

2. Entre no diret�rio do workspace do Eclipse: cd\Eclipse_Home\Workspace.

3. Use o comando do Maven para gerar o projeto: mvn archetype:generate -DarchetypeCatalog=http://myfaces.apache.org.

Ser� necess�rio fornecer algumas informa��es para gerar o projeto:

Choose archetype: digite 2 para escolher http://myfaces.apache.org.

groupID: digite helloFacelets para o nome do dom�nio.

artefactID: digite helloFacelets para o nome do projeto.

snapshot: tecle <Enter>

package: digite br.com.unitri.helloFacelets para o nome do pacote.

Tecle Y para confirmar.

O Maven criar� a estrutura do projeto e ir� baixar as depend�ncias.

4. No diret�rio criado, use o comando mvn eclipse:eclipse para gerar o projeto do Eclipse.
Todas as depend�ncias existentes no arquivo pom.xml que n�o forem encontradas no reposit�rio local do Maven ser�o baixadas.

5. Importe o projeto no Eclipse. No menu File, clique na op��o Import. Na janela que ir� aparecer, clique na pasta General selecione a op��o Existing Projects into Workspace. Clique no bot�o Next. Indique a pasta onde se encontra o projeto e clique em Finish.

6. Adicione a vari�vel M2_REPO no classpath, apontando para $HOME/.m2/repository.

7. Adicione as configura��es do wtp e do compilador no arquivo pom.xml. Veja a Listagem 1.

8. Adicione tamb�m as depend�ncias do JEE. Veja a Listagem 2.

9. Gere novamente o projeto (mvn eclipse:eclipse) e atualize a IDE do Eclipse, clicando com o bot�o direito no projeto / refresh.

10. Adicione o servidor Tomcat no Eclipse.

11. Rode a aplica��o (Run As, Run On Server).

O que o Maven fez por n�s

Ao abrir a aplica��o no Eclipse, podemos observar que o Maven baixou as bibliotecas necess�rias ao nosso projeto: os JARs do Facelets, a JSF Api e o MyFaces (uma da implementa��es JSF).

Al�m de baixar as depend�ncias, o Maven tamb�m se encarregou de criar os arquivos de configura��o. Um deles � o arquivo web.xml, que descreve como a aplica��o deve ser implantada. Nesse arquivo, tamb�m chamado deployment descriptor, foi inclu�do um par�metro de configura��o para indicar para o MyFaces que os arquivos de defini��o das telas ter�o a extens�o xhtml e n�o jsp.

<context-param>

<param-name>javax.faces.DEFAULT_SUFFIX</param-name>

<param-value>.xhtml</param-value>

</context-param>

Veja o conte�do do arquivo web.xml na Listagem 3.

Tamb�m foi gerado o arquivo faces-config.xml (example-config.xml, no exemplo criado pelo Maven), onde � feita a integra��o do Facelets ao JSF atrav�s da substitui��o do componente padr�o do JSF, chamado ViewHandler, por outro chamado FaceletsViewHandler. Este componente ficar� respons�vel pela cria��o da �rvore de objetos que representa a tela JSF a partir dos arquivos XHTML.

<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>

</application>

Veja o conte�do completo do arquivo faces-config.xml na Listagem 4.

Al�m dos arquivos de configura��o, o Maven criou um exemplo que servir� como base para a nossa aplica��o.

Custom Tags Suportadas pelo Facelets

Antes de iniciarmos a nossa aplica��o � importante conhecermos as principais tags que s�o suportadas atrav�s do Facelets:

� JSF Core e JSF HTML: O Facelets suporta todas as tags que instanciam os componentes JSF. Para acessar as tags dos components JSF � necess�rio adicionar a importa��o dos namespaces, conforme vemos a seguir:
http://java.sun.com/jsf/core
http://java.sun.com/jsf/html
Em geral, faz-se refer�ncia a estes namespaces utilizando-se os prefixos f e h respectivamente.
A descri��o detalhada das tags pode ser obtida a partir da url: http://java.sun.com/j2ee/javaserverfaces/reference/api/index.html.

� JSTL: O Facelets possui suporte parcial �s custom tags JSTL, restringindo o uso �s tags <c:if>, <c:forEach>, <c:choose>, <c:when>, <c:otherwise>, <c:catch>, <c:set> da biblioteca JSTL Core e todas as tags do pacote JSTL Functions. As demais tags n�o est�o dispon�veis.
Para acessar as tags JSTL � necess�rio fazer a importa��o dos seguintes namespaces:
http://java.sun.com/jstl/core
http://java.sun.com/jsp/jstl/functions
A descri��o detalhada das tags JSTL pode ser obtida a partir da url: http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html.

� Facelets Custom Tags: Para usar as tags Facelets � necess�rio adicionar o namespace http://java.sun.com/jsf/facelets. O prefixo ui � usado como padr�o para acessar as custom tags do Facelets. Veja a descri��o das principais tags Facelets na Tabela 1.

Cria��o de um template utilizando o Facelets

Em Facelets qualquer tela JSF no formato XHTML pode ser tratada como um template. Para tanto, basta que a tag <ui:insert> seja utilizada para definir as �reas substitu�veis que receber�o o conte�do de outras telas JSF. O exemplo na Listagem 5, implementa um template em Facelets que divide a tela nas seguintes �reas: um cabe�alho no topo da p�gina, uma regi�o de menu, o corpo da p�gina e um rodap�. Veja a Figura 1.

Observe que essas �reas foram definidas com a tag <ui:insert>, onde s�o informados o nome e o conte�do padr�o, veja o exemplo: <ui:insert name="header">Hello World - Facelets</ui:insert>.

Vamos criar o template para a nossa aplica��o. No Eclipse, entre no projeto criado anteriormente e localize o arquivo template.xhtml. Substitua o conte�do deste arquivo pelo c�digo definido na listagem 5.

Figura 1. �reas substitu�veis definidas no template usado como exemplo

Pode-se evitar o acesso direto aos arquivos de template armazenando-os dentro da pasta WEB-INF. Esses arquivos ficam protegidos sob o diret�rio WEB-INF porque s�o acessados pelo objeto FaceletsViewHandler, que executa no lado do servidor. O acesso aos arquivos de template armazenados nessa pasta acontece durante a renderiza��o da tela que utiliza o template.

Utiliza��o do template numa tela JSF

Dando prosseguimento ao processo de constru��o da nossa aplica��o, vamos criar uma tela JSF que utiliza o template gerado anteriormente. Ainda no Eclipse, localize o arquivo helloWorld.xhtml e substitua o seu conte�do pelo c�digo descrito na Listagem 6. Observe na Listagem 6 que estamos utilizando a tag <ui:composition> para definir qual tela ser� usada como template. Tamb�m � poss�vel observar que a tag <ui:define> � usada para definir um novo conte�do para a �rea que possui o nome boby. As demais �reas definidas no arquivo de template n�o s�o modificadas por esta tela JSF. O resultado ap�s a renderiza��o � uma tela onde a estrutura principal � obtida a partir do template e o corpo da tela � substitu�do pelo conte�do definido na tela JSF. Veja a Figura 2.

Durante a renderiza��o, o conte�do colocado fora ou entre as tags <ui:compositon> e <ui:define> � ignorado pelo Facelets. Somente o conte�do que est� dentro da tag <ui:define> � utilizado pelo Facelets durante a substitui��o do conte�do das �reas definidas no template.

Para visualizar o resultado, clique com o bot�o direito sobre o projeto e em seguida escolha a op��o Run As / Run on Server.

Figura 2. Resultado da renderiza��o da tela

Criando um componente simples usando Facelets

Para finalizarmos a nossa aplica��o, vamos criar um componente utilizando o Facelets. A fun��o do nosso componente � bastante simples. Ele receber� como par�metro a hora atual no formato inteiro e ir� determinar o per�odo do dia (cedo, tarde ou noite), para em seguida imprimir na tela as boas vindas ao usu�rio.

Vamos iniciar o desenvolvimento do componente informando a tag que ser� usada para imprimir as boas vindas ao usu�rio. Na pasta WEB-INF do projeto, crie um arquivo XML com o nome helloWorldComponents.taglib.xml e copie o c�digo que se encontra na Listagem 7.Observe na Listagem 7 que � informado o namespace que ser� usado para fazer refer�ncia ao componente. Al�m disso, tamb�m � feita a declara��o da tag, primeiro informando o nome e em seguida o arquivo que ser� usado para a defini��o da mesma.

Feito isso, devemos adicionar no arquivo web.xml a defini��o da biblioteca de tags. Veja a Listagem 8. Utilize ponto-e-v�rgula quando for necess�rio adicionar mais de um arquivo de defini��o de tags.

Em seguida, iremos criar o arquivo de defini��o do componente. Crie o arquivo imprimeBoasVindas.xhtml dentro da pasta WEB-INF e copie o c�digo da Listagem 9. Note que tudo o que est� dentro da tag <ui:composition> faz parte do componente.

Acrescente a propriedade hora no arquivo HelloWorldBacking.java (veja o c�digo na Listagem 10). Esse arquivo descreve o backing bean que est� sendo usado na nossa aplica��o.

Para concluir o nosso trabalho, vamos testar o componente acrescentando-o na aplica��o. Substitua o conte�do do arquivo page2.xhtml pelo conte�do definido na Listagem 11. Para utilizarmos o componente � necess�rio declaramos o namespace no �nicio do arquivo.

xmlns:hw="http://helloWorldComponents.com/facelets"

Em seguida basta chamar a tag imprimeBoasVindas passando a propriedade hora do backing bean como par�metro.

<hw:imprimeBoasVindas hora="#{helloWorldBacking.hora}"/><br/>

Tudo pronto para realizarmos o teste! Rode a aplica��o clicando com o bot�o direito sobre o projeto e em seguida escolha a op��o Run As / Run on Server. Entre com o seu nome e clique em Ok. O resultado dever� ser parecido com o que vemos na Figura2.

Figura 2. Resultado da renderiza��o da tela que faz uso do componente

O futuro do Facelets: o que vem por a�.

O Facelets ser� incorporado � especifica��o JSF 2.0 (JSR-314)

Segundo Ed Burns, engenheiro S�nior da Sun e l�der da especifica��o JSF 2.0, ser�o incorporadas as partes mais importantes do projeto do Facelets diretamente no JSF 2.0.

A especifica��o tamb�m ser� baseada no JSFTemplating;

O Facelets passar� por melhorias ao ser incorporado no JSF 2.0, onde ser�o incorporadas id�ias apresentadas no JSF Templating, outro framework que tamb�m n�o � baseado em JSP. O resultado ser� chamado de JSF Page Description Language e ir� possuir os melhores elementos do Facelets e do JSF Templating, mantendo a compatibilidade com Facelets.

Suportar� o registro de listeners, validators, converters em componentes visuais criados via XHTML

As principais mudan�as acontecer�o nos componentes compostos (componentes visuais definidos a partir de outros componentes visuais). O objetivo dos componentes compostos ser� criar um componente JSF verdadeiro utilizando principalmente o PDL, mas tamb�m classes UIComponent por tr�s do componente para lidar com aspectos comportamentais que s�o melhor tratados em c�digo Java. A vantagem disso � que os componentes PDL ser�o componentes reais, permitindo a aplica��o de listeners, conversores e validadores.

Conclus�o

Ao longo deste artigo foram apresentados os conceitos b�sicos do Facelets, o seu funcionamento e as vantagens na sua utiliza��o. Al�m disso, foi mostrada a constru��o passo a passo de uma aplica��o simples utilizando Facelets e os conceitos b�sicos da cria��o de componentes. Com essa aplica��o de exemplo mostramos como a utiliza��o de templates pode reduzir significativamente a complexidade no desenvolvimento e manuten��o das telas de uma aplica��o Web. Certamente esses s�o os pontos fortes dessa tecnologia que em breve far� parte da especifica��o JSF e ser� usada como linguagem padr�o para descri��o de telas.

Links

weblogs.java.net/blog/edburns/archive/2008/09/jsf_20_early_dr.html

Blog de Ed Burns, engenheiro s�nior da SUN, l�der da especifica��o de JSF 2.0, representada pela JSR 314.

jcp.org/aboutJava/communityprocess/edr/jsr314/

Rascunho da especifica��o do JSF 2.0

facelets.dev.java.net/nonav/docs/dev/docbook.html

Documenta��o para o desenvolvedor - Facelets - JavaServer Faces View Definition Framework

Facelets Custom Tag	Descri��o
<ui:composition>	A tag <ui:composition> � utilizada para encapsular conte�do que pode ser inclu�do em outras p�ginas Facelets.
<ui:component>	A tag <ui:component>, tem o mesmo comportamento que a tag <ui:composition>, por�m para cada componente ou fragmento contido na tag ser� criado um novo UIComponent diretamente na �rvore de componentes que representa a tela JSF.
<ui:debug>	A tag <ui:debug> � uma ferramenta muito �til no desenvolvimento de uma aplica��o. Com a combina��o Ctrl + Shift + <tecla de atalho> (D, por padr�o), � exibida uma janela pop-up que mostra o componente da �rvore e o escopo das vari�veis.
<ui:decorate>	A tag ui:decorate � semelhante � ui:composition, por�m n�o ignora o conte�do fora da tag.
<ui:define>	A tag <ui:define> um conte�do numa tela JSF (cliente de template) para uma �rea substitu�vel de um template. Pode ser usado dentro das tags <ui:composition> ou <ui:decorate>. Os nomes utilizados na defini��o da tag devem coincidir com os nomes utilizados nas tags <ui:insert> do template.
<ui:fragment>	A tag <ui:fragment> tem o mesmo comportamento <ui:decorate>, por�m cria uma nova inst�ncia de componente (UIComponent) para cada componente ou fragmento contido na tag.
<ui:include>	A tag <ui:include> pode ser usada para incluir outro arquivo no documento Facelet. � poss�vel incluir qualquer outro arquivo XHTML que define um Facelet como tamb�m um documento puro XHTML ou XML.
<ui:insert>	A tag <ui:insert> � usada para especificar um template em que as partes podem ser substitu�das por tags <ui:define> declaradas no cliente do template.
<ui:param>	A tag <ui:param> permite passar par�metros para outro Facelet inclu�do em uma tela atrav�s da tag <ui:include>. O par�metro pode conter uma string ou objeto.

Tabela 1. Facelets Custom Tags

Listagem 1. Configura��es do wtp e do compilador - Arquivo pom.xml

...

    <plugin>
      <artifactId>maven-compiler-plugin</artifactId>
      <configuration>
        <source>1.6</source>
        <target>1.6</target>
        <encoding>ISO-8859-1</encoding>
      </configuration>
  </plugin>

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
     <artifactId>maven-eclipse-plugin</artifactId>
     <configuration>
        <wtpversion>1.5</wtpversion>
      </configuration>
    </plugin>

</plugins>
</build>

...

Listagem 2. Depend�ncia relacionadas ao JEE - Arquivo pom.xml

...

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>

<scope>provided</scope>

</dependency>

<groupId>javax.servlet</groupId>

<scope>provided</scope>

</dependency>

<groupId>taglibs</groupId>

<artifactId>standard</artifactId>

</dependency>

</dependency>

...

Listagem 3. Deployment Descriptor da Aplica��o - Arquivo web.xml

<?xml version="1.0"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">

<description>MyProject web.xml</description>

<context-param>

<param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>

<param-value>true</param-value>

</context-param>

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/tomahawk.taglib.xml</param-value>

</context-param>

<context-param>

<param-name>javax.faces.DEFAULT_SUFFIX</param-name>

<param-value>.xhtml</param-value>

</context-param>

<context-param>

<param-name>facelets.DEVELOPMENT</param-name>

<param-value>true</param-value>

</context-param>

<context-param>

<param-name>javax.faces.CONFIG_FILES</param-name>

<param-value>/WEB-INF/examples-config.xml</param-value>

</context-param>

<context-param>

<param-name>javax.faces.STATE_SAVING_METHOD</param-name>

<param-value>client</param-value>

</context-param>

...

<context-param>

<param-name>javax.faces.PARTIAL_STATE_SAVING_METHOD</param-name>

<param-value>false</param-value>

</context-param>

<filter-name>extensionsFilter</filter-name>

<filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>

<init-param>

<param-name>uploadMaxFileSize</param-name>

<param-value>100m</param-value>

</init-param>

<init-param>

<param-name>uploadThresholdSize</param-name>

<param-value>100k</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>extensionsFilter</filter-name>

<url-pattern>*.jsf</url-pattern>

</filter-mapping>

<filter-mapping>

<filter-name>extensionsFilter</filter-name>

<url-pattern>/faces/*</url-pattern>

</filter-mapping>

<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>

</listener>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.jsf</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

<welcome-file>index.html</welcome-file>

</welcome-file-list>

</web-app>

Listagem 4. Arquivo faces-config.xml

<?xml version="1.0"?>

<!DOCTYPE faces-config PUBLIC

"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"

"http://java.sun.com/dtd/web-facesconfig_1_1.dtd" >

<faces-config>

<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>

</application>

<managed-bean>

<managed-bean-name>helloWorldBacking</managed-bean-name>

<managed-bean-class>

com.br.unitri.HelloWorldBacking

</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

<navigation-rule>

<from-view-id>/helloWorld.xhtml</from-view-id>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/page2.xhtml</to-view-id>

</navigation-case>

</navigation-rule>

<navigation-rule>

<from-view-id>/page2.xhtml</from-view-id>

<navigation-case>

<from-outcome>back</from-outcome>

<to-view-id>/helloWorld.xhtml</to-view-id>

</navigation-case>

</navigation-rule>

</faces-config>

Listagem 5. Arquivo template.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://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html">

<head>

<title>Hello World - Facelets</title>

</head>

<body>

<table>

<tr>

<td>

<h1><ui:insert name="header">Hello World - Facelets</ui:insert></h1>

</td>

</tr>

<tr>

<td>

<ui:insert name="menu">Menu de op��es: Op��o1 | Op��o2 | Op��o3</ui:insert>

</td>

</tr>

<tr>

<td>

<ui:insert name="body">Minha primeira tela usando JSF com Facelets</ui:insert>

</td>

</tr>

<tr>

<td>

<ui:insert name="footer">Unitri - Centro Universit�rio do Tri�ngulo</ui:insert>

</td>

</tr>

</table>

</body>

</html>

Listagem 6. Arquivo helloWorld.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://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html">

<head>

<title>Hello World</title>

</head>

<body>

<ui:composition template="/template.xhtml">

<ui:define name="body">

<h:form id="form">

<h:panelGrid id="grid" columns="2">

<h:outputText id="output1" value="Entre com o seu nome" />

<h:inputText id="input1" value="#{helloWorldBacking.name}"/>

<h:commandButton id="button1" value="Ok" action="#{helloWorldBacking.send}" />

<h:message id="message1" for="input1" />

</h:panelGrid>

</h:form>

</ui:define>

</ui:composition>

</body>

</html>

Listagem 7. Arquivo helloWorldComponents.taglib.xml

<?xml version="1.0"?>

<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd">

<facelet-taglib>

<namespace>http://helloWorldComponents.com/facelets</namespace>

<tag>

<tag-name>imprimeBoasVindas</tag-name>

<source>imprimeBoasVindas.xhtml</source>

</tag>

</facelet-taglib>

Listagem 8. Arquivo declara��o da biblioteca de componentes nos arquivo web.xml

...

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/tomahawk.taglib.xml;/WEB-INF/helloWorldComponents.taglib.xml</param-value>

</context-param>

...

Listagem 9. Arquivo imprimeBoasVindas.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:c="http://java.sun.com/jstl/core"

xmlns:h="http://java.sun.com/jsf/html">

<ui:composition>

<c:choose>

<c:when test="${hora lt 12}">

<h:outputText value="Bom dia!"/>

</c:when>

<c:when test="${hora lt 18}">

<h:outputText value="Boa tarde!"/>

</c:when>

<c:otherwise>

<h:outputText value="Boa noite!"/>

</c:otherwise>

</c:choose>

</ui:composition>

</html>

Listagem 10. Arquivo HelloWorldBacking.java

public class HelloWorldBacking

{

...

private String name;

private Integer hora;

...

public Integer getHora() {

hora = Calendar.getInstance().getInstance().get(Calendar.HOUR_OF_DAY);

return hora;

}

public void setHora(Integer hora) {

this.hora = hora;

}

Listagem 11. Arquivo page2.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://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:hw="http://helloWorldComponents.com/facelets">

<head>

<title>Hello World</title>

</head>

<body>

<f:view>

<hw:imprimeBoasVindas hora="#{helloWorldBacking.hora}"/><br/>

<h:outputText value="Ol� #{helloWorldBacking.name}. Essa � a sua primeira aplica��o utilizando JSF com Facelets!" />

<h:form id="form2">

<h:commandLink id="link1" action="back">

<h:outputText id="linkText" value="Voltar" />

</h:commandLink>

</h:form>

</f:view>

</body>

</html>

Tecnologias:

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Julio Em 2009

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Hewerton Cris�stomo

N�vel

Bacana seu post, muitas pessoas usam sem saber os m�nimos detalhes do facelets.

há +1 ano

Julio Oliveira

N�vel

Legal. Obrigado por enviar o seu coment�rio.
O objetivo era esse mesmo, tentar fazer um artigo um mais t�cnico, por�m sem esquecer da parte pr�tica.

Abra�o,

Julio Oliveira.

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Facelets � Vis�o Geral Conceitos, Utiliza��o e Cria��o de Componentes

D� os primeiros passos na utiliza��o do framework que ir� se tornar o mecanismo padr�o para a descri��o de p�ginas em aplica��es Web com JSF

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Perguntas frequentes

Nossos casos de sucesso