Post on 22-May-2015
description
Java EE - Lado B
Loiane Gronerhttp://loiane.com
@loiane
Apps RIA com Sencha GXT 3 e GWT
Sobre Loiane
•Bacharel em Ciência da Computação
•Gerente de Projetos
•Autora técnica
•Blogueira técnica
•Evangelista Java e Sencha
RIA + Java?Pode isso?
Não precisa aprender JavaScript?
GWT
Frameworks Tradicionais
● MVC○ Struts○ Spring
● Component-based ○ JSF○ Tapestry
● SOUI (AJAX) ○ Ext JS○ DOJO ○ jQuery
Dificuldade de Frameworks tradicionais
● Várias Linguagens ○ Server■ java, ruby, php, C#,...■ templates (HTML,XML, markup...)■ Glue languages (OGNL)○ Client■ JavaScript ■ HTML
● Server vs. Client○ Não compartilha código○ Muitas configs○ Muita conversão
● Setup do Projeto Complicado○ Código Server-side○ Código Client side○ Templates○ Arquivos Estáticos○ JavaScripts
O maior problema?
Todos tratam apps RIA como páginas web!
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
● 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
Anatomia de um Projeto GWT
● Widgets (objetos Java)○ Seu código é criado através de herança ou composição● Customizável● Configurável● Parecido com Swing (:/)● Pode extender
Código UI
● 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
Compilador GWT
● 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
Comunicação com Server
● Run, Build, Debug e testes -> tudo em Java
● GWT tem o “Development Mode” -> pode debugar antes do código ser transformado em JS
Desenvolvimento
● Codifica e Debuga usando a sua IDE favorita
● Google Plugin for Eclipse
Desenvolvimento
JavaScript Native Interface (JSNI)
Integração com código JavaScript
• Allows full integration with existing handwritten JavaScript or with a third-
party JavaScript library
• JSNI can be used in many ways• Implement a Java method directly in JavaScript
• Wrap type-safe Java method signatures around existing JavaScript
• Call from JavaScript code into Java code and vice-versa
• Throw exceptions across Java/JavaScript boundaries
• Read and write Java fields from JavaScript
JavaScript Native Interface (JSNI)
Monday, October 11, 2010
Internacionalização & Formatação
•Static and dynamic substitution •Localized property files•Date Formatting•Number Formatting
sencha.com
Programa em Java
Extensão GWT
Look and Feel Ext JS
Componentes Ext JS
Google Web
ToolkitGWT Gwit
Ext GWT
Ext GWT X-Gwit GXT
Name Games
Introdução ao Ext GWT
•Widgets •Templates •Layouts•Loaders & Stores •Drag and Drop •Data Binding •MVC•Charts •Accessibility
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
Data Widgets● Row, cell, seleção Linha ou célula
● Suporte a teclado
● Ligado a Data Stores
● Renderização rápida
Forms● Forms ricos● Auto complete / assist combo box● Validação nativa ● Labels à esquerda ou topo● Supporte a Multi column● Editor HTML
ToolBars and Menus● Conjunto de toolbars, button bars, e menus● Pode colocar qualquer widget nas toolbars e menu
Panel, Windows e Dialogs● Pode mover e redimencionar ● Collapse / Expand● Button bar● Suporte modal
Templates
● Representa um fragmento HTML● Customizar o display de dados
Ext GWT Layouts
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)
Drag and Drop
● Suporte Drag and Drop em todos os componentes
Data Binding● Mapping de Atributos do Model em Campos● Relacionamento de 2 vias
Charts - Gráficos● Integração com Models e Stores● Muita variedade de gráficos
Accessibility!Acessibilidade com suporte a teclado e tema de alto contraste
Demo
https://github.com/loiane/sencha-‐gxt3-‐rpc-‐grid