Quando falamos em RIA, logo lembramos de código JavaScript, JQuery, primefaces, richfaces, etc. Mas porque não podemos ter uma aplicação com componentes ricos codificando apenas com código Java? O GWT (Google Web Toolkit) é um framework que nos permite fazer isso, mas para deixar a aplicação bonita, ainda temos que ter um grande trabalho com CSS para estilizar a aplicação. O GXT (Ext GWT) é um framework open-source que veio para complementar o GWT. Assim podemos programar apenas em Java, sem se preocupar com nenhum código javascript, ou html ou css e ainda assim tem componentes bonitos e ricos com o look and feel do ExtJS. Na palestra vamos aprender um pouco mais sobre o GXT, seus recursos, prós e contras, além de ver uma aplicação de exemplo e um pouco de código!

1. Apps RIA com Sencha GXT 3 e GWT
Java EE - Lado B
Loiane Groner
http://loiane.com
@loiane

2. Sobre Loiane
•Bacharel em Ciência da Computação
•Gerente de Projetos
•Autora técnica
•Blogueira técnica
•Evangelista Java e Sencha

4. RIA + Java?
Pode isso?

5. Não precisa
aprender JavaScript?

6. GWT

7. Frameworks Tradicionais
● MVC
○ Struts
○ Spring
● Component-based
○ JSF
○ Tapestry
● SOUI (AJAX)
○ Ext JS
○ DOJO
○ jQuery

8. Dificuldade de Frameworks tradicionais
● Várias Linguagens
○ Server
■ java, ruby, php, C#,...
■ templates (HTML,XML, markup...)
■ Glue languages (OGNL)
○ Client
■ JavaScript
■ HTML ● Setup do Projeto Complicado
○ Código Server-side
○ Código Client side
● Server vs. Client
○ Templates
○ Não compartilha código
○ Arquivos Estáticos
○ Muitas configs
○ JavaScripts
○ Muita conversão

9. O maior problema?
Todos tratam apps RIA como páginas web!

10. Como o GWT é diferente
● Código em Java (maioria)
● 'compilado' para js/html
● Não precisa
○ páginas templates
○ 'glue languages'
○ scripting
● Uso completo de ferramentas Java
○ Eclipse debugger
○ Code complete
○ Continuous compilation
● Código compartilhado entre client/server

11. Anatomia de um Projeto GWT
● Código Java
○ client - compilado para js/html e executado no browser
○ server - compilado para java e executado no lado server
○ shared - compartilhado
● .gwt.xml - arquivo de configuração
● .html - que irá abrigar o seu código
● .css - para embelezar

12. Código UI
● Widgets (objetos Java)
○ Seu código é criado através de herança ou
composição
● Customizável
● Configurável
● Parecido com Swing (:/)
● Pode extender

15. Compilador GWT
● Código Java -> Código JS otimizado -> cross browser
● Otimiza o código -> métodos in-lining, remove código
morto, otimiza strings e mais
● Framentos de código JS para apps grandes e startup mais
rápido
● JS é minimizado e obfuscado

16. Comunicação com Server
● Remote Procedure Calls -> chamadas server passando
objetos Java
● Com RPC não precisa lidar com serialização e
deserialização de objetos Java
● Suporta XML e/ou JSON

18. Desenvolvimento
● Run, Build, Debug e testes -> tudo em Java
● GWT tem o “Development Mode” -> pode debugar antes
do código ser transformado em JS

19. Desenvolvimento
● Codifica e Debuga usando a sua IDE favorita
● Google Plugin for Eclipse

20. party JavaScript library
•
JavaScript Native Interface (JSNI)
JSNI can be used in many ways
• Implement a Java method directly in JavaScript
• Wrap type-safe Java method signatures around existing JavaScript
Integração JavaScript codeJavaScript and vice-versa
• Call from com código into Java code
• Throw exceptions across Java/JavaScript boundaries
• Read and write Java fields from JavaScript
nday, October 11, 2010

21. Internacionalização & Formatação
•Static and dynamic substitution
•Localized property files
•Date Formatting
•Number Formatting

23. sencha.com

24. Programa em Java
Extensão GWT
Look and Feel Ext JS
Componentes Ext JS

25. Name Games
Google
Web GWT Gwit
Toolkit
Ext Ext
X-Gwit GXT
GWT GWT

26. Introdução ao Ext GWT

27. •Widgets
•Templates
•Layouts
•Loaders & Stores
•Drag and Drop
•Data Binding
•MVC
•Charts
•Accessibility

28. Ext GWT Widgets
● Alta performance
● Pode customizar tema
● Data widgets
○ Tree e TreeGrid
○ Lists e Grids
● Forms
● Menu, menu bars e toolbars
● Panels, windows e dialogs

29. Data Widgets
● Row, cell, seleção Linha ou célula
● Suporte a teclado
● Ligado a Data Stores
● Renderização rápida

30. Forms
● Forms ricos
● Auto complete / assist combo box
● Validação nativa
● Labels à esquerda ou topo
● Supporte a Multi column
● Editor HTML

31. ToolBars and Menus
● Conjunto de toolbars, button bars, e menus
● Pode colocar qualquer widget nas toolbars e menu

32. Panel, Windows e Dialogs
● Pode mover e redimencionar
● Collapse / Expand
● Button bar
● Suporte modal

33. Templates
● Representa um fragmento HTML
● Customizar o display de dados

34. Ext GWT Layouts

35. Loaders & Stores
● Models - objetos de domínio (POJO)
● DataLoader - carrega dados com ajudar do Proxy e Reader
● DataReader - faz o parser dos dados
● DataProxy - responsável por carregar dados do server
● Stores & Records - stores são a versão cache dos Models no lado client
enquanto que as Records são cada instância dos Models (pode editar)

36. Drag and Drop
● Suporte Drag and Drop em todos os componentes

37. Data Binding
● Mapping de Atributos do Model em Campos
● Relacionamento de 2 vias

38. Charts - Gráficos
● Integração com Models e Stores
● Muita variedade de gráficos

39. Accessibility!
Acessibilidade com suporte a teclado e tema de alto contraste

40. Demo

41. https://github.com/loiane/
sencha-­‐gxt3-­‐rpc-­‐grid

42. Obrigada!
http://loiane.com
@loiane