Apache Wicket
-
Upload
jose-castro -
Category
Documents
-
view
3.261 -
download
2
description
Transcript of Apache Wicket
![Page 1: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/1.jpg)
Desenvolvimento Web em Componentes
![Page 2: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/2.jpg)
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário
Agenda
![Page 3: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/3.jpg)
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
![Page 4: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/4.jpg)
Open Source Apache
• Ant
• Commons
• Geronimo
• Jakarta
• Lucene
• Maven
• Struts
• Tapestry
• Tomcat
• Velocity
• Xalan
• Xerces
![Page 5: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/5.jpg)
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
![Page 6: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/6.jpg)
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
![Page 7: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/7.jpg)
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
![Page 8: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/8.jpg)
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”);
![Page 9: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/9.jpg)
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
![Page 10: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/10.jpg)
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
![Page 11: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/11.jpg)
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
![Page 12: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/12.jpg)
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
![Page 13: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/13.jpg)
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário
Agenda
![Page 14: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/14.jpg)
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
![Page 15: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/15.jpg)
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
![Page 16: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/16.jpg)
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário
Agenda
![Page 17: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/17.jpg)
Conceitos do Wicket
• Componentes
– Componentes podem ser aninhados
![Page 18: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/18.jpg)
Conceitos do Wicket
• Componentes
– Componentes podem ser aninhados
![Page 19: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/19.jpg)
Conceitos do Wicket
• Modelo (Model)
– Modelos ligam seus POJOs aos Componentes do
Wicket
– Modelos são o cérebro da sua aplicação
![Page 20: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/20.jpg)
Conceitos do Wicket
• Exemplos de Modelos
– Um modelo simples:
add(new Label(“message”,”Globo.com”));
![Page 21: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/21.jpg)
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>
![Page 22: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/22.jpg)
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.
![Page 23: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/23.jpg)
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário
Agenda
![Page 24: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/24.jpg)
Demo 1
• Como montar uma estrutura básica do site Wicket
• Demonstra os conceitos de:– Label
– Bordas
– Panels
– Forms
– ListViews
![Page 25: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/25.jpg)
Demo 1
![Page 26: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/26.jpg)
Demo 1
![Page 27: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/27.jpg)
Demo 1
![Page 28: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/28.jpg)
Demo 1
![Page 29: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/29.jpg)
Demo 1
• Como os artefatos ficam dispostos
![Page 30: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/30.jpg)
DEMO 2
Interagindo com outro serviço
![Page 31: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/31.jpg)
DEMO 3
Ajax Debugging
![Page 32: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/32.jpg)
DEMO 4
Criando uma pequena aplicação de cadastro de telefones
![Page 33: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/33.jpg)
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>
![Page 34: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/34.jpg)
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>
![Page 35: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/35.jpg)
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>
![Page 36: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/36.jpg)
Do HTML para o Java
public class AddressPage extends WebPage {
public AddressPage() {
}
}
![Page 37: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/37.jpg)
Do HTML para o Java
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new ListView("rows",addressList) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label("name",address.getName()));
listItem.add(new Label("telnr",address.getTelnr()));
listItem.add(new Label("type",address.getType()));
}
});
}
}
![Page 38: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/38.jpg)
Demo 4
• Resumindo
– Criamos o html
– Identificamos os componentes
– Distribuimos id´s para eles
– Criamos a classe java
– Adicionamos os componentes a página
![Page 39: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/39.jpg)
Adicionando Comportamento
• Adicionando remover a cada item
![Page 40: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/40.jpg)
Adicionando Remover
• No html<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>
<td><a href="#">Remove</a></td>
</tr>
![Page 41: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/41.jpg)
Adcionando Comportamento
• E o wicket:id<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>
<td><a wicket:id=“delete” href=“#”>Remove</a></td>
</tr>
![Page 42: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/42.jpg)
Adicionando Comportamento
• E o componente do linkpublic void populateItem(final ListItem listItem) {
…
listItem.add(new Label("name",address.getName()));
listItem.add(new Label("telnr",address.getTelnr()));
listItem.add(new Label("type",address.getType()));
listItem.add(new Link("delete"));
}
![Page 43: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/43.jpg)
Demo 4
• Com seu comportamentolistItem.add(new Link("delete") {
public void onClick() {
Object addr = getParent().getModelObject();
addressList.remove(addr);
}
});
![Page 44: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/44.jpg)
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
![Page 45: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/45.jpg)
Adicionando paginação
• Adicionando paginação
![Page 46: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/46.jpg)
Paginação
• Mais uma vez primeiro no HTML
<tr>
<td colspan="4">
<span wicket:id="navigator">NAVIGATOR</span>
</td>
</tr>
![Page 47: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/47.jpg)
Paginação
• Depois no Java
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new ListView("rows",addressList) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label("name",address.getName()));
listItem.add(new Label("telnr",address.getTelnr()));
listItem.add(new Label("type",address.getType()));
}
});
}
}
![Page 48: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/48.jpg)
Paginação
• A mudança é pequena
public class AddressPage extends WebPage {
public AddressPage() {
add(addressListView = new PageableListView("rows",addressList,2) {
public void populateItem(final ListItem listItem) {
final Address address = (Address) listItem.getModelObject();
listItem.add(new Label("name",address.getName()));
listItem.add(new Label("telnr",address.getTelnr()));
listItem.add(new Label("type",address.getType()));
}
});
}
}
![Page 49: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/49.jpg)
Paginação
• Colocando o componente do navigator
add(new PagingNavigator("navigator", addressListView));
![Page 50: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/50.jpg)
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!
![Page 51: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/51.jpg)
• O que é o Wicket
• Conceitos e Funcionalidades
• Exemplificando Componentes
• Demos
• Sumário
Agenda
![Page 52: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/52.jpg)
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
![Page 53: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/53.jpg)
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
![Page 54: Apache Wicket](https://reader036.fdocuments.net/reader036/viewer/2022062419/557ad769d8b42a8f648b46e2/html5/thumbnails/54.jpg)
Mais informações
• http://wicket.apache.org
• http://www.wicket-library.com/