Apache Wicket: Desenvolvimento Web orientado a componentes

Apache Wicket
Desenvolvimento Web orientado a componentes

Felipe Fedel Pinto

Felipe Fedel Pinto
(Amaral)

• UNESP Rio Claro - 2007

• Ampliato - Tecnologia da
Informação e Consultoria

• Trabalha com Wicket desde
2010

• Contribui para projetos
externos de Wicket

Sumário
• O que é Wicket?
• Conceitos
• Novidades
• Mais informações
• Perguntas
• Contato

Um framework Web open source
orientado a componentes que usa
apenas Java e HTML

(Sem XML)

Frameworks
Echo Cocoon Millstone OXF
Struts SOFIA Tapestry WebWork
RIFE Spring MVC Canyamo Maverick
JPublish JATO Folium Jucas
Verge Niggle Bishop Barracuda
Action Framework Shocks TeaServlet wingS
Expresso Bento jStatemachine jZonic
OpenEmcee Turbine Scope Warfare
JWAA Jaffa Jacquard Macaw
Smile MyFaces Chiba JBanana
Jeenius JWarp Genie Melati
Dovetail Cameleon JFormular Xoplon
Japple Helma Dinamica WebOnSwing
Nacho Cassandra Baritus Stripes
Click GWT

Motivações

• Sistemas complexos
• Desenvolvimento ágil e fácil
• Escalabilidade
• Reusabilidade
• Sem HTMLs mutantes

JSP

request (GET /login.jsp)

Client login.jsp
response
<html>
<head>
...
</head>
<body>
...
</body>
</html>

MVC
request (GET /login.do)

Client Framework
response

<html>
<head> login.jsp Login
...
</head>
<body>
...
</body>
</html>

Apenas Java

• Componentes são objetos
• Lógica
• Orientação a objetos
- new, extends, implements, etc...

• POJO (Plain Old Java Object)
• Similar a Swing

POJO
public class Carro implements java.io.Serializable {

private String nome;
private String cor;

public Carro() {
}

public Carro(String nome, String cor) {
this.nome = nome;
this.cor = cor;
}

public String getCor() {
return cor;
}

public void setCor(String cor) {
this.cor = cor;
}

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}
}

Apenas HTML

• Murkup limpo (Sem lógica)
• “Holders” para os componentes
• HTML 5, CSS 3
• Desenvolvedores não estragam o
design

• Designers não estragam no código

Desenvolvedores

e

Designers

Sem xml?
• Conﬁguração (Java)
• Navegação (Java)
• Componentes (Java)
• Estilos (HTML, CSS)

História

2004 - Criado por Jonathan Locke
2005 - Versão 1.0
2007 - Projeto Apache
2012 - Versão 6.2.0 (2 dias atrás)

Hello World!

<html xmlns:wicket="http://wicket.apache.org">
public class HelloWorld extends WebPage {
<head>
<html xmlns:wicket="http://wicket.apache.org">
<meta charset="utf-8" />
<head>
public HelloWorld() {
<title>Hello World</title>
<meta charset="utf-8" />
<title>Hello World</title>
</head> add(new Label("mensagem", "Hello, World!"));
<body>
</head>
} <h1 wicket:id="mensagem">[Texto]</h1>
<body>
} </body>
<h1>Hello, World</h1>
</html>
</body>
</html>

Conceitos
• Application
• Session
• RequestCycle
• Components
• Behaviors
• Models

Application
• Ponto central
• Inicialização
- init();

• Conﬁgurações
- getDebugSettings().setAjaxDebugModeEnabled(false);

- getDebugSettings().setDevelopmentUtilities(true);

- mountPage(“login”, SignIn.class);

• Homepage
• Indicado no web.xml

web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/
2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/
ns/javaee/web-app_2_5.xsd"
version="2.5">

<display-name>nome_projeto</display-name>

<filter>
<filter-name>nome_filtro</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>org.fedel.seccomp.WicketApplication</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>nome_filtro</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>

Session

• Sem manipulação do HttpSession
• Dados especíﬁcos
• Tipos bem deﬁnidos
• SessionStore
- Histórico

- Botão voltar

