JSF, Inicio Rápido – Parte 4
Autor: Reinaldo Elias | Publicado: 2011-02-19T12:50:00-08:00

PASSO ANTERIOR (PARTE 3).


Já estamos bem avançados em nosso projeto, já temos uma boa base,  vamos agora criar as páginas necessárias para a navegação, aliás, vamos  inserir códigos por que as páginas ja foram criadas no passo 2.


Puxando pela memória, na introdução foi informado que se chamarmos  uma página pela extensão JSP, as tags não funcionariam, devemos invocar  as páginas sempre utilizando a extensão JSF, neste post abordaremos um  pouco deste assunto.
Antes de mais nada, nosso projeto precisa de uma pagina principal, então no arquivo index.jsp insira as seguintes linhas de código:
&lt;html&gt;
&lt;body&gt;
&lt;jsp:forward page=”/pages/menu.jsf” /&gt;
&lt;/body&gt;
&lt;/html&gt;

Mas por que logo na página inicial estamos redirecionando para outro lugar?
Simples, se colocarmos as tags do JSF diretamente na página index.jsp  elas não funcionariam, por que o servidor está invocando index.jsp e não  index.jsf.

Existem outras formas até mais elegantes para contornar este problema, por exemplo configurando o web.xml  para chamar index.jsf e não index.jsp, mas por enquanto este  redirecionamento resolve nosso problema, e serve também como um ótimo  exemplo para sempre lembrarmos que devemos invocar as páginas utilizando  a extensão JSF para que elas funcionem…


Ok, ok, redirecionamos a página principal para “menu.jsf”, mas não tem nada nesta página!
Vamos inserir códigos nela então!


Abra o arquivo menu.jsp  (lembre-se que JSF é uma extensão “imaginária”, as páginas reais  possuem a extensão JSP), e insira as seguintes linhas de código:
&lt;%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %&gt;
&lt;%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %&gt;
&lt;f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
&lt;h1&gt;
&lt;h:outputText value=”#{msg.pagina_principal_label_titulo}”/&gt;
&lt;/h1&gt;
&lt;h3&gt;
&lt;h:outputText value=”#{msg.pagina_principal_label_site}”/&gt;
&lt;/h3&gt;
&lt;h:form id=”helloForm”&gt;
&lt;h:commandButton action=”cadastro” value=”#{msg.pagina_principal_label_link}” /&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;Agora vamos às explicações!


As duas primeiras linhas, taglib, informam que utilizaremos nesta página algumas tags JSTL específicas do framework JSF.

JSTL são bibliotecas, conjuntos de códigos personalizados, para serem  utilizados dentro das páginas JSPs, existem várias JSTLs, e é possível  até criar a sua propria linguagem, porém o assunto aqui não é este então  não falaremos muito disso, mas já estou preparando um post sobre isso.  Vale saber que alguns dos arquivos JAR que fizemos download na  introdução são responsáveis por estas JSTLs que utilizaremos agora.

Na taglib informamos a propriedade prefix, que é um apelido para utilizarmos esta JSTL dentro da página.


A terceira linha utilizamos f:loadBundle, aqui já estamos utilizando uma JTSL! Enfim, este comando serve para carregar o arquivo messages.properties e é claro que você já está craque em properties né?

Note que informamos nesta linha o caminho inteiro (pacote) do arquivo properties, mas não é necessário informar a extensão, a propriedade var=”msg” funciona igual o prefix da taglib, é um apelido para utilizarmos na página.


Na tag h:outputText  utilizamos a segunda taglib importada, esta é utilizada mais para  campos de formulário e similares, como por exemplo neste caso estamos  criando um outputText, que é como um “label” do VB ou de aplicações Java Desktop, simplesmente inserção de texto!

E nesta linha já invocamos uma variável do arquivo properties “msg.pagina_principal_label_site“,  o msg. é apelido do properties que definimos na terceira linha, o resto  é o nome da variável que está declarada no properties, fazendo isso, a  página vai procurar no arquivo properties a variável pagina_principal_label_site, e vai escrever ná página o valor desta variável.


