sábado, 19 de fevereiro de 2011

JSF, Inicio Rápido – Parte 4

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:
<html>
<body>
<jsp:forward page=”/pages/menu.jsf” />
</body>
</html>


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:
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
<f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/>
<html>
<head></head>
<body>
<f:view>
<h1>
<h:outputText value=”#{msg.pagina_principal_label_titulo}”/>
</h1>
<h3>
<h:outputText value=”#{msg.pagina_principal_label_site}”/>
</h3>
<h:form id=”helloForm”>
<h:commandButton action=”cadastro” value=”#{msg.pagina_principal_label_link}” />
</h:form>
</f:view>
</body>
</html>
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:
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
<f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/>
<html>
<head></head>
<body>

<f:view>
<h1>
<h:outputText value=”#{msg.pagina_cadastro_label_titulo}”/>
</h1>
<h3>
<h:outputText value=”#{msg.pagina_cadastro_label_site}”/>
</h3>
<h:form id=”helloForm”>
<h:outputText value=”#{msg.pagina_cadastro_label_nome}”/>
<h:inputText value=”#{teste.nome}” />
<f:verbatim>
<br>
</f:verbatim>
<h:outputText value=”#{msg.pagina_cadastro_label_email}”/>
<h:inputText value=”#{teste.email}” />
<f:verbatim>
<br>
</f:verbatim>
<h:commandButton action=”#{teste.testar}” value=”#{msg.pagina_principal_botao_ok}” />
</h:form>
</f:view>

</body>
</html>




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:


<h:inputText value=”#{teste.nome}” />
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.
 

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.
 

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).
 

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 <f:verbatim><br></f:verbatim>, 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!
 

Mas, eu estou utilizando alguns comandos HTML diretamente, e ai?
 

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 <f:verbatim></f:verbatim>.


<h:commandButton> Novamente nos encontramos com o “SUBMIT” do JSF, porém ele está um pouco diferente agora…
 

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!
 

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
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
<f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/>
<html>
<head></head>
<body>

<f:view>
<h1>
<h:outputText value=”#{msg.pagina_sucesso_label_titulo}”/>
</h1>
<h3>
<h:outputText value=”#{msg.pagina_sucesso_label_site}”/>
</h3>
<h:form id=”helloForm”>
<h:outputText value=”#{msg.pagina_sucesso_label_texto}”/>
<f:verbatim>
<br>
</f:verbatim>
<h:commandButton action=”inicio” value=”#{msg.pagina_sucesso_botao_voltar}” />
</h:form>
</f:view>

</body>
</html>
Código da página falha.jsp
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
<f:loadBundle basename=”br.com.projetox.view.bundle.messages” var=”msg”/>
<html>
<head></head>
<body>

<f:view>
<h1>
<h:outputText value=”#{msg.pagina_falha_label_titulo}”/>
</h1>
<h3>
<h:outputText value=”#{msg.pagina_falha_label_site}”/>
</h3>
<h:form id=”helloForm”>
<h:outputText value=”#{msg.pagina_falha_label_texto}”/>
<f:verbatim>
<br>
</f:verbatim>
<h:commandButton action=”cadastro” value=”#{msg.pagina_falha_botao_voltar}” />
</h:form>
</f:view>

</body>
</html>
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!
 

Mas isso colocarei em outro post…




PRÓXIMO PASSO (PARTE 5) 





Nenhum comentário:

Postar um comentário