Apresentação em português sobre o apache wicket.

1. Desenvolvimento Web em
Componentes

2. Agenda
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário

3. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

4. Open Source Apache
• Ant • Struts
• Commons • Tapestry
• Geronimo • Tomcat
• Jakarta • Velocity
• Lucene • Xalan
• Maven • Xerces

5. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

6. Frameworks Web Java
• CGI e Servlets
• Servlets com Templates
– Webmacro, Velocity
• JSP (Model 1 – beans)
• Model 2 – o famoso MVC
– Struts, WebWork, SpringMVC, Mavereick etc
• Baseados em Componentes
– JSF (MyFaces, ADF Faces etc), Tapestry, Echo e
Wicket

7. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

8. Conceitos do Wicket
• Componentes
– Tudo é um componente dentro do Wicket
• Um componente tem um wicket:id
• Um componente tem um markup associado
• Um componente é uma classe Java
– No markup: wicket:id
• <span wicket:id=“foo”></span>
– No Java: Component.id
• new Label(“foor”,”bar”);

9. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

10. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

11. O que é o Wicket
• Open Source (Apache Soft. Foundation)
• Próxima geração de frameworks web?
• Orientado a Componentes, não ações
• Java POJOs + HTML
• Simplicidade
• Uma comunidade Ativa

12. Objetivos do Wicket
• Trazer de volta orientação a objetos
para o desenvolvimento web
• Fornecer boas abstrações para aquilo
que não te interessa
• Tornar o reuso mais fácil
• Separar responsabilidades
– HTML para apresentação
– Java para controle de estado e modelo

13. Agenda
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário

14. Funcionalidades 1/2
• Componentização semelhante à Swing
• Facilidade de Desenvolvimento
• Separação de Responsabilidades
• Segurança
• Escalabilidade Horizontal Transparente
• Suporte ao “Voltar” do Navegador
• Componentes Reusáveis
• Validação de Formulários de Forma Simples

15. Funcionalidades 2/2
• Uso transparente do HttpSession
• Altamente Customizável através de factories
• Módulos desconectados
• Componentes Decorativos
• Suporte a todos os elementos básicos de
html
• Interação com atributos html
programaticamente
• Paginação e montagem de tabelas
simplificada

16. Agenda
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário

17. Conceitos do Wicket
• Componentes
– Componentes podem ser aninhados

18. Conceitos do Wicket
• Componentes
– Componentes podem ser aninhados

19. Conceitos do Wicket
• Modelo (Model)
– Modelos ligam seus POJOs aos Componentes do
Wicket
– Modelos são o cérebro da sua aplicação

20. Conceitos do Wicket
• Exemplos de Modelos
– Um modelo simples:
add(new Label(“message”,”Globo.com”));

21. Conceitos do Wicket
• Exemplos de Modelos
– Um modelo simples:
add(new Label(“name”,new
PropertyModel(person,”name”)));
<span wicket:id=“name”>Este texto some</span>

22. Conceitos do Wicket
• Gerência de Estado
– Estado de Componentes é armazenado na
sessão
• Configurado, de 1 a MAXINT, default 10 páginas
– O tamanho da sessão pode ser minimizado
• Memória versus tempo
• O tamanho da sessão sempre deve ser uma
preocupação
– Utilize a ferramenta correta para o trabalho
• Modelos desconectados
• Modelos customizados
• Gerencie o histórico de páginas.

23. Agenda
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário

24. Demo 1
• Como montar uma estrutura básica do
site Wicket
• Demonstra os conceitos de:
– Label
– Bordas
– Panels
– Forms
– ListViews

25. Demo 1

26. Demo 1

27. Demo 1

28. Demo 1

29. Demo 1
• Como os artefatos ficam dispostos

30. DEMO 2
Interagindo com outro serviço

31. DEMO 3
Ajax Debugging

32. DEMO 4
Criando uma pequena aplicação
de cadastro de telefones

33. Definindo o HTML
<html>
<body>
<h1>Addresses</h1>
<table>
<!-- heading -->
<tr>
<td><span>John Doe</span></td>
<td><span>555-5555</span></td>
<td><span>friend</span></td>
</tr>
</table>
</body>
</html>

34. Definindo o HTML
<html>
<body>
<h1>Addresses</h1>
<table>
<!-- heading -->
<tr wicket:id=“rows”>
<td><span>John Doe</span></td>
<td><span>555-5555</span></td>
<td><span>friend</span></td>
</tr>
</table>
</body>
</html>