Na tag h:form,  estamos criando um formulário, assim como no HTML, precisamos iniciar  um formulário quando quisermos criar campos e botões válidos.


h:commandButton, aqui que está o pulo do gato! Este comando é similar ao botão SUBMIT do HTML, e funciona da mesma maneira, ele pega todos os campos do formulário e envia para algum lugar.

Vamos ver com um pouco de calma cada propriedade deste comando.
action=”cadastro”, mas o que é isso? “cadastro“, essa porcaria não é sequer uma página!
Realmente isto não é uma página, não é nada, “cadastro” não existe!

Essa string é outro apelido, que definiremos no arquivo de configuração,  quando informamos para a página, “ao clicar neste botão vai para cadastro” ela procura esse tal de cadastro no arquivo faces-config.xml, e este se encarrega de informar qual página deve ser invocada.

A propriedade value é a mesma dos botões SUBMIT do HTML, aqui será  inserida a informação que ficará escrita no botão, neste caso estamos  procurando alguma informação no arquivo properties.


Com isso encerramos as explicações desta página!
Agora abra o arquivo inicio.jsp e insira as seguintes linhas de código:
&lt;%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %&gt;
&lt;%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %&gt;
&lt;f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
&lt;h1&gt;
&lt;h:outputText value=”#{msg.pagina_cadastro_label_titulo}”/&gt;
&lt;/h1&gt;
&lt;h3&gt;
&lt;h:outputText value=”#{msg.pagina_cadastro_label_site}”/&gt;
&lt;/h3&gt;
&lt;h:form id=”helloForm”&gt;
&lt;h:outputText value=”#{msg.pagina_cadastro_label_nome}”/&gt;
&lt;h:inputText value=”#{teste.nome}” /&gt;
&lt;f:verbatim&gt;
&lt;br&gt;
&lt;/f:verbatim&gt;
&lt;h:outputText value=”#{msg.pagina_cadastro_label_email}”/&gt;
&lt;h:inputText value=”#{teste.email}” /&gt;
&lt;f:verbatim&gt;
&lt;br&gt;
&lt;/f:verbatim&gt;
&lt;h:commandButton action=”#{teste.testar}” value=”#{msg.pagina_principal_botao_ok}” /&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;



Nesta página, praticamente todos os comandos são similares aos da  página anterior, com exeção de três que merecem uma explicação melhor:


&lt;h:inputText value=”#{teste.nome}” /&gt;
Aqui estamos criando um inputText, que como você deve estar imaginando é  uma caixa de texto, igual ao do HTML, mas o que precisa de uma  explicação especial nesta tag é o value.
&nbsp;
Note que estamos informando #{teste.nome}, fazendo isso estamos falando que este campo está vinculado à variável nome da classe teste. Ainda não sabemos quem é esse teste,  por que não configuramos o faces-config.xml ainda, porém este é o nosso  bean, a classe testeBean.java, lembra que criamos uma variável private String nome lá? Então, é aqui que ela está sendo referenciada.
&nbsp;
Se a variável possuir algum valor, a página vai mostrar este valor no  campo quando a página for carregada, e se o usuário digitar alguma coisa  no campo, o valor do campo será copiado para a variável nome quando for clicado no botão de submit (o commandButton).
&nbsp;
Então podemos imaginar, para efeito de analogia, que este campo é a  própria variável da classe testeBean! Certo, certo, não são a mesma  coisa, mas uma está vinculada diretamente com a outra, são irmãs gêmeas,  e siamesas ainda por cima, o valor que uma possuir a outra vai copiar,  tanto pra ir quando pra vir.


