rodrigoaguas.com » JSF

Hello World em JSF

Rodrigo Aguas — Tue, 01 Jun 2010 14:45:47 +0000

Diante da dificuldade de um amigo em encontrar na internet um tutorial que explicasse corretamente como desenvolver um simples “Hello World” utilizando JSF, ele resolveu me enviar o exemplo dele para que fosse publicado aqui. Obrigado Sérgio!

Nesse artigo, focarei no desenvolvimento do exemplo e não me aprofundarei em explicações sobre a utilização do JSF, para isso aconselho a leitura do capítulo sobre JSF do tutorial Java EE da Sun.

O JSF é um framework que roda no lado servidor da aplicação web e disponibiliza mecanismos ao desenvolvedor para facilitar, entre outros, o tratamento de eventos, validações no servidor, conversão de dados, navegação entre páginas e internacionalização da aplicação.

O funcionamento mais simples a ser entendido do JSF é que ele vincula os componentes de tela aos dados no lado servidor. De forma que ao ser digitado um texto numa caixa da tela, aquele texto será “automaticamente” copiado para um atributo da sua classe controladora, chamada de backing bean. Assim como os itens de um elemento select do html podem ser gerados com base em uma lista que está armazenada no seu backing bean. Para possibilitar esse funcionamento precisamos utilizar as tags JSF no lugar das tags HTML em nossas páginas, o que não traz grandes dificuldades já que existe claramente uma relação de um-para-um entre elas.

Vou parar as explicações por aqui para irmos para o lado prático. Antes de mais nada, é necessário criar um projeto JSF para utilizarmos. Além disso, criaremos algumas páginas JSP, um backing bean para controlar nossa tela, regras de navegação e um arquivo de propriedades com os textos utilizados. Segue o passo-a-passo para desenvolver o Hello World em JSF:

1- Criar um arquivo “index.jsp” na pasta “WebContent” com o conteúdo abaixo. Toda aplicação JSF precisa de um página inicial que redirecione para uma url do jsf.

<html>
<body>
="/formulario.jsf" />
</body>
</html>

2- Criar a classe “PessoaBean” abaixo no pacote “helloworld”. Essa classe será o nosso backing bean.

package helloworld;

public class PessoaBean {

private String nome = "";

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}
}

3- Acrescentar no arquivo “faces-config.xml” o seguinte elemento. Essa é a declaração do nosso backing bean. Nas telas faremos referência a ele utilizando o nome “pessoaBean” que demos ao mesmo. Também definimos que o escopo dele será de requisição.

pessoaBean>

helloworld.PessoaBean>

request>
>

4- Criar a página “formulario.jsp” na pasta “WebContent” com o conteúdo abaixo. Nela utilizamos a tag loadBundle para carregar um arquivo de propriedades com as mensagens a serem exibidas ao usuário e utilizamos a variável “msg” para referenciar tal arquivo no conteúdo da página. As outras tags utilizadas servem para exibir texto, criar uma caixa de entrada de texto e criar um botão.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

="helloworld.mensagens" var="msg" />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>rodrigoaguas.com</title>
</head>
<body>

<h1>value="#{msg.titulo}" /></h1>

value="#{msg.pergunta}" />
value="#{pessoaBean.nome}" />
action="bemvindo" value="#{msg.botao}" />
</h:form>

</f:view>
</body>
</html>

5- Criar o arquivo “mensagens.properties” no pacote “helloworld” com o seguinte conteúdo:

pergunta = Qual é o seu nome?
botao = Fale Comigo
titulo = Olá Mundo!
boasvindas = Seja bem vindo ao jsf

6- Para fazermos o usuário ser encaminhado para outra página quando apertar o botão, precisamos acrescentar a regra de navegação abaixo no “faces-config.xml”.

/formulario.jsp>

bemvindo>

/saudacoes.jsp>
>
>

Assim, nosso arquivo “faces-config.xml” completo fica da seguinte forma:

version="1.0" encoding="UTF-8"?>

version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xi="http://www.w3.org/2001/XInclude" 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">

pessoaBean>

helloworld.PessoaBean>

request>
>

/formulario.jsp>

bemvindo>

/saudacoes.jsp>
>
>

>

7- Nosso último passo é criar a página “saudacoes.jsp” na pasta “WebContent”. Essa página será exibida após o visitante ter digitado o nome e apertado o botão no formulário da outra página.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

="helloworld.mensagens" var="msg" />

<html>
<head>
<title>rodrigoaguas.com</title>
</head>
<body>

<h3>
value="#{msg.boasvindas}" />,
value="#{pessoaBean.nome}" />!
</h3>

</f:view>
</body>
</html>

Pronto! Agora basta dar deploy em um servidor. Lembrando que o eclipse tem integração com o Tomcat e o JBoss, bastando para dar deploy neles clicar com o botão direito do mouse na pasta do projeto, depois ir em “Run As”, depois “Run on Server”, selecionar o servidor e clicar em “Finish”.

