Upload
almir-oliveira
View
1.223
Download
10
Embed Size (px)
Citation preview
22/11/2008
1
Prof. Rafael Garcia Barbosa
– Tags Padrão da JSF
Aula 7
O desenvolvimento de aplicações que utilizem a tecnologia JSF requer um bom conhecimento das bibliotecas de tags da JSF
As bibliotecas padrão da JSF possuem um total de 43 tags e são divididas em duas bibliotecas:
Core
Representam tags genéricas independentes da forma de renderização (visualização) dos dados
HTML
Representam tags específicas para renderização de páginas HTML
Introdução
Tags JSF
2
22/11/2008
2
Assim como outras bibliotecas de tags, as Tags JSF precisam ser declaradas na página para poderem ser utilizadas O prefixo padrão das tags Core é f
O prefixo padrão das tags HTML é h
Sintaxe:
As tags core são abordadas aos poucos durante o desenvolvimento das aplicações, sendo assim, focaremos nas tags html
Introdução
Tags JSF
3
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
Tags HTML
22/11/2008
3
As tags HTML servem para representar diversos
tipos de componentes apresentados em uma
página:
Inputs
Outputs
Comandos
Seleção
Outros
Visão Geral
Tags JSF – HTML
5
Visão Geral
Tags JSF – HTML
6
Categoria Tags
Entrada de dados inputText, inputTextArea, inputSecret, inputHidden
Saída de dados outputLabel, outputLink, outputFormat, outputText
Comandos commandButton, commandLink
Seleções selectOneListbox, selectOneMenu, selectOneRadio,
selectBooleanCheckbox, selectManyCheckbox,
selectManyListbox, selectManyMenu
Layout panelGrid, panelGroup
Tabela de dados dataTable,column
Outras form, graphicImage
22/11/2008
4
Para simplificar o estudo das tags, os diversos
atributos comuns à maioria delas foram divididos
nos seguintes tipos:
Atributos básicos
Atributos HTML 4.0
Eventos DHTML
Primeiramente estudaremos estes atributos para
depois analisarmos as tags especificamente
Atributos
Tags JSF – HTML
7
Atributo Descrição
id Identificador de um componente
binding Referencia ao componente que pode ser usado em um backing
bean
rendered Booleano (false evita a renderização)
styleClass Classe de estilos CSS
value Valor do componente (value-binding expresson)
valueChangeListener* Ligação com um método que responde a mudanças de valores
converter Nome do conversor
validator* Nome do validador
required* Booleano (true indica campo obrigatório)
Atributos – Básicos
Tags JSF – HTML
8
*Usados somente em campos de entrada
22/11/2008
5
Atributos – Básicos
Tags JSF – HTML
9
ID
Permite acessar componentes JSF de outras tags, obter
componentes no código java ou mesmo acessá-los via
javascript
Binding
Permite associar um elemento html e referenciá-lo na forma
de componente no código java
<h:inputText id="nome".../>
<h:message for="nome"/>Exibe uma mensagem
para o campo nome
<h:outputText binding="#{form.statePrompt}".../>
private UIComponent statePrompt;
public UIComponent getStatePrompt() { return statePrompt; }
public void setStatePrompt(UIComponent statePrompt) {...}
Atributos – HTML 4.010
Tags JSF – HTML
Atributos HTML 4.0 são passados diretamente ao
componente html gerado
Alguns exemplos são exibidos na tabela abaixo:
Atributo Descrição
alt Texto alternativo para elementos que não conseguem ser
renderizados
disabled Booleano (true desabilita o componente)
maxlength Número máximo de caracteres em campos de texto
readonly Booleano (true indica campo não editável)
size Tamanho do campo de entrada
style Estilo CSS inline
22/11/2008
6
Atributos – Eventos DHTML11
Tags JSF – HTML
Os eventos DHTML suportados pelos componentes
HTML são também suportados pelas tags da JSF
Alguns exemplos são exibidos na tabela abaixo:
Atributo Descrição
onblur/onfocus Componente perdeu/recebeu o foco
onchange Valor do componente foi modificado
onclick/ondblclick Botão do mouse foi clicado/duplamente sobre o componente
onfocus Componente recebeu o foco
onkeydown/onkeyup/
onkeypress
Tecla foi pressionada/solta/pressionada e solta
onsubmit Form foi submetido
Tags HTML – Organização
22/11/2008
7
Existem tags JSF que permitem gerar tabelas
automaticamente e posicionar os componentes
dentro dessas tabelas
h:panelGrid
Cria tabelas
h:panelGroup
Trata vários componentes como sendo um só
Organização13
Tags JSF – HTML
No exemplo a abaixo, uma tabela será criada
contendo 3 colunas
O número de linha depende da quantidade de
elementos inseridos no corpo da tag
Cada elemento é inserido da esquerda para a direita
e de cima para baixo
Caso não seja especificado, o número de colunas será
igual a 1
Organização14
Tags JSF – HTML
<h:panelGrid columns="3">
...
</h:panelGrid>
22/11/2008
8
Alguns outros atributos que podem ser
especificados na tag panelGrid são descritos
abaixo
Organização15
Tags JSF – HTML
Atributo Descrição
bgcolor Cor de background
border Espessura da borda
cellpadding/c
ellspacing
Espaçamento interno/externo das células
columnClasses/
footerClass/
headerClass/
rowClasses
Classes CSS usadas para definir o estilo (no plural indica
separação por vírgula)
A tag panelGrid costuma ser utilizada em conjunto
com a tag panelGroup
Agrupar componentes faz com que sejam colocados em
uma mesma célula da tabela
Organização16
Tags JSF – HTML
<h:panelGrid columns="2">
...
<h:panelGroup>
<h:outputText value=“Nome:”/>
<h:inputText id="name" value="#{user.name}">
</h:panelGroup>
...
</h:panelGrid>
22/11/2008
9
Organização – Exemplo17
Tags JSF – HTML
<h:form>
<h:panelGrid columns="2" rowClasses="oddRows,evenRows">
<h:outputText value="Nome:"/>
<h:inputText id="name" required="true"/>
<h:outputText value="CEP:"/>
<h:panelGroup>
<h:inputText size="6"/>
<h:outputText value="-"/>
<h:inputText size="3"/>
</h:panelGroup>
</h:panelGrid>
<h:commandButton value="Enviar"/>
</h:form>
body {
background: #eee;
}
.errors {
font-style: italic;
}
.evenRows {
background: PowderBlue;
}
.oddRows {
background: MediumTurquoise;
}
Tags HTML – Componentes
22/11/2008
10
Componentes de formulário em JSF não apresentam os atributos method e action
O método é sempre POST
O action é definido pelo comando disparado
A navegação pode carregar outra página ou recarregar a mesma
Em geral, costuma-se definir um identificar para o formulário, uma vez que ele será utilizado como prefixo para cada um dos elementos presentes no formulário
Caso não seja definido um id, ele será gerado automaticamente
Todos os campos do formulário terão o id com a sintaxe:
nomeDoFormulario:nomeDoComponente
Componentes – Formulários19
Tags JSF – HTML
Componentes – Formulários20
Tags JSF – HTML
function checkPassword(form) {
var password = form["registerForm:password"].value;
var passwordConfirm = form["registerForm:passwordConfirm"].value;
if (password == passwordConfirm)
form.submit();
else
alert("Password and password confirm fields don't match");
}
...
<h:form id="registerForm">
...
<h:inputText id="password".../>
<h:inputText id="passwordConfirm".../>
...
<h:commandButton type="button” onclick="checkPassword(this.form)"/>
...
</h:form>
22/11/2008
11
JSF possui suporte para três tipos de campos
textuais:
h:inputText
h:inputSecret
h:inputTextArea
Alguns outros atributos estão presentes:
Componentes – Campos Textuais21
Tags JSF – HTML
Atributo Descrição
immediate Validação acontece logo no ciclo de vida
redisplay Exibe novamente o conteúdo de um campo de senha quando a
página é recarregada
rows/cols Número de linhas/colunas de uma área de texto
Componentes – Campos Textuais – Exemplos22
Tags JSF – HTML
<h:inputText value="#{form.testString}” readonly="true"/>
<h:inputSecret value="#{form.passwd}” redisplay="true"/>
<h:inputSecret value="#{form.passwd}” redisplay=“false"/>
<h:inputText value="inputText” style="color: Yellow;
background: Teal;"/>
<h:inputText value="1234567890" maxlength="6”
size="10"/>
Exemplo Resultado
Preenchido
no bean
Após submit
com erros
<h:inputTextarea value="123456789012345” rows="3"
cols="10"/>
22/11/2008
12
JSF possui suporte três tipos de campos de exibição
de textos e imagens:
h:outputText
h:outputFormat
h:graphicImage
As duas primeiras apresentam um atributo a mais:
Componentes – Exibindo Textos e Imagens23
Tags JSF – HTML
Atributo Descrição
escape Booleano (true indica uso de caracteres de escape, por
exemplo, < é convertido para <)
Componentes – Exibindo Textos e Imagens – Exemplos24
Tags JSF – HTML
<h:outputText value="Number #{form.number}"/>
<h:outputFormat value="{0} is {1} years old">
<f:param value="Bill"/>
<f:param value="38"/>
</h:outputFormat>
Exemplo Resultado
<h:graphicImage value="/tjefferson.jpg"/>
<h:outputText value="<input type=’text’ value=’hello’/>"/>
<h:outputText value="<input type=’text’ value=’hello’/>“
escape=“true”/>
Bill is 38 years old
Parâmetros
podem ser
passados
<h:outputFormat value="Hoje é {0, date, medium}.">
<f:param value="#{testeData.data}"/>
</h:outputFormat><br>
<h:outputFormat value="Hoje é {0, date, dd-MM-yyyy}.">
<f:param value="#{testeData.data}"/>
</h:outputFormat>
22/11/2008
13
JSF possui suporte para o campo hidden através da
tag
h:inputHidden
Ela possui os mesmos atributos básicos das outras
O mais importante é o value
Componentes – Campos Hidden25
Tags JSF – HTML
JSF possui suporte três tipos de botões e/ou links:
h:commandButton
h:commandLink
h:outputLink
Os dois primeiros representam componentes de comando
Disparam ações quando clicados/selecionados
O último é útil para a inclusão de links simples na página
Apontam para recursos sem envolver JSF
Componentes – Botões e Links26
Tags JSF – HTML
22/11/2008
14
Os componentes de comando possuem alguns
atributos particulares:
Componentes – Botões e Links27
Tags JSF – HTML
Atributo Descrição
action String nome lógico definido no face-config para redirecionamento
Method-binding método que executará a ação e retornará uma string
com o redirecionamento
actionListener Method-binding especificando o método: void nome(ActionEvent)
image Caminho para imagem especificada em um commandButton (/app/img.gif)
immediate Booleano (verdadeiro indica que ações são invocadas no início do ciclo de
vida)
type Tipo de botão gerado (commandButton): button, submit, reset
value Valor expresso no botão ou link (imagem)
Componentes – Botões e Links – Exemplos28
Tags JSF – HTML
<h:commandButton value="click this button..."
onclick="alert('button clicked')” type="button"/>
<h:commandButton value="disabled"
disabled="#{not form.buttonEnabled}"/>
<h:commandLink>
<h:outputText value="register"/>
</h:commandLink>
<h:commandLink value="welcome”
action="#{form.followLink}">
<h:commandLink>
<h:outputText value="welcome"/>
<f:param name=“nome" value=“Rafael"/>
</h:commandLink> Passando parâmetros para o link
Exemplo Resultado
22/11/2008
15
Componentes – Botões e Links – Exemplos29
Tags JSF – HTML
<h:outputLink value="http://java.net">
<h:graphicImage value="java-dot-net.jpg"/>
<h:outputText value="java.net"/>
</h:outputLink>
<h:outputLink value="#{form.welcomeURL}">
<h:outputText value="#{form.welcomeLinkText}"/>
</h:outputLink>
<h:outputLink value="#conclusion“
title="Go to the conclusion">
<h:outputText value="Conclusion"/>
</h:outputLink> <a name="conclusion">Conclusion</a>
Link para uma âncora
na mesma página
Exemplo Resultado
<h:outputLink value="#toc” title="Go to the TOC">
<f:verbatim>
<h2>Table of Contents</h2>
</f:verbatim>
</h:outputLink>
Crie uma aplicação que exibe um formulário de cadastro de medicamentos de uma farmácia e depois exibe em uma página os dados enviados
O formulário de cadastro deve conter os seguintes campos:
Nome de remédio (campo texto)
Princípio ativo (campo texto)
Observações (área)
Botão de submissão para cadastro
Link de submissão para cadastro
Na tela inicial tem um link simples para o cadastro
Exercício30
Tags JSF – HTML
22/11/2008
16
JSF possui suporte para sete tags de seleção:
h:selectBooleanCheckbox
Representa um único checkbox, que pode ser associado a uma propriedade booleana
h:selectManyCheckbox
Representa um grupo de checkbox que permite seleção múltipla
h:selectOneRadio
Representa um grupo de radio buttons que permite seleção simples
h:selectOneListbox
Representa uma lista de seleção única que exibe múltiplas linhas
h:selectManyListbox
Representa uma lista de seleção múltipla que exibe múltiplas linhas
h:selectOneMenu
Representa uma lista de seleção simples que exibe uma única linha
h:selectManyMenu
Representa uma lista de seleção múltipla que exibe uma única linha
Componentes – Seleções31
Tags JSF – HTML
Os componentes SelectionOneRadio e
selectManyCheckBox possuem alguns atributos
particulares:
Componentes – Seleções32
Tags JSF – HTML
Atributo Descrição
disabledClass Classe CSS para elementos desabilitados
enabledClass Classe CSS para elementos habilitados
layout lineDirection (horizontal) ou pageDirection (vertical)
22/11/2008
17
h:selectBooleanCheckbox
Componentes – Seleções33
Tags JSF – HTML
<h:selectBooleanCheckbox value="#{form.contactMe}"/>
private boolean contactMe;
public void setContactMe(boolean newValue) {
contactMe = newValue;
}
public boolean getContactMe() {
return contactMe;
}
h:selectManyCheckbox
Componentes – Seleções34
Tags JSF – HTML
<h:selectManyCheckbox value="#{form.colors}">
<f:selectItem itemValue="Red"/>
<f:selectItem itemValue="Blue"/>
<f:selectItem itemValue="Yellow"/>
<f:selectItem itemValue="Green"/>
<f:selectItem itemValue="Orange"/>
</h:selectManyCheckbox>
pageDirection
22/11/2008
18
h:selectOneRadio
Componentes – Seleções35
Tags JSF – HTML
<h:selectOneRadio value="#{form.education}">
<f:selectItem itemValue="High School"/>
<f:selectItem itemValue="Bachelor’s"/>
<f:selectItem itemValue="Master’s"/>
<f:selectItem itemValue="Doctorate"/>
</h:selectOneRadio>
h:selectOneListBox e h:selectManyListBox
Componentes – Seleções36
Tags JSF – HTML
<h:selectOneListbox value="#{form.year}" size="5">
<f:selectItem itemValue="1900"/>
<f:selectItem itemValue="1901"/>
...
</h:selectOneListbox>
<h:selectManyListbox value="#{form.languages}">
<f:selectItem itemValue="English"/>
<f:selectItem itemValue="French"/>
<f:selectItem itemValue="Italian"/>
<f:selectItem itemValue="Spanish"/>
<f:selectItem itemValue="Russian"/>
</h:selectManyListbox>
22/11/2008
19
h:selectOneMenu e h:selectManyMenu
O size dos componentes gerados é 1
Componentes – Seleções37
Tags JSF – HTML
<h:selectOneMenu value="#{form.day}">
<f:selectItem itemValue="Sunday"/>
<f:selectItem itemValue="Monday"/>
<f:selectItem itemValue="Tuesday"/>
…
</h:selectOneMenu>
<h:selectManyMenu value="#{form.day}">
<f:selectItem itemValue="Sunday"/>
<f:selectItem itemValue="Monday"/>
<f:selectItem itemValue="Tuesday"/>
…
</h:selectManyMenu>Incosistência de
renderização
do navegador
Diversos elementos de seleção trabalham em
conjunto com a tag selectItem ou a tag selectItems
selectItem permite especificar um único elemento a ser
adicionado como opção da lista de seleção
selectItems representa uma coleção a ser utilizada
para preencher as opções da lista de seleção
Componentes – Seleções38
Tags JSF – HTML
22/11/2008
20
Pode-se especificar apenas um valor que será
utilizado também como rótulo do item
Pode-se especificar o valor e o rótulo separados
Componentes – Seleções – selectItem39
Tags JSF – HTML
<h:selectOneMenu value="#{form.condiments}">
<f:selectItem itemValue="Cheese"/>
<f:selectItem itemValue="Pickle"/>
<f:selectItem itemValue="Mustard"/>
</h:selectOneRadio>
<h:selectOneMenu value="#{form.condiments}">
<f:selectItem itemValue="1" itemLabel="Cheese"/>
<f:selectItem itemValue="2" itemLabel="Pickle"/>
<f:selectItem itemValue="3" itemLabel="Mustard“ itemDisabled=“true”/>
</h:selectOneRadio>
Desabilita o item
Nos exemplos anteriores, os itens especificados foram todos
hard-coded, entretanto, na maioria das vezes esses valores
devem vir de algum lugar
Como fazer para adicionar esses valores na lista?
Deve-se especificar um bean contendo um objeto do tipo SelectItem
No item da página deve-se utilizar o atributo value da tag selectItem
com uma value-binding expression para o bean
Componentes – Seleções – selectItem40
Tags JSF – HTML
public class CondimBean {
private SelectItem cheeseItem = new SelectItem(“Cheese”);
private SelectItem pickleItem;
public SelectItem getCheeseItem() {
return cheeseItem;
}
...
}
<h:selectOneMenu value="#{form.condiments}">
<f:selectItem value="#{form.cheeseItem}"/>
</h:selectOneRadio>
22/11/2008
21
O construtor da classe SelectItem possui algumas
sobrecargas:
SelectItem(Object value)
Recebe apenas o valor (o rótulo será idêntico)
SelectItem(Object value, String label)
Recebe o valor e o rótulo
Componentes – Seleções – selectItem 41
Tags JSF – HTML
Embora o último exemplo seja bem mais interessante,
ainda é bastante trabalhoso
Para cada item da lista, é necessário criar uma
propriedade diferente no bean
Como fazer para manipular estes itens de uma forma
mais prática?
Utilizar um vetor de elementos SelectItem no bean
Utilizar a tag selectItems, associando o vetor ao atributo
value da tag
Componentes – Seleções – selectItems42
Tags JSF – HTML
22/11/2008
22
Componentes – Seleções – selectItems43
Tags JSF – HTML
public class CondimBean {
private SelectItem[] condiments = {
new SelectItem(new Integer(1), "Cheese"),
new SelectItem(new Integer(2), "Pickle"),
new SelectItem(new Integer(3), "Mustard"),
new SelectItem(new Integer(4), "Lettuce"),
new SelectItem(new Integer(5), "Onions")
};
public SelectItem[] getCondiments() {
return condiments;
}
...
}
<h:selectOneRadio>
<f:selectItems value="#{form.condiments}"/>
</h:selectOneRadio>
Pode apontar para um único objeto SelectItem,
um vetor de SelectItem, uma lista de SelectItem
ou um mapeamento cujas entradas representam
o rótulo (chave do mapeamento) e o valor
Até agora foi especificado apenas como fazer
para construir uma lista de elementos (checks,
radios, etc) na página
Um outro ponto importante é: como receber estes
valores selecionados para manipulá-los no bean?
Atributo value das tags selectOne e selectMany define
uma ligação com um atributo do bean
Tags selectOne define 1 atributo
Tags selectMany define uma lista de atributos
Componentes – Seleções44
Tags JSF – HTML
22/11/2008
23
Componentes – Seleções – Exemplo selectOne45
Tags JSF – HTML
...
private Integer education = null;
public Integer getEducation() {
return education;
}
public void setEducation(Integer newValue) {
education = newValue;
}
private SelectItem[] educationItems = {
new SelectItem(new Integer(1), "High School"),
new SelectItem(new Integer(2), "Bachelors"),
new SelectItem(new Integer(3), "Masters"),
new SelectItem(new Integer(4), "PHD")
};
public SelectItem[] getEducationItems() {
return educationItems;
}
<h:selectOneRadio value="#{form.education}">
<f:selectItems value="#{form.educationItems}"/>
</h:selectOneRadio>
Componentes – Seleções – Exemplo selectMany46
Tags JSF – HTML
...
private Integer[] condiments;
public void setCondiments(Integer[] newValue) {
condiments = newValue;
}
public Integer[] getCondiments() {
return condiments;
}
private static SelectItem[] condimentItems = {
new SelectItem(new Integer(1), "Cheese"),
new SelectItem(new Integer(2), "Pickle"),
new SelectItem(new Integer(3), "Mustard")
};
public SelectItem[] getCondimentItems() {
return condimentItems;
}
<h:selectManyListbox value="#{form.condiments}">
<f:selectItems value="#{form.condimentItems}"/>
</h:selectManyListbox>
Pode ser uma lista
22/11/2008
24
Componentes – Exemplo Completo47
Tags JSF – HTML
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Nome:"/>
<h:inputText value="#{pessoaForm.pessoa.nome}"/>
<h:outputText value="Idade:"/>
<h:inputText value="#{pessoaForm.pessoa.idade}"/>
<h:outputText value="Habilitação:"/>
<h:panelGroup>
<h:selectBooleanCheckbox value="#{pessoaForm.pessoa.habilitado}"/>
<h:outputText value="Sim"/>
</h:panelGroup>
<h:outputText value="Sexo:"/>
<h:selectOneRadio value="#{pessoaForm.pessoa.sexo}">
<f:selectItems value="#{pessoaForm.sexoItens}"/>
</h:selectOneRadio>
<h:outputText value="Hobbies:"/>
<h:selectManyCheckbox value="#{pessoaForm.pessoa.hobbies}">
<f:selectItems value="#{pessoaForm.hobbiesItens}"/>
</h:selectManyCheckbox>
</h:panelGrid>
<h:commandButton value="Enviar" action="sucesso"/>
</h:form>
public class PessoaForm {
private Pessoa pessoa = new Pessoa();
private SelectItem[] sexoItens = {
new SelectItem("M","Masculino"),
new SelectItem("F","Feminino")
};
private SelectItem[] hobbiesItens = {
new SelectItem("1","Jogos"),
new SelectItem("2","Livros"),
new SelectItem("3","Filmes"),
new SelectItem("4","Seriados")
};
... //gets e sets
Página com formulário
public class Pessoa {
private String nome;
private int idade;
private boolean habilitado;
private String sexo;
private List<String> hobbies;
....
Bean do formulário
Java bean
Componentes – Exemplo Completo48
Tags JSF – HTML
<h:panelGrid columns="2" border="1">
<h:outputText value="Nome:"/>
<h:outputText value="#{pessoaForm.pessoa.nome}"/>
<h:outputText value="Idade:"/>
<h:outputText value="#{pessoaForm.pessoa.idade}"/>
<h:outputText value="Habilitação:"/>
<h:outputText value="#{pessoaForm.pessoa.habilitado}"/>
<h:outputText value="Sexo:"/>
<h:outputText value="#{pessoaForm.pessoa.sexo}"/>
<h:outputText value="Hobbies:"/>
<h:dataTable value="#{pessoaForm.pessoa.hobbies}" var="hobbie">
<h:column><h:outputText value="#{hobbie}"/></h:column>
</h:dataTable>
</h:panelGrid>
Página de resultado
22/11/2008
25
Componentes – Exemplo Completo49
Tags JSF – HTML
Modifique a aplicação anterior para incluir os
seguintes campos:
Se o remédio vem em drágeas ou suspensão (radio)
O peso de cada drágea ou da suspensão
Unidade (lista de seleção simples contendo: mg, g, ml
obtidos do bean)
Quais as doenças às quais ele se destina (uma lista de
seleção múltipla previamente preenchida pelo bean)
Exemplo50
Tags JSF – HTML