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

Obrigada!

http://loiane.com@loiane