javaone brazil 2012: integrando ext js 4 com java ee
TRANSCRIPT
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