97
CURSO DE DESENVOLVIMENTO DE APLICAÇÕES WEB UTILIZANDO GOOGLE WEB TOOLKIT - GWT

Introdução GWT

Embed Size (px)

Citation preview

Page 1: Introdução GWT

CURSO DE DESENVOLVIMENTO DE

APLICAÇÕES WEB UTILIZANDO

GOOGLE WEB TOOLKIT - GWT

Page 2: Introdução GWT

JAVA BÁSICO

HISTÓRICO DO JAVA

1991 – início do projeto Green

Requisitos do projeto

Não ficar dependente de plataforma

Poder rodar em pequenos equipamentos

Linguagem oak(carvalho)

Em 1992 - O projeto Green apresenta seu primeiro produto. (Start Seven)

Revolucionar a industria de TV e vídeo oferecendo mais interatividade.

1992 – Crise do Projeto Green

1993 – Explode a WWW (World Wide Web)

Duke – Mascote Java

1995 - Maio - Nascimento oficial do Java.

1996 - Janeiro - Release do JDK 1.0.

1996 - Maio - Realizado o primeiro JavaOne, conferencia máxima da tecnolgia

Java.

Apresentados a tecnologia JavaBeans e Servlets.

1996 - Dezembro - Release do JDK 1.1 Beta.

1997 - Fevereiro - Release do JDK 1.1.

Page 3: Introdução GWT

JAVA BÁSICO

HISTÓRICO DO JAVA

1997 - Abril - Anunciada a tecnologia Enterprise JavaBeans (EJB), além de

incluir a Java. Foundation Classes (JFC) na plataforma Java.

1998 - Março - inicio do projeto JFC/Swing.

1998 - Dezembro - Formalizado o Java Community Process (JCP).

1999 - Fevereiro - Release do Java 2 Plataform.

1999 - Junho - Anuncio da "divisão" da tecnologia Java em três edições (J2SE, J2EE, J2ME).

2000 -Maio - Release da J2SE v. 1.3.

2001 -Abril - Release do J2EE 1.3 beta, contendo as especificações EJB 2.0, JSP 1.2 e

Servlet 2.3.

2002 - Dezembro - Release do J2EE 1.4 Beta.

2004 - Outubro - Release do Java 5.0, chamado de Java Tiger.

2005 - Março - 10° aniversário da tecnologia.

2005 - Junho - JavaOne de número 10.

2006 - JavaOne de número 11.

Page 4: Introdução GWT

JAVA BÁSICO

INTRODUÇÃO A LIGUAGEM JAVA

Características do Java Java é sintática e morfologicamente muito parecido com a linguagem

C++, entretanto, existem diferenças:

Inexistência de aritméticas de ponteiros (ponteiros são apenas referências);

Independência de plataforma;

Arrays são objetos;

Orientação a Objetos;

Multhreading

Strings são objetos;

Gerenciamento automático de alocação e deslocação de memória (Garbage Collection);

Não existe Herança Múltiplas com classes, apenas com interfaces;

Não existem funções, mas apenas métodos de classes;

Bytecode;

Interpretado;

Compilado;

Necessita de ambiente de execução (runtime), ou seja, a JVM (Java Virtual Machine).

Page 5: Introdução GWT

JAVA BÁSICO

TECNOLOGIA JAVA

J2SE – Java 2 Standard Edition (Core/Desktop)

J2EE – Java 2 Entreprise Edition

(Enterprise/Server)

J2ME – Java 2 Micro Edition(Mobile/Wireless)

Page 6: Introdução GWT

JAVA BÁSICO

O QUE É JAVA?

1. Todos os programas Java são compilados e interpretados;

2. O compilador transforma o programa em bytecodes independentes de plataforma;

3. O interpretador testa e executa os bytecodes

4. Cada interpretador é uma implementação da JVM - Java Virtual Machine;

Programa Java

Compilador

Interpretador

Page 7: Introdução GWT

JAVA BÁSICO

A linguagem Java é independente de plataforma.

Page 8: Introdução GWT

JAVA BÁSICO

