Combinando  Frameworks Javascript  com VRaptor,  uma abordagem prática
Milfont Consulting 2006 - 2008 Desenvolvimento – Treinamento - Mentoring Resgate de Projetos - Code Review
 
 
HTTP HTML Protocolo de mensagens Mensagem
HTTP HTML Protocolo de mensagens Mensagem Request URL:http://localhost:3000/ Request Method:GET Status Code:304 Not Modifi...
<FORM action=&quot;http://somesite.com/prog/adduser&quot; method=&quot;post&quot;> <P> <LABEL for=&quot;firstname&quot;>Fi...
CGI
Linguagens de script sobre CGI my $your_age_html = &quot;&quot;; my @your_age_opts = (&quot;Please select&quot;,&quot;Unde...
Framework sobre CGI <html> <body> Welcome <?php echo $_POST[&quot;fname&quot;]; ?>!<br /> You are <?php echo $_POST[&quot;...
Final dos anos 90 public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletR...
Final dos anos 90 <%@ page import=java.util.Date %> <%@ page import=java.lang.String %> <% String msg = &quot;&quot;; Stri...
Início dos anos 2000 <jsp:root xmlns:jsp=&quot;http://java.sun.com/JSP/Page&quot;  xmlns:c=&quot;http://java.sun.com/jsp/j...
Component-based <h:commandButton id=&quot;submit&quot; value=&quot;#{msg.buttonHeader}&quot; action=&quot;nextPage&quot;> ...
MVC
MVC Model 2
XHR
New MVC
Camada [Tier] Server @Entity public class Project { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; p...
Camada [Tier] Client var project = { name: “Projeto teste” } AjaxFacade.cadastrar(project, { callback: function(retorno) {...
Camada [Tier] Client var project = { name: “Projeto teste” } AjaxFacade.cadastrar(project, { callback: function(retorno) {...
Widgets
Demonstração Sorry, periferia que não foi ao evento!
Rest
Rest Isso não é Rest
VRaptor @Resource public class ExtjsController { private final Result result; public ExtjsController(Result result) { this...
VRaptor @Resource public class ExtjsController { private final Result result; public ExtjsController(Result result) { this...
MVC Javascript
Sammy.js http://milfont.no.de/index.html#!/home
Upcoming SlideShare
Loading in …5
×

MVC Model 3

1,937 views

Published on

Palestra no PBJUG
http://www.milfont.org/tech/2011/06/25/n-esimo-encontro-do-pbjug/

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,937
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
43
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

MVC Model 3

  1. 1. Combinando Frameworks Javascript com VRaptor, uma abordagem prática
  2. 2. Milfont Consulting 2006 - 2008 Desenvolvimento – Treinamento - Mentoring Resgate de Projetos - Code Review
  3. 5. HTTP HTML Protocolo de mensagens Mensagem
  4. 6. HTTP HTML Protocolo de mensagens Mensagem Request URL:http://localhost:3000/ Request Method:GET Status Code:304 Not Modified <!DOCTYPE html> <html> <head> <title>PBJUG</title> </head> <body> </body> </html>
  5. 7. <FORM action=&quot;http://somesite.com/prog/adduser&quot; method=&quot;post&quot;> <P> <LABEL for=&quot;firstname&quot;>First name: </LABEL> <INPUT type=&quot;text&quot; id=&quot;firstname&quot;><BR> <LABEL for=&quot;lastname&quot;>Last name: </LABEL> <INPUT type=&quot;text&quot; id=&quot;lastname&quot;><BR> <LABEL for=&quot;email&quot;>email: </LABEL> <INPUT type=&quot;text&quot; id=&quot;email&quot;><BR> <INPUT type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Male&quot;> Male<BR> <INPUT type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Female&quot;> Female<BR> <INPUT type=&quot;submit&quot; value=&quot;Send&quot;> <INPUT type=&quot;reset&quot;> </P> </FORM>
  6. 8. CGI
  7. 9. Linguagens de script sobre CGI my $your_age_html = &quot;&quot;; my @your_age_opts = (&quot;Please select&quot;,&quot;Under 18&quot;,&quot;18-35&quot;,&quot;35-55&quot;); foreach my $your_age_option ( @your_age_opts ) { $your_age_html .= &quot;<option value=&quot;$your_age_option&quot;&quot;; $your_age_html .= &quot; selected&quot; if ( $your_age_option eq $your_age ); $your_age_html .= &quot;>$your_age_option</option>&quot;; }
  8. 10. Framework sobre CGI <html> <body> Welcome <?php echo $_POST[&quot;fname&quot;]; ?>!<br /> You are <?php echo $_POST[&quot;age&quot;]; ?> years old. </body> </html>
  9. 11. Final dos anos 90 public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println(&quot;<form action=&quot;http://somesite.com/prog/adduser&quot; method=&quot;post&quot;> &quot;); //... } }
  10. 12. Final dos anos 90 <%@ page import=java.util.Date %> <%@ page import=java.lang.String %> <% String msg = &quot;&quot;; String mesString = request.getParameter(&quot;mesNasceu&quot;); int mes = Integer.parseInt(mesString); Date dateNow = new Date(); int monthNow = dateNow.getMonth() + 1; mes -= monthNow; if (mes == 1) msg = &quot;Falta apenas &quot;+ mes +&quot; mês para o seu aniversário.&quot;; if (mes == -1) msg = &quot;Seu aniversário foi no mês passado&quot;; if (mes > 1) msg = &quot;Faltam &quot;+ mes +&quot; meses para o seu aniversário.&quot;; if (mes == 0) msg = &quot;Oba... estamos no mês do seu aniversário.&quot;; else if (mes < 1) { mes *= -1; msg = &quot;Seu aniversário foi a &quot;+ mes +&quot; meses atrás.&quot;; } %> <html><body> <h3><%= msg %></h3> <br><br><br> <a href=&quot;Javascript:history.back(-1)&quot;>voltar</a> </body></html>
  11. 13. Início dos anos 2000 <jsp:root xmlns:jsp=&quot;http://java.sun.com/JSP/Page&quot; xmlns:c=&quot;http://java.sun.com/jsp/jstl/core&quot; version=&quot;2.0&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>c:forEach Example</title> </head> <body> <table> <c:forEach var=&quot;person&quot; items=&quot;${people.people}&quot;> <tr> <td>${person.name}</td> <td>${person.age}</td> <td>${person.height}</td> </tr> </c:forEach> </table> </body> </html>
  12. 14. Component-based <h:commandButton id=&quot;submit&quot; value=&quot;#{msg.buttonHeader}&quot; action=&quot;nextPage&quot;> </h:commandButton> <input id=&quot;_id0:submit&quot; type=&quot;submit&quot; name=&quot;_id0:submit&quot; value=&quot;Next Step&quot;/>
  13. 15. MVC
  14. 16. MVC Model 2
  15. 17. XHR
  16. 18. New MVC
  17. 19. Camada [Tier] Server @Entity public class Project { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String name; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public class AjaxFacade { public Project cadastrar(Project project) { //cadastra... return project; } }
  18. 20. Camada [Tier] Client var project = { name: “Projeto teste” } AjaxFacade.cadastrar(project, { callback: function(retorno) { /* Trata UI */ }, errorHandler: function(mensagem, erro) { /* trate os erros */ } });
  19. 21. Camada [Tier] Client var project = { name: “Projeto teste” } AjaxFacade.cadastrar(project, { callback: function(retorno) { /* Trata UI */ }, errorHandler: function(mensagem, erro) { /* trate os erros */ } });
  20. 22. Widgets
  21. 23. Demonstração Sorry, periferia que não foi ao evento!
  22. 24. Rest
  23. 25. Rest Isso não é Rest
  24. 26. VRaptor @Resource public class ExtjsController { private final Result result; public ExtjsController(Result result) { this.result = result; } @Path(&quot; /usuario/{usuario.id} &quot;) @Put public void altera(Long id) { Usuario usuario = usuarioService.buscaPorId(id); //alterar usuario result.use(json()).withoutRoot().from(usuario).serialize(); } }
  25. 27. VRaptor @Resource public class ExtjsController { private final Result result; public ExtjsController(Result result) { this.result = result; } @Path(&quot; /usuario/{usuario.id} &quot;) @Put public void altera(Long id) { Usuario usuario = usuarioService.buscaPorId(id); //alterar usuario result.use(json()).withoutRoot().from(usuario).serialize(); } }
  26. 28. MVC Javascript
  27. 29. Sammy.js http://milfont.no.de/index.html#!/home

×