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.
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:
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/
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.
ResponderExcluirparabens.
Wagner Borges.
Olá Wagner! Obrigada por sua visita... Volte sempre! :D
ResponderExcluirE quando puder estarei postando mais coisas!
Veio bem a calhar esse seu post estou iniciando em JSF e assistindo video-aulas mas estou meio perdido ainda....vlw!
ResponderExcluir