Google Web Toolkit-Gwt

Mini-curso Gratuito
Apresentação da Agenda
Agenda
• Cenário
• O que é e o que faz o GWT?
• Estrutura do GWT
• Configuração do Aplicativo GWT
• Demonstração do Aplicativo GWT
• RPC - GWT do lado servidor
• Usando JavaScript, CSS e i18n
• Extensões do GWT
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Cenário. Web de hoje em dia...
Quanto tempo voce fica off-line?

Introdução
Objetivo
• Construir aplicações Web Iterativas (RIA);

• Ponderar a espectativa sob “Rich” com a realidade /
necessidade do usuário;
• Navegação rápida, agradável e fácil;
• Produtividade na construção e manutenção de aplicações
web;
• Web “leve” – HTML + CSS + AJAX;
• Resolver eventuais incompatibilidades de navegodores.

Introdução
Google Web Toolkit, uma solução para RIA!
• Tornando desenvolvimento web mais produtivo.

• Construa aplicações web sem “tédio”.
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
O que é o GWT ?
• Tecnologia open-source para construção de aplicações

web utilizando Java;
• Vai além de um framework web;

• Kit composto por algumas ferramentas;
• Define um modelo de componentização para criação de

Interfaces Gráficas complexas;
Introdução
O Kit de ferramentas GWT
• Gerador de aplicações
• Emulador de execução(WebServer + Browser)
• Compilador / Gerador código JavaScript
• Emulador da JRE em JavaScript
• API
• Widgets
• Panels
Introdução
O que o GWT faz ?
• Compila código Java em JavaScript;

• Esconde a complexidade do Ajax;
• Resolve a incompatibilidade de browsers;
• Possui recursos comum de um framework web;
• Disponibiliza mecanismo RPC;
• Você codifica e "debuga" Java, mas "instala" JavaScript.
Introdução
Benefícios
• Concentre seus esforços no Java.
• Pare de sofrer com incompatibilidade de Navegadores.
• Use a abuse de Ajax sem se preocupar com JavaScript.
• Use componentes visuais.
• Suporte a teste unitários.

Introdução
Ecosistema
Compilador
JRE
JSNI
Emulador
API
Widgets / Panel RPC / Http i18n JUnit Integration XML Parser
Utilitários
webAppCreator junitCreator i18nCreator
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Estrutura do GWT
Introdução
Pensando em MVC
• Apresentação
o Widgets / Panels
o Listeners
• Controle
o Serviço
• Modelo / Negócio
o EJB
o Spring
o Pojo ou qualquer outra framework Java.
Introdução
Componentes Visuais I
• Widgets
o Buttons, Dialogs, Label, TextBox, FileUpload, Tables,
Forms, Listbox, Popup e outros ;
Label lbl = new Label(“Nome");

TextBox txt = new TextBox();
...
Introdução
Componentes Visuais II
• Container / Panel
o RootPanel, HorizontalPanel, VerticalPanel, FlowPanel,
DialogBox, FormPanel e outros ;
DialogBox box = new DialogBox();

box.setText("Popup GWT");
box.add(new Button("Fechar"));
...
Introdução
Eventos
Tratamento de eventos com Listeners;
...
btnEnviar.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Ola GWT");
}
});
...
Introdução
Compilador: o truque!
• Suporte a tipagem primitiva, String, array e Object;
• Suporta recursos do Java 5.
• Adota o AST (Abstract Syntax Tree);
• Prepara o conteúdo para o emulador JRE;

Introdução
Emulador JRE
• Simula a Runtime do Java no JavaScript.
• Permite trabalhar com “tipos” do Java:

• String + Wrapper Classes
• Collections
• Alguma exceptions
• Data Objects: “trafegam” do Java para JavaScript e vice-

versa.
• Possui um mecanismo de serialização.

Introdução
Hosted Mode
Agilidade durante desenvolvimento
Jetty / Web Server

Introdução
Fluxo de trabalho
Desenvolvimento Produção
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Organização do Projeto GWT
Plugin Google
para Eclipse
Configurações
do GWT
Código
no Cliente (Browser)
Código Java
no Servidor
Introdução
Módulo
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='GlobalcodeGWT'>


<inherits name='com.google.gwt.user.User' />


<inherits name='com.google.gwt.user.theme.standard.Standard'/>


