jsf

Captulo 10 - Componentes JSF Rosiclia Frasson

113

Componentes JSF

No JSF 2.0 as telas so definidas por meio arquivos .xhtml. A especificao do JSF possui um conjunto de componentes que podem ser utilizados na construo dessas telas. Esses componentes esto divididos duas bibliotecas:

HTML (http://java.sun.com/jsf/html): A biblioteca HTML possui os componentes visuais que geram o HTML da pgina.

Core (http://java.sun.com/jsf/core): A biblioteca core possui componentes no visuais, como validadores.

Com a tecnologia JSF, os componentes so renderizados em tempo de execuo, o que permite que um mesmo componente seja renderizado de acordo com o tipo de cliente que est solicitando, ou seja, uma mesma pgina ser renderizada de formas diferentes se for acessado por um computador e por um celular.

Para a utilizao dos componentes necessrio que as bibliotecas estejam importadas nos arquivos xhtml, atravs do pseudo-atributo xmlns. Segue um exemplo de como devem ser importadas as duas bibliotecas mencionadas.

importante perceber que foram declarados prefixos para as duas bibliotecas. Para a biblioteca core foi declarado o prefixo f e para a biblioteca html foi declarado o prefixo h. Podem ser declarados qualquer prefixo porm os mencionados so considerados padro e usados pelas maioria dos desenvolvedores.

Biblioteca HTML

Elementos HTML

Descrio Tag

Formulrio HTML. Embora nos formulrios HTML necessrio indicar os atributos method e action, em JSF estes valores no so definidos pelo desenvolvedor, pois, o method sempre post e a ao igual ao endereo da mesma pgina.

form

Captulo 10 - Componentes JSF

Campo de entrada de dados com apenas uma linha. Pode ser vinculado com um atributo de um managed bean.

Campo de entrada de dados com apenas uma linha. Pode ser vinculado

"#{usuarioBean.usuario.nome}" id="nome"/>

Campo de entrada de dados com mltiplas linhas. "#{usuarioBean.usuario.observacoes}"

Campo de entrada de dados do tipo senha. Os caracteres digitados

"#{usuarioBean.usuario.senha}" id="senha" />

Este campo pode ser utilizado para inserir informaes que devem ser enviadas automaticamente quando um formulrio

Renderiza o elemento label da HTML. Normalmente utilizado para mulrio. O atributo for vincula este componente

"login" />


Componente com funo similar ao commandButton. Apenas com

"#{usuarioBean.adicionaUsuario}"/>

Exibe uma mensagem de um componente especfico. Geralmente utilizada em conjunto com validadores e conversores. Para utilizar essa

necessrio definir um id para o componente referente a mensagem e associar message a este id atravs do atributo for.

"#{usuarioBean.usuario.idade}"

"S aceitamos candidatos que possuam

minimum="18" maximum="80"/>


Este componente permite que formulrio sejam exibidos juntos em um local especfico da tela.

messages

Este componente adiciona uma imagem na tela. O endereo da imagem deve ser informado no atributo value e pode ser usado o relativo da mesma.

graphicImage

Lista de seleo onde apenas um item pode ser selecionado. Os itens do componente podem ser estticos, como mostrado no exemplo abaixo ou dinmicos.

"No alfabetizado"/>

"Alfabetizado"/>

"Ensino fundamental

"Ensino mdio

"Superior completo"/>


Componente conhecido como combo box. No uso deste componente apenas uma opo pode ser selecionada. Os itens do componente podem ser estticos ou dinmicos. No exemplo a seguir, os elementos esto sendo carregados atravs de uma lista quedados adivindos de um banco de dados.


Caixa de seleo. No uso deste marcadas.


Componente similar ao selectOneMenu, com a diferena de que o mesmo permite que sejam selecionados vrios itens de uma vez utilizando a tecla CTRL.


Este componente utilizado para organizar as telas. Com ele possvel agrupar uma clula do panelGrid, por exemplo.

id=

letras e deve possuir entre 6 e 18 caracteres."

"#{usuarioBean.usuario.senha}"

"A senha deve possuir no mnimo 6

minimum="6"/>


Componente que gera uma tabela HTML. Pode ser vinculado a um managed bean para preenchimento de dados dinmicos.No exemplo a seguir, gerada uma tabela que representa uma agenda de contatos. Esses contatos poderiam estar armazenados em uma base de dados. A ttulo de exemplo, os contatos esto sendo adicionados manualmente no managed bean.

Segue o bean Contato, onde est definido que cada objeto deste tipo deve possuir um nome e um telefone. Tambm foi definido um construtor com estes dois atributos para facilitar a criao de um novo contato.

package

public

}

dataTable Componente que gera uma tabela HTML. Pode ser vinculado a um managed bean para preenchimento de dados dinmicos.No exemplo a seguir, gerada uma tabela que representa uma agenda de contatos. Esses contatos poderiam estar armazenados em uma base de dados. A ttulo de exemplo, os contatos esto sendo adicionados

ualmente no managed bean.


package br.com.rosicleiafrasson.cap10componentestabela

public class Contato {

private String nome;

private String telefone;

public Contato(String nome, String telefone

this.nome = nome;

this.telefone = telefone;

}

public String getNome() {

return nome;

}

public void setNome(String nome) {

this.nome = nome;

}

public String getTelefone() {

return telefone;

}

public void setTelefone(String telefone) {

this.telefone = telefone;

}

Rosiclia Frasson

121

Componente que gera uma tabela HTML. Pode ser vinculado a um managed bean para preenchimento de dados dinmicos. No exemplo a seguir, gerada uma tabela que representa uma agenda de contatos. Esses contatos poderiam estar armazenados em uma base de dados. A ttulo de exemplo, os contatos esto sendo adicionados


cap10componentestabela.modelo;

String telefone) {

{


122

A seguir, est ilustrado o managed bean ContatoBean que possui uma lista de contatos. No mtodo de acesso a esta lista so adicionados dois contatos para que os mesmos populem a tabela. package br.com.rosicleiafrasson.cap10componentestabela.controller;

import br.com.rosicleiafrasson.cap10componentestabela.modelo.Contato;

import java.util.ArrayList;

import java.util.List;

import javax.faces.bean.ManagedBean;

@ManagedBean

public class ContatoBean {

private List contatos = new ArrayList();

public List getContatos() {

contatos.clear();

contatos.add(new Contato("Maria", "(48) 9924-9078"));

contatos.add(new Contato("Joo", "(11) 3645-6754"));

return contatos;

}

}

Na pgina, onde est o componente dataTable definido atravs do atributo value os dados da tabela. O atributo var nomeia o elemento da iterao corrente para se ter acesso ao ndice da mesma nas colunas.

Exemplo Tabela


value=

Define uma coluna em uma tabela.column


124

Tags de atributos bsicos HTML

Descrio Atributo

Identifica o componente. Pode ser utilizado em todos os elementos HTML.

id

Associa o componente da camada de viso sua camada de controle. Pode ser utilizado em todos os elementos HTML.

binding

Renderiza ou no um componente. O valor false indica que o componente no deve ser renderizado. Pode ser utilizado em todos os elementos HTML.

rendered

Especifica uma classe CSS que contm definies de estilo. Pode ser utilizado em todos os elementos HTML.

styleClass

Associa o componente da camada de viso sua camada de controle. Pode ser utilizado nos input, output e command.

value

Evento disparado quando o usurio muda o valor selecionado no controle.

valueChangeListener

Permite a utilizao de um converter prprio, ou seja, um converter especfico do projeto.

converter


Define a quantidade mxima de caracteres de uma caixa de texto.

O valor do componente fica visvel. Porm no pode ser alterado. Normalmente utilizado em conjunto com teclados virtuais ou calendrios, pois o valor do campo fica disponvel para leitura, porm no pode ser alterado.

Relao entre o documento atual e um link especificado com o atributo href.href="/css/estilo.css" type="text/css" rel="stylesheet"

Nmero visvel de linhas em uma rea de texto.

Define o tamanho de uma caixa de texto.

Aplica um estilo a um componente.

"#{usuarioBean.usuario.observacoes}

"#{candidatoBean.candidato.nome}" id="nome"

"height: 90px" >

Define a ordem em que um elemento recebe o foco usando a tecla TAB. O valor para este atributo deve ser um nmero inteiro entre 0 e 32767.


127

Evento disparado quando o componente recebe foco. onfocus

Evento disparado assim que a tecla pressionada. onkeydown

Evento disparado assim que a tecla pressionada. disparado aps o onkeydow.

onkeypress

Evento disparado quando a tecla pressionada solta. onkeyup

Evento disparado quando o boto do mouse pressionado sobre o elemento. onmousedown

Evento disparado quando o mouse se move sobre o elemento. onmousemove

Evento disparado quando o mouse sair de cima do componente. onmouseout

Evento disparado quando o mouse passar em cima do componente. onmouseover

Evento disparado quando o boto do mouse liberado. onmouseup

Evento disparado quando o boto de reset do formulrio acionado. onreset

Evento disparado quando o texto contido no componente selecionado. onselect

Evento disparado quando o formulrio submetido. onsubmit

Biblioteca Core

Descrio Tag

Serve para delimitar a regio onde ser criada a rvore de componentes do JSF. Essa tag s necessria com o uso de JSP, no facelet no necessrio.

view

Serve para evitar que os IDs dos componentes se repitam na rvore de componentes, nos casos em que existem includes de pginas dinmicos.

subview

Adiciona uma faceta a um componente. No caso das tabelas, por exemplo, com esta tag possvel adicionar cabealho ou rodap.

facet


Cria um par de nome/valor que define o valor de umassociado com a tag que o contm.

attribute

Adiciona um parmetro a um componente.param

um evento de ao disparado quando o componente clicado. O evento executado na fase Invoke Application. O action contribui para a navegao das pginas, porm no possui informaes sobre o evento.


Permite a formatao de datas ser aplicado em dados do tipo java.util.Date.

maxFractionDigits: Define o nmero mximo de dgitos que sero formatados na parte fracionria do resultado. No fragmento de cdigo a seguir, o atributo pode ter no mximo 3 dgitos na parte fracionria. Caso a parte fracionria tenha uma maior quantidade de dgitos do que foi definido, o nmero ser arredondado.

"#{candidatoBean.candidato.peso}" id="peso">

"3" />

O campo acima ser convertido para o resultado a seguir.

maxIntegerDigits: Define a quantidade mxima de dgitos da parte


utilizado para a utilizao de conversores criados pelo desenvolvedor, ou seja, conversores

converter

Durante o processo de construo de aplicativos, alm de converter valores digitados pelo usurio em tipos especficos, necessrio verificar se os mesmos esto conforme algumas regras de negcio A validaao ocorre na fase Process Validation. Os validadores disparam mensagens que podem ser configuradas com o elemento validatorMessage.

Validadores

Utilizado para verificar se um valor numrico real est entre um determinado intervalo

validatorMessage=

maxIntegerDigits=

maximum=

validateDoubleRange

Verifica se uma string possui uma quantidade mnima ou mxima de letras.

Verifica se um nmero inteiro est entre um determinado intervalo de


Verifica se um texto respeita determinada expresso regular.

Este componente deve ser utilizado para validadores customizados.

Permite carregar um pacote de recursos do Locale da pgina atual e armazenar o mesmo em um mapa no escopo de request.

Especifica itens para um componente de seleo. Utilizado para valores dinmicos. No exemplo a seguir, os itens esto armazenados em uma lista e podem representar valores advindos de uma base de dados.

for="areaAtuacao"/>

>


Especifica um item para um componente de seleo. Utilizado para valores estticos.

"Prtica de esportes"/>

jsf

Documents

Transcript of jsf