EXEMPLO SIMPLES JAVA

public class HelloWorldApp{

public static void main (String arg [])

{

System.out.println("Hello World!");

}

}

Compilação:

> javac HelloWorldApp.java

Execução:

> java HelloWorldApp

Page 9: Introdução GWT

JAVA BÁSICO

VISÃO DE PACOTES J2SDK E JRE

Page 10: Introdução GWT

JAVA BÁSICO

JVM – JAVA VIRTUAL MACHINE

A JVM é parte do ambiente de "runtime" Java

Responsável pela interpretação dos bytecodes.

A JVM consiste em um conjunto de instruções,

conjunto de registradores, a pilha (stack), garbage-

collected heap e a área de memória (armazenamento

de métodos).

Funções da JVM:

Segurança de código – Responsável por garantir a não

execução de códigos maliciosos (ex. applets).

Verificar se os bytecodes aderem às especificações da JVM

e se não violam a integridade e segurança da plataforma;

Interpretar o código;

Class loader – carrega arquivos .class para a memória.

Page 11: Introdução GWT

JAVA BÁSICO

COLETOR DE LIXO

A linguagem Java tem alocação dinâmica de memória em tempo de execução.

Durante o ciclo de execução do programa, o Java verifica se as variáveis de memória estão sendo utilizadas, caso não estejam o Java libera automaticamente esta área para o uso.

import java.util.*;

class GarbageExample {

private static Vector vetor;

Runtime rt = Runtime.getRuntime();

public static void main(String args[]) {

vetor = new Vector();

for (int a=0; a < 500; a++){

vetor.addElement(new StringBuffer("teste"));

System.out.println("Memória Livre: " + rt.freeMemory());

}

vetor = null;

System.gc();

System.out.println("Memória Livre: " + rt.freeMemory()); }

}

Page 12: Introdução GWT

JAVA BÁSICO

CONVEÇÕES DE CÓDIGO

Nome da Classe:

O primeiro caracter de todas as palavras que compõem devem iniciar com maiúsculo e os demais caracteres devem ser minúsculos.

Ex. HelloWorld, MeuPrimeiroPrograma, BancoDeDados.

Método, atributos e variáveis:

Primeiro caracter minúsculo; Demais palavras seguem a regra de nomes da classes.

Ex. minhaFunção, minhaVariavelInt.

Constantes:

Todos os caracteres maiúsculos e divisão de palavras utilizando underscore ―_‖.

Ex. MAIUSCULO, DATA_NASCIMENTO.

public class Exercicio1 {

public static void main (String args []) {

valor=10;

System.out.println(valor);

}

}

Page 13: Introdução GWT

JAVA BÁSICO

PALAVRAS RESERVADAS

abstract boolean break byte case catch

goto else default return super this

new import final implements extends interface

protected throw void switch throws native

continue instanceof package static private public

transient volatile strictpf assert try finally

for long short if while do

char class const int double float

Synchronized

Page 14: Introdução GWT

GWT

Page 15: Introdução GWT

GOOGLE WEB TOOLKIT

INTRODUÇÃO

AJAX (Asynchronous Javascript And XML)

AJAX não é uma tecnologia — são realmente

várias tecnologias conhecidas trabalhando juntas.

Apresentação baseada em padrões,

usando XHTML e CSS;

Exposição e interação dinâmica usando

o DOM;

Intercâmbio e manipulação de dados

usando XML e XSLT;

Recuperação assíncrona de dados usando o

objeto XMLHttpRequest;

e JavaScript unindo todas elas em conjunto.

Page 16: Introdução GWT

GOOGLE WEB TOOLKIT

VISÃO GERAL DO PRODUTO

Criar aplicativos para a web um processo tedioso e com alta incidência de erros.

Os desenvolvedores podem passar 90% do tempo trabalhando para contornar peculiaridades do navegador.

A criação, a reutilização e a manutenção de grandes bases de código JavaScript e componentes AJAX pode ser difícil e delicada.

