Apache Wicket - Desenvolvimento WEB orientado a componentes

2,274 views
2,109 views

Published on

Pelestra realizada na SECCOMP 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,274
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apache Wicket - Desenvolvimento WEB orientado a componentes

  1. 1. Apache WicketDesenvolvimento Web orientado a componentes Felipe Fedel Pinto
  2. 2. 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
  3. 3. Sumário• O que é Wicket?• Conceitos• Novidades• Mais informações• Perguntas• Contato
  4. 4. O que é wicket?
  5. 5. Wicket W. Warrick
  6. 6. O que é wicket?
  7. 7. Um framework Web open sourceorientado a componentes que usaapenas Java e HTML (Sem XML)
  8. 8. Frameworks Echo Cocoon Millstone OXF Struts SOFIA Tapestry WebWork RIFE Spring MVC Canyamo Maverick JPublish JATO Folium Jucas Verge Niggle Bishop BarracudaAction 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
  9. 9. Motivações• Sistemas complexos• Desenvolvimento ágil e fácil• Escalabilidade• Reusabilidade• Sem HTMLs mutantes
  10. 10. JSP request (GET /login.jsp)Client login.jsp response <html> <head> ... </head> <body> ... </body> </html>
  11. 11. MVC request (GET /login.do)Client Framework response <html> <head> login.jsp Login ... </head> <body> ... </body> </html>
  12. 12. Um framework Web open sourceorientado a componentes que usaapenas Java e HTML (Sem XML)
  13. 13. Apenas Java• Componentes são objetos• Lógica• Orientação a objetos - new, extends, implements, etc...• POJO (Plain Old Java Object)• Similar a Swing
  14. 14. POJOpublic 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; } }
  15. 15. 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
  16. 16. Desenvolvedores e Designers
  17. 17. Sem xml?• Configuração (Java)• Navegação (Java)• Componentes (Java)• Estilos (HTML, CSS)
  18. 18. História2004 - Criado por Jonathan Locke2005 - Versão 1.02007 - Projeto Apache2012 - Versão 6.2.0 (2 dias atrás)
  19. 19. 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>
  20. 20. Conceitos
  21. 21. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  22. 22. Application• Ponto central• Inicialização - init();• Configurações - getDebugSettings().setAjaxDebugModeEnabled(false); - getDebugSettings().setDevelopmentUtilities(true); - mountPage(“login”, SignIn.class);• Homepage• Indicado no web.xml
  23. 23. 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>
  24. 24. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  25. 25. Session• Sem manipulação do HttpSession• Dados específicos• Tipos bem definidos• SessionStore - Histórico - Botão voltar
  26. 26. Sessionpublic 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();
  27. 27. Session Pag 1 v 1 pageMap: janela 1 Pag 1 v 2 entries Session 1 pageMaps Pag 2 v 1 pageMap: janela 2SessionStore entries sessions Session 2 pageMaps
  28. 28. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  29. 29. RequestCycle• WebRequest• WebResponse• IRequestCycleProcessor• IRequestHandler• Métodos para tratar exceções• Métodos para tratar inicio e fim de uma requisição - onBeginRequest(); - onEndRequest();
  30. 30. 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 ClientonClick(){ setResponse(MyPage.class); RenderPageRequestHandler};
  31. 31. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  32. 32. 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!
  33. 33. ComponentsLabel DatePicker RepeatingView Link PasswordTextField Page AjaxFallbackLink Tree Form DataTableTextField Image AjaxButton Button ListView Panel E muitos outros...
  34. 34. Components• Componente possui identificadormesmo pacote Java e Markup no (wicket:id) - new Label(“mensagem”, “Hello, World!”)• Markup possui identificador (wicket:id) - <h1 wicket:id=”mensagem”>[Mensagem]</h1>
  35. 35. 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"));
  36. 36. 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(); } }
  37. 37. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  38. 38. Behaviors• Plugins• Modificam atributos do markup• Adicionam eventos JavaScript• Adicionam eventos Ajax
  39. 39. 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);
  40. 40. Ajax Behaviors
  41. 41. O que é Ajax?
  42. 42. Ajax (Asynchronous JavaScript and XML)• Reunião de várias tecnologias• Requisições assíncronas• Objeto XMLHttpRequest• Sem reload• Atulização da árvore DOM
  43. 43. Ajax BehaviorsLabel 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);
  44. 44. 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.
  45. 45. Conceitos• Application• Session• RequestCycle• Components• Behaviors• Models
  46. 46. ModelsLiga POJOs aos componentes Component Markup Model
  47. 47. Modelsnew TextField(“login”, Model.of(“fedel”));new Label(“nome”, cliente.getNome());new Label(“rua”, cliente.getEndereco().getRua());
  48. 48. 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
  49. 49. 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”));
  50. 50. Exemplo Form•Cadastro simples - Nome e email•Alguns dos conceitos explicados
  51. 51. Exemplo Formpublic 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
  52. 52. 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>
  53. 53. Exemplo Formpublic 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);}
  54. 54. 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> <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>
  55. 55. Exemplo Formpublic 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); 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"));}
  56. 56. 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> <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>
  57. 57. Exemplo Formpublic 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); 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); } });}
  58. 58. 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
  59. 59. Prós•Separação entre lógica e exibiçao•POJO•Sem XML•Orientado a componentes•Ajax sem dificuldades•Comunidade ativa
  60. 60. Contras•Pouca documentação•Curva de aprendizagem um pouco longa•(Por enquanto)•Espero ter diminuído
  61. 61. 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)
  62. 62. Livros
  63. 63. Contatosfedelfelipe@gmail.com@felipefedelhttp://felipefedel.wordpress.com/
  64. 64. M u ito rig ado!O b

×