22/11/2008

Aula 7

Tags Padro da JSF

Prof. Rafael Garcia Barbosa

Tags JSF
Introduo
2

O desenvolvimento de aplicaes que utilizem a tecnologia JSF requer um bom conhecimento das bibliotecas de tags da JSF As bibliotecas padro da JSF possuem um total de 43 tags e so divididas em duas bibliotecas:
Core
Representam

tags genricas independentes da forma de renderizao (visualizao) dos dados tags especficas para renderizao de pginas HTML

HTML
Representam

22/11/2008

Tags JSF
Introduo
3

Assim como outras bibliotecas de tags, as Tags JSF precisam ser declaradas na pgina para poderem ser utilizadas
O prefixo padro das tags Core f O prefixo padro das tags HTML h

Sintaxe:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

As tags core so abordadas aos poucos durante o desenvolvimento das aplicaes, sendo assim, focaremos nas tags html

Tags HTML

22/11/2008

Tags JSF HTML

Viso Geral
5

As tags HTML servem para representar diversos tipos de componentes apresentados em uma pgina:
Inputs Outputs Comandos Seleo Outros

Tags JSF HTML

Viso Geral
6

Categoria Entrada de dados Sada de dados Comandos Selees

Tags inputText, inputTextArea, inputSecret, inputHidden outputLabel, outputLink, outputFormat, outputText commandButton, commandLink selectOneListbox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu panelGrid, panelGroup dataTable,column form, graphicImage

Layout Tabela de dados Outras

22/11/2008

Tags JSF HTML

Atributos
7

Para simplificar o estudo das tags, os diversos atributos comuns maioria delas foram divididos nos seguintes tipos:
Atributos

bsicos Atributos HTML 4.0 Eventos DHTML

Primeiramente estudaremos estes atributos para depois analisarmos as tags especificamente

Tags JSF HTML

Atributos Bsicos
8

Atributo id binding rendered styleClass value converter validator* required*

Descrio Identificador de um componente Referencia ao componente que pode ser usado em um backing bean Booleano (false evita a renderizao) Classe de estilos CSS Valor do componente (value-binding expresson) Nome do conversor Nome do validador Booleano (true indica campo obrigatrio)

valueChangeListener* Ligao com um mtodo que responde a mudanas de valores

*Usados somente em campos de entrada

22/11/2008

Tags JSF HTML

Atributos Bsicos
9

ID

Permite acessar componentes JSF de outras tags, obter componentes no cdigo java ou mesmo acess-los via javascript
<h:inputText id="nome".../> <h:message for="nome"/>
Exibe uma mensagem para o campo nome

Binding

Permite associar um elemento html e referenci-lo na forma de componente no cdigo java

<h:outputText binding="#{form.statePrompt}".../> private UIComponent statePrompt; public UIComponent getStatePrompt() { return statePrompt; } public void setStatePrompt(UIComponent statePrompt) {...}

Tags JSF HTML

Atributos HTML 4.0
10

Atributos HTML 4.0 so passados diretamente ao componente html gerado Alguns exemplos so exibidos na tabela abaixo:
Atributo Descrio Texto alternativo para elementos que no conseguem ser renderizados Booleano (true desabilita o componente) Nmero mximo de caracteres em campos de texto Booleano (true indica campo no editvel) Tamanho do campo de entrada Estilo CSS inline

alt disabled maxlength readonly size style

22/11/2008

Tags JSF HTML

Atributos Eventos DHTML
11

Os eventos DHTML suportados pelos componentes HTML so tambm suportados pelas tags da JSF Alguns exemplos so exibidos na tabela abaixo:
Atributo Descrio Componente perdeu/recebeu o foco Valor do componente foi modificado Boto do mouse foi clicado/duplamente sobre o componente Componente recebeu o foco

onblur/onfocus onchange onclick/ondblclick onfocus

onkeydown/onkeyup/ Tecla foi pressionada/solta/pressionada e solta onkeypress onsubmit Form foi submetido

Tags HTML Organizao

22/11/2008

Tags JSF HTML

Organizao
13

Existem tags JSF que permitem gerar tabelas automaticamente e posicionar os componentes dentro dessas tabelas
h:panelGrid
Cria

tabelas vrios componentes como sendo um s

h:panelGroup
Trata

Tags JSF HTML

Organizao
14

No exemplo a abaixo, uma tabela ser criada contendo 3 colunas

O

