TDC2012: Apps RIA com Sencha GXT 3 e GWT

Apps RIA com Sencha GXT 3 e GWT Java EE - Lado B Loiane Groner http://loiane.com @loiane

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 precisaaprender JavaScript?

Frameworks Tradicionais● MVC○ Struts○ Spring● Component-based○ JSF○ Tapestry● SOUI (AJAX)○ Ext JS○ DOJO○ jQuery

Diﬁculdade 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 conﬁgs ○ JavaScripts○ Muita conversão

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

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 conﬁguração● .html - que irá abrigar o seu código● .css - para embelezar

Código UI● Widgets (objetos Java)○ Seu código é criado através de herança oucomposição● Customizável● Conﬁgurável● Parecido com Swing (:/)● Pode extender

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

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

Desenvolvimento● Run, Build, Debug e testes -> tudo em Java● GWT tem o “Development Mode” -> pode debugar antesdo código ser transformado em JS

Desenvolvimento● Codiﬁca e Debuga usando a sua IDE favorita● Google Plugin for Eclipse

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 ﬁelds from JavaScriptnday, October 11, 2010

Internacionalização & Formatação•Static and dynamic substitution•Localized property ﬁles•Date Formatting•Number Formatting

sencha.com

Programa em Java Extensão GWTLook and Feel Ext JSComponentes Ext JS

Name GamesGoogle Web GWT GwitToolkit Ext Ext X-Gwit GXTGWT GWT

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 clientenquanto 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áﬁcos● Integração com Models e Stores● Muita variedade de gráﬁcos

Accessibility!Acessibilidade com suporte a teclado e tema de alto contraste

https://github.com/loiane/ sencha-‐gxt3-‐rpc-‐grid

Obrigada!http://loiane.com @loiane

TDC2012: Apps RIA com Sencha GXT 3 e GWT

by Loiane Groner on Jul 06, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 251

Statistics

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

http://www.loiane.com	249
https://twimg0-a.akamaihd.net	2