Javaone Brazil 2012: Integrando Ext JS 4 com Java EE

1,388 views
1,347 views

Published on

Integrando Ext JS 4 com Java EE

Diferentes Frameworks: Prós e Contras
e alguns cuidados que devemos ter


Loiane Groner
@loiane
http://loiane.com

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

No Downloads
Views
Total views
1,388
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javaone Brazil 2012: Integrando Ext JS 4 com Java EE

  1. 1. Integrando Ext JS 4 com Java EEDiferentes Frameworks: Prós e Contras e alguns cuidados que devemos ter Loiane Groner @loiane http://loiane.com
  2. 2. Loiane GronerApaixonada por Java eSencha7+ XP Java4+ XP SenchaSoftware DevelopmentManager @ Citibank@loianehttp://loiane.com
  3. 3. http://www.dfjug.org/ amigos.jsp
  4. 4. Ext JS 4
  5. 5. sencha.com
  6. 6. Cross-Browser
  7. 7. Alguns Exemplos
  8. 8. FácilIntegração
  9. 9. FácilIntegração
  10. 10. FácilIntegração
  11. 11. FácilIntegração
  12. 12. ConstruindoAplicações Ext JS 4
  13. 13. Como Organizarum Projeto JS?
  14. 14. Incluir JS em cada jsp?
  15. 15. Incluir JS em cada jsp? listarCliente.jsp<script> listarCliente.js?
  16. 16. Incluir JS em cada jsp? listarCliente.jsp<script> listarCliente.js? Não é assim em Ext JS!
  17. 17. Projeto Java + Ext JS 1 index.jsp apenas
  18. 18. Projeto Java + Ext JS 1 index.jsp apenasExt JS também usa MVC
  19. 19. MVC
  20. 20. Código precisa ser organizadoBoas práticas precisam ser seguidas Fácil manutenção Fácil trabalho em equipe
  21. 21. Model
  22. 22. Ext JSCarrega e Gerencia dados da app Dados dos requests da View
  23. 23. Java POJORepresenta entidade banco de dados
  24. 24. View
  25. 25. Ext JSGerencia dados na View Componentes UI
  26. 26. Java JSPExt JS assume responsabilidade
  27. 27. Java JSPExt JS assume responsabilidade MVC dentro de MVC!!!
  28. 28. Controller
  29. 29. Ext JSGerencia inputs do usuário Atualiza Model e View
  30. 30. Java Gerencia requests da view... Enviar request pro Serviço (opcional)...Retorna response para a View
  31. 31. Java Gerencia requests da view... Enviar request pro Serviço (opcional)...Retorna response para a View View == Ext JS
  32. 32. DAO
  33. 33. Java Classe DAOComunicação com BancoHibernate, JPA ou outro
  34. 34. Ext JSNão comunica com bando de dados Stores - Coleção de Models Proxies - comunica com Server
  35. 35. ArquiteturaExt JS 4 + Java
  36. 36. ComunicaçãoExt JS <-> Java
  37. 37. Servlets
  38. 38.                //get  out  Grid  paging  toolbar  parameters                String  start  =  request.getParameter("start");                String  limit  =  request.getParameter("limit");
  39. 39.                //get  out  Grid  paging  toolbar  parameters                String  start  =  request.getParameter("start");                String  limit  =  request.getParameter("limit");                //printwriter  to  send  the  JSON  response  back                PrintWriter  out  =  response.getWriter();                //set  content  type                response.setContentType("text/html");
  40. 40.                //Create  a  JSON  object  to  wrap  your  JSOn  array                JSONObject  myObj  =  new  JSONObject();                //sets  success  to  true                myObj.put("success",  true);                //set  the  JSON  root  to  items                myObj.put("root",  arrayObj);                //set  the  total  number  of  Items                myObj.put("total",  itemInformation.getTotalCount());                  //convert  the  JSON  object  to  string  and  send  the  response                out.println(myObj.toString());                out.close();
  41. 41. WebSockets Java EE 7
  42. 42. Arun Gupta Talkhttp://www.slideshare.net/arungupta1/websocket-10
  43. 43. Arun Gupta Talkhttp://www.slideshare.net/arungupta1/websocket-10
  44. 44. Jax-RS
  45. 45. VRaptor
  46. 46.      public  void  list()  {     result.use(ExtJSJson.class).from(this.contactDao.list()) .success(true).serialize();   }
  47. 47. @Post @Consumes("application/json") public void create(Contact data){ this.contactDao.create(data); result.use(ExtJSJson.class).from(data) .success(true).serialize(); }
  48. 48. ExtJSJon.class
  49. 49. ExtJSJon.classApenas para Grid e Tree!
  50. 50. Spring 2.5
  51. 51. <bean  name="jsonView"  class="net.sf.json.spring.web.servlet.view.JsonView"  />
  52. 52.          public  ModelAndView  handleRequest(HttpServletRequest  request,       HttpServletResponse  response)  throws  Exception  {     //obtém  o  parâmetro  de  início     String  iniParam  =  request.getParameter("start");     int  inicio  =  (iniParam  ==  null)  ?  0  :  Integer.parseInt(iniParam);     //gera  os  contatos     List<Contato>  contatos  =  GerenciaContatos.getJson(inicio);     Map<String,Object>  modelMap  =  new  HashMap<String,Object>(2);     modelMap.put("total",  GerenciaContatos.LIMITE);     modelMap.put("rows",  contatos);     return  new  ModelAndView("jsonView",  modelMap);   }
  53. 53. Spring 3.x
  54. 54. @RequestMapping(value="/contact/view.action")   public  @ResponseBody  Map<String,?  extends  Object>   view(@RequestParam  int  start,  @RequestParam  int  limit)  throws  Exception  {     try{       List<Contact>  contacts  =  contactService.getContactList(start,limit);       int  total  =  contactService.getTotalContacts();       return  ExtJSReturn.mapOK(contacts,  total);     }  catch  (Exception  e)  {       return  ExtJSReturn.mapError("Error  retrieving  Contacts  from  database.");     }   }
  55. 55.      public  static  Map<String,Object>  mapOK(List<Contact>  contacts){     Map<String,Object>  modelMap  =  new  HashMap<String,Object>(3);     modelMap.put("total",  contacts.size());     modelMap.put("data",  contacts);     modelMap.put("success",  true);     return  modelMap;   }
  56. 56. Alguns Cuidados
  57. 57. FormsUpload de Arquivos (Ajax Request)
  58. 58. Leitura deNested Models(Associations)
  59. 59. Envio (server) de Nested Models (Associations)
  60. 60. ComunicaçãoCross-Browser
  61. 61. Ajax?
  62. 62. JSON-P?
  63. 63. WebServices - Ext JS?
  64. 64. WebServices - Ext JS? $21,950
  65. 65. WebServices - Ext JS? $21,950 #Fail!
  66. 66. WebServices - Java
  67. 67. Sencha Touch
  68. 68. . .Views Views . Controllers Models Stores Proxies Servidor == Java on n
  69. 69. Conclusão
  70. 70. @loianehttp://loiane.comgithub.com/loiane

×