<entry-point class='br.com.globalcode.gwt.client.GlobalcodeGWT'/>
</module>
Introdução
Tema
• GWT adota o conceito de Skinnability;
• Padronização do visual da aplicação;
• Componentiza (esconde) o CSS;
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
Introdução
Entry-Point
Ponto de partida para executar a aplicação

public class GlobalcodeGWT implements EntryPoint {
public void onModuleLoad() {

...
final Button btnEnviar = new Button("Enviar");
btnEnviar.addStyleName("sendButton");
RootPanel.get(“container").add(btnEnviar);
...
}
}
Introdução
Hosted HTML
<html>
<head> … </head>
<body>
<!– javascript do projeto -->
<script language=‘javascript‘ src=‘projeto.nocache.js‘> </script >

<iframe src=“javascript:’’” id=“__gwt_historyFrame"
style =“width:0;height:0;border:0” > </iframe>
<!– Estrutura preenchida pelo GWT. -->

<div id=‘container'></div>
</body>
</html>
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Demo – executando projeto GWT

Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
No Servidor: Serviço
• Acesso aos componentes da camada de negócio;
• Todas as chamadas são assíncronas;

• Formas de acesso:
o GWT RPC - Remote Procedure Call
o Http
Introdução
Serviço RPC
• Etapas para criação:
o Definir um contrato especificando as funcionalidades do

serviço;
o Implementar o Serviço;
o Definir proxy para requisição assíncrona;
• O serviço é um Servlet.
Introdução
Serviço RPC
Introdução
Demo GWT com RPC...

Introdução
Etapas da execução
View Service Clientes
Service
Widgets Async DAO
onload
new
Async
Callback
for
getClientes(callback) getClientes()
getAll()
new
Cliente
onSuccess()
grid.add(clientes)
JavaScript / Cliente Java / Servidor

Introdução
Serviço Http
• Outra opção de integração;
• Client faz a requisição http;
• Server retorna XML, JSON e/ou JSNI;
• Solução para REST e/ou WebService;

Introdução
Exemplo usando Serviço Http
String url = "http://www.globalcode.com.br/getMCursos?semana=40";
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET,
URL.encode(url));
try {
Request request = builder.sendRequest(null, new RequestCallback() {
...
public void onResponseReceived(Request request, Response response) {
if (200 == response.getStatusCode()) {
// resposta finalizada
}
}
});
} catch (RequestException e) {
//não foi possivel conectar ao server
}
Na configuração do módulo: <inherits name='com.google.gwt.http.Http/>

Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
JNSI - JavaScript Native Integration
• Criando código JavaScript nativo no Java.
public native static void alert(String msg) /* {

--codigo javascript
$wnd.alert(msg);
}*/ ;
Introdução
Customização Estilo
Exemplo 1, css:
.sendButton {
display: block;
font-size: 16pt;
}
Java:
cliqueButton.addStyleName("sendButton"); //vinculando style por class (Button)
Exemplo 2, css:
#closeButton {
display: block;
font-size: 16pt;
}
Java:
closeButton.getElement().setId("closeButton"); //vinculando style por selector (Button)
Introdução
Internacionalização
#arquivo properties
clienteNome=Nome
clienteCpf=CPF
public interface Rotulos implements Constants {

String clienteCpf();
String clienteNome();
}
//Entry point
Rotulos i18n = (Rotulos) GWT.create(Rotulos.class);
Label lblNome = new Label(i18n.clienteNome());
…
Label lblCpf = new Label(i18n.clienteCpf());
…
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Extensões
• Aumente a produtividade com GWT
• Aproveite Widgets terceirizados:
o Ext GWT
http://extjs.com/examples/explorer.html#overview
o SmartClient GWT
http://www.smartclient.com/smartgwt/showcase/
o Advanced Components
http://advanced-gwt.sourceforge.net/demo/index.html
o GWT Ext
http://www.gwt-ext.com/demo/
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Teste Unitário - JUnit

