TDC2012: Apps RIA com Sencha GXT 3 e GWT

Post on 22-May-2015

1.370 views 0 download

description

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!

Transcript of TDC2012: Apps RIA com Sencha GXT 3 e GWT

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

Obrigada!

http://loiane.com@loiane