5 de outubro de 2010

JavaEE 5: JavaServer Faces 1.2

JavaServer Faces... o que é?
É um framework MVC para o desenvolvimento de aplicações Web criado pela Sun, que permite o desenvolvimento de aplicações para a internet de forma visual, ou seja, arrastando e soltando os componentes na tela (em páginas JSP, quando utilizado sem outros frameworks, por exemplo: JBoss Seam), definindo as propriedades dos mesmos. (Wikipédia)
Atualmente está  na versão 2.0, porém trabalharemos com a versão anterior: 1.2.

Iniciando...
Tendo todo o Eclipse configurado de acordo com as primeiras aulas, vamos criar um Projeto JSF. Para isso, no Eclipse, vá em: File - New - JSF Project, coloque o nome de HelloJsf.

 A estrutura final do projeto será esta:


Vamos começar a montar esta estrutura. Primeiramente crie um pacote chamado control dentro de JavaSource, nele vamos guardar nossos beans... mas o que são beans?(não, não são feijões!) ... Beans no JEE5 não está bem definido, então podemos dizer que estes são: classes que armazenam e retornam valores (com getters e setters), mas podem ter outras definições também.
Então, vamos criar uma classe chamada Teste.java, esta será um bean!
Teste.java:
public class Teste {

    public String texto = "Ola mundooo";

    public String getTexto() {
        return texto;
    }

    public void setTexto(String texto) {
        this.texto = texto;
    }    
}

Esse bean será acessado em nossa página JSP, mas como isso vai ocorrer? Bom... se olharem a imagem da estrutura (acima) verão que dentro do webContent - WEB-INF temos um arquivo faces-config.xml, neste arquivo nossos beans são mapeados para poderem ser "enxergados" pela nossa JSP.
Então... o código do nosso faces-config.xml vai ficar 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>teste</managed-bean-name>
  <managed-bean-class>control.Teste</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
</faces-config>
Explicando...
managed-bean-name: nome de acesso no JSP.
managed-bean-class: localização da classe, [pacote.classe]
managed-bean-scope: escopo deste bean.

Os escopos podem ser: 
request: o bean sobrevive apenas durante a chamada de um método, depois de executado o mesmo "morre" (menor tempo de vida de um bean).
session: o bean sobrevive durante toda a sessão, por exemplo: quando se faz um login e se quer armazenar os dados de um usuário, este escopo dura mais que um request e menos que um application.
application: o bean sobrevive enquanto a aplicação estiver ativa, ou seja, tempo de vida de um bean com escopo application é maior que um bean com escopo de session.

Continuando...
Depois de termos mapeado nosso bean Teste, vamos criar no webContent uma página JSP (JSP File) coloque o nome de resultado.jsp e selecione a opção de Template: JSFBasePage, para que esta já venha com as taglibs do JSF.
Informe o seguinte código:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <f:view>
            <h:outputText value="#{teste.texto}" />            
        </f:view>
    </body>    
</html>  
Bom... toda a sintaxe será explicada com a partir do código da próxima página que será feita.
O resultado desta página será apenas um texto que foi inicializado no nosso bean, neste caso será um: "Ola mundooo".
Então vamos continuar criando uma nova página JSP, da mesma forma que a página anterior, mas com o nome de index.jsp
Nosso index.jsp irá ficar com o seguinte código:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <f:view>
            <h:form>
                <h:outputText value="nome" />
                <h:inputText value="#{teste.texto}" />
                <h:commandButton value="Enviar" action="salvar" />
            </h:form>
        </f:view>
    </body>    
</html>  
Veja que as tags do JSF são diferentes das tags HTML, para utilizar daquelas é necessário informar as taglibs do JSF que são as duas primeiras linhas do código acima. a tag h:outputText é uma forma de inserir um texto na página, h:inputText é um campo de texto e o h:commandButton é um botão. Perceba que como value do h:inputText estamos setando o seguinte valor: #{teste.texto}
O resultado desta página no navegador é a seguinte:


Analise o código em negrito:
#{teste.texto} é utilizada para acessarmos nossos beans...
#{teste.texto} é nosso bean mapeado no faces-config.xml
#{teste.texto} é nossa String do bean teste, este valor se referencia tanto ao set como ao get, por isso é apenas texto e não getTexto() e setTexto().

Agora analisando o h:commandButton:
a action é o que nosso botão vai executar, neste caso, ele não estará executando nenhum método do nosso bean, apenas estará submetendo o h:form que setará o valor do texto no bean, e redirecionará para a página resultado.jsp.
Como isso será feito? Chamamos isso de navegação ou pageflow. Mapeamos esta navegação no faces-config.xml (isto mesmo, no mesmo arquivo em que são mapeados nossos beans), essa navegação pode ser feita tanto por código como de forma visual.
Código a ser adicionado no faces-config.xml (adicionar logo depois do mapeamento do bean, mas ainda dentro da tag que fecha o faces-config)
<?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">
 
 <!-- Aqui fica nosso bean teste mapeado -->
 
 <navigation-rule>
  <from-view-id>/index.jsp</from-view-id>
  <navigation-case>
   <from-outcome>salvar</from-outcome>
   <to-view-id>/resultado.jsp</to-view-id>
  </navigation-case>
 </navigation-rule>
</faces-config>
Entendendo a lógica da navegação pelo código:
from-view-id: vamos dizer que esta é a nossa página de partida.
navigation-case: seria onde ficariam as respostas do que a view index.jsp poderá retornar a partir da propriedade action do h:commandButton.
from-outcome: é a resposta da action. Caso esta action fosse a chamada de um método, ele levaria em consideração o return do método. Mas neste exemplo estamos dando uma resposta diretamente que é "salvar".
to-view-id: é pra onde deve redirecionar a página caso a resposta seja "salvar".

Ou... visualmente:

Explicando a numeração da imagem:
1. Serve para criar uma view, para isso, clique na "folhinha" e clique na área de criação do diagrama, ao fazer isso, ele dá a opção de procurar onde a página jsp se encontra, selecione a mesma e clique em finish. Faça isso para as duas páginas (index.jsp e resultado.jsp).
2. Serve para criar a navegação entre elas, para isso, clique na "setinha preta" e clique primeiramente na index.jsp (pois é de onde irá partir nossa resposta) e logo depois clique em resultado.jsp. Ao fazer isso, ele criará a navegação tendo como padrão o nome da página para onde será redirecionado (neste caso a resposta por padrão é: resultado), para alterar a resposta, clique duas vezes em cima da palavra "resultado", assim abrirá uma janela com as configurações da navegação, apenas altere a propriedade "From Outcome" para "salvar" que é a resposta que será dada pela index.jsp na action do h:commandButton.

Para testar a aplicação, acesse: http://localhost:8080/HelloJsf/index.jsf
Isso mesmo, é .jsf ... pois na configuração padrão do web.xml de um JSF Project é .jsf, caso deseje trocar a extensão, procure a linha que se referencia a: url-pattern no web.xml!

Assim finalizamos um simples exemplo de uma aplicação em JSF, mas pode ter certeza: o melhor do JSF ainda está por vir! ;-)

Referências


JavaServer Faces API
http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/1.2_MR1/docs/tlddocs/index.html

Primefaces: Componentes JSF
http://www.primefaces.org/

3 comentários:

  1. Olá Andréia,valeu pela visita no Quebrando Paradigmas. Parabéns pela inciativa de ajudar a comunidade. Muito bom seus post. Continue escrevendo sobre Java e afins. Muito bom.

    parabens.

    Wagner Borges.

    ResponderExcluir
  2. Olá Wagner! Obrigada por sua visita... Volte sempre! :D
    E quando puder estarei postando mais coisas!

    ResponderExcluir
  3. Veio bem a calhar esse seu post estou iniciando em JSF e assistindo video-aulas mas estou meio perdido ainda....vlw!

    ResponderExcluir

Deixe seu comentário... ;)