O Google Web Toolkit (GWT) facilita esse processo, permitindo que os desenvolvedores criem rapidamente e mantenham aplicativos front end JavaScript complexos e de alto desempenho na linguagem de programação Java.

Page 17: Introdução GWT

GOOGLE WEB TOOLKIT

COMO FUNCIONA O GOOGLE WEB TOOLKIT

Cria o front end AJAX na linguagem de

programação Java.

O GWT faz a compilação cruzada para o

JavaScript otimizado.

Funciona automaticamente com todos os

principais navegadores.

criar rapidamente como no JavaScript, no mesmo

ciclo "editar - atualizar - exibir―.

Crie com facilidade um widget para uma página

da web.

Page 18: Introdução GWT

GOOGLE WEB TOOLKIT

FLUXO DE TRABALHO DE DESENVOLVIMENTO

Edite o código Java e, depois, exiba as alterações

imediatamente, sem recompilar.

Integre o código AJAX ativo com o depurador

Java

Compile e implemente JavaScript otimizado

entre navegadores

Page 19: Introdução GWT

RECURSOS DO

GWT

Page 20: Introdução GWT

GOOGLE WEB TOOLKIT

RECURSOS

Comunique-se com o servidor através

de RPC muito simples

conjunto ilimitado de protocolos de

transferência (JSON, XML);

De forma semelhante ao tradicional Java RMI

O GWT RPC é também bastante sofisticado.

Ele pode lidar com hierarquias de classe

polimórficas, ciclos gráficos de objetos e você

pode até mesmo transmitir as exceções pela

rede.

Page 21: Introdução GWT

GOOGLE WEB TOOLKIT

RECURSOS

Otimize os downloads de script JavaScript

com base no perfil de usuário

Ligação adiada (Deferred binding) é um recurso do

GWT que gera muitas versões do seu código

compilado.

Cada versão é gerada com base no navegador.

Por exemplo, se você deseja internacionalizar o

aplicativo usando o módulo de internacionalização do

GWT, o compilador gera versões do aplicativo de

acordo com o ambiente do navegador, como "Firefox

em inglês", "Firefox em francês", "Internet Explorer

em inglês", etc.

Page 22: Introdução GWT

GOOGLE WEB TOOLKIT

RECURSOS

Reutilize componentes de interface do

usuário entre vários projetos

Crie Widgets reutilizáveis em conjunto com outros

Widgets.

Deseja reutilizar seu Widget em outro projeto? Basta

criar um pacote para que outros desenvolvedores

possam usá-lo em um arquivo JAR.

Page 23: Introdução GWT

GOOGLE WEB TOOLKIT

RECURSOS

Utilize outras bibliotecas JavaScript e

código JavaScript nativo

Se a biblioteca de classes do GWT não atender às

suas necessidades , você pode misturar JavaScript

criado por você no código fonte Java.

JavaScript Native Interface (JSNI).

Page 24: Introdução GWT

GOOGLE WEB TOOLKIT

RECURSOS

Suporte com facilidade o botão voltar e o

histórico do navegador.

Os aplicativos AJAX não precisam quebrar o botão de

voltar do navegador.

Adicionar facilmente o estado ao histórico do botão

voltar do navegador

Teste seu código com Junit

Amplie ou contribua - o Google Web Toolkit

é um software livre

Page 25: Introdução GWT

PRIMEIROS PASSOS

COM GWT

Page 26: Introdução GWT

INSTALANDO O GWT

1. Se você ainda não tiver o Java JDK intalado,

instale o Java SDK.

2. Se você ainda não tiver o ant instalado, instale o

Apache Ant.

3. Baixe e descompacte o Google Web Toolkit.

O GWT não tem um aplicativo instalador. Todos

os arquivos para rodar e utilizar o GWT estão

localizados nas pastas que foram

descompactadas.

Page 28: Introdução GWT

CONSTRUINDO UM APLICATIVO EXEMPLO

RODANDO EM HOSTED MODE

Navegue até a pasta samples/Mail/

Execute ant hosted.

Page 29: Introdução GWT

CONSTRUINDO UM APLICATIVO EXEMPLO

