Scribd Logo
Upload

Welcome to Scribd!

  • Apresentacao JavaServer Faces JSF

    Uploaded by

    Fernando Stephan
    73 views52 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    73 views52 pages

    Apresentacao JavaServer Faces JSF

    Uploaded by

    Fernando Stephan

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 52

    JavaServer Faces JSF

    Fernando Freitas Costa Bacharel em Sistemas de Informao Ps-Graduando em Gesto e Docncia Universitria

    blog.fimes.edu.br/fernando nando@fimes.edu.br

    JSF - Introduo

    a especificao para um framework de componentes para desenvolvimento web em java. Definida por meio da Java Community Process (JCP)
    Interesse do mercado, no da SUN. Empresas como Apache, Fujitsu, HP, IBM, Macromedia, Novell, Oracle, Siemens e Sun participam

    Baseada no padro de projeto MVC (Model-View-Controller)

    JSF - Introduo

    Possui duas implementaes bem conhecidas:


    Sun Mojarra implementao de referncia MyFaces da Apache

    Com qualquer uma delas, pode-se desenvolver um projeto JSF.

    JSF - Ferramentas

    Existe uma srie de ferramentas no mercado, tanto pagas quanto gratuitas que permitem trabalhar com JSF. Ex:
    Eclipse NetBeans Macromedia Dreamweaver com extenses JSTL e JSF MyEclipse Oracle JDeveloper Java Studio Creator

    JSF - Caractersticas

    Permite que o desenvolvedor crie UIs atravs 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 separao de funes que envolvem a construo de aplicaes Web.

    Caractersticas
    Fornece um conjunto de tags JSP para acessar os componentes; Reutiliza componentes da pgina; Utiliza Ajax em alguns de seus componentes tornando alguns processos mais rpidos e eficientes.

    JSF - Vantagens
    MVC para aplicaes web Componentes extensveis Boa demanda do mercado Cdigo aberto

    JSF Componentes

    A especificao do JSF fornece um conjunto de componentes visuais bsicos em sua implementao de referncia. Inclui duas bibliotecas de componentes bsicos:
    Biblioteca HTML (sigla h): possui componentes que representam diversos elementos HTML e a biblioteca Biblioteca Core (sigla f): responsvel por tarefas comuns no desenvolvimento de sistemas, como internacionalizao, validao e converso de dados de entrada.

    JSF - Componentes

    Os principais componentes que a implementao de referncia do JSF fornece so:


    Formulrios Campos de entrada de texto Campo de entrada de senha Rtulos com textos Textos de uma nica linha Links Botes Mensagens Painis Tabela HTML Tabela de dados (grid) Coluna de tabela de dados

    JSF Biblioteca HTML


    Declarao: <html xmlns:h=http://java.sun.com/jsf/html> Tag body button column commandButton commandLink dataTable form graphicImage head inputHidden inputSecret Descrio Representa a tag <html> do HTML Cria um link <input type=button> Coluna de dados em um <h:dataTable> Gera um boto de submit ou reset Gera um link. Precisa estar dentro de um <h:form> Representa uma tabela html Representa o formulrio html Representa a tag <img> do html Representa a tag <head> do html Gera um campo invisvel. Correspondente a <input type=hidden> Gera um campo de senha. Correspondente a <input type=password>

    JSF Biblioteca HTML (continuao)


    Tag inputText inputTextarea
    link

    Descrio 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 parmetros podem ser montados com as tags <f:param> aninhadas.

    message
    messages outputLabel outputLink outputText panelGrid panelGroup
    selectBooleanCheckbox

    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 disposio 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 (continuao)


    Tag selectManyCheckBox Descrio 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 vrias linhas visveis, no qual possvel selecionar vrios itens ao mesmo tempo. Gera um componente <select> com apenas uma linha visvel, no qual possvel selecionar vrios itens ao mesmo tempo. Gera um componente <select>, no qual possvel 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/>

    selectManyListbox selectManyMenu selectOneListbox selectOneRadio

    Confira exemplos de uso dos componentes HTML em: http://www.exadel.com/web/portal/jsftags-guide

    JSF Biblioteca Core


    Declarao: <html xmlns:f=http://java.sun.com/jsf/core>
    Tag Descrio

    actionListener ajax attribute convertDateTime converter convertNumber event selectItem selectItems

    Permite registrar uma ao a ser realizada por um componente Permite registrar um evento ajax ou uma ao ajax a ser realizada pelo acionamento de um boto, 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 numrico Permite registrar uma classe para ser acionada em determinados eventos relativos a um componente. Adiciona um item de valor a um componente de seleo Adiciona uma coleo de itens a um componente de seleo

    JSF Biblioteca Core (continuao)


    Tag setPropertyActionLis tener Descrio Permite atribuir um valor a um determinado alvo (propriedades de beans) na execuo de uma ao. Essa ao pode ser, por exemplo, o acionamento de um <h:commandButton> ou <h:commandLink>. Isto especialmente utilizado na criao de botes ou links para cada linha de tabelas ou listas geradas, em que cada boto/link acionado em cada linha trabalhar com um valor diferente. Registra um validador de expresses regulares Registra um validador para o componente pai. Esse validador deve ser uma implementao da interface javax.faces.validator.Validator. Permite registrar uma ao a ser executada quando o valor do componente for alterado no envio do formulrio.

    validateRegex validator valueChangeListener

    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 especificao formal e segura, permite desenvolvimento de ferramentas e componentes. Como exemplo de componentes para JSF temos: calendrios, DataGrids com paginao, ordenao, 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 bsicos para iniciar o desenvolvimento em JSF:


    Criao da classe Backing Bean (classe JavaBean ou apenas Bean) Mapeamento da classe Bean Criao da pgina JSF Mapeamento da navegao entre pginas.

    JSF Classe Bean

    Mas afinal, o que uma classe JavaBean?

    Um JavaBean normalmente uma classe (poderia ser mais de uma classe), mas uma classe no necessariamente um JavaBean.

    JSF Classe Bean


    Um bean tem como premissa a idia de encapsulamento. Assim sendo suas variveis devem obrigatoriamente serem acessadas atravs de mtodos. Outra importante regra refere-se ao construtor. Ele deve ser sem parmetros. Em relao aos mtodos, eles podem ser divididos em mtodos de leitura e de escrita.

    JSF Classe Bean

    As convenes adotadas para dar nomes aos mtodos de um Bean so:


    public TipoDaPropriedade getNomeDaPropriedade() public void setNomeDaPropriedade(TipoDaPropriedade varName)

    Em relao as variveis booleanas vale o mesmo conceito, com o uso da palavra is ao invs do get.
    public void setNomeDaPropriedade(Boolean varName) public Boolean isNomeDaPropriedade()

    JSF Classe Bean: Exemplo


    public class Pessoa implements java.io.Serializable { // atributos so declarados como private private String nome; private boolean falecido;

    // Construtor sem parmetros 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: Criao da classe Backing Bean


    Classe bean que deve seguir os padres j apresentados anteriormente. Fornecer as informaes exibidas na pgina e as operaes que sero executadas. Para que uma pgina JSF acesse uma propriedade de um Bean, ela precisa ter um mtodo de acesso get. Para que uma pgina JSF altere uma propriedade de um Bean, ela precisa ter um mtodo de modificao set. Os mtodos desta classe definem as operaes da pgina JSF. Eles devem ser do tipo void, quando no for necessria navegao na pgina JSF, ou deve retornar uma String que ser utilizada para navegao atravs de configuraes feitas no arquivo faces-config.xml

    JSF PASSO 02: Mapeamento da classe Bean

    Aps criada a classe Bean, ela ainda no pode ser acessada, mesmo que tenha seguido todos os padres de nomenclatura. Para isso necessrio mape-la.

    O mapeamento pode ser feito de duas formas:


    Atravs do arquivo faces-config.xml: nica forma disponvel at a verso 1.2 do JSF. Utilizando Anotaes (Annotations): Modo mais fcil e prtico disponibilizado a partir do JSF 2.0. (Utilizaremos esta forma).

    JSF PASSO 02: Mapeamento da classe Bean

    Para registrar usando anotaes, basta acrescentar a anotao @ManagedBean do pacote javax.faces.bean antes do nome da classe. Se nenhum parmetro for informado, o nome utilizado ser o mesmo da classe, porm com a 1 letra minscula. Tambm podemos utilizar o parmetro 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 atravs da anotaes.


    Descrio Apenas uma instncia da classe em toda a aplicao. Todos os usurios acessam a mesma instncia. Existe uma instncia para cada usurio Existe uma instncia pelo tempo de durao da requisio feita pelo usurio Cada vez que houver uma chamada a uma propriedade ou mtodo da classe Bean ser criada uma nova instncia Armazena a instncia da classe Bean na pgina exibida. Enquanto esta estiver sendo manipulada, a mesma instncia da classe Bean estar disponvel Armazena a instncia da classe Bean em um java.util.Map declarado.

    Escopo @ApplicationScoped @SessionScoped @RequestScoped @NoneScoped @ViewScoped

    @CustomScoped(value= #{meuMap})

    JSF - Exemplo
    Classe Bean Mapeada Pgina JSF

    @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; } }

    <!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} Acessa a propriedade numero <h:form> <h:inputText value="#{testeBean.numero}" /> Altera a propriedade numero <h:commandButton value="Altera"/> <h:commandButton value="Incrementa" action="#{testeBean.incrementaNumero}" /> </h:form> </h:body> Chama o mtodo incrementaNumero </html>

    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 opo 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 cdigo 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 cdigo abaixo

    Em seguida, importe a classe javax.faces.bean Pronto, agora execute o projeto.

    JSF PASSO 04: Mapeamento da Navegao entre pginas

    A navegao entre as pginas JSF pode ser feita de duas formas:


    No arquivo faces-config. xml (nica forma at a verso 1.2) Navegao implcita (disponvel 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 bsicas:

    navigation-rule: determina as regras de navegao from-view-id: determina a origem da requisio navigation-case: determina quais so os destinos possveis from-outcome: determina o nome de destino to-view-id: determina a pgina de destino

    JSF Exemplo de mapeamento definido no faces-config.xml

    JSF Navegao implcita


    Parte do princpio que o nome do outcome (destino) solicitado o nome da prpria pgina a ser exibida. Exemplo:

    public String novo(){ return usuario; }

    Neste exemplo, o JSF considerar que deve ser aberta a pgina usuario.xhtml

    JSF Navegao implcita

    A navegao implcita tambm funciona com caminhos mais completos. Ex:


    Destino (outcome) mostraUsuario /mostraUsuario /restrito/albumFotos contrato.pdf /modelos/contrato.pdf Pgina resultante /publico/mostraUsuario.xhtml /mostraUsuario.xhtml /restrito/albumFotos.xhtml /publico/contrato.pdf /modelos/contrato.pdf

    Pgina de Origem /publico/usuario.xhtml /publico/usuario.xhtml /publico/usuario.xhtml /publico/usuario.xhtml /publico/usuario.xhtml

    JSF Ciclo de Vida

    Restaurar apresentao: Extrai da URL o nome da pgina solicitada e carrega/recarrega os componentes da pgina na memria, formando uma rvore de objetos. Nasce a instncia de FacesContext.

    Aplicar valores requisitados: Atribui os valores enviados na requisio rvore de componentes na memria. Se algum componente tiver o atributo immediate=true, seus valores so enviados diretamente para a propriedade correspondente na classe Bean. Caso contrrio isto s ser feito mais tarde.
    Processar eventos: Percorre cada componente e executa os eventos registrados.

    JSF Ciclo de Vida

    Processar validaes: Percorre cada componente e valida os valores informados. Se a validao falhar, o ciclo se interrompe e a pgina reexibida. Atualizar valores do modelo: Com os dados j validados, nesta fase, registra-se os dados nas respectivas propriedades da classe Bean. Tambm nesta fase que feita as converses. Se qualquer converso falhar, o ciclo se interrompe e a pgina reexibida. Invocar aplicao: Nesta fase, o JSF acionar (se for o caso) o mtodo da classe Bean que acionou a requisio. Renderizar resposta: Monta e devolve a pgina de resposta ao navegador. A pgina devolvida HTML gerado a partir de cada componente JSF.

    JSF Ciclo de Vida

    JSF - Converses
    As informaes digitadas em um formulrio e enviadas para a aplicao so sempre do tipo String. Desta forma, algumas vezes pode ser necessrio realizar converses destes dados para outros tipos JSF lida com as converses de duas formas:

    Converso implcita: Feita automaticamente pelo JSF sem nenhum cdigo do usurio. Realiza converso entre os tipos fundamentais do Java. Ex: Integer, Long, Float, etc... Converso explcita: Utilizada para trabalhar com valores monetrios, porcentagens, etc.

    JSF Converses Explcitas

    Para trabalhar com valores monetrios, porcentagens, entre outros, o JSF possui dois conversores padro:
    f:convertNumber permite converses especiais em valores numricos. Ex:
    Resultado

    f:convertDateTime permite converses de datas. Ex:


    Resultado 02/06/2020

    JSF Exemplo de Converso

    JSF - Mensagens

    Podemos adicionar mensagens em nossa aplicao JSF. Para isto devemos obter uma instncia de FacesContext. Em seguida chamamos o mtodo addMessage(). Ele possui 3 parmetros:
    1. 2. ID do componente ou null para mensagens globais. Instncia de FacesMessage. composta por:
    Severidade da mensagem.Valores vlidos: 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 especfico <h:messages> - Exibe todas as mensagens. Alguns atributos desta tag:
    errorStyle, fatalStyle, infoStyle, warnStyle estilos CSS para mensagens de erro, fatais, de informao e de alerta respectivamente. showDetail Se true, exibe os detalhes da mensagem, caso contrrio exibe apenas o resumo. globalOnly Se true, exibe apenas as mensagens globais, caso contrrio, 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 so necessrios 6 passos.
    Criao do banco de dados; Criao das tabelas; Criao da classe DAO; Criao da classe Bean; Mapeamento da classe Bean; Criao da pgina JSF.

    Passos 1 e 2 Criao 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 Criao da classe Bean

    A classe Bean ir ser o meio termo entre o dao e a pgina JSF.


    OBS: Gerar getters e setters

    Passo 4 Criao da classe DAO

    A classe DAO ser responsvel por lidar diretamente com o BD. Vejamos um exemplo simples:

    Passo 5 Criao das pginas JSF

    Neste exemplo usaremos 3 pginas: usuario.xhtml (cdigo abaixo),


    sucesso.xhtml e falha.xhtml.

    You might also like