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.

Leia mais »

segunda-feira, 5 de julho de 2010

Configurando Ambiente JEE no Linux (Ubuntu + Java + Eclipse + JBoss App Server)

12:00 Jabes Felipe No comments

Olá Pessoal,


Neste post irei mostrar como configurar um ambiente JEE no Ubuntu 10.04, as etapas são muito simples, começaremos com o download do Java, Eclipse e jBoss4, e por fim, vamos fazer um teste com um HelloWorld. =)

1. Passo: Instalação do Java por apt-get, abre uma janela do terminal e digite o seguinte comando:
sudo apt-get install sun-java6-jre sun-java6-jdk sun-java6-plugin

Após a instalação, vamos configurar as variáveis de ambiente, com o terminal aberto, digite o comando:
sudo gedit /etc/profile

Após abrir o arquivo, vai até o final do conteúdo e acrescenta:
export JAVA_HOME=/usr/lib/jvm/java-6-sun-1.6.0.20

Para ver qual a versão do Java que você está usando, digite o comando:
java -version
Esta versão deve ser informada no JAVA_HOME.

Agora renicie o computador.


2. Passo: Vamos baixar o Eclipse, entre no site http://www.eclipse.org/downloads/, escolha a plataforma Linux e baixe o Eclipse IDE for Java EE Developers, após ter baixado, descompacte em uma pasta de sua preferência.


3. Passo: Vamos baixar o JBoss Application Server, entre no site: http://www.jboss.org/jbossas/downloads/, neste exemplo estou usando a versão 4.2.3, após ter baixado, descompacte em uma pasta de sua preferência.
Vamos configurar o JBOSS_HOME, abre o terminal e digite o comando:
sudo gedit /etc/profile

Após abrir o arquivo, vai até o final do conteúdo e acrescenta o JBOSS_HOME, e o diretório onde você colocou o JBoss:
export JBOSS_HOME="/media/dados/java/jboss4/jboss-4.2.3.GA/"

No exemplo acima, substituir o caminho do diretório e a versão do JBoss de acordo com a que você está usando.


4. Passo: Agora vamos configurar o JBoss Application Server no Eclipse, abre seu Eclipse, escolha o diretório do seu workspace, com o Eclipse aberto vamos configurar server:
Selecione a guia Servers, clique com o botão direito do mouse e escolha New -> Server.
Na janela que abrir, escolha jBoss e selecione a versão 4.2, e clique em Next.
Na próxima janela, clique em Browse e escolha o diretório onde o seu JBoss está, depois clique em Finish.

5. Passo: Para testar nosso ambiente, vamos executar um exemplo simples de Servlet.
Criando o projeto, vai no menu file -> New -> Dynamic Web Project.
Na janela que abrir informe o nome do projeto: HelloWorldWeb, em Target runtime, escolha o jBoss, clique em Finish.

Crie um Servlet: HelloServlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

public HelloServlet() {
super();
}

public void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.println("HelloServlet com Eclipse e JBoss Application Server");
}

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

}


Crie um arquivo index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ubuntu + Eclipse + JBoss Application Server</title>
</head>
<body>
<a href="./HelloServlet">Chamar Servlet</a>
</body>
</html>

Agora clique com o botão direito do mouse sobre o projeto:
Debug As -> Run on Server.
Na janela que abrir clique em Finish.
O JBoss será inicializado e já irá fazer o deploy do projeto.
Testando: http://localhost:8080/HelloWorldWeb

Bom pessoal, este foi um exemplo de como montar um ambiente JEE, totalmente gratuito e com as melhores ferramentas do mercado.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

Jabes Felipe RSS Feed Jabes Felipe