RODANDO EM WEB MODE

Execute ant build

O ―build‖ Ant chama o compilador GWT para gerar um número de arquivos em JavaScript e HTML do código fonte da aplicação Mail dentro da pasta samples/Mail/war/.

Para ver a aplicação, abra o arquivo samples/Mail/war/Mail.html no seu browser favorito.

Page 30: Introdução GWT

CONSTRUINDO UM APLICATIVO EXEMPLO

EXERCÍCIO 1

O código fonte da aplicação Mail está na pasta samples/Mail/src/.

Tente abrir o arquivo

samples/Mail/src/com/google/gwt/sample/mail/client/Shortcuts.java em

um editor de textos. A linha 54 do arquivo mostra o construtor da tab

―Mail‖. add(images, new Mailboxes(images), images.mailgroup(), "Mail");

Altere o argumento final de "Mail" para "My Mail". add(images, new Mailboxes(images), images.mailgroup(), "My Mail");

Agora salve o arquivo e simplesmente click em ―Refresh‖ na aplicação

em Hosted Mode para ver a alteração realizada:

Page 31: Introdução GWT

CRIANDO UMA APLICAÇÃO (SEM IDE)

EXERCÍCIO

GWT conta com um utilitário de linha de comando

chamado webAppCreator que automaticamente gera

todos os arquivos que você irá precisar para o projeto

em GWT.

webAppCreator -out MyApplication com.mycompany.MyApplication

Page 32: Introdução GWT

CRIANDO UMA APLICAÇÃO (SEM IDE)

EXERCÍCIO

Tente editar o arquivo da nova aplicação criada

MyApplication/src/com/mycompany/client/MyApp

lication.java e MyApplication/war/MyApplicatio

n.html.

Page 33: Introdução GWT

CRIANDO UMA APLICAÇÃO COM ECLIPSE

O Google Plugin for Eclipse contém um wizard para criar aplicações GWT. Após instalar o plugin e reiniciar o Eclipse, siga os passos abaixo para criar e iniciar a aplicação.

Na barra de ferramentas, clique em New Web Application Project button .

Preencha todos os detalhes do projeto: Entre o nome do projeto: "MyApplication".

Entre o pacote "com.mycompany".

Verifique se a opção Use Google Web Toolkit está marcado e que Use default SDK (GWT) está marcada.

(Opcional) Se você estiver utilizando o Google App Engine, marque a opção Use Google App Engine e verifique se a opção Use default SDK (App Engine) está selecionada.

Se vocês não instalar os SDKs quando instalar o Google Plugin for Eclipse, você deverá clicar na opção Configure SDKs... para especificar o diretódio onde o GWT (e o App Engine SDK) estão descompactados.

Clique no botão Finish.

Page 34: Introdução GWT

CRIANDO UMA APLICAÇÃO COM

NETBEANS

O plugIn gwt4nb pode ser baixado no link https://gwt4nb.dev.java.net/.

Você poderá baixar e instalar o plugin diretamente na IDE netBeans utilizando a opção do gerenciador de plugins do NetBeans.

Escolha a opção Tools > Plugins no menu principal e instale o plugin.

Page 35: Introdução GWT

CONFIGURANDO O AMBIENTE

Criando a estrutura de fontes da aplicação GWT

1. Escola Arquivo > Novo Projeto (Ctrl-Shift-N).

2. Selecione Java Web nas Categorias. Em projetos selecione a opção

Aplicação Web. Clique em próximo.

3. No passo 2, Nome e Localização, preencha o campo nome do

projeto com HelloGWT. Deverá ser especificado uma localização

para o projeto. Clique em próximo.

4. No passo Servidor e Configurações, selecione um servidor que

esteja instalado e registrado na sua IDE.

5. Para registrar um servidor na sua IED, selecione a opção

Adicionar para incluir um novo servidor.

6. Especifique a versão do Java que estará utilizando. Clique em

próximo.

Page 36: Introdução GWT

CONFIGURANDO O AMBIENTE

7. No passo Framework, escolha GWT.

