MÓDULO Programação para Web 2

MÓDULO

Programação para Web 2

Introdução ao JSF

Java Server Faces

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.

Conceitos chaves do JSF

•

Componentes

•

Renderers

•

Managed-beans

•

Converters / Validators

•

Navegação

•

Eventos

Componentes (1)

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

Componentes (2)

• 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>

Renderers

• 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”

Managed beans

• POJO – Plain Old Java Objects

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

JSF Value Binding

•

“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)

•

login.jsp

JSF Value Binding

Exemplo (2)

•

login.jsp

Converters (1)

• 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 (3)

• 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

Converters (4) - Exemplo

• Converter declarado explicitamente

•

Ou implicitamente (converter mapeado para objetos

do tipo CPF)

Validators (1)

•

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

Validators (2)

• javax.faces.validator.Validator

Validators (3) - Exemplo

•

Validação para obrigatoriedade e comprimento do

campo

Navegação (1)

•

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)

Eventos (1)

•

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

Eventos (2) - Exemplo

•

Action event para navegação

Eventos (3) - Exemplo

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

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.

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.

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.

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.

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.

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.

@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.

@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 (#{}).

<!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 >

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

<!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

Valor : #{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.

@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()

<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.

@ManagedBean (name=”teste”)

public class TesteBean { ...

// GETTERS E SETTERS

Exemplo

•

Construa TextoBean:

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

<!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:

<!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 >

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.

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).

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.

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

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

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.

Processamento de uma

requisição

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

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

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 à

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.

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

Exemplo 2

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

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

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);

Criando o Bean

•

Finalizando o Bean Gerenciado JSF

UserNumberBean

– Faça-o implementar Serializable

– Informe o nome do Bean

@ManagedBean(name="UserNumberBean") @SessionScoped

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í!"; }

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

Alterando o index.xhtml

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>

Coloque uma imagem

<div id="right" class="subContainer">

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

alt="Duke waving" />

</div>

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>

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)

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

<!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>

Estrutura básica de uma página

JSF

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

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

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.

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.

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.

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

Exemplos

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

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

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

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

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 >

Exemplos

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 >

Exemplos

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,

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>

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.

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.

<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

• 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.

Seleção Única

public class CursosBean {

private String siglaDoCursoEscolhido; private List <Curso > cursos ;

// GETTERS E SETTERS

}

public class Curso {

private String sigla ; private String nome ;

Seleção Múltipla

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

<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

Exemplos

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

Exemplos

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

Exemplos

Exemplos

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

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

public class Pessoa { private String nome; private String idade;

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>.

Exercícios

•

Crie o método cadastrarPessoa em PessoaBean que

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.

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() {

Exercícios

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.

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.

<h:commandButton value ="Adiciona curso"

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

<h:commandLink value ="Remove curso"

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.

<h:outputFormat value="Preço do produto {0} : R$ {1} "> <f:param value="#{lojaBean.produto.nome }"/>

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

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

Exercício

•

No arquivo conversor-monetario.xhtml, use a tag

<h:outputFormat> para exibir o resultado do

conversormonetário.

<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 }"/>

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.

Exemplo

<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)

<h:panelGroup>

<h:outputLabel value="Carga horária:"for="carga-horaria"/> <h:graphicImage library ="imagens"name="relogio.png"/>

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.

Exemplo

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

Exemplo

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

Pessoa

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

@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

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

listaPessoas.xhtml

<!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

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

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.

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

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

Exercício

•

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

Exercício

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.

Exercício

•

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

<ui:remove >

<h:outputText value="Sobrenome:

#{testeBean.sobrenome}" />

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.

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