Baixado 17 vezes
Carregado porLoiane Groner
TDC2012: Apps RIA com Sencha GXT 3 e GWT
Este documento discute o uso de GWT e Sencha GXT 3 para desenvolver aplicações RIA em Java EE, destacando a diferença do GWT em relação a frameworks tradicionais. Ele aborda a anatomia de um projeto GWT, a comunicação servidor-cliente e a utilização de JavaScript via JSNI. Também menciona a integração de widgets e layouts no Sencha GXT, enfatizando acessibilidade e personalização.
![[Curso de ExtJS 4] Aula 44: Apps MVC](https://cdn.slidesharecdn.com/ss_thumbnails/curso-extjs4-aula44-140219164707-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
TDC2012: Apps RIA com Sencha GXT 3 e GWT
- 1. Apps RIA comSencha GXT 3 e GWT Java EE - Lado B Loiane Groner http://loiane.com @loiane
- 2. Sobre Loiane •Bacharel emCiência da Computação •Gerente de Projetos •Autora técnica •Blogueira técnica •Evangelista Java e Sencha
- 4. RIA + Java? Podeisso?
- 5.
- 6.
- 7. Frameworks Tradicionais ● MVC ○Struts ○ Spring ● Component-based ○ JSF ○ Tapestry ● SOUI (AJAX) ○ Ext JS ○ DOJO ○ jQuery
- 8. Dificuldade de Frameworkstradicionais ● 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? Todostratam 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 umProjeto 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ódigoJava -> 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 eDebuga 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 •Staticand dynamic substitution •Localized property files •Date Formatting •Number Formatting
- 23.
- 24. Programa em Java Extensão GWT Look and Feel Ext JS Componentes Ext JS
- 25. Name Games Google WebGWT Gwit Toolkit Ext Ext X-Gwit GXT GWT GWT
- 26.
- 27. •Widgets •Templates •Layouts •Loaders & Stores •Dragand 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 eDialogs ● Pode mover e redimencionar ● Collapse / Expand ● Button bar ● Suporte modal
- 33. Templates ● Representa umfragmento HTML ● Customizar o display de dados
- 34.
- 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 ● Mappingde 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 suportea teclado e tema de alto contraste
- 40.
- 41. https://github.com/loiane/ sencha-‐gxt3-‐rpc-‐grid
- 42. Obrigada! http://loiane.com @loiane