8. No campo GWT Installation Folder entre com o caminho onde está instalado o pacote GWT.

9. No campo GWT Module especifique o nome do módulo do projeto que será criado.

10. Clique em Finalizar

Page 37: Introdução GWT

ESTRUTURA DO PROJETO GWT

Arquivo Html de entrada do

aplicativo GWT

Arquivo de Configuração do

projeto GWT

Arquivo Java de entrada do

aplicativo GWT

Page 38: Introdução GWT

RODANDO O NOVO APLICATIVO

Selecione o nome do projeto, clique com o botão o

botão direito do mouse e selecione a opção

Executar.

A aplicação será contruída e iniciará a aplicação

em modo web no seu browser padrão.

Page 39: Introdução GWT

GALERIA DE

WIDGETS

Page 42: Introdução GWT

EXERCÍCIO 2

Desenvolver uma aplicação que permita

visualizar opções de aulas para os dias da

semana.

Segunda-feira permitem aulas de Português,

Matemática, História. Já na terça-feira,

geografia, ciências e inglês. Use sua criatividade

para os demais dias da semana.

Page 44: Introdução GWT

EXERCÍCIO 3

Criar na tela principal da aplicação um botão que

ao ser clicado limpa o painel principal e mostra a

uma nova tela com a aplicação do exercício 2.

Page 47: Introdução GWT

EXERCÍCIO 4

Criar uma nova tela que contenha um campo de

FileUpload que deve ser mostrado apenas quando

selecionado um ToogleButtom.

Criar um novo botão que ao ser clicado apresente

o nome do arquivo selecionado em uma caixa de

alerta (use Window.alert(―mensagem‖)).

Page 50: Introdução GWT

EXERCÍCIO 5

Criar uma nova tela com os componentes de

DatePicker e DateBox. Identificar o dia da

semana que está selecionado e mostra as aulas

disponíveis nesta data.

Mostrar a data selecionada no DatePicker em

formato completo.

Criar hyperlinks que levem para os exercícios

anteriores.

Page 53: Introdução GWT

EXERCÍCIO 6

Criar uma nova tela que permita ao usuário

selecionar uma marca de veículo em uma ListBox

e mostrar em outra lista os veículos da marca

seleciona na primeira lista.

Insira também uma caixa de sugestões que

contenha uma lista de clientes cadastrados.

Page 55: Introdução GWT

EXERCÍCIO 7

Para cada modelo de carro selecionado no

exercício anterior, mostrar uma lista com as

principais peças do veículo, agrupadas.

Page 58: Introdução GWT

EXERCÍCIO 8

Criar uma barra de menu e um stack panel para

organizar a aplicação.

Page 61: Introdução GWT

EXERCÍCIO 9

Criar um nova tela com campos de entrada de

texto simples que aceite apenas a entrada de

números. Utilize o comando ((TextBox)

event.getSource()).cancelKey(); para cancelar a

entrada de teclas que não são números.

Crie um campo de senha e campo de área de

texto.

Crie também dentro desta mesma janela um

campo de texto rico.

Page 63: Introdução GWT

EXERCÍCIO 10

Criar uma tela que com o clique de um botão

mostre uma janela popup simples.

Incluir uma imagem na tela que ao ser clicada

mostre uma janela popup com a imagem dentro.

Page 65: Introdução GWT

EXERCÍCIO 11

Criar uma janela de dialogo usando DialogBox

para mostrar uma imagem qualquer.

Page 67: Introdução GWT

EXERCÍCIO 12

Criar um painel decorado com as estrutura do

painel mostrado abaixo.

Page 71: Introdução GWT

EXERCÍCIO 13

Criar uma tela com FlowPanel, Horizontal Panel

e Vertical Panel.

Page 80: Introdução GWT

REALIZANDO CHAMADAS

REMOTAS DE

PROCEDIMENTOS (RPC)

Page 81: Introdução GWT

GWT RPC

O QUE É GWT RPC?

Troca de objetos java entre cliente e servidor

utilizando o protocolo HTTP.

O lado servidor recebe solicitações do cliente

