Hello World em JSF

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.

6 ideias sobre “Hello World em JSF

  1. dionlan a.

    Olá Rodrigo, muito bom tuas explicações, parabéns.

    Só uma dúvida, ali no manage-bean do faces-config.xml, num seria PessoaBean
    com o P em caixa alta, já que o bean é ‘PessoaBean’?

  2. Rodrigo Aguas Autor do post

    Olá dionlan, obrigado pelo comentário, mas não precisa ser o nome da classe no managed-bean-name, você pode dar o nome que desejar, só lembrar que terá que utilizar esse mesmo nome na JSP quando se referir ao managed bean. Na tag managed-bean-class sim deve ser exatamente o caminho e nome da classe.

  3. roger

    esse exercicio seu eh o unico q eu tento fazer no Tomcat que da o erro de timeout de 45s(o tomcat fica num loop infinito e nao estarta).
    qualquer outra aplicacção funciona normalmente.

  4. paulo

    Rodrigo, estava procurando um tutorial na internet que fosse fácil de entender o jsf e deparei-me com o seu.

    O único problema que a linha:

    fica marcada de vermelho dizendo que o loadbundle não pode encontrado no classpath

    qual seria o motivo biblioteca?

    Estou usando o tomcat com eclipse sem jboss.

    Se puder me responder fico grato pois os tutoriais são horrorosos na internet.

    Não há um tutorial bem explicado para quem não sabe nada.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *