aula 7 - tags jsf

Download Aula 7 - Tags JSF

Post on 10-Mar-2015

1.206 views

Category:

Documents

10 download

Embed Size (px)

TRANSCRIPT

22/11/2008

Aula 7

Tags Padro da JSF

Prof. Rafael Garcia Barbosa

Tags JSFIntroduo2

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

1

22/11/2008

Tags JSFIntroduo3

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

Sintaxe:

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

Tags HTML

2

22/11/2008

Tags JSF HTMLViso Geral5

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

Tags JSF HTMLViso Geral6

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

3

22/11/2008

Tags JSF HTMLAtributos7

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

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

4

22/11/2008

Tags JSF HTMLAtributos Bsicos9

ID

Permite acessar componentes JSF de outras tags, obter componentes no cdigo java ou mesmo acess-los via javascript Exibe uma mensagem para o campo nome

Binding

Permite associar um elemento html e referenci-lo na forma de componente no cdigo java private UIComponent statePrompt; public UIComponent getStatePrompt() { return statePrompt; } public void setStatePrompt(UIComponent statePrompt) {...}

Tags JSF HTMLAtributos HTML 4.010

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

5

22/11/2008

Tags JSF HTMLAtributos Eventos DHTML11

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

6

22/11/2008

Tags JSF HTMLOrganizao13

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 HTMLOrganizao14

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

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

7

22/11/2008

Tags JSF HTMLOrganizao15

Alguns outros atributos que podem ser especificados na tag panelGrid so descritos abaixoAtributo 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 HTMLOrganizao16

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

8

22/11/2008

Tags JSF HTMLOrganizao Exemplo17

body { background: #eee; } .errors { font-style: italic; } .evenRows { background: PowderBlue; } .oddRows { background: MediumTurquoise; }

Tags HTML Componentes

9

22/11/2008

Tags JSF HTMLComponentes Formulrios19

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

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"); } ... ... ...

Resultado

Preenchido no bean

Aps submit com erros

11

22/11/2008

Tags JSF HTMLComponentes Exibindo Textos e Imagens23

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