sexta-feira, 30 de julho de 2010

Exemplo de Facelets com Eclipse e JBoss

16:22 Jabes Felipe No comments

Olá Pessoal,


Neste post, irei mostrar um exemplo de como desenvolver aplicações web usando o Framework de template Facelets que é facilmente integrado no JSF. O Facelets oferece alguns vantagens:
Facilidade na criação de templates;
Elimina o "JSP Compiler to Servlet" incrementando de 30% a 50% a performance da aplicação;
Facilidade para criar componentes reutilizáveis;
Usa XHTML como tecnologia de view do JSF;
Precisão para reportar erros.
Quando se desenvolve aplicações em JSF, é recomendável o uso Facelets, em vez de usar include nas subview no JSF.
O exemplo a ser mostrado será desenvolvido usando JSF 1.2, IDE Eclipse e o servidor JBoss.
Antes de começar, precisamos baixar o Facelets, acesse o site: https://www.dev.java.net/files/documents/3448/99102/facelets-1.1.15.B1.zip, recomendo a usar a versão 1.1.15 no JBoss, depois de baixar, descompacta o arquivo e copia os seguintes jar:
el-api-1.0.jar
el-impl-1.0.jar
jsf-facelets.jar

Cole este jars no seguinte diretório do JBoss:
jboss-4.2.3.GA/server/default/deploy/jboss-web.deployer/jsf-libs/

Precisamos baixar apenas o Facelets, as bibliotecas do JSF não precisa baixar, pois no diretório jsf-libs do JBoss, já contêm as bibliotecas do JSF.
A versão do JBoss que estou usando é 4.2.3.

Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar.

O projeto final terá um layout de acordo com a imagem abaixo:



1. Passo: Estrutura do projeto web:


2. Passo: Antes de começar a criar as páginas é necessário fazer algumas configurações tanto no arquivo web.xml quanto no faces-config.xml, primeiro iremos configurar o arquivo web.xml, adicionando alguns parâmetros de contexto.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>facelets</display-name>
<!-- Use Documents Saved as *.xhtml -->
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>

<!-- Special Debug Output for Development -->
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>

<!-- Optional JSF-RI Parameters to Help Debug -->
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>

<!-- Servlet JSF -->
<servlet>
<servlet-name>javax.faces.FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>javax.faces.FacesServlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

</web-app>
web.xml

Agora vamos adicionar o FaceletViewHandler no arquivo faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">

<application>
<!-- Facelets -->
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
</application>

</faces-config>
faces-config.xml

3. Passo: Agora vamos criar as páginas para ser usadas no Facelets, do tipo .xhtml, para criar com estas extensões no Eclipse, basta criar um novo arquivo file e colocar o nome + a extensão .xhtml.
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>Facelets com Eclipse e JBoss Application Server</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="tudo">
<div id="topo">
<ui:insert name="topo">
<ui:include src="topo.xhtml" />
</ui:insert>
</div>
<div id="centro">
<div id="menu">
<ui:insert name="menu">
<ui:include src="menu.xhtml" />
</ui:insert>
</div>
<div id="principal">
<ui:insert name="principal">
</ui:insert>
</div>
</div>
<div id="rodape">
<ui:insert name="rodape">
<ui:include src="rodape.xhtml" />
</ui:insert>
</div>
</div>

</body>

</html>
template.xhtml

No código acima, temos algumas tags do Facelets, o ui:insert serve para definirmos um ponto de substituição no template, o ui:include serve para incluir um fragmento.


Agora vamor criar as páginas de fragmentos.
Página topo:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
TOPO
</ui:fragment>
topo.xhtml

A tag ui.fragment é usada para definir um bloco de conteúdo.

Página de menu:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:form>
<ul>
<li><h:outputLink value="index.faces">LINK1</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK2</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK3</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK4</h:outputLink></li>
</ul>
</h:form>
</ui:fragment>
menu.xhtml

Página do rodapé:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
RODAPE
</ui:fragment>
rodape.xhtml

Agora vamos criar uma página que irá fazer o relacionamento de composição com o template.
Página index do Facelets:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

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

<ui:define name="principal">
<h1><h:outputText value="Exemplo de Facelets usando Eclipse e JBoss Application Server" /></h1>
<br /><br /><br />
<h:outputText value="Àrea para o conteúdo principal." />
</ui:define>

</ui:composition>

</html>
index.xhtml

A tag ui:composition serve para definir o relacionamento de composição entre esta tela e o template, a tag ui:define serve para substituir a definição da tag ui:insert, nesta tela a única parte que está sendo sobrepondo é a àrea principal.
Crie uma página index.jsp para abertura da aplicação:
<jsp:forward page="index.faces" />
index.jsp

Arquivo css para definir a estrutura e aparência do projeto
* {
padding: 0;
margin: 0;
font-size: 12pt;
}

ul {
list-style: none;
}

body {
text-align: center;
}

#tudo {
width: 800px;
margin: 0 auto;
}

#topo {
width: 100%;
height: 80px;
float: left;
border: 2px solid;
margin-top: 0.5em;
background: red;
}

#centro {
width: 100%;
height: 300px;
float: left;
margin-top: 0.5em;
}

#menu {
width: 20%;
height: 100%;
float: left;
overflow: auto;
border: 2px solid;
background: yellow;
}

#menu li{
display: block;
text-align: center;
}

#principal {
width: 78%;
height: 100%;
float: right;
overflow: auto;
border: 2px solid;
background: silver;
}

#rodape {
width: 100%;
height: 30px;
float: left;
border: 2px solid;
margin-top: 0.5em;
background: lime;
}
css.css

Bom galera, este foi um exemplo de como usar o Facelets nas aplicações JSF,
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Posted in: ,,,

0 comentários:

Postar um comentário

Jabes Felipe RSS Feed Jabes Felipe