35. Definindo o HTML
<html>
<body>
<h1>Addresses</h1>
<table>
<!-- heading -->
<tr wicket:id=“rows”>
<td><span wicket:id=“name”>John Doe</span></td>
<td><span wicket:id=“telnr”>555-5555</span></td>
<td><span wicket:id=“type”>friend</span></td>
</tr>
</table>
</body>
</html>

36. Do HTML para o Java
public class AddressPage extends WebPage {
public AddressPage() {
}
}

37. Do HTML para o Java
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new ListView(quot;rowsquot;,addressList) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label(quot;namequot;,address.getName()));
listItem.add(new Label(quot;telnrquot;,address.getTelnr()));
listItem.add(new Label(quot;typequot;,address.getType()));
}
});
}
}

38. Demo 4
• Resumindo
– Criamos o html
– Identificamos os componentes
– Distribuimos id´s para eles
– Criamos a classe java
– Adicionamos os componentes a página

39. Adicionando Comportamento
• Adicionando remover a cada item

40. Adicionando Remover
• No html
<tr wicket:id=quot;rowsquot;>
<td><span wicket:id=quot;namequot;>John Doe</span></td>
<td><span wicket:id=quot;telnrquot;>555-5555</span></td>
<td><span wicket:id=quot;typequot;>friend</span></td>
<td><a href=quot;#quot;>Remove</a></td>
</tr>

41. Adcionando Comportamento
• E o wicket:id
<tr wicket:id=quot;rowsquot;>
<td><span wicket:id=quot;namequot;>John Doe</span></td>
<td><span wicket:id=quot;telnrquot;>555-5555</span></td>
<td><span wicket:id=quot;typequot;>friend</span></td>
<td><a wicket:id=“delete” href=“#”>Remove</a></td>
</tr>

42. Adicionando Comportamento
• E o componente do link
public void populateItem(final ListItem listItem) {
…
listItem.add(new Label(quot;namequot;,address.getName()));
listItem.add(new Label(quot;telnrquot;,address.getTelnr()));
listItem.add(new Label(quot;typequot;,address.getType()));
listItem.add(new Link(quot;deletequot;));
}

43. Demo 4
• Com seu comportamento
listItem.add(new Link(quot;deletequot;) {
public void onClick() {
Object addr = getParent().getModelObject();
addressList.remove(addr);
}
});

44. Demo 4
• Resumo
– Adicionamos um link ao html
– Adicionamos o wicket:id ao link
– Adicionamos o componente do link
– Adicionarmos o comportamento do botão

45. Adicionando paginação
• Adicionando paginação

46. Paginação
• Mais uma vez primeiro no HTML
<tr>
<td colspan=quot;4quot;>
<span wicket:id=quot;navigatorquot;>NAVIGATOR</span>
</td>
</tr>

47. Paginação
• Depois no Java
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new ListView(quot;rowsquot;,addressList) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label(quot;namequot;,address.getName()));
listItem.add(new Label(quot;telnrquot;,address.getTelnr()));
listItem.add(new Label(quot;typequot;,address.getType()));
}
});
}
}

48. Paginação
• A mudança é pequena
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new PageableListView(quot;rowsquot;,addressList,2) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label(quot;namequot;,address.getName()));
listItem.add(new Label(quot;telnrquot;,address.getTelnr()));
listItem.add(new Label(quot;typequot;,address.getType()));
}
});
}
}

49. Paginação
• Colocando o componente do navigator
add(new PagingNavigator(quot;navigatorquot;, addressListView));

50. Resumo
• Resumo
– Adicionar navegador ao html
– Adicionar o wicket:id ao navegador
– Mudar o tipo de lista para paginada
– Adicionar o componente do navegador a
Pagina
– E fim!

51. Agenda
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário

52. Sumário
• Em poucos minutos
– Criamos uma página “quase” completa
– Só Java e html
– Nada muito complexo de html
– Nada muito complexo de configuração

53. Conclusões
• Desenvolvimento Web em
componentes é uma opção
• O Wicket é simples
• Nada de configurações espalhadas pelo
sistema, apenas código.
• Pode ser uma boa opção para criar
cma´s de produtos

54. Mais informações
• http://wicket.apache.org
• http://www.wicket-library.com/