Introdução ao JSF Java Server Faces Programação para Internet

Introdução

• Framework para desenvolvimento de aplicações web em Java

• Fortemente baseado nos padrões MVC e Front Controller • MVC (model-view-controller): padrão de arquitetura que tem por objetivo

isolar a lógica de negócio da lógica de apresentação de uma aplicação

• Modelo: encapsula os dados e as funcionalidades da aplicação.

• Visão: é responsável pela exibição de informações, cujos dados são obtidos do modelo.

• Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão.

2

MVC

3

OVERVIEW DA TECNOLOGIA 4

Conceitos chaves do JSF

5

• Componentes

• Renderers

• Managed-beans

• Converters / Validators

• Navegação

• Eventos

• Ciclo de vida (Request Lifecycle)

Componentes (1)

6

• Separa a lógica de negócio da apresentação

• Cada view é composta por uma hierarquia de componentes

Componentes (2)

7

• Componentes podem ser adicionados na view programaticamente ou via template (JSP por default, ou Facelets para melhor desempenho e fácil desenvolvimento)

• Componentes são expressos em tags em uma página JSP e em sua maioria são de interface com o usuário

• Os componentes padrões são divididos em dois grupos • Faces Core <f:view>, <f:loadBundle>, <f:param>

• HTML wrappers <h:dataTable>, <h:selectOneMenu>

• Componente = class + [renderer] + tag handler (JSP)

Renderers

8

• Responsável por exibir o componente no cliente

• São agrupados em render kits

• Render kit padrão é o HTML, mas podemos ter WML, SVG etc.

• Efetua o encode (gera HTML do componente)

• Efetua o decode (seta o componente com os dados da URL query string e do formulário)

• Resumindo

<h:inputText id=“login” size=“16” />

<input type=“text” id=“myForm:login”

name=“myForm:login” size=“16” />

Managed beans

9

• POJO – Plain Old Java Objects

• Podem ser definidos nos escopos: Application, Session, Request e None

Managed beans

10

JSF Value Binding

11

• “Binda” o valor do componente ao managed-bean

• O binding ocorre através de JSF Expression Language (EL)

• Semelhante a JSTL, porém usa-se ‘#{}’ no lugar de ‘${}’

• Pode-se executar métodos no modelo através de expressões

• Não é processada imediatamente como na JSTL

• A partir da JSF 1.2 utiliza-se a Unified Expression Language (JSP 2.1) que resolve problemas de incompatibilidade entre a JSF-EL e JSP-EL

JSF Value Binding Exemplo (1)

12

• login.jsp

• Objeto meuManagedBean

JSF Value Binding Exemplo (2)

13

• login.jsp

• Managed-beans são registrados dentro do faces-config.xml

Converters (1)

14

• Tem por finalidade converter e/ou formatar objetos do tipo Java para String e vice-versa

• Converters são bi-direcionais • Managed-bean faz: getAsObject() • JSP faz: getAsString()

• JSF já fornece converters padrões para date / time, numbers, etc • Você pode implementar seu próprio converter

• Basta implementar a interface javax.faces.convert.Converter • Registrar o converter no faces-config.xml • O converter pode atuar de forma explícita(id) ou implícita(class) de acordo

com a sua configuração no faces-config.xml

Converters (2)

15

Converters (3)

16

• Converter é registrado dentro faces-config.xml.

• Exemplo: registrando um converter para que toda propriedade do tipo org.cejug.model.CPF de qualquer bean use este converter

Converters (4) - Exemplo

17

• Converter declarado explicitamente

• Ou implicitamente (converter mapeado para objetos do tipo CPF)

Validators (1)

18

• Tem por responsabilidade garantir que o valor informado pelo usuário seja válido

• Validator trabalha com objetos, não somente com Strings • JSF já fornece validators padrões como required, length,

range etc • Você pode implementar seu próprio validator

• Basta implementar a interface javax.faces.validator.Validator • Registrar o validator no faces-config.xml • Você pode associar um ou mais validators à um componente

Validators (2)

19

• javax.faces.validator.Validator

• Validators são registrados no faces-config.xml

Validators (3) - Exemplo

20

• Validação para obrigatoriedade e comprimento do campo

Navegação (1)

21

• Navegação de uma página para outra • Simples e poderoso sistema de navegação • O framework seleciona a próxima view baseado