Depois de feito o deploy, acesse http://localhost:8080/hello/ para ver sua aplicação funcionando.

Configurando Facelets em projeto JSF no eclipse

Rodrigo Aguas — Thu, 11 Feb 2010 01:42:26 +0000

Após termos nosso projeto JavaServer Faces criado no eclipse, iremos configurar o facelets no mesmo. O facelets é um framework de templating feito específicamente para projetos JSF. Ele se integra de tal forma com o ciclo de vida do jsf que resulta numa melhora da performance significativa em comparação ao uso de JSP. Além disso, o facelets funciona em todos os web containers amplamente conhecidos, não impondo restrição alguma ao projeto.

1- Faça o download do facelets na versão 1.1.15, pois a versão 1.2 não é estável (e parece que não ficará tão cedo);

2- Extraia o arquivo “jsf-facelets.jar” para dentro da pasta “WebContent\WEB-INF\lib” do seu projeto JSF. Como estamos utilizando o JBoss nesse exemplo, não é necessário extrair também os outros arquivos JAR da pasta lib do facelets, pois são dependências de bibliotecas que já existem no JBoss;

3- Não basta apenas acrescentarmos a biblioteca do facelets em nosso projeto, devemos configurar algumas outras coisas para que o JSF se integre ao facelets. Acrescente as seguintes linhas ao arquivo faces-config.xml (encontrado em “WebContent\WEB-INF”):

com.sun.facelets.FaceletViewHandler>
>

4- E no mesmo local devemos incluir as seguintes linhas ao arquivo Web.xml:

javax.faces.DEFAULT_SUFFIX>

.htm>
>

facelets.DEVELOPMENT>

true>
>

facelets.SKIP_COMMENTS>

true>
>

com.sun.faces.validateXml>

true>
>

No primeiro parâmetro, indicamos que os arquivos físicos que utilizaremos para a apresentação tem extensão .htm.
Dessa forma, quando o facelets receber uma requisição ao endereço “bemvindo.jsf” buscará pelo arquivo “bemvindo.htm”.
Na prática, não importa a extensão escolhida, costuma-se deixar htm ou html apenas por questões históricas.

O segundo parâmetro indica ao facelets que estamos em ambiente de desenvolvimento, dessa forma ele exibe possíveis erros em uma tela amigável ao desenvolvedor, mas que não deve ser exibida futuramente ao usuário final.

O terceiro parâmetro determina ao facelets que os comentários nos códigos HTML devem ser tratados como comentários. Pois o facelets por padrão não ignora comentários () nos arquivos de apresentação.

O quarto parâmetro faz com que o facelets valide o código html das telas, só permitindo que seja utilizado XHTML.

Pronto! Dessa forma o facelets já está pronto para ser executado em seu projeto.

Configurando Projeto JSF no Eclipse

Rodrigo Aguas — Fri, 18 Dec 2009 21:26:23 +0000

Este tutorial explicará como criar um projeto Java para web utilizando JavaServer Faces (JSF) no Eclipse. É um passo-a-passo de todas as configurações necessárias para ter um projeto pronto para iniciar o desenvolvimento de sistemas web.

Os softwares utilizados serão o ambiente de desenvolvimento integrado Eclipse e o servidor de aplicação JBoss. Basearei as explicações nas versões mais recentes desses softwares no momento em que escrevo este tutorial, que são Eclipse Galileo SR1 e JBoss 5.1.0.GA, mas facilmente as explicações aqui lidas podem ser adaptadas às outras versões. A instalação dos mesmos não será tratada neste tutorial, então instale-os antes de prosseguir na leitura.

Então vamos à criação do projeto no Eclipse:

Clique com o botão direito do mouse no interior da view “Project Explorer”;
Vá na opção “New”;
Clique em “Dynamic Web Project”, uma janela se abrir;
Dê um nome para o projeto no campo “Project Name”;
Na caixa “Target runtime”, clique no botão “New”, abrirá uma outra janela para configuração do servidor no Eclipse;
Selecione na pasta “JBoss” a versão “JBoss v5.0″;
Clique no botão “Next”;
Clique no botão “Browser” e selecione o local onde foi instalado o JBoss em seu computador;
Clique em “Finish” e voltaremos para a janela de criação do projeto;
Confirme do campo “Dynamic web module version” estar selecionada a opção “2.5″;
Em “Configuration”, selecione a opção “JavaServer Faces v1.2 Project”;
Clique no botão “Next”, abrirá uma tela que não faremos nenhuma alteração;
Clique no botão “Next” novamente;
Confirme do marcador “Generate web.xml deployment descriptor” estar selecionado;
Clique no botão “Next” mais uma vez;
Clique no botão “Finish”para efetivamente criar o projeto;

Pronto! Você está com seu projeto web criado. No próximo tutorial ensinarei a instalar o Facelets, pois aplicações sérias em JSF usam Facelets! Não percam!

Abraço!