O documento discute a integração do framework Ext JS com Java EE, incluindo prós e contras dos diferentes frameworks e cuidados necessários. Ele também apresenta exemplos de arquitetura para projetos que utilizam Ext JS e Java, além de opções para comunicação entre as tecnologias.

1. 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

2. Loiane Groner
Apaixonada por Java e
Sencha
7+ XP Java
4+ XP Sencha
Software Development
Manager @ Citibank
@loiane
http://loiane.com

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

4. Ext JS 4

5. sencha.com

6. Cross-Browser

7. Alguns Exemplos

8. Fácil
Integração

9. Fácil
Integração

10. Fácil
Integração

11. Fácil
Integração

12. Construindo
Aplicações Ext JS 4

13. Como
Organizar
um Projeto
JS?

14. Incluir JS em cada jsp?

15. Incluir JS em cada jsp?
listarCliente.jsp
<script> listarCliente.js?

16. Incluir JS em cada jsp?
listarCliente.jsp
<script> listarCliente.js?
Não é assim em Ext JS!

17. Projeto Java + Ext JS
1 index.jsp apenas

18. Projeto Java + Ext JS
1 index.jsp apenas
Ext JS também usa MVC

19. MVC

20. Código precisa ser organizado
Boas práticas precisam ser seguidas
Fácil manutenção
Fácil trabalho em equipe

21. Model

22. Ext JS
Carrega e Gerencia dados da app
Dados dos requests da View

23. Java
POJO
Representa entidade banco de
dados

25. View

26. Ext JS
Gerencia dados na View
Componentes UI

27. Java
JSP
Ext JS assume responsabilidade

28. Java
JSP
Ext JS assume responsabilidade
MVC dentro de MVC!!!

31. Controller

33. Ext JS
Gerencia inputs do usuário
Atualiza Model e View

34. Java
Gerencia requests da view...
Enviar request pro Serviço
(opcional)...
Retorna response para a View

35. Java
Gerencia requests da view...
Enviar request pro Serviço
(opcional)...
Retorna response para a View
View == Ext JS

36. DAO

37. Java
Classe DAO
Comunicação com Banco
Hibernate, JPA ou outro

38. Ext JS
Não comunica com bando de dados
Stores - Coleção de Models
Proxies - comunica com Server

39. Arquitetura
Ext JS 4 + Java

41. Comunicação
Ext JS <-> Java

42. Servlets

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

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

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

46. WebSockets
Java EE 7

47. Arun Gupta Talk
http://www.slideshare.net/arungupta1/websocket-10

48. Arun Gupta Talk
http://www.slideshare.net/arungupta1/websocket-10

49. Jax-RS

51. VRaptor

52.
public
void
list()
{
result.use(ExtJSJson.class).from(this.contactDao.list())
.success(true).serialize();
}

53. @Post
@Consumes("application/json")
public void create(Contact data){
this.contactDao.create(data);
result.use(ExtJSJson.class).from(data)
.success(true).serialize();
}

54. ExtJSJon.class

55. ExtJSJon.class
Apenas para Grid e Tree!

56. Spring 2.5

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

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

59. Spring 3.x

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

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

62. Alguns Cuidados

63. Forms
Upload de Arquivos
(Ajax Request)

64. Leitura de
Nested Models
(Associations)

65. Envio (server) de
Nested Models
(Associations)

66. Comunicação
Cross-Browser

67. Ajax?

68. JSON-P?

69. WebServices - Ext JS?

70. WebServices - Ext JS?
$21,950

71. WebServices - Ext JS?
$21,950 #Fail!

72. WebServices - Java

73. Sencha Touch

75. .
.
Views Views
.
Controllers
Models
Stores
Proxies
Servidor == Java
on
n

76. Conclusão

77. @loiane
http://loiane.com
github.com/loiane