através de serviços oferecidos.

A implementação de serviços no lado servidor é

feita utilizando a arquitetura java de servlets.

Os serviços GWT RPC não são os mesmo

utilizados pelas arquiteturas SOAP e REST.

Page 82: Introdução GWT

GWT RPC

MECANISMOS DOS COMPONENTES JAVA

Existem 3 elementos que devem estar em mente

na utilização do GWT RPC:

1. O serviço que está rodando no servidor (método que

você irá chamar).

2. Código cliente que irá invocar o serviço.

3. Objeto java que será repassado entre o cliente e o

servidor.

Page 83: Introdução GWT

GWT RPC

MECANISMOS DOS COMPONENTES JAVA

Page 84: Introdução GWT

GWT RPC

MECANISMOS DOS COMPONENTES JAVA

Para definir uma interface RPC deverão ser

implementados três componentes:

1. Definir uma interface para o seu serviço que

estenda de RemoteService para todos os métodos

RPC.

2. Criar uma classe que estenda de

RemoteServiceServlet e implementar a interface

que foi criada acima.

3. Definir uma interface assincrona para seu serviço

que será chamada pelo código cliente.

Page 85: Introdução GWT

GWT RPC

CRIANDO UM SERVIÇO

Código original gerado pelo GWT4NB

Para criar um serviço vamos definir uma interface e implementar a interface.

Page 86: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

DEFININDO A INTERFACE

A interface deve estender de RemoteService 1. No subpacote cliente crie uma interface e de o nome de

CalcularService. Selecione a opção Arquivo > Novo Arquivo.

2. Selecione a opção Interface Java na categoria Java.

3. Preencha o campo Nome da Classe com CalcularService.

4. Selecione o subpacote client para conter esta interface..

5. Clique em finalizar.

Page 87: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

DEFININDO A INTERFACE

No novo arquivo CalcularService.java estenda a interface de RemoteService.

Insira a interface Somar como método desta nova classe.

Inserir a anotação @RemoteServiceRelativePath("CalcularService") que representa o caminho relativo do serviço implementado.

Page 88: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

IMPLEMENTANDO O SERVIÇO

Crie uma nova classe java para conter a implementação do serviço com o nome CalcularServiceImpl.

Esta classe deverá ser criada no pacote server do projeto.

Page 89: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

IMPLEMENTANDO O SERVIÇO

Estenda a nova classe de RemoteServiceServlet.

Implemente a interface CalcularService criada anteriormente.

Herde todos métodos abstratos da interface implementada.

Page 90: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

IMPLEMENTANDO O SERVIÇO

Escreva a implementação do no servidor para o

método somar.

Page 91: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC INCLUA O CÓDIGO SERVIDOR NO MÓDULO GWT

Edite o arquivo WEB-INF/web.xml inserindo o mapeamento do servlet.

O valor <url-pattern> deve conter o caminho definido na anotação do serviço.

Page 92: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

CHAMANDO O SERVIÇO PELO CLIENTE

Deve ser inserido o parâmetro em todos os

métodos do serviço criado.

1. Deve ter o mesmo nome da interface do serviço

com o apendice Async (exemplo

CalcularServiceAsync).

2. Deverá esta localizada no mesmo pacote do

serviço definido.

3. Todos os métodos não tem retorno devem ter o

mesmo nome e deverão incluir como último

parametro um objeto do tipo AssyncCallback.

Page 93: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

CHAMANDO O SERVIÇO PELO CLIENTE

1. Crie a interface CalcularServiceAsync.

2. Inclua todos os métodos do serviço implementado.

Page 94: Introdução GWT

CRIANDO UM SERVIÇO COM GWT RPC

CHAMANDO O SERVIÇO PELO CLIENTE

Criar a classe de retorno AsyncCallback.

Insira o código na classe do cliente onde será utilizado o retorno.

Page 95: Introdução GWT
Page 96: Introdução GWT

EXERCÍCIO FINAL

Implementar uma pequena aplicação que realize

as operações de Cadastro de Clientes (incluir,

excluir, alterar e consultar).