28 abril 2007

Wicket: Paginando listagens em 3 passos

Um dos pontos que mais se apanha para implementar quando do desenvolvimento de aplicações Web, é a paginação de lista de dados. Lembro-me dos tempos de Struts, onde a grande dúvida era usar ou não usar a antiga Display Tag. Infelizmente, trabalhando com frameworks action-based e código view em JSP/Taglib, implementar paginação é uma das tarefas mais chatas para a interface Web, pois exige uma cacetada de configuração na página e principalmente: suja todo o HTML e pronto, lá se foi o protótio do cliente e o designer não pode mais editar com um preview em mãos.

Algumas pessoas comentaram no primeiro post sobre Wicket pedindo que eu desse maiores detalhes de como funciona ou como se utiliza. Pensei bastante e achei melhor primeiro apresentar como o desenvolvedor utiliza o framework, antes de se preocupar em como o mesmo funciona "por trás das cortinas".

Para começar a enteder a paginação, primeiramente é importante entendermos o funcionamento do componente básico de repetição: ListView. Vejam o exemplo a seguir:

Pessoas.html
<table>
<tr>
<td>nome</td>
<td>idade</td>
</tr>
<tr wicket:id="lista">
<td><span wicket:id="nome">foo</span></td>
<td><span wicket:id="idade">12</span></td>
</tr>
</table>


