Professional Documents
Culture Documents
Aula 7
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
As tags HTML servem para representar diversos tipos de componentes apresentados em uma pgina:
Inputs Outputs Comandos Seleo Outros
Tags inputText, inputTextArea, inputSecret, inputHidden outputLabel, outputLink, outputFormat, outputText commandButton, commandLink selectOneListbox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu panelGrid, panelGroup dataTable,column form, graphicImage
22/11/2008
Para simplificar o estudo das tags, os diversos atributos comuns maioria delas foram divididos nos seguintes tipos:
Atributos
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)
22/11/2008
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
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
22/11/2008
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
onkeydown/onkeyup/ Tecla foi pressionada/solta/pressionada e solta onkeypress onsubmit Form foi submetido
22/11/2008
Existem tags JSF que permitem gerar tabelas automaticamente e posicionar os componentes dentro dessas tabelas
h:panelGrid
Cria
h:panelGroup
Trata
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
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
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
<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; }
22/11/2008
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
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
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
11
22/11/2008
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
12
22/11/2008
13
22/11/2008
Atributo action
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
14
22/11/2008
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>
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
15
22/11/2008
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
16
22/11/2008
h:selectBooleanCheckbox
<h:selectBooleanCheckbox value="#{form.contactMe}"/>
private boolean contactMe; public void setContactMe(boolean newValue) { contactMe = newValue; } public boolean getContactMe() { return contactMe; }
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
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>
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
h:selectOneMenu e h:selectManyMenu
O
<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>
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
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>
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?
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
value)
SelectItem(Object
Recebe
o valor e o rtulo
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
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; } ... }
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
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
... <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; }
... 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
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
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
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