Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

2,088 views

Published on

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

Published in: Technology

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

×