Como criar repeating views no Wicket

Muitas vezes desejamos criar uma tabela/lista para melhor visualizarmos informações relevantes para nosso negócio. Seja via banco de dados, seja via listas criadas dinamicamente, podemos construir facilmente essas tabelas utilizando o Wicket.

Portanto, nosso artigo de hoje mostrará como uma tarefa relativamente custosa em alguns frameworks, se torna de fácil execução ao desenvolvermos com o Wicket.

Imaginemos então, a simples situação:

Uma empresa possui uma base de dados na qual grava informações a respeito de seus clientes. Há a necessidade de criar uma interface web para listagem de todos os clientes da base.

Para isso, consideramos a classe Cliente, como segue:

Client.java

public class Client implements Serializable {
 
    private String name;
    private String gender;
    private int age;
 
    public Client(String name, String gender, int age) {
        this.name = name;
        this.gender = gender;
        this.age = age;
    }  
 
    public int getAge() {
        return age;
    }
 
    public void setAge(int age) {
        this.age = age;
    }
 
    public String getGender() {
        return gender;
    }
 
    public void setGender(String gender) {
        this.gender = gender;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }

A lógica de execução do nosso “aplicativo” estará dentro do nosso index, como segue:

Jindex.java

public final class JIndex extends WebPage {
 
    private List<Client> clients;
 
    public JIndex() {
        super ();
        clients = new ArrayList<Client>();
        loadClients();
        fillTable();
    }
 
    /**
     * Responsável por preencher uma lista de objetos Cliente.
     * Normalmente, essa lista é formada por objetos do BD. No nosso exemplo,
     * preencheremos livremente.
     */
    private void loadClients(){
        //Adicionando 4 clientes à lista...
        clients.add(new Client("Raphael", "male", 23));
        clients.add(new Client("Adriana", "female", 23));
        clients.add(new Client("Romualdo", "male", 42));
        clients.add(new Client("Josefina", "female", 37));
    }
 
    /**
     * Responsável por criar o dataview utilizando elementos de uma lista.
     * No caso a lista antes preenchida "clients".
     */
    private void fillTable(){
        //Cria um dataview com id "clientsList", recebendo os elementos de clients...
        DataView dataview = new DataView("clientsList", new ListDataProvider(clients)){
 
            @Override
            protected void populateItem(Item item) {
                //Objeto client que será representado por cada linha...
                Client client = (Client) item.getModelObject();
                //Insere na linha o nome do cliente...
                item.add(new Label("clientName", client.getName()));
                //Insere na linha o sexo do cliente...
                item.add(new Label("clientGender", client.getGender()));
                //Insere na linha a idade do cliente...
                item.add(new Label("clientAge", String.valueOf(client.getAge())));
            }
 
        };
 
        //Adiciona o dataview à webpage...
        add(dataview);
    }
}

No Wicket, quando criamos uma classe ( que herda de WebPage ), devemos criar o html correspondente. Caso ainda não saiba os conceitos principais sobre o framework, acesse o artigo “Bem-vindo(a) ao Wicket – Framework Java WEB“.

Segue o html correspondente:

JIndex.html

<?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:wicket="http://wicket.apache.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Teste Dataview</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
            <tr wicket:id="clientsList">
                <td><span wicket:id="clientName" /></td>
                <td><span wicket:id="clientGender" /></td>
                <td><span wicket:id="clientAge" /></td>
            </tr>
        </table>
    </body>
</html>

Repare nas linhas 16,17,18,19. É nelas que referenciamos nossos componentes adicionados no .java. Além disso, atente-se para os tipos de tags html usados, isto é, referenciamos o dataview na tag tr(linha) e os Labels dentro das td’s (colunas) através da tag span.

Basta rodar agora a sua aplicação para conferir o resultado. Lembrando que para o JIndex seja chamado na execução do programa, devemos possuir o Application conforme segue:

JApplication.java

public class JApplication extends WebApplication{
 
    public Class getHomePage() {
        return JIndex.class;
    }
 
}

Não esqueça de deixar seu comentário em caso de dúvida!

[]s

3 Comentários para “Como criar repeating views no Wicket”

Renan Sales
21 de abril de 2010 às 2:01

Muito bom Fael, exelente…
samuel
12 de julho de 2010 às 10:13

Estou com dificulades com o wicket e framekors
Queria saber se poderia disponibilizar alguns tutoriais sobre wicket.

Grato.
Samuel
samuel
12 de julho de 2010 às 10:15

preciso de ajuda com wicket
sera que vc poderia me mandar alguns tutoriais sobre o assunto.

Atenciosamente.
Samuel