EntryPoint
public class ValidaCpfTest extends GWTTestCase
{
public String clienteCpf() { Modulo
return “br.com.globalcode.cliente.Modulo"; +boolean validaCpf(String)
}
public void test() {

Modulo m = new Modulo();
assertTrue(m.validaCpf(“29988798705”));
…
}
…
}
Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Quem usa GWT?
• Google:
• Docs
• Gmail
• Wave
• StudyBlue: foco educacional, “sala virtual”.
• ContactOffice: suite colaborativa para escritório.
• Citrix TV: Vídeos relacionados a Citrix.
Veja mais em http://gwtgallery.appspot.com

Introdução
Um pouco do Histórico...
Mai. 2006 1.0 Lançamento do GWT.
Ago. 2006 1.1 Suporte a injeção de CSS.
Nov. 2006 1.2 Disponível para Mac OSX.
Jan. 2007 1.3 Completamente Open Source.
Mar. 2008 1.4 Mais de 1 milhão de downloads.
Out. 2008 1.5 Suporte a recursos do Java 5.
Abr. 2009 1.6 Versão atual, diversas melhorias.

Agenda
• Cenário
• Teste Unitário
• Quem usa GWT?
• Tendências
• Perguntas
Introdução
Tendências
• GWT 2.0
• Debug (Java) direto no navegador;
• Compilador mais rápido;
• Melhorias Binding;
• Scripts JS e CSS menores;
• Google Wave
• Google App Engine

Introdução
Links
http://code.google.com/intl/pt-BR/webtoolkit
http://www.ongwt.com
http://www.gwtsite.com
http://groups.google.com/group/Google-Web-Toolkit?hl=en&pli=1
http://www.gwtapps.com/
http://wave.google.com/
http://code.google.com/intl/pt-BR/appengine/
Introdução
Perguntas

Google Web Toolkit-Gwt

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Google Web Toolkit-Gwt

Enviado por

Direitos autorais:

Formatos disponíveis

Mini-curso Gratuito

Cenário. Web de hoje em dia...

Quanto tempo voce fica off-line?

• Construir aplicações Web Iterativas (RIA);

• Resolver eventuais incompatibilidades de navegodores.

Google Web Toolkit, uma solução para RIA!

• Tornando desenvolvimento web mais produtivo.

• Tecnologia open-source para construção de aplicações

• Vai além de um framework web;

• Define um modelo de componentização para criação de

O Kit de ferramentas GWT

• Emulador de execução(WebServer + Browser)

• Compilador / Gerador código JavaScript

• Emulador da JRE em JavaScript

O que o GWT faz ?

• Compila código Java em JavaScript;

• Concentre seus esforços no Java.

• Pare de sofrer com incompatibilidade de Navegadores.

• Use a abuse de Ajax sem se preocupar com JavaScript.

• Use componentes visuais.

• Suporte a teste unitários.

Widgets / Panel RPC / Http i18n JUnit Integration XML Parser

Label lbl = new Label(“Nome");

DialogBox box = new DialogBox();

Tratamento de eventos com Listeners;

• Suporte a tipagem primitiva, String, array e Object;

• Suporta recursos do Java 5.

• Adota o AST (Abstract Syntax Tree);

• Prepara o conteúdo para o emulador JRE;

• Simula a Runtime do Java no JavaScript.

• Permite trabalhar com “tipos” do Java:

• Data Objects: “trafegam” do Java para JavaScript e vice-

• Possui um mecanismo de serialização.

Agilidade durante desenvolvimento

Jetty / Web Server

Organização do Projeto GWT

• GWT adota o conceito de Skinnability;

• Padronização do visual da aplicação;

• Componentiza (esconde) o CSS;

Ponto de partida para executar a aplicação

public void onModuleLoad() {

<!– Estrutura preenchida pelo GWT. -->

Demo – executando projeto GWT

• Acesso aos componentes da camada de negócio;

• Todas as chamadas são assíncronas;

• Etapas para criação:

o Definir um contrato especificando as funcionalidades do

o Definir proxy para requisição assíncrona;

Demo GWT com RPC...

JavaScript / Cliente Java / Servidor

• Outra opção de integração;

• Client faz a requisição http;

• Server retorna XML, JSON e/ou JSNI;

• Solução para REST e/ou WebService;

Na configuração do módulo: <inherits name='com.google.gwt.http.Http/>

JNSI - JavaScript Native Integration

• Criando código JavaScript nativo no Java.

public native static void alert(String msg) /* {

public interface Rotulos implements Constants {

• Aumente a produtividade com GWT