Session
public class SeccompSession extends WebSession {

private Aluno aluno;

public synchronized Aluno getAluno() {
return user;
}

public synchronized boolean isAuthenticated() {
return (aluno != null);
}

public synchronized void setAluno(Aluno aluno) {
this. aluno = aluno;
dirty();
}
}

SeccompSession session = MyApplicattion.getSession();

Aluno aluno = session.getAluno();

Session
Pag 1 v 1

pageMap: janela 1 Pag 1 v 2
entries

Session 1
pageMaps Pag 2 v 1

pageMap: janela 2
SessionStore entries
sessions

Session 2
pageMaps

RequestCycle
• WebRequest
• WebResponse
• IRequestCycleProcessor
• IRequestHandler
• Métodos para tratar exceções
• Métodos para tratar inicio e ﬁm de uma
requisição
- onBeginRequest();
- onEndRequest();

Link URL: ./?0-1.ILinkListener-link_seccomp

requisicão cria
Client WicketFilter/Servlet RequestCycle

usa
ListenerInterfaceRequestHandler

analisa e cria
IRequestHandler IRequestCycleProcessor

processa ILinkListener

escreve
markup responde
Page/Component HttpResponse Client

onClick(){
setResponse(MyPage.class); RenderPageRequestHandler
};

Components
• Lógica
Component
• Manipula o markup
• Renderiza conteúdo
• Recebe e manipula
eventos

- onClick(),
onMouseOver(), Markup Model
onSubmit()

• Possui model...ou não
• Devem ser reutilizáveis!

Components
Label DatePicker
RepeatingView
Link
PasswordTextField Page
AjaxFallbackLink
Tree
Form
DataTable
TextField Image
AjaxButton

Button ListView
Panel

E muitos outros...

Components
• Componente possui identiﬁcadormesmo pacote
Java e Markup no
(wicket:id)
- new Label(“mensagem”, “Hello, World!”)

• Markup possui identiﬁcador
(wicket:id)
- <h1 wicket:id=”mensagem”>[Mensagem]</h1>

Components
• Poder ser aninhados (Árvore)

<a wicket:id="link">
<span wicket:id="label">[TEXTO]</span>
</a>

Link link = new Link("link"){...};
add(link);
link.add(new Label("label", "Texto"));

Components
• Recebe e manipula eventos

public class EditaAlunoForm extends Form<Aluno>{

public EditaAlunoForm(String id, Aluno aluno) {
super(id);

}
@Override
protected void onSubmit() {
salvar();
setResponsePage(ListaAlunosPage.class);
super.onSubmit();
}
}

Behaviors

• Plugins
• Modiﬁcam atributos do markup
• Adicionam eventos JavaScript
• Adicionam eventos Ajax

Behaviors
Label msg = new Label("mensagem", "Hello, World!");

msg.add(new Behavior() {

public void onComponentTag(Component component, ComponentTag tag)
{
tag.put("onClick", "return confirm('Clicou?')");

}

});

add(msg);

Ajax
(Asynchronous JavaScript and XML)
• Reunião de várias tecnologias
• Requisições assíncronas
• Objeto XMLHttpRequest
• Sem reload
• Atulização da árvore DOM

Ajax Behaviors
Label msg = new Label("mensagem", "Hello, World!");

msg.setOutputMarkupId(true);

msg.add(new AjaxEventBehavior("onClick") {

@Override
protected void onEvent(AjaxRequestTarget target) {
target.add(getComponent());
}

@Override
protected void onComponentTag(ComponentTag tag) {
tag.put("style", "color:" + getRandomColor());
super.onComponentTag(tag);
}
});
add(msg);

Ajax Behaviors
• Podem renderizar novamente os componentes
- target.add(componente);

• Podem executar códigos JavaScript
- target.appendJavaScript("seuComandoJS('');");

• Regulam a execução dos eventos no cliente
- behavior.setThrottleDelay(Duration.seconds(10));

• Podem adicionar novos recursos ao header
- Arquivos JavaScript, CSS, etc.

Models
Liga POJOs aos componentes

Component

Markup Model

Models

new TextField(“login”, Model.of(“fedel”));

new Label(“nome”, cliente.getNome());

