Mc56 gwt

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
Apresentação da Agenda

Cenário. Web de hoje em dia...
Introdução
Quanto tempo voce fica off-line?

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”.
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
Introdução
Compilador
JRE
Emulador
JSNI
Widgets / Panel RPC / Http i18n JUnit Integration XML Parser
API
Utilitários
webAppCreator junitCreator i18nCreator

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 ;
Introdução
Label lbl = new Label(“Nome");
TextBox txt = new TextBox();
...

Componentes Visuais II
• Container / Panel
o RootPanel, HorizontalPanel, VerticalPanel, FlowPanel,
DialogBox, FormPanel e outros ;
Introdução
DialogBox box = new DialogBox();
box.setText("Popup GWT");
box.add(new Button("Fechar"));
...

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

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.

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

Fluxo de trabalho
Introdução
Desenvolvimento Produção

Organização do Projeto GWT
Introdução
Plugin Google
para Eclipse
Configurações
do GWT
Código Java
no Servidor
Código
no Cliente (Browser)

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>
Introdução

Demo – executando projeto GWT
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

Demo GWT com RPC...
Introdução

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

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/>
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
Introduçã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());
…

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/
Introdução

Teste Unitário - JUnit
Introdução
Modulo
+boolean validaCpf(String)
EntryPoint
public class ValidaCpfTest extends GWTTestCase
{
public String clienteCpf() {
return “br.com.globalcode.cliente.Modulo";
}
public void test() {
Modulo m = new Modulo();
assertTrue(m.validaCpf(“29988798705”));
…
}
…
}

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...
Introdução
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.

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

Mc56 gwt

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

En vedette

En vedette (17)

Similaire à Mc56 gwt

Similaire à Mc56 gwt (20)

Dernier

Dernier (6)

Mc56 gwt