Integrando Ext JS 4 com Java EE

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

Loiane Groner@loiane

http://loiane.com

Loiane Groner

Apaixonada por Java e Sencha

7+ XP Java4+ XP Sencha

Software Development Manager @ Citibank

@loianehttp://loiane.com

http://www.dfjug.org/amigos.jsp

Ext JS 4

sencha.com

Cross-Browser

Alguns Exemplos

Fácil Integração

Fácil Integração

Fácil Integração

Fácil Integração

Construindo Aplicações Ext JS 4

Como Organizar

um Projeto JS?

Incluir JS em cada jsp?

Incluir JS em cada jsp?

listarCliente.jsp<script> listarCliente.js?

Incluir JS em cada jsp?

Não é assim em Ext JS!

listarCliente.jsp<script> listarCliente.js?

Projeto Java + Ext JS

1 index.jsp apenas

Projeto Java + Ext JS

1 index.jsp apenas

Ext JS também usa MVC

MVC

Código precisa ser organizado

Boas práticas precisam ser seguidas

Fácil manutenção

Fácil trabalho em equipe

Model

Ext JS

Carrega e Gerencia dados da app

Dados dos requests da View

Java

POJO

Representa entidade banco de dados

View

Ext JS

Gerencia dados na View

Componentes UI

Java

JSP

Ext JS assume responsabilidade

Java

JSP

Ext JS assume responsabilidade

MVC dentro de MVC!!!

Controller

Ext JS

Gerencia inputs do usuário

Atualiza Model e View

Java

Gerencia requests da view...

Enviar request pro Serviço (opcional)...

Retorna response para a View

Java

Gerencia requests da view...

Enviar request pro Serviço (opcional)...

Retorna response para a View

View == Ext JS

DAO

Java

Classe DAO

Hibernate, JPA ou outro

Comunicação com Banco

Ext JS

Não comunica com bando de dados

Stores - Coleção de Models

Proxies - comunica com Server

Arquitetura

Ext JS 4 + Java

Comunicação Ext JS <-> Java

Servlets

               //get  out  Grid  paging  toolbar  parameters                String  start  =  request.getParameter("start");                String  limit  =  request.getParameter("limit");

               //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");

               //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();

WebSocketsJava EE 7

Arun Gupta Talkhttp://www.slideshare.net/arungupta1/websocket-10

Arun Gupta Talkhttp://www.slideshare.net/arungupta1/websocket-10

Jax-RS

VRaptor

     public  void  list()  {     result.use(ExtJSJson.class).from(this.contactDao.list())

.success(true).serialize();   }

@Post @Consumes("application/json") public void create(Contact data){

this.contactDao.create(data);

result.use(ExtJSJson.class).from(data) .success(true).serialize(); }

ExtJSJon.class

ExtJSJon.class

Apenas para Grid e Tree!

Spring 2.5

<bean  name="jsonView"  class="net.sf.json.spring.web.servlet.view.JsonView"  />

         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);

  }

Spring 3.x

@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.");     }   }

     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;   }

Alguns Cuidados

FormsUpload de Arquivos

(Ajax Request)

Leitura de Nested Models(Associations)

Envio (server) de Nested Models(Associations)

Comunicação Cross-Browser

Ajax?

JSON-P?

WebServices - Ext JS?

WebServices - Ext JS?

$21,950

WebServices - Ext JS?

$21,950 #Fail!

WebServices - Java

Sencha Touch

json json

Views Views

Controllers

Models

Stores

Proxies

Servidor == Java

.

.

.

Conclusão

@loianehttp://loiane.comgithub.com/loiane