16 Jun 08 Como implementar paginação para listboxes com muitos elementos com o ZK Framework

Segue mais um post sobre o ZK Framework escrito pelo Marcos de Sousa.
Muito bom o post, e o ZK é bem legal tanbém, para saber mais sobre o ZK Framework podem dar uma olhada neste post,também escrito pelo Marcos.

Como implementar paginação para listboxes com muitos elementos

by Marcos de Sousa (Maputo – Mozambique)
13/06/2008

Versão

Eu testei os códigos fontes com ZK 2.4.0, pelo que pode usar ZK 2.4.0 e versões recentes

A Questão

O componente listbox é utilizada para exibir uma série de elementos em uma lista. Os componentes listbox e grid suportam a paginação intrinsecamente. Se você tem uma lista com muitos elementos, por exemplo 1.000.000 elementos, isto vai abrandar a sua aplicação web, ele pode potencialmente utilizar uma grande quantidade de memória no servidor, limitando o número de usuários que podem ser suportados em qualquer tempo. Isto é o que nós não queremos que aconteça. Portanto, vamos corrigi-lo.

A Solução

Paginação é a forma mais simples e comum de dividir grandes quantidades de dados em pedaços pequenos. Paginação é uma parte fundamental no desenho duma aplicação web, tanto do ponto de vista de Desenho de Interface como do ponto de vista do servidor (para processar grandes conjuntos de forma eficiente, sem causar atrasos nos serviços recurso). ZK tem um componente básico chamado Paging. O componente paging é usado para separar longo conteúdo em várias páginas. Para resolver o problema temos de especificar um componente paging explicitamente.

A. Criando as Páginas:

Eu irei revisitar o código fornecido em http://en.wikibooks.org/wiki/ZK/How-Tos#ZK_2.x.x_.2B_Spring_2.x.x_.2B_Hibernate_3.x_.2B_JUnit_Test

Primeiro, vamos ver como utilizar um componente listbox com paginação intrinsecamente:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0″ encoding="UTF-8″?>
<window title="Listbox with Paging Intrinsically" border="normal" use="com.wikibook2.ui.EmployeeUI">
<listbox id="lstEmployee" width="350px" checkmark="true" mold="paging" pageSize="30″>
<listhead sizable="true">
<listheader label="ID" sort="auto" />
<listheader label="Full Name" sort="auto" />
<listheader label="User Name" sort="auto" />
</listhead>
</listbox>
</window>

Agora, nós queremos usar uma listbox com um componente paging explicitamente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0″ encoding="UTF-8″?>
 
<window title="Listbox with Paging Explicitly" border="normal" use="com.wikibook2.ui.EmployeeUI">
 
<listbox id="lstEmployee" width="350px" checkmark="true">
<listhead sizable="true">
<listheader label="ID" sort="auto" />
<listheader label="Full Name" sort="auto" />
<listheader label="User Name" sort="auto" />
</listhead>
</listbox>
<paging id="pagEmployee" pageSize="30″ />
 
</window>

A única diferença é, em vez de nós especificar “mold=“paging”” nós não especificamos nada, e em adição nós usamos o componente paging explicitamente “<paging id=“pagEmployee” pageSize=“30″/>“. É tudo no Desenho de Interface.

B. Código – Desenho de Interface:

Vamos dar uma olhadela para a classe EmployeeUI:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

package com.wikibook2.ui;
// Imports Omitted
public class EmployeeUI extends SimpleWindow implements AfterCompose {
private final String LST_EMPLOYEE = "lstEmployee";
private final String PAG_EMPLOYEE = "pagEmployee";
private final String MAN_EMPLOYEE = "employeeManager";
private GenericManager employeeManager;
public EmployeeUI() {
employeeManager = (GenericManager) SpringUtil.getBean(MAN_EMPLOYEE);
}
public void afterCompose() {
Paging pag = getPaging(PAG_EMPLOYEE);
pag.setTotalSize(employeeManager.count().intValue());
final int PAGE_SIZE = pag.getPageSize();
// Show Listbox with first PAGE_SIZE
redraw(0, PAGE_SIZE);
pag.addEventListener("onPaging", new EventListener() {
public void onEvent(Event event) {
PagingEvent pe = (PagingEvent) event;
int pgno = pe.getActivePage();
int ofs = pgno * PAGE_SIZE;
// Redraw current paging
redraw(ofs, PAGE_SIZE);
}
});
}
private void redraw(int firstResult, int maxResults) {
Listbox lst = getListbox(LST_EMPLOYEE);
lst.getItems().clear();
 
List<Employee> list = employeeManager.getAll(DetachedCriteria.forClass(Employee.class), firstResult, maxResults);
 
for (Employee employee : list) {
Listitem li = new Listitem();
li.setValue(employee);
li.appendChild(new Listcell("" + employee.getId()));
li.appendChild(new Listcell(employee.getFullname()));
li.appendChild(new Listcell(employee.getUsername()));
lst.appendChild(li);
}
}
}

Como você pode ver, a ideia principal é Estratégia Baseada em Consulta, onde resultados são colectados da base de dados quando necessário na medida que o utilizador vai navegando sobre as pequenas páginas e enviados para o cliente. Isto significa que uma nova consulta será executada sempre que o usuário navegar entre as páginas, claro que há uma sobrecarga no desempenho com esta abordagem. No entanto, devido ao menor uso de memória, esta solução é também mais escalável e geralmente, esta é a consideração importante quando se trata de aplicações Web. Com a implementação de AfterCompose, nós executamos algumas inicializações:

• Definimos o número total de empregados
• Desenhamos a listbox com os primeiros empregados na página inicial
• Adicionamos o Evento onPaging para o componente paging

O evento onPaging, é enviado com uma instância de PagingEvent para o componente paging, depois, nós recuperamos a página activa (apartir de 0) e o índice dos primeiros empregados visíveis pela multiplicação da página activa pelo tamanho duma página.

Uma vez que sabemos qual é a página actual, nós redesenhamos a listbox; primeiro nós limpamos todos empregados e depois consultamos o novo pedaço de página de empregados. Lembre-se que, o AfterCompose é um pouco mais rápido, uma vez que não necessita de criar uma outra thread enquanto o evento onCreate é livre para suspender e retornar a execução.

C. Conclusão:

Este pequeno artigo introduziu-lhe o poder do componente paging, como implementar a paginação para listbox com bastante performance quando a listbox tiver muitos elementos.

Você pode encontrar as desvantagens de usar um componente paging externo ao listbox em http://en.wikibooks.org/wiki/ZK/How-Tos#How_to_implement_paging_for_listboxes_with_many_items

Espero que tenha gostado deste pequeno artigo e que este artigo o tenha influenciado para iniciar a utilizar a Framework ZK. No meu dia-a-dia a Framework ZK tem sido bastante produtiva no desenvolvimento de aplicações Web tanto para a intranet como para a internet.

Download

Pode baixar o projecto aqui.
Depois de fazer download do projecto, leia o “readme.pdf” para saber como lidar com o projecto wikibook2.

Sobre Marcos de Sousa

Marcos de Sousa, trabalha na área de desenvolvimento a mais de 5 anos. Trabalha como Desenvolvedor Sénior no Banco Comercial e de Investimentos (BCI Fomento), um dos maiores grupos financeiros em Moçambique. Estudou a Licenciatura em Informática (Universidade Eduardo Mondlane – Curso de Informática (5º ano)).
Junho 13, 2008
Maputo – Moçambique