#desenvolvimento

Navegação estática com JSF


Olá pessoal, este post demorou muito mais do que o previsto mas aqui está…

A navegação estática é uma navegação entre páginas pré-determinadas. Isto é, sempre que o usuário clicar em um determinado botão ele será redirecionado para uma página definida de forma fixa no código.

Vamos ao exemplo utilizando nosso projeto de base.

Crie um arquivo JSP denominado cadastro.jsp conforme o código abaixo:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Cadastro</title>
   </head>
   <body>
      <f:view>
         <h:form>
            <h:outputText value="Nome: " />
            <h:inputText value="#{userBean.nome}" />
            <h:commandButton value="Cadastrar"
                             action="cadastrar" />
         </h:form>
      </f:view>
   </body>
</html>

Este trecho de código mostra o botão responsável pela execução do redirecionamento. O valor definido na ação será utilizado para a escolha na regra da navegação.

Em nosso bean adicionaremos a propriedade nome, utilizada nas páginas do projeto:

package br.com.monteirobrena.beans;

public final class UserBean {

   private String nome;

    public void setNome(String nome) {
       this.nome = nome;
    }

    public String getNome() {
       return nome;
    }
}

A regra de navegação abaixo deve ser acrescentada no faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2"
   xmlns="http://java.sun.com/xml/ns/javaee"
   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>userBean</managed-bean-name>
       <managed-bean-class>
          br.com.monteirobrena.beans.UserBean
       </managed-bean-class>
       <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

    <navigation-rule>
       <from-view-id>/cadastro.jsp</from-view-id>
       <navigation-case>
          <from-outcome>cadastrar</from-outcome>
          <to-view-id>/cadastrado.jsp</to-view-id>
       </navigation-case>
    </navigation-rule>
</faces-config>

Esta regra de navegação define que se o resultado recebido da página cadastro.jsp, for igual à cadastrar, a aplicação será redirecionada para a página cadastrado.jsp.

Então vamos cirar um arquivo JSP denominado cadastrado.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Cadastrado</title>
   </head>
   <body>
      <f:view>
         <h:outputText value="O usuário #{userBean.nome} foi cadastrado com sucesso!" />
      </f:view>
   </body>
</html>

Note que neste exemplo sempre que houver um click no botão “Cadastrar”, a página será redirecionada para a página cadastrado.jsp.
Este tipo de navegação é mais utilizado em links que não executam ações internas.
Atualmente existem diversas formas de tratar a navegação de um projeto web, como a navegação dinâmica utilizando Facelets, mas isto é assunto para o próximo post.
Até breve 😉

Padrão
#desenvolvimento

Configurando um projeto web no Eclipse


Olá pessoal!

Muitos desenvolvedores apresentam dificuldades em trabalhar com JSF devido à necessidade de configuração do projeto e dos conflitos ocorridos entre os jars utilizados. Por isso o propósito deste post é compreender a estrutura de um projeto web e configurá-lo de uma forma que possa ser reaproveitado em outros projetos, a fim de poupar tempo na construção dos próximos.

Vamos criar um projeto seguindo este post denominando-o como projetojsf, aproveite para adicioná-lo ao Tomcat.

Iremos utilizar os jars do JSF que podem ser baixados aqui:

  • jsf-impl.jar
  • jsf-api.jar

Os jars do Apache Commons:

E o jar para o Tomcat: (Não achei um link direto para download, mas os jars se encontram no projeto que pode ser baixado no Github)

  • jstl.jar
  • servlet.jar

Crie uma pasta chamada lib no diretório ../workspace/projetojsf/WebContent/WEB-INF/ e cole os jars baixados. Feito isto falta associar os jars ao projeto.

Para fazer isto clique com o botão direito em cima do projeto e escolha a opção Build Path>Configure Build Path…

Na janela Properties for projetojsf selecione a aba Libraries, clique em Add Externals JARs…

E na janela Jar Selection vá até a pasta lib, selecione todos os jars e confirme a inclusão.

Agora temos a seguinte estrutura:

Estrutura do projeto

Como dito anteriormente temos 2 arquivos de configurações básicos: web.xml e o faces-config.xml que ficam na pasta WEB-INF. Neste projeto inicial não utilizaremos o faces-config.xml.

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">

   <!-- Informações sobre o projeto -->
   <description>Projeto JSF</description>
   <display-name>projetojsf</display-name>
   <!-- Contextos -->
   <context-param>
      <param-name>com.sun.faces.verifyObjects</param-name>
      <param-value>true</param-value>
   </context-param>
   <context-param>
      <param-name>com.sun.faces.validateXml</param-name>
      <param-value>true</param-value>
   </context-param>
   <context-param>
      <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
      <param-value>server</param-value>
   </context-param>
   <!-- Faces Servlet -->
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
   </servlet>
   <!-- Faces Servlet Mapping -->
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.jsf</url-pattern>
   </servlet-mapping>
   <!-- Configurações da sessão -->
   <session-config>
     <session-timeout>30</session-timeout>
   </session-config>
   <!-- Prioridade das páginas iniciais -->
   <welcome-file-list>
      <welcome-file>forwardToJSF.jsp</welcome-file>
   </welcome-file-list>
