Web Toolkit

M
Marcelo
l EEmanoell B
B. Di
Diniz
i

PBJUG
 PBJUG
Quem?

• Estudante
E t d t de
d Graduação
G d ã na UFCG
• Desenvolvedor JEE na Politec
• Contato: marcelo@gwt.com.br
• Bl
Blog: www.gwt.com.br
t b
 PBJUG
O que é?

• Framework Open Source

• Torna o desenvolvimento de
aplicações AJAX mais simplificado
• Escrito
E it em JJava
• Possui um compilador
p Java-
Javascript
• Javascript compatível com principais
navegadores
 PBJUG
O que é AJAX?

• Sigla para Asynchronous Javascript

And XML
• Na prática, significa aplicações que
reagem com maior naturalidade
naturalidade.
• Aparência de aplicações Desktop
• GMail
• Flickr
• Google Maps
 PBJUG
Vantagens

• Implementação em Java
• M
Mecanismo
i simples
i l d de RPC
• Debugg real
• Compatibilidade com os principais
navegadores
• Integração com JUnit
 PBJUG
Vantagens

• Suporte a Internacionalização
• Possibilidade
P ibilid d d
de iintegração
t ã com
Javascript Puro
• Open Source
• Versões para Windows
Windows, Linux e Mac
• Integração com principais IDE’s
 PBJUG
Como Funciona?

• Divisão em 2(duas) camadas

principais.
principais
• Cliente
• Servidor
 PBJUG

Lado Cliente (Javascript)

c r c r c r c r c r
h e h e h e h e h e
a s a s a s a s a s
m p m p m p m p m p
a o a o a o ... a o a o
d s d s d s d s d s
a t a t a t a t a t
a a a a a

Lado Servidor(Java)
 PBJUG
Detalhando

• Toda a interface permanece no lado

cliente.
cliente
• O cliente então efetua chamadas ao
servidor que retorna dados de
maneira assíncrona a qquem os
solicitou.
 PBJUG
Nem tudo são flores...

• O lado cliente sofre algumas

restrições.
restrições
• Javascript não é Java :)
• Tipos Básicos e Wrappers
• java.util
java util
• Java 1.4
 PBJUG
Liberdade no Servidor

• Ao passo que o cliente sofre restrições, o

mesmo não ocorre no lado servidor
• Java 5 / 6
• Annotations
A t ti
• Enums
• Frameworks de log, persistência, servlets
padrão e etc.
• Desacoplamento
 PBJUG
Widgets

• Objetos gráficos
• B tõ
Botões
• Paineis
• ComboBoxes
• Ch kB
CheckBoxes
• RadioButtons
• etc
 PBJUG
Eventos e Listeners

• Click de botões
• P d /G h de
Perda/Ganho d ffoco
• Mudança ç de valor
• ClickListener
• F
FocusListener
Li t
• ChangeListener
• etc
 PBJUG
Modos de Execução
• Hosted Mode
– Tomcat embutido
– Debug
– Script gerado on the fly
– Atualizações com refresh da página
– Aplicação em desenvolvimento
• Web Mode
– Tomcat externo
– Script compilado
– Atualizações requerem nova compilação
– Aplicação em produção
 PBJUG
Primeiros Passos

• Download em
http://code google com/webtoolkit
http://code.google.com/webtoolkit
• ProjectCreator
• ApplicationCreator
• JunitCreator
• I18nCreator
 PBJUG
Criando um projeto
projeto,
Hello World :)
• projectCreator -ant HelloWorld -eclipse HelloWorld

Created directory src

Created directory test
Created file HelloWorld.ant.xml
Created file .project
Created file .classpath
classpath
 PBJUG
Criando a aplicação
• applicationCreator -eclipse HelloWorld
org.pbjug.client.HelloWorld

Created directory src/org/pbjug/client

Created directory src/org/pbjug/public
Created file src/org/pbjug/HelloWorld.gwt.xml
C t d fil
Created file src/org/pbjug/public/HelloWorld.html
/ / bj / bli /H ll W ld ht l
Created file src/org/pbjug/client/HelloWorld.java
Created file HelloWorld.launch
HelloWorld launch
Created file HelloWorld-shell
Created file HelloWorld-compile
 PBJUG
Arquivos de Configuração

• SeuModulo.gwt.xml
• SeuModulo.ant.xml
S M d l t l
• Arquivos
q de configuração
g ç dos
frameworks que deseje utilizar
 PBJUG
SeuModulo.gwt.xml

• Descrição da aplicação para o

compilador GWT
• Pontos de entradas
• Servlets
• Extensões
• Scripts e CSS injetados
 PBJUG
Exemplo de Módulo básico
• <module>
• <!-- Inherit the core Web Toolkit stuff. -->
• <!– Obrigatório!!! -->
• <inherits name='com.google.gwt.user.User'/>
•
• <!-- Specify the app entry point class. -->
• <!–
! Não
Nã obrigatório
b i tó i mas muitoit comum -->
• <entry-point class=‘sua classe de entrada'/>
• </module>
</mod le>
 PBJUG
O que danado é um entry-point?

• Equivalente a:
public static void main(String[] args)
• Classe que implementa a interface
EntryPoint
• Possui o primeiro método chamado pela
aplicação.
li ã
public void onModuleLoad()
• Ponto de partida para o desenvolvimento.
 PBJUG
RootPanel

• Conteúdo da página html

• Possível
P í l carregar objetos
bj t d da página
á i
• Possível criar objetos
j dinâmicos na
página
 PBJUG
Chamadas ao Servidor