nmero 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 no seja especificado, o nmero de colunas ser igual a 1
<h:panelGrid columns="3"> ... </h:panelGrid>

22/11/2008

Tags JSF HTML

Organizao
15

Alguns outros atributos que podem ser especificados na tag panelGrid so descritos abaixo
Atributo bgcolor border cellpadding/c ellspacing Descrio Cor de background Espessura da borda Espaamento interno/externo das clulas

columnClasses/ Classes CSS usadas para definir o estilo (no plural indica footerClass/ separao por vrgula) headerClass/ rowClasses

Tags JSF HTML

Organizao
16

A tag panelGrid costuma ser utilizada em conjunto com a tag panelGroup

Agrupar

componentes faz com que sejam colocados em uma mesma clula da tabela
<h:panelGrid columns="2"> ... <h:panelGroup> <h:outputText value=Nome:/> <h:inputText id="name" value="#{user.name}"> </h:panelGroup> ... </h:panelGrid>

22/11/2008

Tags JSF HTML

Organizao Exemplo
17

<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

Tags JSF HTML

Componentes Formulrios
19

Componentes de formulrio em JSF no apresentam os atributos method e action

O mtodo sempre POST O action definido pelo comando disparado

A navegao pode carregar outra pgina ou recarregar a mesma

Em geral, costuma-se definir um identificar para o formulrio, uma vez que ele ser utilizado como prefixo para cada um dos elementos presentes no formulrio

Caso no seja definido um id, ele ser gerado automaticamente Todos os campos do formulrio tero o id com a sintaxe:

nomeDoFormulario:nomeDoComponente

Tags JSF HTML

Componentes Formulrios
20

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>

10

22/11/2008

Tags JSF HTML

Componentes Campos Textuais
21

JSF possui suporte para trs tipos de campos textuais:

h:inputText h:inputSecret h:inputTextArea

Alguns outros atributos esto presentes:

Atributo redisplay rows/cols Descrio Exibe novamente o contedo de um campo de senha quando a pgina recarregada Nmero de linhas/colunas de uma rea de texto immediate Validao acontece logo no ciclo de vida

Tags JSF HTML

Componentes Campos Textuais Exemplos
22

Exemplo
<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"/> <h:inputTextarea value="123456789012345 rows="3" cols="10"/>

Resultado

Preenchido no bean

Aps submit com erros

11

22/11/2008

Tags JSF HTML

Componentes Exibindo Textos e Imagens
23

JSF possui suporte trs tipos de campos de exibio de textos e imagens:

h:outputText h:outputFormat h:graphicImage

As duas primeiras apresentam um atributo a mais:

Atributo escape Descrio Booleano (true indica uso de caracteres de escape, por exemplo, < convertido para &lt;)

Tags JSF HTML

Componentes Exibindo Textos e Imagens Exemplos
24

Exemplo
<h:outputText value="Number #{form.number}"/> <h:outputText value="<input type=text value=hello/>"/> <h:outputText value="<input type=text value=hello/> escape=true/> <h:outputFormat value="{0} is {1} years old"> <f:param value="Bill"/> <f:param value="38"/> </h:outputFormat> <h:outputFormat value="Hoje {0, date, medium}."> <f:param value="#{testeData.data}"/> Parmetros podem ser </h:outputFormat><br> passados <h:outputFormat value="Hoje {0, date, dd-MM-yyyy}."> <f:param value="#{testeData.data}"/> </h:outputFormat> <h:graphicImage value="/tjefferson.jpg"/>

Resultado

Bill is 38 years old

12

22/11/2008

Tags JSF HTML

Componentes Campos Hidden
25

JSF possui suporte para o campo hidden atravs da tag

h:inputHidden

Ela possui os mesmos atributos bsicos das outras

O

mais importante o value

Tags JSF HTML

Componentes Botes e Links
26

JSF possui suporte trs tipos de botes e/ou links:

h:commandButton h:commandLink h:outputLink

Os dois primeiros representam componentes de comando

Disparam

aes quando clicados/selecionados

O ltimo til para a incluso de links simples na pgina

Apontam

para recursos sem envolver JSF

13

22/11/2008

Tags JSF HTML

Componentes Botes e Links
27

Os componentes de comando possuem alguns atributos particulares:

Descrio String nome lgico definido no face-config para redirecionamento Method-binding mtodo que executar a ao e retornar uma string com o redirecionamento Method-binding especificando o mtodo: void nome(ActionEvent) Caminho para imagem especificada em um commandButton (/app/img.gif) Booleano (verdadeiro indica que aes so invocadas no incio do ciclo de vida) Tipo de boto gerado (commandButton): button, submit, reset Valor expresso no boto ou link (imagem)

