Google Web Toolkit GWT

Mini-curso Gratuito
Agenda
Cenrio
O que e o que faz o GWT?
Estrutura do GWT
Configurao do Aplicativo GWT
Demonstrao do Aplicativo GWT
RPC - GWT do lado servidor
Usando JavaScript, CSS e i18n
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Apresentao da Agenda
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Cenrio. Web de hoje em dia...
Introduo
Quanto tempo voce fica off-line?
Objetivo
Construir aplicaes Web Iterativas (RIA);
Ponderar a espectativa sob Rich com a realidade /
necessidade do usurio;
Navegao rpida, agradvel e fcil;
Produtividade na construo e manuteno de aplicaes
web;
Web leve HTML + CSS + AJAX;
Resolver eventuais incompatibilidades de navegodores.
Introduo
Google Web Toolkit, uma soluo para RIA!
Tornando desenvolvimento web mais produtivo.
Construa aplicaes web sem tdio.
Introduo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
O que o GWT ?
Tecnologia open-source para construo de aplicaes
web utilizando Java;
Vai alm de um framework web;
Kit composto por algumas ferramentas;
Define um modelo de componentizao para criao de
Interfaces Grficas complexas;
Introduo
O Kit de ferramentas GWT
Gerador de aplicaes
Emulador de execuo(WebServer + Browser)
Compilador / Gerador cdigo JavaScript
Emulador da JRE em JavaScript
API
Widgets
Panels
Introduo
O que o GWT faz ?
Compila cdigo 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.
Introduo
Benefcios
Concentre seus esforos 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 unitrios.
Introduo
Ecosistema
Introduo
Compilador
JRE
Emulador
JSNI
Widgets / Panel RPC / Http i18n JUnit Integration XML Parser
API
Utilitrios
webAppCreator junitCreator i18nCreator
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Estrutura do GWT
Introduo
Pensando em MVC
Apresentao
o Widgets / Panels
o Listeners
Controle
o Servio
Modelo / Negcio
o EJB
o Spring
o Pojo ou qualquer outra framework Java.
Introduo
Componentes Visuais I
Widgets
o Buttons, Dialogs, Label, TextBox, FileUpload, Tables,
Forms, Listbox, Popup e outros ;
Introduo
Label lbl = new Label(Nome");
TextBox txt = new TextBox();
...
Componentes Visuais II
Container / Panel
o RootPanel, HorizontalPanel, VerticalPanel, FlowPanel,
DialogBox, FormPanel e outros ;
Introduo
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");
}
});
...
Introduo
Compilador: o truque!
Suporte a tipagem primitiva, String, array e Object;
Suporta recursos do Java 5.
Adota o AST (Abstract Syntax Tree);
Prepara o contedo para o emulador JRE;
Introduo
Introduo
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 serializao.
Hosted Mode
Introduo
Jetty / Web Server
Agilidade durante desenvolvimento
Fluxo de trabalho
Introduo
Desenvolvimento Produo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Organizao do Projeto GWT
Introduo
Plugin Google
para Eclipse
Configuraes
do GWT
Cdigo Java
no Servidor
Cdigo
no Cliente (Browser)
Mdulo
<?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>
Introduo
Tema
GWT adota o conceito de Skinnability;
Padronizao do visual da aplicao;
Componentiza (esconde) o CSS;
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
Introduo
Entry-Point
Ponto de partida para executar a aplicao
public class GlobalcodeGWT implements EntryPoint {
public void onModuleLoad() {
...
final Button btnEnviar = new Button("Enviar");
btnEnviar.addStyleName("sendButton");
RootPanel.get(container").add(btnEnviar);
...
}
}
Introduo
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>
Introduo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Demo executando projeto GWT
Introduo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
No Servidor: Servio
Acesso aos componentes da camada de negcio;
Todas as chamadas so assncronas;
Formas de acesso:
o GWT RPC - Remote Procedure Call
o Http
Introduo
Servio RPC
Etapas para criao:
o Definir um contrato especificando as funcionalidades do
servio;
o Implementar o Servio;
o Definir proxy para requisio assncrona;
O servio um Servlet.
Introduo
Servio RPC
Introduo
Demo GWT com RPC...
Introduo
Etapas da execuo
Introduo
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
Servio Http
Outra opo de integrao;
Client faz a requisio http;
Server retorna XML, JSON e/ou JSNI;
Soluo para REST e/ou WebService;
Introduo
Exemplo usando Servio 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) {
//no foi possivel conectar ao server
}
Na configurao do mdulo: <inherits name='com.google.gwt.http.Http/>
Introduo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
JNSI - JavaScript Native Integration
Criando cdigo JavaScript nativo no Java.
public native static void alert(String msg) /* {
--codigo javascript
$wnd.alert(msg);
}*/ ;
Introduo
Customizao 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)
Introduo
Internacionalizao
Introduo
#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
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Extenses
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/
Introduo
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Teste Unitrio - JUnit
Introduo
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));
}

}
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Quem usa GWT?
Google:
Docs
Gmail
Wave
StudyBlue: foco educacional, sala virtual.
ContactOffice: suite colaborativa para escritrio.
Citrix TV: Vdeos relacionados a Citrix.
Veja mais em http://gwtgallery.appspot.com
Introduo
Um pouco do Histrico...
Introduo
Mai. 2006 1.0 Lanamento do GWT.
Ago. 2006 1.1 Suporte a injeo de CSS.
Nov. 2006 1.2 Disponvel para Mac OSX.
Jan. 2007 1.3 Completamente Open Source.
Mar. 2008 1.4 Mais de 1 milho de downloads.
Out. 2008 1.5 Suporte a recursos do Java 5.
Abr. 2009 1.6 Verso atual, diversas melhorias.
Agenda
Cenrio
Estrutura do GWT
Extenses do GWT
Teste Unitrio
Quem usa GWT?
Tendncias
Perguntas
Tendncias
GWT 2.0
Debug (Java) direto no navegador;
Compilador mais rpido;
Melhorias Binding;
Scripts JS e CSS menores;
Google Wave
Google App Engine
Introduo
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/
Introduo
Perguntas
Introduo

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

Label lblCpf = new Label(i18n.clienteCpf());

Você também pode gostar