Pessoas.java
public class Pessoas extends WebPage {
public Pessoas() {
List listaPessoas; /* obtem de algum lugar (Spring talvez) */
add(new ListView("lista", listaPessoas) {
protected void populateItem(ListItem item) {
Pessoa p = (Pessoa) item.getModelObject();
item.add(new Label("nome", p.getNome());
item.add(new Label("idade", p.getIdade());
}
});
}
}

Entendendo o funcionamento do ListView:
  • O bind foi feito com a tag <tr>, então para cada iteração na List, o ListView vai processar um ListItem para aquela tag.
  • O framework possui hierarquia de componentes, então vejam que o Label é adicionado no ListItem e não na ListView. Isto porque no HTML, temos e nome e idade dentro da lista.
  • Para cada objeto na lista, o framework coloca ele como ModelObject do ListItem. (farei um post futuramente sobre Models, explicando seu funcionamento e os diversos tipos).
O interessante aqui é enteder o básico do funcionamento da ListView, que pode ser aplicado a praticamente qualquer tag html que se deseja iterar e repetir.

Agora, vamos adicionar paginação nesta ListView. Para isto, precisamos executar alguns passos:
  1. Editar o HTML e acrescentar a barra de navegação.
  2. Converter a ListView para uma PageableListView.
  3. Adicionar em Java o componente PagingNavigator, realizando binding entre ele e a barra de navegação.
Passo 1
Utilizaremos aqui uma barra de navegação default do Wicket, sem customização. Deve-se adicionar na tabela a seguinte TR:
<tr>
<td colspan="2">
<span wicket:id="navegacao">aqui vai a barra de navegacao</span>
</td>
</tr>
Passo 2
Alterar a instanciação de uma ListView para uma PageableListView. Feito isto, é preciso informar no construtor, quantos itens serão apresentados por página:
PageableListView listView = null;
add(listView = new PageableListView("lista", listaPessoas, 2) { ...

Passo 3
Agora, falta apenas colocar o componente de navegação na classe Java:

     add(new PagingNavigator("navegacao", listView));

Pronto! Só reparem que no construtor de PagingNavigator, é preciso passar a referência para o PageableListView que será paginado por ele.

O que aprendemos?
Que utilizando Wicket, não sujamos nosso código HTML, nem mesmo para fazer paginação! É possível manter o HTML limpo para que os designers possam trabalhar sem problemas, e também, que nós programadores tenhamos apenas um ponto para modificar, como neste exemplo onde alteramos de uma simples listagem para uma listagem paginada, o controle dinâmico das telas: a classe Java! Pois em Wicket não existe configuração em XML. Este é todo o código necessário para que esta paginação funcione.

Confiram mais exemplos aqui:
Wicket Repeater Views

Até a próxima!

[]'s!
miojo

26 abril 2007

Wicket - Apresentação SouJava

Ano passado fiz uma apresentação sobre Wicket no SouJava em São Paulo, mas infelizmente não teve uma audiência muito grande, devido provavelmente ao pequeno público interessado em conhecer um framework Web com nome tão estranho. :)

(se eu fizer outra agora hoje, acredito que irá mais gente!)

Então, publico aqui os slides que mostrei na época, para dar uma idéia melhor do funcionamento e espero que acompanhem mais de perto o crescimento do Wicket!



[]'s!!!
miojo

23 abril 2007

Wicket! ... Hein?

Muitos dos meus amigos estranharam ao pronunciar essa palavra, Wicket. E até concordo que é estranha, mas apesar do nome, que agora mudou para... Apache Wicket, acredito que a credibilidade só de ouvir o nome aumentará consideravelmente.

O que é o Wicket?

Resumindo: é tudo o que queríamos que um framework Web fosse! :D Pode parecer um exagero, mas depois de desenvolver algumas telas, vocês verão que não estou mentindo aqui. É realmente divertido, rápido e prático, desenvolver aplicativos Web 2.0 com ele. Tão fácil quanto desenhar tela Swing no Matisse! O framework tem alguns conceitos parecidos com o Tapestry, então quem é familiar com este (também mantido na Apache ), vai pegar rápido a idéia.

É parecido com o Struts/JSF?

Graças a Deus... não!! Trabalhei com Struts durante 2 anos e meio, e recentemente me arrisquei a usar JSF para uma ferramenta interna, e minha conclusão? Struts == JSF = true; Ou seja, se eu já não gostava de Struts, JSF definitivamente não me agrada muito. Apesar disso, essas duas tecnologias são fortes e devem ser respeitadas. Agora, quanto ao Wicket, devo dizer que ele preenche lacunas que antes Struts/JSF nos deixavam extremamente irritados.

Conhecem o termo SOP? Não, não digitei errado SOAP. Acontece que desenvolver aplicativos Web com Struts/JSF, a gente acaba entrando numa metodologia chamada String Oriented Programming. Onde temos que localizar num arquivo xml o retorno de um método, para saber para onde vai aquele maldito... return "success";. Não apenas isso, mas em muitos outros casos como bind de componentes da página, atributos e campos, com o que você está codificando em Java.

Então, o que ganho?

Um desenvolvimento prático e 99,9% separando o que é código dinâmico e o que é código estático (leia-se: Java, HTML, JavaScript). Essa é apenas uma das inúmeras vantagens que se obtém utilizando Wicket para desenvolver aplicações Web. Mas de início, comento aqui esta vantagem.

O seu designer terá total liberdade para mexer no design, layout e estrutura (no caso da estrutura, existem limites, claro), sem ferrar com o código dinâmico, pois este fica em um arquivo separado. Que tipo de arquivo é esse? Adivinha: .java! Sim, para cada página existe uma classe Java para controlar os componentes dinâmicos e estado que esta terá durante o fluxo do site. Isso dá ao designer, preview direto no browser, sem aquelas tags malucas de Struts/JSF ou Velocity, que detonam com o Dreamweaver, Nvu e outros WYSIWYG. Tudo isso graças a um HTML limpo de tags. É possível desenvolver um website, utilizando o protótipo que o cliente enviou, fazendo algo em torno de 5% a 15% de alterações no código HTML, e mantendo-o totalmente funcional direto no browser.


Vamos ver um exemplo de uma página Wicket (aquele infernal Hello World):


<html>

<head><title>Hello Wicket</title></head>

<body>

<span wicket:id="usuario">Bruno Borges</span>

</body>

</html>


E aqui, a classe Java colocando um valor diferente no componente usuario:


public class UsuarioPage extends WebPage {

public UsuarioPage() {

add(new Label("usuario", "Nissim Miojo"));

}

}


Abrindo o arquivo UsuarioPage.html temos um preview puro de uma página estática com o conteúdo Bruno Borges. Agora, se executarmos através do framework Wicket, o conteúdo Nissim Miojo substituirá o valor de protótipo do componente usuário. No que isso é bom? Manter um protótipo funcional e facilitar que o designer faça alterações sem ferrar com o código! :D

E o que mais?

Tem muito mais! Mas agora está tarde, e vou dormir. Quando me inspirar outra vez, posto mais coisas!


[]'s!!
miojo

22 abril 2007

Atualizando minha "second life"

Não, não tem nada a ver com o jogo Second Life, que aliás eu também tenho conta para brincar de vez enquando. Mas vi que minha vida online estava bem bagunçada, então aproveitei esta tarde de Domingo para dar uma geral. Dêem uma olhada no changelog da minha second life:
  • Mudei o layout e acrescentei/removi algumas informações e componentes deste blog;
  • Desbaguncei todas as fotos que estão no meu computador;
  • Criei meu album online no Picasa Web e publiquei algumas já;
  • Criei uma Wiki para manter online um tipo de base de conhecimento próprio sobre softwares e outras coisas, para lembrar algo do tipo "como que fiz aquela instalação mesmo?"
  • Registrei o domínio brunoborges.com.br e utilizarei ele como raiz para meus sites pessoais (blog, wiki, album);
  • Atualizei minha rádio no Last.FM (vejam que existe um componente na lateral para ver o que ando escutando recentemente);
  • Publiquei no IMDb.com a lista de filmes que já assisti (ainda faltam muitos outros, mas já é um começo);
  • E tem também aqui a lista de livros que já lí. Talvez eu coloque elas num post próprio aqui no Blogspot, mantendo-o atualizado;
Por enquanto é isso, mas que fique registrado que pretendo manter essa vida online atualizada com maior freqüência agora.

[]'s!
Contato

Email:bruno.borges(at)gmail.com

LinkedIn: www.linkedin.com/in/brunocborges
Twitter: www.twitter.com/brunoborges
Comprei e Não Vou
Rio de Janeiro, RJ Brasil
Oracle
São Paulo, SP Brasil