Atributo action

actionListener image immediate type value

Tags JSF HTML

Componentes Botes e Links Exemplos
28

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

Resultado

Passando parmetros para o link

14

22/11/2008

Tags JSF HTML

Componentes Botes e Links Exemplos
29

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

Resultado

<h:outputLink value="#conclusion title="Go to the conclusion"> Link para uma ncora <h:outputText value="Conclusion"/> na mesma pgina </h:outputLink> <a name="conclusion">Conclusion</a> <h:outputLink value="#toc title="Go to the TOC"> <f:verbatim> <h2>Table of Contents</h2> </f:verbatim> </h:outputLink>

Tags JSF HTML

Exerccio
30

Crie uma aplicao que exibe um formulrio de cadastro de medicamentos de uma farmcia e depois exibe em uma pgina os dados enviados O formulrio de cadastro deve conter os seguintes campos:
Nome de remdio (campo texto) Princpio ativo (campo texto) Observaes (rea) Boto de submisso para cadastro Link de submisso para cadastro

Na tela inicial tem um link simples para o cadastro

15

22/11/2008

Tags JSF HTML

Componentes Selees
31

JSF possui suporte para sete tags de seleo:

h:selectBooleanCheckbox

Representa um nico checkbox, que pode ser associado a uma propriedade booleana Representa um grupo de checkbox que permite seleo mltipla Representa um grupo de radio buttons que permite seleo simples Representa uma lista de seleo nica que exibe mltiplas linhas Representa uma lista de seleo mltipla que exibe mltiplas linhas Representa uma lista de seleo simples que exibe uma nica linha Representa uma lista de seleo mltipla que exibe uma nica linha

h:selectManyCheckbox

h:selectOneRadio

h:selectOneListbox

h:selectManyListbox

h:selectOneMenu

h:selectManyMenu

Tags JSF HTML

Componentes Selees
32

Os componentes SelectionOneRadio e selectManyCheckBox possuem alguns atributos particulares:

Atributo disabledClass enabledClass layout Descrio Classe CSS para elementos desabilitados Classe CSS para elementos habilitados lineDirection (horizontal) ou pageDirection (vertical)

16

22/11/2008

Tags JSF HTML

Componentes Selees
33

h:selectBooleanCheckbox

<h:selectBooleanCheckbox value="#{form.contactMe}"/>

private boolean contactMe; public void setContactMe(boolean newValue) { contactMe = newValue; } public boolean getContactMe() { return contactMe; }

Tags JSF HTML

Componentes Selees
34

h:selectManyCheckbox

<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

17

22/11/2008

Tags JSF HTML

Componentes Selees
35

h:selectOneRadio

<h:selectOneRadio value="#{form.education}"> <f:selectItem itemValue="High School"/> <f:selectItem itemValue="Bachelors"/> <f:selectItem itemValue="Masters"/> <f:selectItem itemValue="Doctorate"/> </h:selectOneRadio>

Tags JSF HTML

Componentes Selees
36

h:selectOneListBox e h:selectManyListBox
<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>

18

22/11/2008

Tags JSF HTML

Componentes Selees
37

h:selectOneMenu e h:selectManyMenu
O

size dos componentes gerados 1

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

Incosistncia de renderizao do navegador

Tags JSF HTML

Componentes Selees
38

Diversos elementos de seleo trabalham em conjunto com a tag selectItem ou a tag selectItems
selectItem

permite especificar um nico elemento a ser adicionado como opo da lista de seleo selectItems representa uma coleo a ser utilizada para preencher as opes da lista de seleo

19

22/11/2008

Tags JSF HTML

Componentes Selees selectItem
39

Pode-se especificar apenas um valor que ser utilizado tambm como rtulo do item
<h:selectOneMenu value="#{form.condiments}"> <f:selectItem itemValue="Cheese"/> <f:selectItem itemValue="Pickle"/> <f:selectItem itemValue="Mustard"/> </h:selectOneRadio>

Pode-se especificar o valor e o rtulo separados

<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

Tags JSF HTML

Componentes Selees selectItem
40

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 pgina deve-se utilizar o atributo value da tag selectItem com uma value-binding expression para o bean