</web-app>

O próximo passo é criar uma página JavaServer Pages. Clique com o botão direito na pasta WEB-INF e escolha a opção New>JSP, na janela New JavaServer Page informe o nome forwardToJSF.jsp e confirme a criação. Esta página serve como um redirecionador para a página inicial:

forwardToJSF.jsp

<%@ page language="java" contentType="text/html;
charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<jsp:forward page="index.jsf" />

Repitimos o processo anterior para criarmos nossa página inicial

index.jsp

<%@ page language="java" contentType="text/html;
charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Projeto JavaServer Faces</title>
   </head>
   <body>
      <f:view>
         <h:outputText value="Projeto base utilizando JavaServer Faces" />
      </f:view>
   </body>
</html>

Com isto temos um projeto base que poderá ser utilizado sempre que necessário. O projeto completo pode ser baixado no meu github. Qualquer dúvida, problemas, sugestões… é só comentar. Até breve 😉

Padrão
#desenvolvimento

Compreendendo JavaServer Faces – Parte IV Final


Para finalizar esta primeira série de posts sobre JSF iremos conhecer as fases do ciclo de vida do JSF. O ciclo JSF possui as 6 fases descritas abaixo:

Restaurar Visão
Esta fase é responsável por criar e/ou reconstruir a árvore de componentes da página.

Aplicar Valores de Requisição
Fase que verifica e distribui os valores requisitados para os objetos que compoem a árvore de componentes.

Processar Validações
Fase conversora dos valores digitados, no formulário, em objetos para realizar as validações implementadas.

Atualizar Valores do Modelo
Fase responsável por atribuir os valores validados para os beans da aplicação.

Invocar a Aplicação
Esta fase invoca o método especificado na propriedade value do componente UICommand.

Renderizar Resposta
Fase que codifica a resposta e envia para o browser.

Esta ordem das fases é mantida no curso normal da requisição. Entretanto o curso pode sofrer alteração quando a requisição enviada não tiver todos os dados necessários. Isto gera a execução da Renderização da Resposta logo após a Restauração da Visão.

É importante lembrar que podem existir processamento de eventos entre as fases. Isto é, os eventos podem ser processados antes e depois da Invocação da Aplicação.

Abaixo temos a figura que representa o ciclo de vida completo do JSF:

Ciclo de vida do JSF

Figura 1 - Ciclo de vida do JSF

Assim finalizamos o primeiro contato com a especificação JSF.
No próximo post começaremos a aplicar os conceitos vistos até o momento.
Até breve 😉

Padrão
#desenvolvimento

Compreendendo JavaServer Faces – Parte III


Antes de passarmos para o web.xml – o outro arquivo de configuração do JSF – precisamos continuar a compreensão de como o JSF trabalha internamente.

Vimos que o escopo do JSF se restringe à camada de apresentação, sendo assim os serviços mais importantes do JSF são:

    Suporte às ferramentas automatizadas
    Arquitetura MVC
    Suporte à conversão dos dados
    Validações de erros
    Suporte à internalização das páginas
    Renderizadores alternativos
    Suporte à componentes customizáveis

Com estes serviços o JSF conecta a visão ao modelo da aplicação. Agindo como um controlador que reage à ação do usuário e processa os eventos de ação e de mudança dos valores encaminhando-os para o código que atualiza o modelo ou a visão.

Uma página JSF é composta por várias tags. Cada tag possui uma classe Java, denominada Tag Handler que é executada quando a página JSF é lida. Com isto a árvore de componentes é criada através da conversação e colaboração entre os Tag Handlers.

Processamentos principais do JSF:

Codificação
É o processo em que as tags JSF são convertidas em HTML através dos renderizadores de cada componente. O renderizador de um determinado objeto solicita ao JSF o id e o valor atual do atributo do bean.

Após a submissão de um formulário o navegador envia a URL e os dados do formulário para o servidor através de uma requisição POST, que. é parte do protocolo HTTP. O servlet faz com que estes dados fiquem disponíveis, à todos os componentes, numa tabela hash.

Decodificação
É o processo que cada componente JSF faz ao verificar a tabela hash para interpretar os dados do formulário.

Os dados do formulário são formados pelos ids e os atuais valores contidos nos componentes no momento da submissão do formulário.