• Na view anterior • Resultado(outcome) de uma action • EL de ação (ex.: #{mBean.user.save}) • Qualquer combinação acima

• Permite wildcard (‘*’) para páginas de origem (from-view-id)

Navegação (2) - Exemplo

22

Eventos (1)

23

• Componentes geram determinados eventos que por sua vez disparam ações no servidor (método(s) no managed-bean ou listeners)

• Você também pode implementar listeners de ação associados a outros componentes do formulário

• Os listeners mais comuns do JSF são • ActionListener

• ValueChangeListener

Eventos (2) - Exemplo

24

• Action event para navegação

• Action event que executa método no managed-bean

Eventos (3) - Exemplo

25

• Value-change event que executa método após alterar o valor do componente

Funcionamento do MVC no JSF

26

Funcionamento do MVC no JSF

27

Configuração JSF • A Faces Servlet deve ser configurada no arquivo WEB-INF/web.xml,

indicando a classe que a implementa e o padrão de url que será associado a essa servlet.

• Por exemplo, na configuração abaixo, todas as requisições cujas urls possuam o sufixo .xhtml serão processadas pela Faces Servlet.

28

Configuração JSF • Adicionar no diretório WEB-INF um arquivo

chamado faces-config.xml.

• Nesse arquivo, podemos alterar diversas configurações do JSF. Mas, a princípio, podemos deixá-lo apenas com a tag faces-config.

29

Configuração do JSF • Para utilizar os recursos do JSF, é necessário que a

aplicação possua uma implementação JSF. • pode ser adicionada manualmente no diretório WEB-INF/lib da

aplicação.

• Se um servidor de aplicação Java EE for utilizado, a inclusão de uma implementação JSF manualmente não é necessária, já que esse tipo de servidor possui, por padrão, uma implementação de JSF.

30

Managed Bean • Objetos fundamentais de uma aplicação JSF.

• Suas principais tarefas são:

• Fornecer dados que serão exibidos nas telas.

• Receber os dados enviados nas requisições.

• Executar tarefas de acordo com as ações dos usuários.

• Para cada página JSP teremos um bean (classe java com get/set) correspondentes.

• Essa classe é chamada ManagedBean e deve ter um atributo para cada campo da página.

• Ex: Uma página de login, com nome e senha, deve ter um managed bean com os atributos nome e senha correspondentes.

31

Criando um Managed Beans

• Pode ser definido de duas maneiras.

• criar uma classe Java e

• registrá-la no arquivo faces-config.xml.

• define o nome, a classe e o escopo do managed bean. 32

public class TesteBean {

.. .

}

...

<managed-bean >

<managed-bean-name>testeBean </managed-bean-name>

<managed-bean-class>modelo.TesteBean</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

...

Criando um Managed Beans

• A segunda forma é criar uma classe Java com a anotação @ManagedBean do pacote javax.faces.bean. • utilizada a partir da versão 2 do JSF

• JSF assumirá que o nome do managed bean é o nome da classe com a primeira letra minúscula. O escopo request será assumido como padrão. 33

@ManagedBean

public class TesteBean {

.. .

}

Criando um Managed Beans • Para acessar o valor do atributo numero, precisamos definir um método

de leitura.

• Para alterar o valor do atributo numero, precisamos definir um método de escrita.

34

@ManagedBean

public class TesteBean {

private int numero ;

public int setNumero(int numero) {

this.numero = numero ;

}

public int getNumero() {

return numero ;

}

}

Exibindo atributos de um Managed Bean • Para exibir o valor de um atributo numero utiliza-se

expression language (#{}).

35

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 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>Desenvolvimento Web</title>

</h:head >

<h:body >

Valor : #{testeBean.numero}

</h:body >

</html>

Alterando atributos de um Managed Bean

• Para alterar o valor do atributo numero do managed bean testeBean, podemos vinculá-lo, por exemplo, a uma caixa de texto em um formulário

36

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 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>Desenvolvimento Web</title>

</h:head >

<h:body >

Valor : #{testeBean.numero}

<h: form >

<h: inputText value ="#{testeBean.numero}"/>

<h: commandButton value ="Altera "/>

</h: form >

</h:body >

</html>

Alterando atributos de um Managed Bean • Importante

• o vínculo com uma propriedade de um managed bean dá-se por meio dos nomes dos métodos getters e setters, e não pelo nome do atributo.

• No exemplo, se mantivéssemos o nome do atributo do managed bean mas substituíssemos os nomes dos métodos getNumero() e setNumero() por getValor() e setValor(), respectivamente, então os trechos de código XHTML em destaque deveriam ser alterados para

37

Valor : #{testeBean.valor}

<h: inputText value ="#{testeBean.valor}"/>

Ações • Para implementar as lógicas que devem ser executadas

assim que o usuário clicar em um botão ou link, basta criar métodos nas classes dos managed beans.

38

@ManagedBean

public class TesteBean {

private int numero ;

public void incrementaNumero () {

this.numero = numero+1;

}

// GETTERS E SETTERS

}

Ações • Esses métodos de ação podem ser:

• void: para manter os usuários na mesma tela ou

• String : para realizar uma navegação entre telas.

• Exemplo:

• Para incrementar o valor do atributo numero do managed bean testeBean, podemos criar uma página que possui um botão para executar essa ação e associá-lo ao método incrementaNumero()

39

<h:form >

<h:commandButton value ="Incrementa"

action="#{testeBean.incrementaNumero}"/>

</h: form >

Ações • Todo managed bean possui um nome único que é utilizado para

acessá-lo dentro dos trechos escritos com expression language. Quando utilizamos a anotação @ManagedBean, por padrão, o JSF assume que o nome do managed bean é o nome da classe com a primeira letra em caixa baixa.

• Podemos alterar esse nome acrescentado um argumento na anotação.

40

@ManagedBean (name=”teste”)

public class TesteBean {

...

// GETTERS E SETTERS

}

Exemplo • Construa TextoBean:

41

import javax.faces.bean.ManagedBean;

@ManagedBean

public class TextoBean {

private String texto ;

public String transformaEmCaixaAlta() {

this.texto = this.texto.toUpperCase ();

return "resposta";

}

public String getTexto () {

return this.texto ;

}

public void setTexto ( String texto ) {

this.texto = texto ;

}

}

Exemplo • Faça a página index.xhtml

42

<!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 :ui="http://java.sun.com/jsf/facelets"

xmlns :h="http://java.sun.com/jsf/html"

xmlns :f="http://java.sun.com/jsf/core">

<h:head>

<title>Desenvolvimento Web</title >

</h:head>

<h:body >

<h:form >

<h:outputLabel value ="Texto : "/>

<h:inputTextarea value ="#{textoBean.texto}"/>

<h:commandButton value ="Transformar"

action="#{textoBean.transformaEmCaixaAlta}"/>

</h:form >

</h:body >

</html >

Exemplo • Construa o formulário que exibirá o texto formatado

resposta.xhtml:

43

<!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 :ui="http://java.sun.com/jsf/facelets"

xmlns :h="http://java.sun.com/jsf/html"

xmlns :f="http://java.sun.com/jsf/core">

<h:head>

<title>Treinamento JSF</title >

</h:head>

<h:body >

<h:outputText value ="#{textoBean.texto}"/>

</h:body >

</html >

Processamento de uma requisição

44

Processamento de uma requisição

• Restore View:

• Na primeira requisição de um usuário, uma nova árvore de componentes que representa a tela desse usuário é gerada.

• Nas demais requisições (postback) desse mesmo usuário, a árvore de componentes que representa a tela anteriormente enviada a ele é reconstruída.

45

Processamento de uma requisição

• Apply Request Values:

• a árvore construída na etapa anterior é percorrida e cada um de seus componentes é “decodificado”. No processo de decodificação, cada componente extrai da requisição atual os dados associados a essa componente e se atualiza comessas informações.

• Os eventos de ação (como um clique em um link ou em um botão, por exemplo) são identificados. Por padrão, esses eventos são adicionados às filas correspondentes para serem tratados posteriormente (na fase Invoke Application).

46

Processamento de uma requisição

• Process Validations:

• os componentes que possuem valores submetidos pelo usuário através de formulários são convertidos e validados (caso haja algum validador registrado para esse componente).

• Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas no contexto da requisição atual e o fluxo é redirecionado para a fase Render Response. Caso contrário, processo continua na fase UpdateModel Values.

• os eventos de mudança de valor são identificados e tratados ao final desta fase. 47

Processamento de uma requisição

• UpdateModel Values:

• Os valores contidos em cada componente da árvore, já convertidos e validados na fase anterior, são armazenados em propriedades de objetos definidos pela aplicação (managed beans)

48

Processamento de uma requisição

• Invoke Application:

• Uma vez que os dados dos componentes já foram convertidos, validados e armazenados nos objetos do modelo, as tarefas correspondentes ao evento que disparou a requisição (normalmente um clique em um botão ou link) serão executadas.

• A próxima tela a ser apresentada ao usuário é determinada pelo resultado do método que implementa a lógica de negócio executado nesta fase. 49

Processamento de uma requisição

• Render Response:

• Apróxima tela é gerada e enviada ao navegador do usuário. Uma representação desta tela também é armazenada a fim de ser usada na fase Restore View da próxima requisição.

50

Processamento de uma requisição • Managed beans estão à disposição da Faces Servlet durante todo o processamento

da requisição

51

Processamento de uma requisição • Nas etapas Render Response e Restore View, a Faces Servlet aciona os managed

beans para recuperar os dados que devem ser usados na construção ou reconstrução da árvore de componentes.

52

Processamento de uma requisição • Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já

convertidos e validados.

• Na etapa Invoke Application, a Faces Servlet dispara um método em um managed bean responsável pelo processamento da regra de negócio correspondente à requisição atual.

53

Processamento de uma requisição • Todas as regras de negócio são implementadas no

modelo, que também administra os dados da aplicação.

• Os managed beans acionam o modelo para executar alguma regra de negócio, recuperar ou alterar os dados administrados pelo modelo.

54

Processamento de uma requisição As telas da aplicação são definidas na camada de visão. A

Faces Servlet acessa essa camada toda vez que necessita construir ou reconstruir a árvore de componentes de uma determinada tela. Isso ocorre nas etapas Restore View e Render Response.

55

Exemplo 2 • Adivinhe o número!

56

Exercício Desenvolva uma aplicação JSF que:

• receba um número inteiro do usuário,

• produza um número aleatório entre zero e o número recebido, e

• exiba esse número na tela do navegador do usuário.

57

Criando o Aplicativo Web • Crie um aplicativo Web chamado WebGuess

• Selecione GlassFish como servidor

• Use o framework JSF

• Crie o Bean Gerenciado JSF UserNumberBean

• Escopo: session

• Pacote: guessNumber

58

Criando o Bean • Complete Bean Gerenciado JSF UserNumberBean

• Atributos:

Integer randomInt;

Integer userNumber;

String response;

• Métodos get e set para userNumber

• Construtor padrão

Random randomGR = new Random();

randomInt = randomGR.nextInt(10);

59

Criando o Bean • Finalizando o Bean Gerenciado JSF UserNumberBean

• Faça-o implementar Serializable

• Informe o nome do Bean

@ManagedBean(name="UserNumberBean")

@SessionScoped

public class UserNumberBean implements Serializable {

60

Criando o Bean • Complete Bean Gerenciado JSF UserNumberBean

• Método getResponse() if ( (userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {

// Invalidar sessão do usuário

FacesContext context = FacesContext.getCurrentInstance();

HttpSession session = (HttpSession)

context.getExternalContext().getSession(false);

session.invalidate ();

return "É isso aí!";

}

return "<p> Desculpe, não é " + userNumber + ". </p> <p> Tente adivinhar de novo ... </p>"; 61

Alterando o index.xhtml

• Altere o arquivo index.xhtml

• <html> para

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html" >

62

Alterando o index.xhtml • Construa o corpo

63

Inclua o form para obtenção do número do usuário

<h:form>

<h:inputText id="userNumber" size="2" maxlength="2"

value = "#{UserNumberBean.userNumber}"/>

<h:commandButton id="submit" value="submit"

action = "response"/>

</h:form> 64

Coloque uma imagem <div id="right" class="subContainer">

<h:graphicImage url="/duke.png"

alt="Duke waving" />

</div>

• Lembre-se de colocar o recurso da imagem no projeto

65

Crie página JSF resposta.xhtml

<body> <div id="mainContainer"> <div id="left" class="subContainer greyBox"> <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>

<h:form prependId="false"> <h:commandButton id="backButton" value="Back" action="index" /> </h:form> </div>

<div id="right" class="subContainer"> <h:graphicImage url="/duke.png" alt="Duke waving" /> </div> </div> </body>

66

COMPONENTES VISUAIS

67

Introdução • Telas são definidas em arquivos XHTML.

• Os componentes visuais que constituem as telas são adicionados por meio de tags.

• A especificação do JSF define uma grande quantidade de tags e as classifica em bibliotecas.

• As principais bibliotecas de tags do JSF são: • Core (http://java.sun.com/jsf/core)

• HTML (http://java.sun.com/jsf/html)

• Facelets (http://java.sun.com/jsf/facelets) 68

Estrutura básica de uma página JSF

• Conteúdo da página definido na tag <html>, dividido em duas partes: o cabeçalho, <h:head> (e não pela tag <head>), e o corpo, tag <h:body> (e não pela tag <body>).

69

<!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 :ui="http://java.sun.com/jsf/facelets "

xmlns :h="http://java.sun.com/jsf/html "

xmlns :f="http://java.sun.com/jsf/core ">

<h:head>

<title>Treinamento JSF </title>

</h:head>

<h:body>

<h:outputText value ="Estrutura básica de uma tela JSF"/>

</h:body>

</html>

Estrutura básica de uma página JSF

70

O uso das tags <h:head> e <h:body> é fundamental para o funcionamento completo das

páginas HTML geradas pelo JSF. Ao processar essas tags, na etapa Render Response, o JSF adiciona recursos como scripts e arquivos de estilo na tela HTML que será enviada para o

usuário. Esses recursos são necessários para o funcionamento correto dos componentes.

Formulários • definidos através da tag <h:form> (e não pela tag <form>).

• composto basicamente por:

• caixas de texto,

• caixas de seleção,

• rótulos,

• botões e

• Links

• Ao ser processado, o componente <h:form> gera um formulário HTML configurado para o método POST do HTTP. 71

Caixas de Texto • <h:inputText>

• Permite que o usuário digite uma linha de texto.

• <h:inputTextarea>

• Permite que o usuário digite várias linhas de texto.

• <h:inputSecret>

• Igual ao <h:inputText> mas não exibe o que foi digitado (usado em senha)

• Uma caixa de texto pode ser associada a uma propriedade de um managed bean através do atributo value. Esse vínculo é denominado binding.

72 <h: inputText value ="#{usuarioBean.nome}"/>

Caixas de Texto • Quando o JSF constrói a tela a ser enviada para o usuário,

ele recupera o valor da propriedade nome através do método getNome() e guarda esse valor na caixa de texto correspondente.

• Analogamente, no processamento de uma requisição, o JSF extrai o valor presente na caixa de texto e utiliza o método setNome() para armazenar esse valor na propriedade nome do managed bean UsuarioBean.

73 <h: inputText value ="#{usuarioBean.nome}"/>

Rótulos • <h:outputLabel>.

• O texto do rótulo é definido pelo atributo value e pode ser associado a uma caixa de texto através do atributo for.

• O valor do atributo for deve ser igual ao valor do atributo id da caixa de texto que desejamos associar ao rótulo.

74

<h: outputLabel value ="Nome : "for ="nome"/>

<h: inputText id="nome "/>

Exemplos

75

XMTML

<h: outputLabel value ="Nome :"for ="nome"/>

<h: inputText value ="Jonas K. Hirata "id="nome"/>

HTML GERADO

<label for ="j_idt6:nome ">Nome : </label>

<input id="j_idt6:nome“ type="text“ name="j_idt6:nome"

value ="Jonas K. Hirata"/>

RESULTADO

Exemplos

76

XMTML

<h: outputLabel value ="Nome :"for ="nome"/>

<h: inputText value ="#{usuarioBean.nome}"id="nome"/>

HTML GERADO

<label for ="j_idt6:nome ">Nome : </label>

<input id="j_idt6:nome“ type="text“ name="j_idt6:nome“

value ="Jonas K. Hirata"/>

RESULTADO

Exemplos

77

XMTML

<h: outputLabel value ="Nome :"for ="nome"/>

<h: inputText value ="#{usuarioBean.nome}"

readonly ="true ""id="nome"/>

HTML GERADO

<label for ="j_idt6:nome ">Nome : </label>

<input id="j_idt6:nome"type="text"name="j_idt6:nome"

value ="Jonas Hirata"

readonly="readonly "/>

RESULTADO

Exemplos

78

XMTML

<h:outputLabel value="CEP :"for="cep"/>

<h:inputText value="#{usuarioBean.cep}“

maxlength="9"id="cep"/>

HTML GERADO

<label for ="j_idt6:cep"> Cep:</ label >

<input id="j_idt6:cep"type="text"name ="j_idt6:cep"

value ="01452-001"maxlength="9"/>

RESULTADO

Exemplos

79

XMTML

<h:outputLabel value="Texto :"for="texto"/>

<h:inputTextarea value="Um texto de várias linhas"

id="texto"/>

HTML GERADO

<label for ="j_idt6:texto">Texto :</label>

<textarea id="j_idt6:texto"name ="j_idt6:texto">Um texto de

várias linhas </textarea >

RESULTADO

Exemplos

80

XMTML

<h:outputLabel value="Texto :"for="texto"/>

<h:inputTextarea value="Um texto de várias linhas"

cols ="10"rows ="3"id="texto"/>

HTML GERADO

<label for ="j_idt6:texto">Texto :</label>

<textarea id="j_idt6:texto"name ="j_idt6:texto"

cols="10"rows="3">Um texto de várias linhas

</textarea >

RESULTADO

Exemplos

81

XMTML

<h:outputLabel value="Senha: "for="senha"/>

<h:inputSecret value="#{usuarioBean.senha}"

id="senha"/>

HTML GERADO

<label for ="j_idt6:senha">Senha : </label>

<input id="j_idt6:senha "type ="password

"name="j_idt6:senha"value=""/>

RESULTADO

Campos Ocultos • Podemos adicionar informações que são submetidas

automaticamente quando um formulário é enviado ao servidor.

• Essas informações podem ser inseridas com o componente <h:inputHidden>.

• Essa tag possui dois atributos principais: value e id.

• Podemos vincular um campo oculto a uma propriedade de um managed bean,

82 <h:inputHidden id="curso-id"value="#{cursosBean.curso.id}"/>

Caixas de Seleção • <h:selectBooleanCheckbox>

• Permite que o usuário faça seleções do tipo “sim ou não”.

• <h:selectManyCheckbox>

• Permite que o usuário faça múltiplas seleções do tipo “sim ou não”.

• <h:selectOneRadio>, <h:selectOneMenu>, <h:selectOneListbox>

• Permitem a seleção de uma única opção de um conjunto de opções.

• <h:selectManyListbox>, <h:selectManyMenu>

• Possibilita a seleção de diversas opções de um conjunto de opções. 83

Caixas de Seleção • Podemos vincular uma caixa de seleção a uma

propriedade de um managed bean através do atributo value. • exemplo: uma caixa de seleção é associada à propriedade aceito

do managed bean ContratoBean.

• Caixas de seleção do tipo <h:selectBooleanCheckbox> devem ser vinculadas a propriedades booleanas. 84

<h:selectBooleanCheckbox value="#{contratoBean.aceito}"/>

Caixas de Seleção • Opções de uma caixa de seleção (exceto <h:selectBooleanCheckbox>) podem

ser definidas estática ou dinamicamente.

• Estaticamente, cada opção pode ser adicionada através da tag <f:selectItem>

• itemValue define o que será enviado para a aplicação se a opção correspondente for selecionada.

• itemLabel define a descrição associada à opção correspondente. Essa descrição é exibida para o usuário.

85

<h:selectOneMenu value

="#{cursosBean.siglaDoCursoEscolhido }">

<f:selectItem itemValue="C01"

itemLabel="Orientação a Objetos em Java">

<f:selectItem itemValue="C02"

itemLabel="Desenvolvimento Web com JSF2">

</h:selectOneMenu>

<h:selectOneMenu

value="#{cursosBean.siglaDoCursoEscolhido}">

<f:selectItems

value ="#{cursosBean.cursos}"

var ="curso"

itemValue ="#{curso.sigla}"

itemLabel ="#{curso.nome}">

</h:selectOneMenu>

Caixas de Seleção • Dinamicamente

• A atributo value da tag <f:selectItems> deve ser associado a uma coleção de itens.

• Todos os itens serão percorridos e adicionados como opção na caixa de seleção.

• O atributo var é utilizado para definir a variável que armazenará, a cada rodada, o item atual. Essa variável permite que o itemValue e o itemLabel de cada opção sejam definidos. 86

Seleção Única

87

<h:selectOneListBox

value="#{cursosBean.siglaDoCursoEscolhido}">

<f:selectItems

value ="#{cursosBean.cursos}"

var ="curso"

itemValue ="#{curso.sigla}"

itemLabel ="#{curso.nome}">

</h:selectOneListBox>

@ManagedBean

public class CursosBean {

private String siglaDoCursoEscolhido;

private List <Curso > cursos ;

// GETTERS E SETTERS

}

public class Curso {

private String sigla ;

private String nome ;

// GETTERS E SETTERS

}

Seleção Múltipla

88

<h:selectManyListBox

value="#{cursosBean.siglaDoCursoEscolhidos}">

<f:selectItems

value ="#{cursosBean.cursos}"

var ="curso"

itemValue ="#{curso.sigla}"

itemLabel ="#{curso.nome}">

</h:selectManyListBox>

@ManagedBean

public class CursosBean {

private List<String> siglaDoCursoEscolhidos;

private List <Curso > cursos ;

// GETTERS E SETTERS

}

public class Curso {

private String sigla ;

private String nome ;

// GETTERS E SETTERS

}

Seleção com Pseudo-opção

89

<h:selectOneMenu value="#{cursosBean.siglaDoCursoEscolhido}">

<f:selectItem itemLabel ="Nenhum"noSelectionOption="true>

<f:selectItems

value ="#{cursosBean.cursos}"

var ="curso"

itemValue ="#{curso.sigla}"

itemLabel ="#{curso.nome}">

</h:selectOneListBox>

Caso seja para não apresentar nenhuma das opções disponíveis selecionada.

Se essa pseudo-opção estiver selecionada no momento em que o formulário

for submetido, a propriedade correspondente receberá o valor null. Muitas vezes, a pseudo-opção é utilizada simplesmente para exibir uma

mensagem ao usuário, como “Escolha uma opção” ou “Selecione um item”.

Exemplos

90

XMTML

<h:outputLabel value="Ex-aluno"for="exaluno"/>

<h:selectBooleanCheckbox value ="#{cursosBean.exAluno}"

id="exaluno"/>

HTML GERADO

<label for ="j_idt6:exaluno">Ex-aluno</ label >

<input id="j_idt6:exaluno"type="checkbox"

name="j_idt6:exaluno"/>

RESULTADO

Exemplos

91

XMTML

<h:selectManyCheckbox

value="#{cursosBean.siglasDosCursosEscolhidos}"

layout ="pageDirection ">

<f:selectItems

value ="#{cursosBean.cursos}"

var="curso"

itemValue="#{curso.sigla}"

itemLabel="#{curso.nome}"/>

</h: selectManyCheckbox >

Exemplos

92

HTML GERADO

<table >

<tr >

<td >

<input name="j_idt6:j_idt27"id="j_idt6:j_idt27:0"value="C01"

type="checkbox "/>

<label for ="j_idt6:j_idt27:0"class="">

Orientação a Objetos em Java </label >

</td >

</tr >

<tr >

<td >

<input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:1"value ="C02"

type ="checkbox "/>

<label for ="j_idt6:j_idt27:1"class ="">

Desenvolvimento Web com JSF2 e JPA2</label >

</td >

</tr >

<tr >

<td >

<input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:2"value ="C03"

type ="checkbox"/>

<label for="j_idt6:j_idt27:2"class="">

Design Patterns em Java </label>

</td>

</tr>

</table>

Exemplos

93

RESULTADO

Exemplos

94

XMTML

<h:selectOneRadio

value="#{cursosBean.siglasDosCursosEscolhidos}"

layout ="lineDirection ">

<f:selectItems

value ="#{cursosBean.cursos}"

var="curso"

itemValue="#{curso.sigla}"

itemLabel="#{curso.nome}"/>

</h:selectOneRadio >

RESULTADO

Exemplos

95

XMTML

<h:selectOneMenu

value="#{cursosBean.siglasDosCursosEscolhidos}">

<f:selectItem itemLabel="Escolha um curso"

noSelectionOption="true"

<f:selectItems

value ="#{cursosBean.cursos}"

var="curso"

itemValue="#{curso.sigla}"

itemLabel="#{curso.nome}"/>

</h:selectOneMenu >

RESULTADO

Exemplos

96

XMTML

<h:selectOneListBox

value="#{cursosBean.siglasDosCursosEscolhidos}">

<f:selectItems

value ="#{cursosBean.cursos}"

var="curso"

itemValue="#{curso.sigla}"

itemLabel="#{curso.nome}"/>

</h:selectOneListBox >

RESULTADO

Exercícios • Crie um projeto Web “ExercJSF01”

• Crie uma classe chamada “Pessoa”, contendo como atributos nome (string) e idade (int). Crie os métodos get/set

• Crie uma classe PessoaBean contendo como atributo pessoa e pessoas (lista de Pessoa) além dos métodos get/set. No construtor, crie alguma objetos Pessoa e adicione a pessoas 97

public class Pessoa { private String nome; private String idade; // get e set

Exercícios • Crie a página pessoa.xhtml contendo um formulário para o usuário digitar e

enviar o nome e a sua idade.

• Faça um teste.

• Acrescente em pessoa.xhtml o trecho de código para exibir os dados do usuário:

O nome do usuário é <b>#{pessoaBean.pessoa.nome}</b>

e sua idade é <b>#{pessoaBean.pessoa.idade}</b>.

98

Exercícios

• Crie o método cadastrarPessoa em PessoaBean que vai adicionar a pessoa na lista de pessoas.

99

Exercícios • Crie uma classe ConversorMonetário, contendo três atributos: as String

“de”, “para”, e o Double “valor”.

• Adicione um método para converter e um para armazenar o resultado da conversão.

100

101

public class ConversorMonetarioBean {

private String de;

private String para;

private Double valor;

private Double resultado;

private Map<String, Double> taxas =

new LinkedHashMap<String, Double>();

/**

* Creates a new instance of ConversorMonetarioBean

*/

public ConversorMonetarioBean() {

this.taxas.put("Real", 1.0);

this.taxas.put("Dolar", 1.84);

this.taxas.put("Euro", 2.33);

this.taxas.put("Peso", 0.42);

}

public void converte() {

this.resultado = valor * taxas.get(de) / taxas.get(para);

}

Exercícios • Crie o arquivo conversor-monetario.xhtml

102

Botões e Links • <h:commandButton> e <h:commandLink>

• Enviam os dados de um formulário HTML para o servidor através do método POST do HTTP.

• <h:button> e <h:link>

• Realizam requisições HTTP do tipo GET. As URLs das requisições são geradas pelo JSF a partir do atributo outcome.

• <h:outputLink>

• Também realiza requisições HTTP do tipo GET, mas exige que a URL de destino seja explicitamente especificada.

103

Botões e Links • Os componentes <h:commandButton> e <h:commandLink> são

usados para submeter formulários HTML por meio do método POST do HTTP.

• Esses dois componentes podem ser associados a métodos de ação de um managed bean através dos atributos action e actionListener.

104

<h:commandButton value ="Adiciona curso"

action ="#{cursosBean.adicionaCurso}"/>

<h:commandLink value ="Remove curso"

action="#{cursosBean.removeCurso }"/>

Textos • Para inserir textos em uma página, podemos usar os

componentes <h:outputText> e <h:output-Format>.

• O texto exibido por tais componentes é definido pelo atributo value.

• <h:outputFormat> permite diversos tipos de formatação do texto que será exibido.

105

<h:outputFormat value="Preço do produto {0} : R$ {1} ">

<f:param value="#{lojaBean.produto.nome }"/>

<f:param value="#{lojaBean.produto.preco }"/>

</h:outputFormat>

Imagens • O componente <h:graphicImage> é usado para inserir

imagens.

• Podemos indicar o caminho da imagem através dos atributos value ou url. Esses dois atributos são exatamente iguais.

• Pode ser usada uma biblioteca de imagens. Criar um diretório na pasta /resources e adicionar as imagens nele. Ex: diretório /resources/imagens

106

<h:graphicImage value ="/imagens/teste.png"/>

<h:graphicImage library="imagens"name ="teste.png"/>

Exercício • No arquivo conversor-monetario.xhtml, use a tag <h:outputFormat>

para exibir o resultado do conversormonetário.

107

<h:outputFormat value=" {0} em {1} equivale a {2} em {3} " rendered ="#{conversorMonetarioBean.resultado != null }"> <f:param value="#{conversorMonetarioBean.valor }"/> <f:param value="#{conversorMonetarioBean.de}"/> <f:param value="#{conversorMonetarioBean.resultado }"/> <f:param value="#{conversorMonetarioBean.para }"/> </h:outputFormat>

Componentes de Organização • <h:panelGrid>

• Organiza os elementos em uma grade.

• <h:panelGroup> • Permite que diversos componentes sejam tratados como um

único componente.

• <h:panelGrid> - organiza componentes em forma de uma grade. • atributo columns - configura a quantidade de colunas

108

Exemplo

109

<h:panelGrid columns ="2">

<h:outputLabel value ="Nome do curso:"for="nome"/>

<h:inputText value ="#{cursosBean.curso.nome}"id="nome"/>

<h:outputLabel value="Descrição:"for="descricao"/>

<h:inputTextarea value="#{cursosBean.curso.descricao}"

id="descricao"/>

<h:outputLabel value="Carga horária:"for="carga-horaria"/>

<h:inputText value ="#{cursosBean.curso.cargaHoraria}"

id="carga-horaria "/>

<h:commandButton action ="#{cursosBean.cadastraCurso}"

value ="Cadastrar"/>

</h:panelGrid >

PanelGroup • Usado para inserir mais de um componente em uma

mesma célula de um <h:panelGrid>. • Ex: adicionar um ícone de um relógio ao lado do rótulo “Carga

horária:”(imagem e o rótulo na mesma célula)

110

<h:panelGroup>

<h:outputLabel value="Carga horária:"for="carga-horaria"/>

<h:graphicImage library ="imagens"name="relogio.png"/>

</h: panelGroup >

Tabelas • <h:dataTable> usado para a criação de tabelas.

• Associação de uma lista de elementos a um <h:dataTable> é feita através do atributo value.

• O componente gera uma linha para cada item da lista. Os itens da lista podem ser acessados através de uma variável definida pelo atributo var.

111

Exemplo

112

<h:dataTable value ="#{cursosBean.cursos}"var ="curso">

<f:facet name ="header">Lista de cursos </f:facet >

<h:column >

<f:facet name ="header">Sigla </f:facet >

#{curso.sigla}

</h:column >

<h:column >

<f:facet name ="header">Nome </f:facet >

#{curso.nome }

</h:column >

<h:column >

<f:facet name ="header">Descrição </f:facet >

#{curso.descricao } </h:column >

<h:column >

<f:facet name ="header">Adicionar turma </f:facet >

<h:commandLink

value ="Adicionar turma"

action ="#{cursosBean.adicionarTurma(curso)}"/>

</h:column >

</h:dataTable >

Exemplo • Resultado

113

Exercício

• Criar uma relação de pessoas participantes do curso.

• Criar uma classe para modelar as pessoas (Pessoa)

• Criar um managed bean que forneça a lista de pessoas para uma tela de listagem de pessoas. (PessoaBean)

• Criar uma tela parcial para mostrar dados apenas de uma pessoas dentro de um item de uma lista html. (pessoaInfo.xhmtl)

• Criar uma tela principal de listagem de pessoas (listaPessoas.xhtml)

114

Pessoa

115

public class Pessoa {

private String nome;

private String dtNasc;

public String getDtNasc() {

return dtNasc;

}

public void setDtNasc(String dtNasc) {

this.dtNasc = dtNasc;

}

public String getNome() {

return nome;

}

public void setNome(String nome) {

this.nome = nome;

}

}

PessoaBean

116

@ManagedBean

@RequestScoped

public class PessoaBean {

private List <Pessoa> pessoas =

new ArrayList <Pessoa>() ;

/**

* Creates a new instance

* of PessoaBean

*/

public PessoaBean() {

Pessoa p = new Pessoa();

p.setNome("Ana Maria");

p.setDtNasc("10/10/10");

this.pessoas.add(p);

p = new Pessoa();

p.setNome("Jose Maria");

p.setDtNasc("10/10/10");

this.pessoas.add(p);

p = new Pessoa();

p.setNome("Maria Jose");

p.setDtNasc("10/10/10");

this.pessoas.add(p);

p = new Pessoa();

p.setNome("Mariana");

p.setDtNasc("10/10/10");

this.pessoas.add(p);

}

public List<Pessoa> getPessoas() {

return pessoas;

}

public void setPessoas

(List<Pessoa> pessoas) {

this.pessoas = pessoas;

}

}

pessoaInfo.xhtml

117

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <li > <h:outputText value ="Nome: #{pessoa.nome }"/> <br/> <h:outputText value ="Data Nascimento: #{pessoa.dtNasc}"/> </li > </ui:composition >

listaPessoas.xhtml

118

<?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">

<ui:composition template ="/WEB-INF/TEMPLATES/template.xhtml"

xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name ="conteudo">

<h:outputLabel value="Lista de Pessoas" style="color:red" />

<ul>

<ui:repeat var ="pessoa" value ="#{pessoaBean.pessoas}">

<ui:include src ="pessoaInfo.xhtml ">

<ui:param name ="pessoa" value ="#{pessoa}"/>

</ui:include >

</ui:repeat >

</ul >

</ui:define >

</ui:composition >

Mensagens • Durante o processamento de uma requisição, podemos

adicionar mensagens que podem ser exibidas na página de resposta.

• O primeiro parâmetro do método addMessage() define qual componente será associado à mensagem adicionada.

• null indica que a mensagem é considerada global, ou seja, ela não será associada a nenhum componente específico

119

FacesMessage mensagem = new FacesMessage ("Turma adicionada");

FacesContext.getCurrentInstance().addMessage (null,mensagem );

Mensagens • Na tela, para exibir todas as mensagens geradas no

processamento da requisição através do componente <h:messages>.

• Para exibir apenas as mensagens globais, utilize o atributo globalOnly

120

<h:messages globalOnly="true" />

JavaScript e CSS • Podemos adicionar recursos como scripts e arquivos de estilos (CSS) usando

diretamente as tags <script> e <link> do HTML.

• Porém, o JSF define outra maneira de inserir esses recursos nas páginas da aplicação. Tais recursos podem ser inseridos com as tags <h:outputScript> e <h:outputStylesheet>.

• A utilização dessas tags facilita a criação de componentes visuais personalizados ou o gerenciamento de recursos que dependem de regionalidade.

121

<h:outputScript name ="tst.js" library ="javascript"

target="head" />

<h:outputStylesheet name="tst.css" library ="css" />

Exercício

122

• No diretório WebContent, crie um diretório chamado resources.

• Dentro de resources, crie um diretório chamado css.

• Crie um arquivo chamado teste.css contendo o estilo desejado e adicione-o ao diretório WebContent/resources/css.

123

Exercício body {

font-family : arial , helvetica , sans-serif ;

font-size : 14px;

}

h1 {

color : #006699;

font-size : 18px;

}

ul {

list-style-type : square ;

}

input {

background-color : #E6E6FA ;

border : solid 1px #000000;

}

Exercício • Use a tag <h:outputStylesheet> para incluir o arquivo de

estilos na página definida por pessoas.xhtml.

• Use a tag <ui:repeat> para exibir as pessoas.

124

<h:outputStylesheet name="teste.css" library="css"/>

Exercício

125

• Considere a página de adição e listagem de pessoas.

• Modifique sua aplicação de forma que uma mensagem de confirmação seja exibida na tela após o usuário adicionar uma nova pessoa.

Outros componentes • <ui:remove>

• comentar (ou excluir) partes de código XHTML de uma aplicação

• o trecho de código dentro dessa tag é removido durante o processamento de uma página JSF.

• podemos usar os delimitadores <!-- e --> do XML para comentar o código

126

<ui:remove >

<h:outputText value="Sobrenome:

#{testeBean.sobrenome}" />

</ui:remove >

Outros componentes • <ui:repeat>

• iterar sobre coleções. Possui dois atributos obrigatórios:

• value: associa-se a uma coleção de objetos

• var: define o nome da variável usada para referenciar cada um dos elementos da coleção.

127

<h:outputText value =" Alguns cursos: " />

<ul >

<ui repeat value ="#{testeBean.cursos }" var = curso">

<li >

<h:outputText value ="#{ curso.sigla }:

#{ curso.nome }" />

</li >

</ui:repeat >

</ul >