public class CondimBean { private SelectItem cheeseItem = new SelectItem(Cheese); private SelectItem pickleItem; <h:selectOneMenu value="#{form.condiments}"> public SelectItem getCheeseItem() { <f:selectItem value="#{form.cheeseItem}"/> return cheeseItem; </h:selectOneRadio> } ... }

20

22/11/2008

Tags JSF HTML

Componentes Selees selectItem
41

O construtor da classe SelectItem possui algumas sobrecargas:

SelectItem(Object
Recebe

value)

apenas o valor (o rtulo ser idntico)

SelectItem(Object
Recebe

value, String label)

o valor e o rtulo

Tags JSF HTML

Componentes Selees selectItems
42

Embora o ltimo exemplo seja bem mais interessante, ainda bastante trabalhoso

Para cada item da lista, necessrio criar uma propriedade diferente no bean

Como fazer para manipular estes itens de uma forma mais prtica?
Utilizar um vetor de elementos SelectItem no bean Utilizar a tag selectItems, associando o vetor ao atributo value da tag

21

22/11/2008

Tags JSF HTML

Componentes Selees selectItems
43

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 rtulo (chave do mapeamento) e o valor

Tags JSF HTML

Componentes Selees
44

At agora foi especificado apenas como fazer para construir uma lista de elementos (checks, radios, etc) na pgina Um outro ponto importante : como receber estes valores selecionados para manipul-los no bean?
Atributo
Tags

value das tags selectOne e selectMany define uma ligao com um atributo do bean
selectOne define 1 atributo Tags selectMany define uma lista de atributos

22

22/11/2008

Tags JSF HTML

Componentes Selees Exemplo selectOne
45

... <h:selectOneRadio value="#{form.education}"> private Integer education = null; <f:selectItems value="#{form.educationItems}"/> public Integer getEducation() { </h:selectOneRadio> 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; }

Tags JSF HTML

Componentes Selees Exemplo selectMany
46

... Pode ser uma lista private Integer[] condiments; public void setCondiments(Integer[] newValue) { condiments = newValue; } <h:selectManyListbox value="#{form.condiments}"> public Integer[] getCondiments() { <f:selectItems value="#{form.condimentItems}"/> return condiments; </h:selectManyListbox> } 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; }

23

22/11/2008

Tags JSF HTML

Componentes Exemplo Completo
47

Pgina com formulrio <h:form> Java bean <h:panelGrid columns="2"> public class Pessoa { <h:outputText value="Nome:"/> private String nome; <h:inputText value="#{pessoaForm.pessoa.nome}"/> private int idade; <h:outputText value="Idade:"/> private boolean habilitado; <h:inputText value="#{pessoaForm.pessoa.idade}"/> private String sexo; <h:outputText value="Habilitao:"/> private List<String> hobbies; <h:panelGroup> .... <h:selectBooleanCheckbox value="#{pessoaForm.pessoa.habilitado}"/> <h:outputText value="Sim"/> Bean do formulrio </h:panelGroup> public class PessoaForm { <h:outputText value="Sexo:"/> private Pessoa pessoa = new Pessoa(); <h:selectOneRadio value="#{pessoaForm.pessoa.sexo}"> private SelectItem[] sexoItens = { <f:selectItems value="#{pessoaForm.sexoItens}"/> new SelectItem("M","Masculino"), </h:selectOneRadio> new SelectItem("F","Feminino") <h:outputText value="Hobbies:"/> }; <h:selectManyCheckbox value="#{pessoaForm.pessoa.hobbies}"> private SelectItem[] hobbiesItens = { <f:selectItems value="#{pessoaForm.hobbiesItens}"/> new SelectItem("1","Jogos"), </h:selectManyCheckbox> new SelectItem("2","Livros"), </h:panelGrid> new SelectItem("3","Filmes"), <h:commandButton value="Enviar" action="sucesso"/> new SelectItem("4","Seriados") </h:form> }; ... //gets e sets

Tags JSF HTML

Componentes Exemplo Completo
48

Pgina de resultado
<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="Habilitao:"/> <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>

24

22/11/2008

Tags JSF HTML

Componentes Exemplo Completo
49

Tags JSF HTML

Exemplo
50

Modifique a aplicao anterior para incluir os seguintes campos:

Se

o remdio vem em drgeas ou suspenso (radio) O peso de cada drgea ou da suspenso Unidade (lista de seleo simples contendo: mg, g, ml obtidos do bean) Quais as doenas s quais ele se destina (uma lista de seleo mltipla previamente preenchida pelo bean)

25