Вы находитесь на странице: 1из 48

Brincando com Objetos... na Web!

:D

Wicket

www.summa-tech.com

Agenda
Wicket: de volta POO Introduo Conceitos Aplicados Componentes e Dados Demonstrao Aplicao Real Perguntas Fim ;)
www.summa-tech.com

Wicket: de volta POO


Queremos usar OO na Web! Componentes so reutilizveis (srio!) Componentes podem ser independentes MVC em Objetos e no em Requests HTML e Java integrados, no amarrados
www.summa-tech.com

Introduo
Projeto iniciado em 2004 por Jonathan Locke
Evangelista Java Trabalhou na Microsoft e na JavaSoft

Motivao: componentizar e manipular


HTML de forma transparente com Objetos

Prmio: CCEs, NPEs e *Es quase inexplicveis: nunca mais. Diverso


www.summa-tech.com

Introduo
Web...

www.summa-tech.com

Introduo
Frameworks Web: muitos e poucos

www.summa-tech.com

Conceitos Aplicados
Gerncia de Sesso automatizada Configurao Reduzida
No existe um wicket-config.xml :D Definio do controller no web.xml

Componentes
Definio Construo Customizao
www.summa-tech.com

Conceitos Aplicados (2)


Composio de pginas
Painis Bordas Herana de cdigo HTML

Suporte avanado a i18n e CSS


Por pgina: pagina_en.html Por resource bundle: pagina_en.properties Por hierarquia
www.summa-tech.com

Conceitos Aplicados (3)


Integrao
Spring Hibernate JasperReports Ajax Outros... ? Java!

Componentes
Tabelas de Dados DatePicker Editor de texto Painel com abas, navegao, menu em rvore...
www.summa-tech.com

Conceitos Aplicados (4)


Gerncia de estado
Sesses type-safe Boto Voltar

Estratgia de duplo-clique Suporte a Testes Unitrios


JUnit Mensagens de erro e log detalhadas
www.summa-tech.com

Conceitos Aplicados (5)


Ajax
Dojo, Scriptaculous, YUI, ... Componentes Nativos/Extenses (Wicket: Core, Extensions, Stuff)

Contribuio de HTML Header hierrquica


JavaScript CSS

URLs Amigveis
www.summa-tech.com

Componentes e Dados
Tudo componente No HTML: wicket:id No Java: propriedade id
HTML <span wicket:id="foo> Java new Label(foo);

www.summa-tech.com

Componentes e Dados (2)


Reutilizao Painis permitem agrupamento Componentes aninhados
cep/numero rua cidade

www.summa-tech.com

Componentes e Dados (2)


Reutilizao Painis permitem agrupamento Componentes aninhados
cep/numero rua cidade

www.summa-tech.com

Componentes e Dados (2)


Reutilizao Painis permitem agrupamento Componentes aninhados
cep/numero rua cidade

www.summa-tech.com

Componentes e Dados (3)


Reutilizao Painis permitem agrupamento Componentes aninhados Empacotar um JAR
HTML, JavaScript, CSS, Imagens Classes

Classpath, e pronto! Reutilize!


www.summa-tech.com

Componentes e Dados (4)


Modelos conectam componentes Wicket aos seus POJOs Modelos so o crebro da aplicao
Label(nome, model) <<Pessoa>> PropertyModel +nome : String +cidade : String

www.summa-tech.com

Componentes e Dados (5)


Modelos Avanados
Modelos no-atachados
Guarda apenas o id na sesso Recupera o objeto quando necessrio Libera o objeto aps o uso

Modelos Compostos
Utiliza o id do componente para recuperar os dados Ex: new Label(pessoa.endereco.rua, ...);
www.summa-tech.com

Demonstrao

www.summa-tech.com

Demonstrao

www.summa-tech.com

Demonstrao
Design da pgina

Pgina <h1>

<table> link (<a href>)

www.summa-tech.com

Demonstrao
Design da pgina

Pgina <h1>

linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Design da pgina

Pgina <h1>

nome

fone perfil linhas (<tr>) <table>

link (<a href>)

www.summa-tech.com

Demonstrao
Marcando o HTML
<html> ... <body> <h1>Recursos</h1> <table border="1"> <tr> <td>Bruno Borges</td> <td>8565-7739</td> <td>java developer</td> </tr> </table> </body> </html>

Pgina <h1>

nome fone perfil linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Marcando o HTML
<html> ... <body> <h1>Recursos</h1> <table border="1"> <tr wicket:id="linhas"> <td>Bruno Borges</td> <td>8565-7739</td> <td>java developer</td> </tr> </table> </body> </html>

Pgina <h1>

nome fone perfil linhas (<tr>)

link (<a href>)

www.summa-tech.com

Demonstrao
Marcando o HTML
<html> ... <body> <h1>Recursos</h1> <table border="1"> <tr wicket:id="linhas"> <td><span wicket:id=nome>Bruno ... <td><span wicket:id=fone>8565-7739 ... <td><span wicket:id=perfil>java developer ... </tr> </table> </body> </html>

Pgina <h1>

nome

fone

perfil

linhas (<tr>)

link (<a href>)

www.summa-tech.com

Demonstrao
Do HTML para o Java
public class RecursosPage extends WebPage { public RecursosPage() { } }

Pgina <h1>