new Label(“rua”, cliente.getEndereco().getRua());

Problemas?
•Não atualiza os valores
- new Label(“nome”, cliente.getNome());

- new TextField(“login”, Model.of(“fedel”));

•Possível existência valores nulos
- new Label(“rua”, cliente.getEndereco().getRua());

•Solucão: OGNL ( )
Object-Graph Navigation Language

Models
•PropertyModel
- new Label(“nome”,
new PropertyModel(cliente, “nome”));

- new Label(“rua”,
new PropertyModel(cliente,“endereço.rua”));

•CompoundPropertyModel
- setModel(new CompoundPropertyModel(cliente));

- add(new Label(“nome”));

- add(new Label(“endereco.rua”));

Exemplo Form

•Cadastro simples
- Nome e email

•Alguns dos conceitos explicados

Exemplo Form
public class Usuario implements Serializable {

private String nome;
private String email;

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}
}

POJO

Exemplo Form
<body>

<div>
<span class="label">Nome:</span> <span class="value" wicket:id="nome"></span>
</div>
<div>
<span class="label">E-mail</span> <span class="value" wicket:id="email"> </span>
</div>

</body>

Exemplo Form
public FormPage() {

setUsuario(new Usuario());
final Label nome_label = new Label("nome", new PropertyModel<String>(usuario, "nome"));
nome_label.setOutputMarkupId(true);
final Label email_label = new Label("email", new PropertyModel<String>(usuario, "email"));
email_label.setOutputMarkupId(true);

add(nome_label);
add(email_label);

}

Exemplo Form
<body>

<form wicket:id="form">

<div>
<span class="label">Nome:</span><input type="text" wicket:id="nome">
</div>
<div>
<span class="label">E-mail</span><input type="email"
wicket:id="email">
</div>

</form>

<div>
</div>
<div>
</div>

</body>

Exemplo Form
public FormPage() {


add(nome_label);
add(email_label);

Form<Usuario> form = new Form<Usuario>("form",
new CompoundPropertyModel<Usuario>(usuario));
// adiciona os componentes no form
form.add(new TextField<String>("nome"));
form.add(new EmailTextField("email"));

}

Exemplo Form
<body>

<form wicket:id="form">

<div>
<span class="label">Nome:</span><input type="text" wicket:id="nome">
</div>
<div>
<span class="label">E-mail</span><input type="email"
wicket:id="email">
</div>

<input type="button" value="Salvar" wicket:id="button" />

</form>

<div>
</div>
<div>
</div>

</body>

Exemplo Form
public FormPage() {


add(nome_label);
add(email_label);

Form<Usuario> form = new Form<Usuario>("form",
new CompoundPropertyModel<Usuario>(usuario));
// adiciona os componentes no form
form.add(new TextField<String>("nome"));
form.add(new EmailTextField("email"));

form.add(new AjaxSubmitLink("button") {

@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
target.add(nome_label);
target.add(email_label);
super.onSubmit(target, form);
}
});

}

Wicket 6.0
• Versão anterior: 1.5.8 (Java 1.5 ou >)
• Atual: Java 6 ou >
• JQuery
• HTML 5
• WebSocket nativo
• Servlet 3.0

Prós
•Separação entre lógica e exibiçao
•POJO
•Sem XML
•Orientado a componentes
•Ajax sem diﬁculdades
•Comunidade ativa

Contras
•Pouca documentação
•Curva de aprendizagem um pouco
longa

•(Por enquanto)
•Espero ter diminuído

Mais informações
• http://wicket.apache.org
• http://wicketinaction.com
• irc: ##wicket@irc.freenode.net
• users@wicket.apache/org
• http://www.wicket-library.com (Exemplos)
• https://github.com/wicketstuff
(Componentes)

Contatos

fedelfelipe@gmail.com

@felipefedel

http://felipefedel.wordpress.com/

Apache Wicket: Desenvolvimento Web orientado a componentes

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Apache Wicket: Desenvolvimento Web orientado a componentes

Semelhante a Apache Wicket: Desenvolvimento Web orientado a componentes (20)

Apache Wicket: Desenvolvimento Web orientado a componentes