E para finalizar uma breve explicação sobre os tipos de componentes que o JSF possui:

UIInput: Componente que atualiza uma propriedade do bean ao invocar o método setter, como por exemplo um campo de entrada de texto.

<h:inputText id="txt_login" value=#{user.login} />

UICommand: Componente receptor de uma ação realizada pelo usuário, responsável por disparar um evento que inicie a ação solicitada, como por exemplo um botão.

<h:commandButton id="btn_logar" 
               value="Logar"
               action="#{user.logar}" />

No próximo post conheceremos o ciclo de vida do JSF.

Até lá 😉

Padrão
#desenvolvimento

Compreendendo JavaServer Faces – Parte II


Continuando…

O JSF, geralmente, utiliza dois arquivos de configuração: web.xml e faces-config.xml.

Para que serve o arquivo faces-config.xml?

O faces-config.xml serve para mapear os beans da aplicação e especificar as regras de navegação.

Mapear os beans significa especificar quais classes serão vistas e utilizadas por meio das páginas JSF. A seguir temos um trecho de código do arquivo faces-config.xml que mostra como é feito o mapeamento dos beans:

<managed-bean>
     <managed-bean-name>usuario</managed-bean-name>
     <managed-bean-class>
          br.com.monteirobrena.UsuarioBean
     </managed-bean-class>
     <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Na tag managed-bean-name definimos o nome que utilizaremos para chamarmos o bean lá na página JSF através da Expression Language:

<h:inputText value=#{usuario.login} />

Nesta linha definimos que utilizaremos a propriedade login do bean usuario. Ver bean completo no post anterior.

Já na tag managed-bean-class informamos o caminho completo onde esta localizada a classe do bean.

E na tag managed-bean-scope definimos qual vai ser o escopo do bean.

Ps.: Nos próximos post descobriremos quais são os escopos do JSF.

A outra funcionalidade do faces-config.xml é definir as regras de navegação entre as páginas da aplicação web. A seguir temos um trecho de código do arquivo faces-config.xml que mostra como é feita a regra de navegação entre as páginas:

<navigation-rule>
     <from-view-id>/login.jsp</from-view-id>
     <navigation-case>
          <from-outcome>logar</from-outcome>
          <to-view-id>/home.jsp</to-view-id>
     </navigation-case>
</navigation-rule>

Em from-view-id informamos qual página o usuário está quando chama uma determinada ação.

Na tag from-outcome definimos uma palavra que será utilizada como um retorno esperado.

Por fim a tag to-view-id informa para qual página o usuário será redirecionado se o retorno recebido for igual ao valor informado na tag from-outcome.

Só lembrando que a idéia deste post não é trazer uma aplicação pronta, mas sim apresentar os conceitos do JSF.

Aguardo as dúvidas, e até o próximo post 😉

Padrão
#desenvolvimento

Compreendendo JavaServer Faces


O que realmente é JavaServer Faces?

A melhor definição que encontrei para JSF:

JavaServer Faces é um framework utilizado para desenvolver aplicações web de forma ágil.

Ótimo! Mas o que é um framework???

Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação. — FAYAD e SCHMIDT

Então vamos por partes…

Quais são as responsabilidades do JSF?

  • Interagir com os dispositivos clientes;
  • Fornecer as ferramentas para unir: a apresentação visual, a lógica da aplicação e a lógica de negócios de uma aplicação web;

É importante ressaltar que o escopo do JSF se restringe à camada de apresentação 😉

O que o JSF possui?

  • Um conjunto de componentes pré-fabricados de interfaces de usuários;
  • Um modelo de programação orientado à eventos;
  • Um modelo de componentes que permite a criação de componentes adicionais.

Os componentes do JSF são campos de texto, botões, tabelas de dados, árvores…

Como o JSF trabalha?

O JSF utiliza tags para a construção das páginas, de forma similar ao HTML. É através das propriedades contidas nas tags que o JSF conversa com as propriedades do bean.

Bean = É uma classe Java que expõe propriedades e eventos a um ambiente como o JSF.

Propriedade = é um valor nomeado de um determinado tipo que pode ser lido e/ou escrito. Como por exemplo um atributo de uma classe.

Um breve exemplo

Esta é uma tag do JSF que representa um campo de entrada de texto:

<h:inputText value=#{usuario.login} />

O JSF faz uso de Expression Language (EL) para comunicar-se com os beans.

E este é o bean referenciado na tag acima:

public class UsuarioBean{

private String login;

     public void setLogin(String login){
          this.login = login;
     }

     public String getLogin(){
          return login;
     }
}

Como o JSF enxerga uma propriedade do bean?

Através do mapamento do beans. Mas isto é assunto para o próximo post…

Até breve 😉

Padrão