nome fone perfil linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Do HTML para o Java
public class RecursosPage extends WebPage { public RecursosPage() { add(new RecursosListView(linhas, recursos)); } private class RecursosListView extends ListView { private RecursosListView(String id, IModel m) { super(id, m); } }

Pgina <h1>

nome fone perfil linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Do HTML para o Java
public class RecursosPage extends WebPage { public RecursosPage() { add(new RecursosListView(linhas, recursos)); } private class RecursosListView extends ListView { private RecursosListView(String id, IModel m) { super(id, m); } protected void populateItem(ListItem item) { item.add(new Label(nome)); item.add(new Label(fone)); item.add(new Label(perfil)); }

Pgina <h1>

nome

fone <table>

perfil

linhas (<tr>)

link (<a href>)

www.summa-tech.com

Demonstrao
Sumrio
Criar o HTML (ou ter ele pronto) Identificar componentes Atribuir wicket:id Criar classe da pgina Adicionar componentes pgina

www.summa-tech.com

Demonstrao

www.summa-tech.com

Demonstrao
Adicionando o link Apagar

Pgina <h1>

nome fone perfil

apagar

<table> link (<a href>)

www.summa-tech.com

Demonstrao
Modificar o HTML
... <tr wicket:id="linhas"> <td><span wicket:id=nome>Bruno Borges</span></td> <td><span wicket:id=fone>8565-7739 </span></td> <td><span wicket:id=perfil>java developer </span></td> <td><a href=#>apagar</a></td> </tr> Pgina ...
<h1>

nome

fone perfil apagar linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Atribuir Wicket id
... <tr wicket:id="linhas"> <td><span wicket:id=nome>Bruno Borges</span></td> <td><span wicket:id=fone>8565-7739 </span></td> <td><span wicket:id=perfil>java developer </span></td> <td><a href=# wicket:id=apagar>apagar</a></td> </tr> Pgina ...
<h1>

nome

fone perfil apagar linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Adicionar o componente em Java
protected void populateItem(ListItem item) { item.add(new Label(nome)); item.add(new Label(fone)); item.add(new Label(perfil)); item.add(new Link(apagar)); }
Pgina <h1>

<a wicket:id=apagar href=#>apagar</a>

nome

fone perfil apagar linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Adicionar o componente em Java
protected void populateItem(ListItem item) { item.add(new Label(nome)); item.add(new Label(fone)); item.add(new Label(perfil)); item.add(new Link(apagar) { protected void onClick() { Recurso r = (Recurso)getParent() .getModelObject(); RecursosDAO.apagarRecurso(r); } }); }

Pgina <h1>

nome

fone perfil apagar linhas (<tr>) <table> link (<a href>)

www.summa-tech.com

Demonstrao
Sumrio
Modificar HTML: adicionar link apagar Atribuir wicket:id ao link Adicionar componente Link ao ListItem Adicionar evento onClick ao componente Link

www.summa-tech.com

Demonstrao

www.summa-tech.com

Demonstrao
Adicionando paginao lista

Pgina
<h1> nome fone perfil apagar linhas (<tr>)

navegacao
<table> link (<a href>)

www.summa-tech.com

Demonstrao
Adicionar o componente de navegacao ao HTML
<td><span wicket:id=perfil>java dev</span></td> <td><a href=# wicket:id=apagar>apagar</td> </tr> <tr> <td colspan=4> Pgina <span>navegacao</span> <h1> </td> nome fone perfil apag </tr> linhas (<tr>) </table> navegacao
<table> link (<a href>)

www.summa-tech.com

Demonstrao
Atribuir wicket:id

<td><span wicket:id=perfil>java dev</span></td> <td><a href=# wicket:id=apagar>apagar</td> </tr> <tr> <td colspan=4> Pgina <span wicket:id=navegacao> <h1> navegacao nome fone perfil apag </span> linhas (<tr>) </td> navegacao <table> </tr> link (<a href>) </table>
www.summa-tech.com

Demonstrao
Tornar a ListView paginvel
public class RecursosPage extends WebPage { public RecursosPage() { add(new RecursosListView(linhas, recursos)); } private class RecursosListView extends PageableListView { private RecursosListView(String id, IModel m) { super(id, m, 2); } Itens por pgina

Pgina <h1> nome fone perfil linhas (<tr>) apag

navegacao
<table> link (<a href>)

www.summa-tech.com

Demonstrao
Adicionar componente navegao
public class RecursosPage extends WebPage { public RecursosPage() { RecursosListView rlv = new RecursosListView(linhas, recursos); add(rlv); add(new PagingNavigator(navegacao, rlv)); } ...
nome Pgina <h1> fone perfil linhas (<tr>) apag

navegacao
<table> link (<a href>)

www.summa-tech.com

Demonstrao
Sumrio
Modificar HTML: adicionar painel de navegao Atribuir wicket:id ao <span> Mudar a herana da ListView para PageableListView Adicionar componente de navegao pgina
www.summa-tech.com

Demonstrao
Resumo
Exemplo de 10 minutos Java e HTML puros Sem novidades para o HTML Sem configuraes em XML Caso muito comum em projetos: paginao e manipulao em tabelas de dados
www.summa-tech.com

Perguntas
Wicket realmente utiliza a sesso (HttpSession)? Wicket est sendo utilizado e um projeto ativo? Onde encontrar maiores informaes?
www.summa-tech.com

Fim ;)
Jonathan Locke
www.muppetlabs.com/~jonl/

Javapolis 2005
www.javapolis.com/confluence/display/JP05/Wicket

JavaOne 2005

developers.sun.com/learning/javaoneonline/2005/web

www.summa-tech.com

Fim ;)
Exemplos www.wicket-library.com Incubadora wicket-stuff.sourceforge.net Site Oficial www.wicket-framework.org

www.summa-tech.com