TDC2012: Apps RIA com Sencha GXT 3 e GWT

1.445 visualizações

Publicada em

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!

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.445
No SlideShare
0
A partir de incorporações
0
Número de incorporações
340
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

TDC2012: Apps RIA com Sencha GXT 3 e GWT

  1. 1. Apps RIA com Sencha GXT 3 e GWT Java EE - Lado B Loiane Groner http://loiane.com @loiane
  2. 2. Sobre Loiane•Bacharel em Ciência da Computação•Gerente de Projetos•Autora técnica•Blogueira técnica•Evangelista Java e Sencha
  3. 3. RIA + Java?Pode isso?
  4. 4. Não precisaaprender JavaScript?
  5. 5. GWT
  6. 6. Frameworks Tradicionais● MVC○ Struts○ Spring● Component-based○ JSF○ Tapestry● SOUI (AJAX)○ Ext JS○ DOJO○ jQuery
  7. 7. 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
  8. 8. O maior problema?Todos tratam apps RIA como páginas web!
  9. 9. 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
  10. 10. 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
  11. 11. Código UI● Widgets (objetos Java)○ Seu código é criado através de herança oucomposição● Customizável● Configurável● Parecido com Swing (:/)● Pode extender
  12. 12. Compilador GWT● Código Java -> Código JS otimizado -> cross browser● Otimiza o código -> métodos in-lining, remove códigomorto, otimiza strings e mais● Framentos de código JS para apps grandes e startup maisrápido● JS é minimizado e obfuscado
  13. 13. Comunicação com Server● Remote Procedure Calls -> chamadas server passandoobjetos Java● Com RPC não precisa lidar com serialização edeserialização de objetos Java● Suporta XML e/ou JSON
  14. 14. Desenvolvimento● Run, Build, Debug e testes -> tudo em Java● GWT tem o “Development Mode” -> pode debugar antesdo código ser transformado em JS
  15. 15. Desenvolvimento● Codifica e Debuga usando a sua IDE favorita● Google Plugin for Eclipse
  16. 16. 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 JavaScriptnday, October 11, 2010
  17. 17. Internacionalização & Formatação•Static and dynamic substitution•Localized property files•Date Formatting•Number Formatting
  18. 18. sencha.com
  19. 19. Programa em Java Extensão GWTLook and Feel Ext JSComponentes Ext JS
  20. 20. Name GamesGoogle Web GWT GwitToolkit Ext Ext X-Gwit GXTGWT GWT
  21. 21. Introdução ao Ext GWT
  22. 22. •Widgets•Templates•Layouts•Loaders & Stores•Drag and Drop•Data Binding•MVC•Charts•Accessibility
  23. 23. 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
  24. 24. Data Widgets● Row, cell, seleção Linha ou célula● Suporte a teclado● Ligado a Data Stores● Renderização rápida
  25. 25. Forms● Forms ricos● Auto complete / assist combo box● Validação nativa● Labels à esquerda ou topo● Supporte a Multi column● Editor HTML
  26. 26. ToolBars and Menus● Conjunto de toolbars, button bars, e menus● Pode colocar qualquer widget nas toolbars e menu
  27. 27. Panel, Windows e Dialogs● Pode mover e redimencionar● Collapse / Expand● Button bar● Suporte modal
  28. 28. Templates● Representa um fragmento HTML● Customizar o display de dados
  29. 29. Ext GWT Layouts
  30. 30. 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 clientenquanto que as Records são cada instância dos Models (pode editar)
  31. 31. Drag and Drop● Suporte Drag and Drop em todos os componentes
  32. 32. Data Binding● Mapping de Atributos do Model em Campos● Relacionamento de 2 vias
  33. 33. Charts - Gráficos● Integração com Models e Stores● Muita variedade de gráficos
  34. 34. Accessibility!Acessibilidade com suporte a teclado e tema de alto contraste
  35. 35. Demo
  36. 36. https://github.com/loiane/ sencha-­‐gxt3-­‐rpc-­‐grid
  37. 37. Obrigada!http://loiane.com @loiane

×