JavaServer Faces JSF Fernando Freitas Costa Bacharel em Sistemas de Informação Pós-Graduando em Gestão e Docência Universitária blog.fimes.edu.br/fernando nando@fimes.edu.br
JSF - Introdução É a especificação para um framework de componentes para desenvolvimento web em java. Definida por meio da Java Community Process (JCP) Interesse do mercado, não da SUN. Empresas como Apache, Fujitsu, HP, IBM, Macromedia, Novell, Oracle, Siemens e Sun participam Baseada no padrão de projeto MVC (Model-View-Controller)
JSF - Introdução Possui duas implementações bem conhecidas: Sun Mojarra implementação de referência MyFaces da Apache Com qualquer uma delas, pode-se desenvolver um projeto JSF.
JSF - Ferramentas Existe uma série de ferramentas no mercado, tanto pagas quanto gratuitas que permitem trabalhar com JSF. Ex: Eclipse NetBeans Macromedia Dreamweaver com extensões JSTL e JSF MyEclipse Oracle JDeveloper Java Studio Creator
JSF - Características Permite que o desenvolvedor crie UIs através de um conjunto de componentes UIs pré-definidos; Associa os eventos do lado cliente com os manipuladores dos eventos do lado do servidor (os componentes de entrada possuem um valor local representando o estado no lado servidor); Fornece separação de funções que envolvem a construção de aplicações Web.
Características Fornece um conjunto de tags JSP para acessar os componentes; Reutiliza componentes da página; Utiliza Ajax em alguns de seus componentes tornando alguns processos mais rápidos e eficientes.
JSF - Vantagens MVC para aplicações web Componentes extensíveis Boa demanda do mercado Código aberto
JSF Componentes A especificação do JSF fornece um conjunto de componentes visuais básicos em sua implementação de referência. Inclui duas bibliotecas de componentes básicos: Biblioteca HTML (sigla h): possui componentes que representam diversos elementos HTML e a biblioteca Biblioteca Core (sigla f): responsável por tarefas comuns no desenvolvimento de sistemas, como internacionalização, validação e conversão de dados de entrada.
JSF - Componentes Os principais componentes que a implementação de referência do JSF fornece são: Formulários Campos de entrada de texto Campo de entrada de senha Rótulos com textos Textos de uma única linha Links Botões Mensagens Painéis Tabela HTML Tabela de dados (grid) Coluna de tabela de dados
JSF Biblioteca HTML Declaração: <html xmlns:h= http://java.sun.com/jsf/html > Tag body button column commandbutton commandlink datatable form graphicimage head inputhidden inputsecret Descrição Representa a tag <html> do HTML Cria um link <input type= button > Coluna de dados em um <h:datatable> Gera um botão de submit ou reset Gera um link. Precisa estar dentro de um <h:form> Representa uma tabela html Representa o formulário html Representa a tag <img> do html Representa a tag <head> do html Gera um campo invisível. Correspondente a <input type= hidden > Gera um campo de senha. Correspondente a <input type= password >
JSF Biblioteca HTML (continuação) Tag inputtext inputtextarea link message messages outputlabel outputlink outputtext panelgrid panelgroup selectbooleancheckbox Descrição Gera um campo de texto. Correspondente a <input type= text > Gera um campo de texto multilinha. Correspondente a <textarea></textarea> Cria um link <a href> cujos parâmetros podem ser montados com as tags <f:param> aninhadas. Mostra o texto das mensagens de erro ou alerta associados ao componente Mostra todas as mensagens de erro geradas. Gera uma tag <label> que pode estar associada a um campo da tela. Gera um link html com a tag <a href> Gera em tela o texto especificado no atributo value. Permite montar um layout para a disposição de componentes Permite agrupar componentes para que sejam interpretados como um só por panelgrid. Gera um único componente <input type= checkbox /> do HTML.
JSF Biblioteca HTML (continuação) Tag selectmanycheckbox selectmanylistbox selectmanymenu selectonelistbox selectoneradio Descrição Gera uma lista de componentes <input type= checkbox /> do html, com base em valores fornecidos pelas tags <f:selectitem/> ou <f:selectitems/> Gera um componente <select> com várias linhas visíveis, no qual é possível selecionar vários itens ao mesmo tempo. Gera um componente <select> com apenas uma linha visível, no qual é possível selecionar vários itens ao mesmo tempo. Gera um componente <select>, no qual é possível selecionar apenas um item por vez. Gera uma linha de componentes <input type= radio /> do html, com base em valores fornecidos pelas tags <f:selectitem/> ou <f:selectitems/> Confira exemplos de uso dos componentes HTML em: http://www.exadel.com/web/portal/jsftags-guide
JSF Biblioteca Core Tag Declaração: <html xmlns:f= http://java.sun.com/jsf/core > Descrição actionlistener ajax attribute convertdatetime converter convertnumber event selectitem selectitems Permite registrar uma ação a ser realizada por um componente Permite registrar um evento ajax ou uma ação ajax a ser realizada pelo acionamento de um botão, por exemplo Configura um atributo para a tag pai que a contiver Configura um conversor para data e hora Permite registrar um conversor personalizado Configura um conversor numérico Permite registrar uma classe para ser acionada em determinados eventos relativos a um componente. Adiciona um item de valor a um componente de seleção Adiciona uma coleção de itens a um componente de seleção
JSF Biblioteca Core (continuação) Tag setpropertyactionlis tener validateregex validator valuechangelistener Descrição Permite atribuir um valor a um determinado alvo (propriedades de beans) na execução de uma ação. Essa ação pode ser, por exemplo, o acionamento de um <h:commandbutton> ou <h:commandlink>. Isto é especialmente utilizado na criação de botões ou links para cada linha de tabelas ou listas geradas, em que cada botão/link acionado em cada linha trabalhará com um valor diferente. Registra um validador de expressões regulares Registra um validador para o componente pai. Esse validador deve ser uma implementação da interface javax.faces.validator.validator. Permite registrar uma ação a ser executada quando o valor do componente for alterado no envio do formulário. Confira exemplos de uso destas tags em: http://www.exadel.com/web/portal/jsftags-guide
JSF - Exemplo <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>jsf 2.0 Hello World</title> </h:head> <h:body> <h3>jsf 2.0 Hello World Example - hello.xhtml</h3> <h:form> <h:inputtext value="#{hellobean.name}"></h:inputtext> <h:commandbutton value="welcome Me" action="welcome"></h:commandbutton> </h:form> </h:body> </html>
JSF Componentes adicionais Por ser uma especificação formal e segura, permite desenvolvimento de ferramentas e componentes. Como exemplo de componentes para JSF temos: calendários, DataGrids com paginação, ordenação, etc. Exemplos de bibliotecas de componentes mais comuns: Tomahawk, da Apache MyFaces Trinidad, da Apache MyFaces Tobago, da Apache MyFaces RichFaces, da JBoss ICEFaces, da ICESoft PrimeFaces
JSF Passos Iniciais Existem 4 passos básicos para iniciar o desenvolvimento em JSF: Criação da classe Backing Bean (classe JavaBean ou apenas Bean) Mapeamento da classe Bean Criação da página JSF Mapeamento da navegação entre páginas.
JSF Classe Bean Mas afinal, o que é uma classe JavaBean? Um JavaBean normalmente é uma classe (poderia ser mais de uma classe), mas uma classe não é necessariamente um JavaBean.
JSF Classe Bean Um bean tem como premissa a idéia de encapsulamento. Assim sendo suas variáveis devem obrigatoriamente serem acessadas através de métodos. Outra importante regra refere-se ao construtor. Ele deve ser sem parâmetros. Em relação aos métodos, eles podem ser divididos em métodos de leitura e de escrita.
JSF Classe Bean As convenções adotadas para dar nomes aos métodos de um Bean são: public TipoDaPropriedade getnomedapropriedade() public void setnomedapropriedade(tipodapropriedade varname) Em relação as variáveis booleanas vale o mesmo conceito, com o uso da palavra is ao invés do get. public void setnomedapropriedade(boolean varname) public Boolean isnomedapropriedade()
JSF Classe Bean: Exemplo public class Pessoa implements java.io.serializable { // atributos são declarados como private private String nome; private boolean falecido; // Construtor sem parâmetros public Pessoa() { } // getxxxx para acessar o valor do atributo public String getnome() { return this.nome; } // setxxxx para modificar o valor dos atributos public void setnome(string nome) { this.nome = nome; } // isxxxx para acessar atributos booleanos public boolean isfalecido() { return this.falecido; } } // setxxxx para modificar atributos booleanos public void setfalecido(boolean falecido) {this.falecido = falecido; }
JSF PASSO 01: Criação da classe Backing Bean Classe bean que deve seguir os padrões já apresentados anteriormente. Fornecerá as informações exibidas na página e as operações que serão executadas. Para que uma página JSF acesse uma propriedade de um Bean, ela precisa ter um método de acesso get. Para que uma página JSF altere uma propriedade de um Bean, ela precisa ter um método de modificação set. Os métodos desta classe definem as operações da página JSF. Eles devem ser do tipo void, quando não for necessária navegação na página JSF, ou deve retornar uma String que será utilizada para navegação através de configurações feitas no arquivo faces-config.xml
JSF PASSO 02: Mapeamento da classe Bean Após criada a classe Bean, ela ainda não pode ser acessada, mesmo que tenha seguido todos os padrões de nomenclatura. Para isso é necessário mapeá-la. O mapeamento pode ser feito de duas formas: Através do arquivo faces-config.xml: Única forma disponível até a versão 1.2 do JSF. Utilizando Anotações (Annotations): Modo mais fácil e prático disponibilizado a partir do JSF 2.0. (Utilizaremos esta forma).
JSF PASSO 02: Mapeamento da classe Bean Para registrar usando anotações, basta acrescentar a anotação @ManagedBean do pacote javax.faces.bean antes do nome da classe. Se nenhum parâmetro for informado, o nome utilizado será o mesmo da classe, porém com a 1ª letra minúscula. Também podemos utilizar o parâmetro name. Exemplo: @ManagedBean(name= meubean ) public class MeuBean implements java.io.serializable{... }
JSF Mapeamento da classe Bean Podemos definir o tempo de vida dessa classe Bean através da anotações. Escopo @ApplicationScoped @SessionScoped @RequestScoped @NoneScoped @ViewScoped @CustomScoped(value= #{meumap} ) Descrição Apenas uma instância da classe em toda a aplicação. Todos os usuários acessam a mesma instância. Existe uma instância para cada usuário Existe uma instância pelo tempo de duração da requisição feita pelo usuário Cada vez que houver uma chamada a uma propriedade ou método da classe Bean será criada uma nova instância Armazena a instância da classe Bean na página exibida. Enquanto esta estiver sendo manipulada, a mesma instância da classe Bean estará disponível Armazena a instância da classe Bean em um java.util.map declarado.
JSF - Exemplo <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd > <html xmlns= http://www.w3.org/1999/xhtml xmlns:h= http://java.sun.com/jsf/html > <h:head> <title>exemplo JSF</title> </h:head> <h:body> Valor: #{testebean.numero} <h:form> <h:inputtext value="#{testebean.numero}" /> <h:commandbutton value="altera"/> @ManagedBean public class TesteBean { private int numero; public void setnumero(int numero) { this.numero = numero; } public int getnumero() { return numero; } public void incrementanumero() { this.numero = numero + 1; } } <h:commandbutton value="incrementa" action="#{testebean.incrementanumero}" /> </h:form> </h:body> </html> Página JSF Classe Bean Mapeada Acessa a propriedade numero Altera a propriedade numero Chama o método incrementanumero
JSF Construindo o Exemplo Crie um novo Dinamic Web Project com o nome de Exemplo01_jsf No menu Configuration, selecione JavaServer Faces v2.0 Project. Clique em Next>
JSF Construindo o Exemplo Clique em Next> novamente Em Web Module, marque a opção Generate web.xml deployment descriptor Clique em Next>
JSF Construindo o Exemplo Em JSF Capabilities, selecione a biblioteca JSF 2.0... Em URL Mapping Patterns, informe *.xhtml Clique em Finish.
JSF Construindo o Exemplo Crie um novo HTML File e dê o nome de arq01.xhtml Clique em Next>
JSF Construindo o Exemplo Selecione o modelo New XHTML File (1.0 transitional) Clique em Finish.
JSF Construindo o Exemplo Digite o código abaixo
JSF Construindo o Exemplo Crie uma nova classe e chame-a de TesteBean De o nome bean ao pacote desta classe. Clique em Finish
JSF Construindo o Exemplo Digite o código abaixo Em seguida, importe a classe javax.faces.bean Pronto, agora execute o projeto.
JSF PASSO 04: Mapeamento da Navegação entre páginas A navegação entre as páginas JSF pode ser feita de duas formas: No arquivo faces-config. xml (única forma até a versão 1.2) Navegação implícita (disponível a partir do JSF 2.0) mais simples e direta
JSF Mapeamento definido no faces-config.xml Baseado em dois pontos principais: a String retornada pela classe Bean e o mapeamento em si. Regras básicas: navigation-rule: determina as regras de navegação from-view-id: determina a origem da requisição navigation-case: determina quais são os destinos possíveis from-outcome: determina o nome de destino to-view-id: determina a página de destino
JSF Exemplo de mapeamento definido no faces-config.xml
JSF Navegação implícita Parte do princípio que o nome do outcome (destino) solicitado é o nome da própria página a ser exibida. Exemplo: public String novo(){ return usuario ; } Neste exemplo, o JSF considerará que deve ser aberta a página usuario.xhtml
JSF Navegação implícita A navegação implícita também funciona com caminhos mais completos. Ex: Página de Origem Destino (outcome) Página resultante /publico/usuario.xhtml mostrausuario /publico/mostrausuario.xhtml /publico/usuario.xhtml /mostrausuario /mostrausuario.xhtml /publico/usuario.xhtml /restrito/albumfotos /restrito/albumfotos.xhtml /publico/usuario.xhtml contrato.pdf /publico/contrato.pdf /publico/usuario.xhtml /modelos/contrato.pdf /modelos/contrato.pdf
JSF Ciclo de Vida Restaurar apresentação: Extrai da URL o nome da página solicitada e carrega/recarrega os componentes da página na memória, formando uma árvore de objetos. Nasce a instância de FacesContext. Aplicar valores requisitados: Atribui os valores enviados na requisição à árvore de componentes na memória. Se algum componente tiver o atributo immediate= true, seus valores são enviados diretamente para a propriedade correspondente na classe Bean. Caso contrário isto só será feito mais tarde. Processar eventos: Percorre cada componente e executa os eventos registrados.
JSF Ciclo de Vida Processar validações: Percorre cada componente e valida os valores informados. Se a validação falhar, o ciclo se interrompe e a página é reexibida. Atualizar valores do modelo: Com os dados já validados, nesta fase, registra-se os dados nas respectivas propriedades da classe Bean. Também é nesta fase que é feita as conversões. Se qualquer conversão falhar, o ciclo se interrompe e a página é reexibida. Invocar aplicação: Nesta fase, o JSF acionará (se for o caso) o método da classe Bean que acionou a requisição. Renderizar resposta: Monta e devolve a página de resposta ao navegador. A página devolvida é HTML gerado a partir de cada componente JSF.
JSF Ciclo de Vida
JSF - Conversões As informações digitadas em um formulário e enviadas para a aplicação são sempre do tipo String. Desta forma, algumas vezes pode ser necessário realizar conversões destes dados para outros tipos JSF lida com as conversões de duas formas: Conversão implícita: Feita automaticamente pelo JSF sem nenhum código do usuário. Realiza conversão entre os tipos fundamentais do Java. Ex: Integer, Long, Float, etc... Conversão explícita: Utilizada para trabalhar com valores monetários, porcentagens, etc.
JSF Conversões Explícitas Para trabalhar com valores monetários, porcentagens, entre outros, o JSF possui dois conversores padrão: f:convertnumber permite conversões especiais em valores numéricos. Ex: Resultado f:convertdatetime permite conversões de datas. Ex: Resultado 02/06/2020
JSF Exemplo de Conversão
JSF - Mensagens Podemos adicionar mensagens em nossa aplicação JSF. Para isto devemos obter uma instância de FacesContext. Em seguida chamamos o método addmessage(). Ele possui 3 parâmetros: 1. ID do componente ou null para mensagens globais. 2. Instância de FacesMessage. É composta por: Severidade da mensagem. Valores válidos: SEVERITY_FATAL, SEVERITY_ERROR, SEVERITY_WARN, SEVERITY_INFO Resumo da mensagem Detalhes da mensagem
JSF Mensagens As mensagens podem ser exibidas com: <h:message> - Exibe mensagens para um componente específico <h:messages> - Exibe todas as mensagens. Alguns atributos desta tag: errorstyle, fatalstyle, infostyle, warnstyle estilos CSS para mensagens de erro, fatais, de informação e de alerta respectivamente. showdetail Se true, exibe os detalhes da mensagem, caso contrário exibe apenas o resumo. globalonly Se true, exibe apenas as mensagens globais, caso contrário, exibe todas.
JSF e Banco de Dados O JSF permite trabalhar com BD de forma simples e independente, uma vez que se apoia no modelo MVC. Para trabalharmos com BD em JSF são necessários 6 passos. Criação do banco de dados; Criação das tabelas; Criação da classe DAO; Criação da classe Bean; Mapeamento da classe Bean; Criação da página JSF.
Passos 1 e 2 Criação do Banco e da tabela create database jsf_bd; use jsf_bd; create table usuario( idusuario integer not null auto_increment, nome varchar(50) not null, email varchar(50), fone varchar(13) not null, primary key (idusuario) ) engine = InnoDB;
Passo 3 Criação da classe Bean A classe Bean irá ser o meio termo entre o dao e a página JSF. OBS: Gerar getters e setters
Passo 4 Criação da classe DAO A classe DAO será responsável por lidar diretamente com o BD. Vejamos um exemplo simples:
Passo 5 Criação das páginas JSF Neste exemplo usaremos 3 páginas: usuario.xhtml (código abaixo), sucesso.xhtml e falha.xhtml.