Um pouco mais abaixo temos a tag &lt;f:verbatim&gt;&lt;br&gt;&lt;/f:verbatim&gt;,  esta tag DEVE ser criada sempre que desejar inserir algum comando HTML  puro na página, nunca se deve utilizar tags HTML em páginas JSF, nunca!
&nbsp;
Mas, eu estou utilizando alguns comandos HTML diretamente, e ai?
&nbsp;
Bem, eu posso explicar, este projeto é algo extremamente simples, apenas  para exemplo, e as configurações do projeto deixam passar estas  coisinhas, porém quando for fazer um projeto mais avançado onde as  configurações também são mais avançadas, com certeza vai dar um erro  quando sua página for chamada, o JSF não vai conseguir compilar a página  por que não entenderá os comandos HTML, então já fica avisado aqui,  sempre que for utilizar algum comando HTML, utilize-os dentro das tags  &lt;f:verbatim&gt;&lt;/f:verbatim&gt;.


&lt;h:commandButton&gt; Novamente nos encontramos com o “SUBMIT” do JSF, porém ele está um pouco diferente agora…
&nbsp;
A propriedade action não está mais chamando um apelido,  e sim um método! Percorra um pouco as lembranças de sua memória ou abra  o arquivo testeBean.java no seu projeto, verifique que ele tem um  método testar()  que retornar uma ou outra String, dependendo da situação do IF, certo?  Então, para a propriedade action devemos SEMPRE informar um alias, uma  String, porém não precisa ser diretamente, podemos chamar um método e  este método retorna a tal String, no nosso caso estamos enviando as  informações cadastradas na tela para o método testar() da classe testeBean (aqui está com o nome teste,  mas teste é o apelido que daremos para a classe testeBean nos arquivos  de configuração…) ao entrar no método testar(), fazemos algumas  verificações e retornamos alguma string, esta string que será a página  de destino de nossa aplicação!
&nbsp;
Se não entendeu muito bem essa explicação, tenha calma no proximo post  vamos preparar os arquivos de configuração, então você poderá entender  melhor essa questão.


Agora não sobrou muito o que falar sobre as tags do JSF, então vamos inserir os códigos nos arquivos restantes!


Códigos da página sucesso.jsp
&lt;%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %&gt;
&lt;%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %&gt;
&lt;f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
&lt;h1&gt;
&lt;h:outputText value=”#{msg.pagina_sucesso_label_titulo}”/&gt;
&lt;/h1&gt;
&lt;h3&gt;
&lt;h:outputText value=”#{msg.pagina_sucesso_label_site}”/&gt;
&lt;/h3&gt;
&lt;h:form id=”helloForm”&gt;
&lt;h:outputText value=”#{msg.pagina_sucesso_label_texto}”/&gt;
&lt;f:verbatim&gt;
&lt;br&gt;
&lt;/f:verbatim&gt;
&lt;h:commandButton action=”inicio” value=”#{msg.pagina_sucesso_botao_voltar}” /&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;Código da página falha.jsp
&lt;%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %&gt;
&lt;%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %&gt;
&lt;f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
&lt;h1&gt;
&lt;h:outputText value=”#{msg.pagina_falha_label_titulo}”/&gt;
&lt;/h1&gt;
&lt;h3&gt;
&lt;h:outputText value=”#{msg.pagina_falha_label_site}”/&gt;
&lt;/h3&gt;
&lt;h:form id=”helloForm”&gt;
&lt;h:outputText value=”#{msg.pagina_falha_label_texto}”/&gt;
&lt;f:verbatim&gt;
&lt;br&gt;
&lt;/f:verbatim&gt;
&lt;h:commandButton action=”cadastro” value=”#{msg.pagina_falha_botao_voltar}” /&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;Pronto! Ou melhor, quase pronto!


Já inserimos os códigos de todas as páginas, do arquivo de  propriedades e até do nosso bean, falta agora configurar o arquivo  faces-config.xml, que é a alma de um projeto JSF!
&nbsp;
 Mas isso colocarei em outro post…




PRÓXIMO PASSO (PARTE 5)&nbsp;