Aula 13: JSF (III)

(1)

Aula 13: JSF (III)

Diego Passos

Universidade Federal Fluminense

Técnicas de Projeto e Implementação de Sistemas II

(2)

Aula Passada

JSF Actions e Views.

Regras de Navegac¸˜ao.

Componentes mais sofisticados.

Eventos da interface com o usu´ario.

(3)

Nesta Aula

Construc¸˜ao de tabelas.

Validac¸˜ao de dados.

Mensagens.

(4)

Construc¸˜ ao de Tabelas

JSF contém componentes que permitem a criação de tabelas em views.

Estas tabelas podem ser classificadas em dois grupos:

I Tabelas de componentes.

F Permitem agrupar e organizar outros componentes JSF.

F N´umero de componentes deve ser conhecido em tempo de desenvolvimento.

I Tabelas de dados.

F Permitem exibir conjuntos de dados.

F Permitem iterar por listas, por exemplo.

F Se adaptam a quantidades arbitrárias de dados, definidas em tempo de execução.

(5)

Tabelas de Componentes: A Tag panelGrid

Tabelas de componentes s˜ao implementadas com a tagpanelGrid. Exemplo:

<h:panelGridcolumnClasses="rowLabel,rowContent"columns="2">

<h:outputTextvalue="Title:"/>

<h:outputTextvalue="#{bookdisplayform.book.title}"/>

<h:outputTextvalue="Author:"/>

<h:outputTextvalue="#{bookdisplayform.book.author}"/>

<h:outputTextvalue="ISBN:"/>

<h:outputTextvalue="#{bookdisplayform.book.ISBN}"/>

<h:outputTextvalue="Status:"/>

<h:outputTextvalue="#{bookdisplayform.book.checkedOut ? ’Checked Out’ : ’Checked In’}"/>

</h:panelGrid>

Devemos especificar um n´umero de colunas desejado.

Número de linhas é implicitamente calculado com base no número de componentes da tabela.

(6)

Tabelas de Componentes: A Tag panelGrid (II)

A tag aceita também especificações de CSS.

No exemplo anterior, foram especificados estilos diferentes para cada coluna:

Classes rowLabel e rowContentfazem referˆencia a estilos definidos em um CSS:

.rowLabel{

background-color: #dddddd;

padding-left: 1em;

padding-right: 1em;

padding-top: 0.2em;

padding-bottom: 0.2em;

text-align:right;

border:thin solid#000000;

}

