Javafree

Trabalhando com componentes do Framework JSF 2.0 e RICHFACES 4.

Publicado por Rodrigo Marques em 14/11/2012 - 15.096 visualizações

Trabalhando com componentes do Framework JSF 2.0 e RICHFACES 4.


Olá a todos os amigos leitores dos nossos artigos, hoje vamos discorrer sobre JSF 2.0e RichFaces 3.3. Teremos como objetivo deste artigo a utilização de alguns componentes deste poderoso framework.

O JSF (Java Server Faces) é um framework Java que permite a elaboração de elementos visuais através de componentes já desenvolvidos. O JSF é um dos frameworks mais utilizados no mercado de trabalho, e atualmente a sua versão é a 2.0.

JavaServer Faces (JSF) 2.0, é um framework web MVC que simplifica a construção de interfaces de usuário (possui mais de 100 elementos UI prontos) para aplicações Java web e faz componentes UI reutilizáveis e fáceis de implementar. Ao contrário do JSF 1.x onde quase tudo é declarado no faces-config.xml, no JSF 2.0 você tem permissão para usar anotações para navegação declarada, o que torna seu desenvolvimento mais fácil e mais rápido.

Ciclo de vida do JSF 2.0


0
Figura 1 : Ciclo de vida do JSF


1. Restaurar Visão



Se a página requisitada já foi exibida antes, é recuperada toda a árvore de componentes para a página requisitada. Caso esteja sendo exibida pela primeira vez é construída uma nova árvore de componentes. No caso da página já ter sido exibida antes, todos os componentes serão configurados com seu estado anterior.
É fácil notar isso no processo de validação, onde os valores digitados inicialmente no formulário serão mantidos.
Se a requisição não possuir dados solicitados, a implementação JSF pula para a fase Render Response. Normalmente isso acontece quando a página é requisitada pela primeira vez.

2. Aplicar os Valores da Requisição



Nesta fase o JSF resgata todos os valores informados pelo usuário e os armazena em seus objetos.

3. Processar Validação



A String com o valor enviado é convertida para o tipo correto do objeto. Caso ocorra algum erro de validação uma mensagem de erro é adicionada no FacesContext, o componente é marcado como inválido e a implementação JSF invoca a fase Render Response, Renderizando a visão ao usuário levando a(s) mensagem(s) de erro(s). Caso contrário o ciclo de vida continua normalmente.

4. Atualizar Valores do Modelo



Sua principal atividade é atribuir os valores informados pelo usuário no formulário, para as respectivas propriedades associadas aos BackBeans(também conhecidos como ManagedBeans). Pode haver erro na conversão, fazendo com que o JSF dispare um erro de tempo de execução, caso ocorra o JSF adiciona esses erros no FacesContext e renderiza a página de visão ao usuário.

5. Invocar a aplicação



Nesta fase o controlador do JSF chama o método associado no submit, disparando assim a camada de regras de negócio da aplicação. Todos os valores foram validados e carregados nas fases anteriores, por isso poderemos usá-los conforme necessitar. Geralmente é retornada uma String de resultado do método para o jsf efetuar a navegação, se esse valor for null o JSF retorna a mesma página que chamou o método.

6. Renderizar a Resposta



Esta fase codifica a resposta e a envia de volta ao navegador.

A cada nova requisição o ciclo recomeça do zero.

Agora, vamos começar o desenvolvimento do nosso projeto:
0
Figura2 : Tela de criação do projeto

Reparem que ao criarmos o projeto utilizando o JSF 2 devemos manter a opção no DYNAMIC WEB MODULE VERSION 3.0 e adicionar em CONFIGURATION a opção JavaServer Faces v2.0 Project.
0
Figura 3 : Tela onde vamos adicionar a URL mappingPatterns para *.jsf e desabilitar a configuração de libs do JSF

Os Jars que estão sendo utilizados para a construção deste projeto são:
0
Figura 4 : Libs do projeto

Para que as taglibs do JSF sejam reconhecidas, primeiramente devemos passar pelo FacesServlet do JSF, e para chamá-lo devemos acessar uma página pela URL utilizando o parâmetro que foi mapeado no nosso url-pattern. Não sei se vocês lembram, mas na nossa Figura3 definimos que salvaríamos nossas páginas com a extensão (.jsf).

Então primeiramente devemos criar um arquivo chamado index.html. Na index.html vamos apenas definir o redirecionamento para uma página qualquer com a extensão *.jsf:



Para trabalhar com o Richfaces devemos adicionar algumas configurações no nosso arquivo web.xml, segue abaixo o arquivo já configurado:



Vamos entender os parâmetros de configuração apresentados no arquivo web.xml. Primeiramente no javax.faces.PROJECT_STAGE estamos definindo qual a situação do nosso projeto.Foi adicionado o valor development pois o nosso projeto estaria no estado de desenvolvimento. Logo abaixo adicionamos o código org.richfaces.skin, é ele que define o SKIN (Template) que será.Foi marcado o Skinclassic. No link abaixo,
http://docs.jboss.org/richfaces/latest_4_0_X/Developer_Guide/en-US/html/chap-Developer_Guide-Skinning_and_theming.html,
temos na documentação do richfaces todos os skins disponíveis, e como modificar alguma propriedade de um dele.

Segue algum dos skins:


    emeraldTown
    blueSky
    wine
    japanCherry
    ruby
    classic
    deepMarine


Para finalizar a configuração do richfaces temos o parâmetro org.richfaces.enableControlSkinning, que passa os parâmetros .css para definir que o skin, seja criado separadamente.

Primeiro vamos adicionar a classe Funcionario que é uma classe de Entidade. Utilizaremos o padrão JavaBean para construção da classe.

Java bean: http://pt.wikipedia.org/wiki/JavaBeans



Acima temos uma classe de entidade Funcionario básica, esta é utilizada apenas para receber os dados provenientes do formulário.

Para começarmos a construir nosso formulário, devemos criar um arquivo chamado de painel.xhtml. No início do arquivo devemos importar as libs do jsf e do richfaces.Para isso basta alterar a abertura HTML do documento conforme abaixo:



No caso acima estamos importando duas bibliotecas do JSF e duas bibliotecas RICHFACES. Para acessá-las no arquivo utilizaremos os caracteres f, h, rich e a4j respectivamente. Agora vamos montar todo o layout da nossa aplicação. Segue abaixoo código completo da página:



Acima construímos todo o layout de nossa página, e teremos a resposta ao rodar o nosso projeto da seguinte maneira.
0
Figura 5 : Tela inicial do projeto com richfaces

Vamos compreender um pouco o nosso código, primeiramente teremos que ter circundando todo o projeto as tags<HTML></HTML>. Uma vez criadas devemos inserir o <h:body>, onde todos os códigos do richfaces deverão estar. De início adicionamos o<rich:panel header="Formulário de Funcionário">: um painel que inserimos na tela, o header é o título adicionado ao painel.

Dentro do painel criamos um formulário com a tag<h:form>, o id é definido para que o ManagerBean possa inserir mensagens de resposta ao formulário e o rendered=?true? define que o formulário serárenderizado.

Dentro do form inserimos mensagens utilizando as tags<h:outputText />, e por fim criamos os campos de texto, slider, select e calendário respectivamente.

Vale a pena ressaltar alguns parâmetros apresentados em nosso código, primeiro na tag<rich:inputNumberSliderminValue="600"maxValue="15000" /> o minValue e o maxValue definem o menor e o maior valor permitido ao componente. Já na tag<h:selectOneMenu> os componentes <f:selectItem /> representam as opções da caixa de seleção onde o itemValue é o valor a ser enviado ao ManagerBean e o itemLabel, o valor apresentado ao usuário.

No <rich:calendardatePattern="dd/MM/yyyy" /> o datePattern representa o pattern, a forma na qual a data será exibida em nosso calendário.

O Componente <h:dataTable> efetua a criação de uma tabela com os dados que deverão ser enviados pelo ManagerBean.

Para que o nosso projeto tenha mais sentido, vamos criar uma classe chamada de ManagerBean dentro do pacote manager e inserir o seguinte código:



É importante ressaltar apenas dois parâmetros o @ManagedBean e o @SessionScoped, o primeiro utilizado para instanciar a classe ManagerBean permitindo assim que nossos arquivos .xhtml fale com seus atributos. Já o SessionScoped é a forma na qual os dados serão tratados pelo jsf, a escolha pelo SessionScoped é pelo fato dos dados não serem persistidos em banco. O usual é colocar RequestScoped.

Com o ManagerBean criado e já mapeado vamos para o nosso arquivo painel.xhtml chamar os atributos nos campos corretos:



Observe código acima, e repare que dentro de cada um dos campos foi adicionado um atributo value, este atributo serve para enviar o valor inserido no campo para dentro do seu objeto. Por exemplo, mb.funcionario.nome, estamos inserindo o valor dentro do atributo nome do objeto funcionário criado dentro do ManagerBean.

Já no dataTable foi utilizado no value o elemento LIST do ManagerBean, pois o dataTable irá iterar os dados da lista para dentro do grid.

Por fim, vamos novamente ao ManagerBean criar o método enviarDados, este método é utilizado para resgatar os valores inseridos nos campos e atribuir dentro da lista para ser iterado:



Veja abaixo o exemplo da página funcionando.
0
Figura 6 : Projeto já finalizado

Obrigado pessoal, espero que tenham gostado do artigo. Em breve terei novos artigos para vocês. Até lá.

Escrito por: Rodrigo Marques : http://www.cotiinformatica.com.br

comentários: 5

Tópicos Relacionados