Para terminar a integração do IceFaces com a persistência de dados, vamos criar uma página:
Novo->Outro->JavaServer Faces->Página JSF
Coloque o nome de pessoas e clique em finalizar. Baseado no modelo padrão (welcomeICEfaces), podemos criar o seguinte conteúdo:
01 <?xml version='1.0' encoding='UTF-8' ?> 02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 03 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 04 <html xmlns="http://www.w3.org/1999/xhtml" 05 xmlns:ui="http://java.sun.com/jsf/facelets" 06 xmlns:f="http://java.sun.com/jsf/core" 07 xmlns:h="http://java.sun.com/jsf/html" 08 xmlns:ice="http://www.icesoft.com/icefaces/component"> 09 <head> 10 <ice:outputStyle href="./xmlhttp/css/rime/rime.css" /> 11 </head> 12 <body> 13 <ice:form> 14 <div align="center"> 15 <h1><ice:outputText value="Relação de pessoas" /></h1> 16 <ice:dataTable value="#{controlador.lista}" 17 var="item" border="1"> 18 <ice:column> 19 <f:facet name="header"> 20 <ice:outputText value="Nome"/> 21 </f:facet> 22 <ice:outputText value="#{item.name}" /> 23 </ice:column> 24 <ice:column> 25 <f:facet name="header"> 26 <ice:outputText value="Tratamento"/> 27 </f:facet> 28 <ice:outputText value="#{item.jobtitle}" /> 29 </ice:column> 30 <ice:column> 31 <f:facet name="header"> 32 <ice:outputText value="Atualizado em"/> 33 </f:facet> 34 <ice:outputText value="#{item.lastupdated}"> 35 <f:convertDateTime pattern="dd/MM/yyyy" /> 36 </ice:outputText> 37 </ice:column> 38 </ice:dataTable> 39 </div> 40 </ice:form> 41 </body> 42 </html>
Os pontos-chave desse arquivo estão nas seguintes linhas:
- 10: um dos estilos pré-definidos que podem ser usados para decorar os componentes
- 16: é onde indicamos qual atributo do bean gerenciado vai ser usado como fonte de dados para o DataTable.
- 35: uma das maneiras de converter datas do banco de dados para a exibição em tela
O resultado pode ser visto na figura abaixo:
Para adicionar um dataPaginator, basta modificar o código da página dessa maneira:
01 <?xml version='1.0' encoding='UTF-8' ?> 02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 03 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 04 <html xmlns="http://www.w3.org/1999/xhtml" 05 xmlns:ui="http://java.sun.com/jsf/facelets" 06 xmlns:f="http://java.sun.com/jsf/core" 07 xmlns:h="http://java.sun.com/jsf/html" 08 xmlns:ice="http://www.icesoft.com/icefaces/component"> 09 <head> 10 <ice:outputStyle href="./xmlhttp/css/rime/rime.css" /> 11 </head> 12 <body> 13 <ice:form> 14 <div align="center"> 15 <h1><ice:outputText value="Relação de pessoas" /></h1> 16 <ice:dataPaginator for="tabelaPessoas" 17 paginator="true" 18 fastStep="5" 19 paginatorMaxPages="3"> 20 <f:facet name="first"> 21 <ice:graphicImage 22 url="./xmlhttp/css/xp/css-images/arrow-first.gif" 23 style="border:none;" 24 title="Primeira"/> 25 </f:facet> 26 <f:facet name="last"> 27 <ice:graphicImage 28 url="./xmlhttp/css/xp/css-images/arrow-last.gif" 29 style="border:none;" 30 title="Última"/> 31 </f:facet> 32 <f:facet name="previous"> 33 <ice:graphicImage 34 url="./xmlhttp/css/xp/css-images/arrow-previous.gif" 35 style="border:none;" 36 title="Anterior"/> 37 </f:facet> 38 <f:facet name="next"> 39 <ice:graphicImage 40 url="./xmlhttp/css/xp/css-images/arrow-next.gif" 41 style="border:none;" 42 title="Próxima"/> 43 </f:facet> 44 <f:facet name="fastforward"> 45 <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif" 46 style="border:none;" 47 title="Avanço rápido"/> 48 </f:facet> 49 <f:facet name="fastrewind"> 50 <ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif" 51 style="border:none;" 52 title="Retrocesso rápido"/> 53 </f:facet> 54 </ice:dataPaginator> 55 <ice:dataTable id="tabelaPessoas" 56 value="#{controlador.lista}" 57 var="item" border="1" 58 rows="3"> 59 <ice:column> 60 <f:facet name="header"> 61 <ice:outputText value="Nome"/> 62 </f:facet> 63 <ice:outputText value="#{item.name}" /> 64 </ice:column> 65 <ice:column> 66 <f:facet name="header"> 67 <ice:outputText value="Tratamento"/> 68 </f:facet> 69 <ice:outputText value="#{item.jobtitle}" /> 70 </ice:column> 71 <ice:column> 72 <f:facet name="header"> 73 <ice:outputText value="Atualizado em"/> 74 </f:facet> 75 <ice:outputText value="#{item.lastupdated}"> 76 <f:convertDateTime pattern="dd/MM/yyyy" /> 77 </ice:outputText> 78 </ice:column> 79 </ice:dataTable> 80 </div> 81 </ice:form> 82 </body> 83 </html>
A mudança mais importante está nas linhas 55 e 58. Elas indicam um id para a tabela, de maneira que possa ser referenciada no dataPaginator e a quantidade de linhas que serão exibidas. O resultado final é esse:
Voltar para DataTables básico
Nenhum comentário:
Postar um comentário