.rowContent{ padding-left: 1em;

padding-right: 1em;

padding-top: 0.2em;

padding-bottom: 0.2em;

text-align:right;

border:thin solid#000000;

(7)

Tabelas de Componentes: A Tag panelGrid (III)

Pode-se especificar CSS para:

I Colunas.

I Linhas.

I Cabec¸alho.

I Rodap´e.

Outro exemplo (com linhas):

<h:panelGridrowClasses="oddRows,evenRows"columns="4">

</h:panelGrid>

Especificação diz que a primeira linha é da class oddRows. Segunda linha é da classeevenRows.

Se h´a mais de duas linhas, padr˜ao se repete ciclicamente.

(8)

Tabelas de Componentes: A Tag panelGrid (IV)

Note que a tag s´o afeta componentes de interface.

Considere o seguinte trecho de c´odigo:

<h:panelGridrowClasses="oddRows,evenRows"columns="4">

Algum texto solto.

<ahref="teste.html">Um Link</a>

<h2>Um header</h2>

</h:panelGrid>

O que ocorre neste caso?

(9)

Grupos de Componentes: A Tag panelGroup

Uma tag relacionada à tag panelGridé apanelGroup. Esta tag agrupa vários componentes em uma mesma unidade.

I Como se fossem um ´unico componente.

Pode ser usado para simplificar a decisão de renderização de um grupo de componentes.

Ou para organiz´a-los em um panelGrid.

(10)

Grupos de Componentes: A Tag panelGroup (II)

Exemplo 1: agrupamento para renderizac¸˜ao.

<h:panelGrouprendered="#{bookdisplayform.bookSelected}">

<h:outputTextvalue="Title:"/>

<h:outputTextvalue="#{bookdisplayform.book.title}"/>

<h:outputTextvalue="Author:"/>

<h:outputTextvalue="#{bookdisplayform.book.author}"/>

<h:outputTextvalue="ISBN:"/>

<h:outputTextvalue="#{bookdisplayform.book.ISBN}"/>

<h:outputText

value="#{bookdisplayform.book.checkedOut ? ’Checked Out’ : ’Checked In’}"/>

</h:panelGrid>

<h:panelGroupid="buttonHolder">

<h:panelGrouprendered="#{usersession.currentUser.borrower}">

<h:commandButtonvalue="Check Out"action="#{bookdisplayform.checkBookOut}"

rendered="#{not bookdisplayform.book.checkedOut}"/>

</h:panelGroup>

<h:panelGrouprendered="#{usersession.currentUser.librarian}">

<h:commandButtonvalue="Check In"action="#{bookdisplayform.checkBookIn}"

rendered="#{bookdisplayform.book.checkedOut}"/>

</h:panelGroup>

(11)

Grupos de Componentes: A Tag panelGroup (III)

Exemplo 2: agrupamento de componentes em c´elulas de colunas.

<h:panelGroup>

<h:outputTextvalue="Title:"/><br>

<h:outputTextvalue="Author:"/><br>

<h:outputTextvalue="ISBN:"/><br>

</h:panelGroup>

<h:panelGroup>

<h:outputTextvalue="#{bookdisplayform.book.title}"/><br>

<h:outputTextvalue="#{bookdisplayform.book.author}"/><br>

<h:outputTextvalue="#{bookdisplayform.book.ISBN}"/><br>

<h:outputText

value="#{bookdisplayform.book.checkedOut ? ’Checked Out’ : ’Checked In’}"/>

</h:panelGroup>

</h:panelGrid>

(12)

Tabelas de Dados

As tabelas geradas pelo componentepanelGrid podem conter dados e valores dinˆamicos.

Mas s˜ao est´aticas em formato.

I Número de células (linhas e colunas) é fixo.

I Definido em tempo de codificac¸˜ao.

Mas em geral, queremos permitir tabelas de dados com n´umero de linhas vari´avel.

I Definido em tempo de execuc¸˜ao.

Exemplo: resultado de uma consulta SQL.

(13)

Tabelas de Dados: As Tags dataTable e column

A tag dataTable permite a definição de tabelas de dados com número de linhas definido em tempo de execução.

Ela funciona como umfor, iterando por elementos de uma colec¸˜ao.

Cada iterac¸˜ao corresponde a uma linha da tabela gerada.

Ela pode recebe como atributos:

I Um valor, indicando de onde obter a colec¸˜ao a ser iterada.

I Um nome de variável temporária que receberá cada elemento da coleção.

(14)

Tabelas de Dados: As Tags dataTable e column (II)

Exemplo:

<h:dataTablevalue="#{library.bookList}"headerClass="tableHeader"var="book">

<h:column>

<f:facetname="header">

<h:outputTextvalue="Title"/>

</f:facet>

<h:outputTextvalue="#{book.title}"/>

</h:column>

<h:column>

<h:outputTextvalue="Author"/>

</f:facet>

<h:outputTextvalue="#{book.author}"/>

</h:column>

<h:column>

<h:outputTextvalue="Checked Out"/>

</f:facet>

<h:selectBooleanCheckboxonclick="submit()"

value="#{book.checkedOut}"/>

</h:column>

</h:dataTable>

O corpo da tagdataTablecont´em tags columnque definem o conte´udo de cada coluna.

Em geral, conteúdo de uma coluna é obtido a partir da variável temporária da iteração.

(15)

Tabelas de Dados: As Tags dataTable e column (II)

Resultado:

Library Administration

Return Home

Title Author Checked Out

J2EE Design Patterns William Crawford & Jonathan Kaplan Moby Dick Herman Melville

(16)

Tabelas de Dados e Valores Edit´ aveis

Note que campos da tabela de dados podem ser edit´aveis.

I No exemplo anterior, h´a umcheckbox associado a um atributo booleano do livro (emprestado ou n˜ao).

O usuário é livre para fazer modificações.

Estas modificações são automaticamente traduzidas para mudanças nos atributos dos objetos.

(17)

Validac¸˜ ao de Dados

Quase todosoftware permite e requer que o usu´ario fornec¸a dados de entrada.

Muitas vezes, no entanto, o software precisa verificar se a entrada ´e v´alida.

Uma entrada pode ser inválida por várias razões:

I O formato pode ser inv´alido.

I Pode haver restrições em relação às faixas de valor.

I Pode haver restrições em relação a utilizar dois campos de um mesmo formulário simultaneamente.

I . . .

(18)

Validac¸˜ ao de Dados (II)

JSF provê suporte a validação de dados para todos os componentes.

A validação pode utilizar validadores padrão ou validadores personalizados.

Suponha uma view que permita a adic¸˜ao de novos livros na biblioteca.

O cadastro de um livro precisa de trˆes campos (neste exemplo simplificado):

I T´ıtulo: n˜ao pode ser menor que 5 caracteres.

I Autor.

I ISBN: tem um formato padronizado.

Adicionalmente, todos os três campos são necessários.

(19)

Validac¸˜ ao de Dados (III)

Exemplo (JSP):

<table>

<tr>

<td>Title:</td>

<td><h:inputTextid="title" binding="#{addbookform.title}"

required="true">

<f:validateLengthminimum="5"/>

</h:inputText>

<h:messagestyleClass="validationWarning" for="title"/>

</td>

</tr>

<tr>

<td>Author:</td>

<td><h:inputTextid="author"binding="#{addbookform.author}"

required="true"/>

<h:messagestyleClass="validationWarning" for="author"/>

</td>

</tr>

<tr>

<td>ISBN:</td>

<td><h:inputTextid="isbn"binding="#{addbookform.isbn}"

required="true">

<f:validator

validatorId="ISBNValidator"/>

</h:inputText>

<h:messagestyleClass="validationWarning" for="isbn"/>

</td>

(20)

Validac¸˜ ao de Dados (IV)

Quando o formulário é submetido, oFacesServlet executa todos os validadores da página.

Validadores s˜ao executados para cada componente.

I Se o processo de validação falha, mensagens são adicionadas àfila de mensagensda página.

Todos os validadores s˜ao checados, independente do sucesso ou falha dos anteriores.

Em caso de um ou mais erros de validação, aview original é exibida novamente para o usuário.

I Contendo as mensagens de erro.

(21)

Validadores Padr˜ ao

Há várias tags que proveêm validadores padronizados do JSF.

Estes validadores fazem checagens comuns nos dados entrada.

Exemplo:

<h:inputTextid="title"binding="#{addbookform.title}"required="true">

</h:inputText>

Tag validateLength: determina tamanhos m´ınimo e m´aximo para o valor de entrada.

(22)

Validadores Padr˜ ao (II)

Segundo exemplo:

<h:inputTextlabel="Amount"id="withdraw"value="#{accountBean.withdrawAmount}">

<f:validateLongRangeminimum="20"maximum="1000"/>

</h:inputText>

Tag validateLongRange: determina que entrada tem que ser inteiro e entre valores m´ınimo e m´aximo.

(23)

Validadores Padr˜ ao (III)

Terceiro exemplo:

<h:inputTextid="withdraw"value="#{accountBean.withdraw.amount}">

<f:validateDoubleRangeminimum="20.00"maximum="1000.00"/>

</h:inputText>

Tag validateDoubleRange: entrada pode ser ponto flutuante, mas entre valores m´ınimo e m´aximo.

(24)

Validadores Padr˜ ao (IV)

E poss´ıvel tamb´´ em garantir a existˆencia de um valor.

I i.e., forc¸ar o usu´ario a fornecer o dado.

Componentes de entrada de dados cont´em um atributorequired.

I Quandotrue, validador ´e executado verificando se campo foi preenchido.

Exemplo:

<h:inputTextid="title"binding="#{addbookform.title}"required="true">

</h:inputText>

Note que mais de um validador pode ser adicionado a um mesmo componente.

(25)

Mensagens de Erro de Validac¸˜ ao

Como exatamente as mensagens de erro de validação são exibidas para o usuário?

JSF fornece tags especiais para a exibic¸˜ao destas mensagens.

Especificamente, h´a duas tags ligeiramente diferentes:

I A tagh:messages.

I E a tagh:message.

A primeira exibe todasas mensagens de erro produzidas ao processar uma p´agina.

I Vimos um exemplo naview de login.

A segunda permite a exibic¸˜ao de mensagens espec´ıficas.

(26)

Mensagens de Erro de Validac¸˜ ao (II)

No caso dos validadores, as mensagens de erro est˜ao associadas a determinados componentes.

A tag h:message permite que filtremos mensagens por componente.

Exemplo:

<td>Title:</td>

<td><h:inputTextid="title" binding="#{addbookform.title}"required="true">

</h:inputText>

<h:messagestyleClass="validationWarning" for="title"/>

</td>

Esta ocorrˆencia da tag exibe mensagens apenas para o componente associado ao t´ıtulo.

I N˜ao por estar dentro do corpo do componente, mas pelo nome especificado no atributo for.

(27)

Validadores Personalizados

Em alguns casos, os validadores providos pelo JSF n˜ao s˜ao suficientes.

Exemplo: como validar se o ISBN provido pelo usuário é válido?

Nestes casos, precisamos escrever nossos pr´oprios validadores.

Para isto, basta escrevermos uma classe Java que estende a interface javax.faces.validator.Validator.

(28)

Validadores Personalizados (II)

Exemplo (Java)

importjavax.faces.application.FacesMessage;

importjavax.faces.component.UIComponent;

importjavax.faces.context.FacesContext;

importjavax.faces.validator.Validator;

importjavax.faces.validator.ValidatorException;

public classISBNValidatorimplementsValidator{ publicvoidvalidate(FacesContext facesContext,

UIComponent uiComponent,Object o) throwsValidatorException{ String val=o.toString();

if(val!=null) {

if (val.length() == 10) { if(!checkISBN(val))

throwValidatorException("ISBN does not pass "+

"validation");

}else{

throwValidatorException("ISBN must be 10 "+

"characters");

} } }

privatebooleancheckISBN(String ISBN) { intsum= 0;

for(inti= 0;i< 10;i++) { charcurrent=ISBN.charAt(i);

intnum= 0;

if(current==’X’) num= 10;

else

num=current;

sum+= (num* (10-i));

}

return(sum% 11 == 0);

}

privatevoidthrowValidatorException(String detail) throwsValidatorException{

FacesMessage message=newFacesMessage();

message.setSeverity(FacesMessage.SEVERITY_ERROR);

message.setSummary("Invalid ISBN");

message.setDetail(detail);

throw newValidatorException(message);

} }

Validador gera uma exceção em caso de falha de validação.

(29)

Validadores Personalizados (III)

Antes de utilizar um validador personalizado, devemos declar´a-lo no faces-config.xml:

<validator>

<validator-id>ISBNValidator</validator-id>

<validator-class>com.oreilly.jent.jsf.library.validator.ISBNValidator</validator-class>

</validator>

(30)

Validadores Personalizados (IV)

Finalmente, no JSP podemos usar a tag validator:

<f:validatorvalidatorId="ISBNValidator">