Java Web: dataPaginator

O reaproveitamento de código com facelets é bem intuitivo para quem já trabalha com gerenciadores de conteúdo. Como sempre, é viável, mas tem boas e más notícias.

Como exemplo, podemos criar um dataPaginator que pode ser reaproveitado em outras páginas. Esse é um bom exemplo, pois o código do dataPaginator é bem extenso (ver o artigo http://rfavero.blogspot.com/2010/04/criar-datatable-e-colocar-um-paginador.html).

Para começar, criamos uma pasta dentro de Páginas Web chamada templates, por exemplo. Nela, colocamos um novo arquivo JSF chamado aqui de paginator.

O conteúdo do arquivo paginator.xhtml deve ser modificado desta maneira:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition>
        </ui:composition>
    </body>
</html>

Todo o código colocado entre as tags composition será reaproveitado em outra página. Qualquer código fora delas será ignorado.
No arquivo pessoas.xhtml, devemos colocar (se não houver), um id para o formulário:

01  <body>
02      <ice:form id="edit_form">
03          <div align="center">

O código entre as tags <ice:dataPaginator> e </ice:dataPaginator> (incluindo as mesmas) do arquivo pessoas.xhtml deve ser transferido para o arquivo paginator.xhtml, dentro das tags composition. O início do dataPaginator deve ser modificado para que fique assim:

01 <ui:composition>
02     <ice:dataPaginator for="#{tabela}"
03                        paginator="true"
04                        fastStep="5"
05                        paginatorMaxPages="#{paginas}">
06         <f:facet name="first">
07             <ice:graphicImage

Nas linhas 02 e 05 podemos observar os parâmetros que deverão ser passados pela página que vai utilizar este template. O dataPaginator já foi retirado da página pessoas.xhtml, e no lugar dele vamos inserir o código, destacado em negrito:

01  <ice:panelTab id="panelTab1" label="Lista">
02   <ui:include src="templates/paginator.xhtml">
03       <ui:param name="tabela" value="edit_form:painel:0:tabelaPessoas" /> 
04       <ui:param name="paginas" value="5" /> 
05   </ui:include>
06      <ice:dataTable id="tabelaPessoas"

Na linha 02 está o caminho para o arquivo que vai ser reutilizado, com a tag ui:include. Nas linhas 03 e 04, as declarações dos parâmetros e seus valores. Boas notícias: o código diminui drasticamente, fica mais claro e podemos reaproveitar a pasta templates em outros projetos. A má notícia: podemos observar que na linha 03, o parâmetro que se refere ao componente dataTable deve indicar o id que será gerado pelo iceFaces! Esse id pode ser conseguido olhando o código fonte da página pessoas.xhtml, antes de retirar o dataPaginator.

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

Java Web

Páginas

quinta-feira, 13 de maio de 2010

User Interface Composition (UI composition)

terça-feira, 20 de abril de 2010

Criar a DataTable e colocar um paginador