• Assíncronas!
• I l
Implementação
t ã simples
i l
• 2 interfaces e 1 classe
• Mecanismo de Serialização
diferenciado
• Interface de marcação IsSerializable
PBJUG
 PBJUG
Traduzindo o diagrama anterior

• Interface Service
• Interface
I t f ServiceAsync
S i A
• Classe q que estende
RemoteServiceServlet e implementa
a interface Service
 PBJUG
Interfaces Service

• Estende RemoteService
• Declaração
D l ã normall
• Chamadas ao servidor
 PBJUG
Interfaces ServiceAsync

• Todos os métodos retornam void

• Retorno
R t embutido
b tid
• Todos os métodos tem ppelo menos
um parâmetro
• Mesmo nome e parâmetros da
interface Service
• NÃO LANÇAM EXCEÇÃO!!
 PBJUG
AsyncCallBacks

• Mecanismos de respostas do servidor

• R
Reação
ã a chamada
h d bbem sucedida
did
• Reação
ç a chamada mal sucedida
• Geralmente possuem o código que
provoca mudanças na aplicação
aplicação.
• Ex.: Retorno de dados que
preencherão uma tabela.
 PBJUG
Criando uma AsyncCallback

• new AsyncCallback() {
public void onSuccess(Object
p ( j result)) {
//result é o retorno do método declarado na interface
//Service
//Códi d
//Código de sucesso!!
}
public void onFailure(Throwable caught) {
//Código de Falha
//caught é a exceção lançada na interface Service
}
• }
 PBJUG
Implementação do Serviço
• Classe que reside no lado servidor da
aplicação
p ç
• Estende RemoteServiceServlet
• Implementa interface Service
• Ponto de partida no servidor
• Servlet
• Session
• Request
• Response
 PBJUG
Exemplo
• public interface SpeechService extends RemoteService{
• public String digaAlgumaCoisaPara(String nome);
• }
 PBJUG
Exemplo
• public interface SpeechServiceAsync{
• public void digaAlgumaCoisaPara(String nome,
A
AsyncCallback
C llb k callback);
llb k)
• }
 PBJUG
Exemplo
• public class SpeechServiceImpl extends RemoteService
implements SpeechService{

• public String digaAlgumaCoisaPara(String nome){

• return “Alguma
Alguma coisa para: ”+
+ nome;
• }

• }
 PBJUG
Configurando o Serviço

• SeuModulo.gwt.xml
– Incluir <servlet
l t path=“url-path”
th “ l th” class=“classname”/>
l “ l ”/

– Propósito de Testes
– Hosted Mode
 PBJUG
Configurando o Serviço

• web.xml
– Declaração normal de um Servlet
<servlet>
<servlet-name>alias</servlet-name>
<servlet-class>nome
l t l completo
l t dda classe</servlet-class>
l / l t l
</servlet>
<servlet-mapping>
<servlet name>alias</servlet name>
<servlet-name>alias</servlet-name>
<url-pattern>url-path</url-pattern>
</servlet-mapping>

– Aplicação Pronta
– Web Mode
 PBJUG
Execução de Chamadas à Serviços

• ServiceAsync instance = (ServiceAsync)

GWT.create(Service.class);
• ServiceDefTarget target = (ServiceDefTarget) instance;
• target.setServiceEntryPoint(GWT.getModuleBaseURL()+“path”);

• Embutir na interface Service

 PBJUG
SpeechService Revisitada
• public interface SpeechService extends RemoteService{
• public static final class Util{
• public static final SpeechServiceAsync
p p y g getInstance(){
(){

• SpeechServiceAsync instance =
•
(SpeechServiceAsync)GWT create(SpeechService class);
(SpeechServiceAsync)GWT.create(SpeechService.class);

• ServiceDefTarget target = (ServiceDefTarget) instance;

• String serviceEntryPoint =
GWT tM d l B
GWT.getModuleBaseURL()+“speech”;
URL()+“ h”
• target.setServiceEntryPoint(serviceEntryPoint);

• return instance;;
• }
• }
•
• public String digaAlgumaCoisaPara(String nome);
• }
 PBJUG
Executação de Chamadas à Serviços

• No cliente agora
SpeechServiceAsync serviço =
SpeechService Util getInstance();
SpeechService.Util.getInstance();

serviço.digaAlgumaCoisaPara(“Marcelo”, new
AsyncCallback(){
public void onSuccess(Object result) {
String resposta = (String) result;
System out println(result); //Só funciona no Hosted Mode
System.out.println(result);
}
public void onFailure(Throwable caught) {
Window.alert(caught.getMessage());
do a e t(caug t get essage());
}
});
 PBJUG
Possibilidades Futuras

• Implementação de novas
funcionalidades
• Release 1.4 está aí...
 PBJUG
Frameworks Existentes baseados em
GWT
• GWTx – Extensão da API emulada
• GWM – Gerenciador de Desktops
• GWings – Componentes Swing em GWT
• GWT-Widgets – Componentes Gráficos
• GWT Server Library – Integração com Spring
• GWT Tk – Componentes Gráficos
GWT-Tk
 PBJUG
Referências e Exemplos

• Página oficial do framework

http://code google com/webtoolkit/
http://code.google.com/webtoolkit/
• Developer Guide
http://code.google.com/webtoolkit/doc
umentation/
• Example Projects
http://code google com/webtoolkit/doc
http://code.google.com/webtoolkit/doc
umentation/examples/
 PBJUG
Dúvidas?

??
 PBJUG
E agora?
?

•Mãos
Mã à obra!
b !