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>
<jsp:forward page="/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.
<managed-bean>
<managed-bean-name>pessoaBean</managed-bean-name>
<managed-bean-class>helloworld.PessoaBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
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"%>
<f:loadBundle basename="helloworld.mensagens" var="msg" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>rodrigoaguas.com</title>
</head>
<body>
<f:view>
<h1><h:outputText value="#{msg.titulo}" /></h1>
<h:form>
<h:outputText value="#{msg.pergunta}" />
<h:inputText value="#{pessoaBean.nome}" />
<h:commandButton 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”.
<navigation-rule>
<from-view-id>/formulario.jsp</from-view-id>
<navigation-case>
<from-outcome>bemvindo</from-outcome>
<to-view-id>/saudacoes.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Assim, nosso arquivo “faces-config.xml” completo fica da seguinte forma:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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">
<managed-bean>
<managed-bean-name>pessoaBean</managed-bean-name>
<managed-bean-class>helloworld.PessoaBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/formulario.jsp</from-view-id>
<navigation-case>
<from-outcome>bemvindo</from-outcome>
<to-view-id>/saudacoes.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
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"%>
<f:loadBundle basename="helloworld.mensagens" var="msg" />
<html>
<head>
<title>rodrigoaguas.com</title>
</head>
<body>
<f:view>
<h3>
<h:outputText value="#{msg.boasvindas}" />,
<h:outputText 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.