SlideShare a Scribd company logo
1 of 6
Download to read offline
Google web Toolkit


O Google web toolkit (GWT) é um kit de ferramenta de desenvolvimento para
aplicações web feita pela google ela permite que se faça aplicações ricas com
ajax usando apenas java ele permite a comunicação cliente servidor, você
pode desenvolver com ele em qualquer IDE java além de ser open source.
O gwt basicamente transforma o código java em javascript, que rodará em seu
navegador com isso é possível “debugar “linha por linha do seu código.
Para começar a utilizar o gwt basta simplesmente ir ao site
http://code.google.com/intl/pt-BR/webtoolkit/download.html e baixar o seu
SDK , Kit de Desenvolvimento de Software.




Tanto o ecilpse como o Netbeans já possuem plugins para desenvolver no gwt,
no caso do netbeans basta somente baixar o plugin GWT4NB, presente no
menu ferramentas e no item plugin e após sua instalação selecionar o local
aonde se encontra o SDK e no caso do eclipse basta somente instalar o plugin
sem precisar baixar o SDK já que ele faz isso junto com a instalação.
Tão logo se inicie um projeto usando o gwt não importando a IDE existe uma
básica estrutura do gwt como mostra a figura.




       GWT no NetBeans



                                                GWT no Eclipse

Reparem que ambos possuem o arquivo com extenção .gwt.xml este arquivo é
o descritor gwt sua função é comandar o processo de transição java/javascript.
A aplicação gwt é constituída a partir de módulos a sua própria arquitetura é
realizada de forma modular então ao criar novos módulos pode-se herdar tudo
o que foi feito em outros módulos.
Agora vamos fazer um pequeno exemplo utilizando o GWT, para esse exemplo
estarei utilizando o netbeans versão 6.8 após a instalação do plugin crie um
novo projeto java web e em frameworks selecione a opção Google Web ToolKit
e em seguida informe o local aonde o SKD se encontra como mostra na figura
abaixo.
Tão logo iniciado o projeto existe três componentes principais o
exemplo.gwt.xml, já explicado anteriormente, a classe exemploEntryPoint
como o nome dá a ideia é o ponto de entrada da aplicação é a partir dela que
se constrói a aplicação e o html no qual a aplicação roda.




     O descritor gwt chamando a classe Entrypoint para iniciar a aplicação




Html chamando o sua classe java agora javascript


Uma informação importante na estrutura de aplicativos usando o gwt é que as
classes dentro do pacote br.com.client são transformadas em JavaScript,
enquanto dentro de br.com.server o conteúdo permanece em Java rodando
dentro do web-server. Além dessa transformação o GWT também otimiza o
código gerado, removendo método que nunca é usado ou que sempre retorna
o mesmo valor.
Vamos agora criar alguns componentes em gwt com recurso ajax para isso
vamos apenas modificar o arquivo exemploEntryPoint.java.
Reparem a semelhança do gwt com o swing, agora é possível construir
novíssimos conceitos de aplicações ricas com aquele velho conceito básico do
swing do java.
Para esse exemplo criaremos oito componentes básicos quatro botões, um
combobox, um label, uma caixa de dialogo e uma caixa de texto. Com a caixa
de texto será inserido valor no combobox a partir de um botão ou modificará o
texto com o segundo botão, o terceiro botão irá chamar a caixa de dialogo e o
quarto e ultimo botão irá simplesmente mostrar e esconder os componentes
todos esses recursos sem precisar atualizar a tela usando o ajax.
Uma tarefa que tirava noite de vários desing pode agora ser feito de maneira
bastante simples, para não delongar muito esse artigo não demonstrarei o
código aqui, mas no final estarei disponibilizando um link com todo o projeto.

O gwt permite que você use qualquer outro recurso em conjunto com ele,
como html, folha de esilo e até mesmo outros frameworks. No nosso caso
estaremos adicionando uma folha de estilo. Em adicionar arquivo escolha a
opção outro e então escolha folha de estilo em cascata.




Reparem que é possível também modificar o estilo do componente gwt.
Feito as modificações e adicionando a folha de estilo é somente compilar o
projeto uma desvantagem do gwt é o fato dele exigir um alto poder
computacional para compilar os seus códigos e transforma-los para javascript
além do tempo para executar a operação.
Como todos os componentes são classes você pode simplesmente criar uma
classe que “herde” de um componente e modifica-lo se assim o quiser em fim
o céu é o limite.

O gwt é uma ferramenta fantástica nesse exemplo utilizamos o glassfish versão
3 como servidor, mas ele é compatível com qualquer outro servidor java como
o tomcat e o Jboss. Existe hoje várias ferramentas bastante semelhantes com o
gwt servindo inclusive como extenção. Com o crescimento acelerado de sites e
de aplicativos web o grande diferencial é o uso de uma web rica e o uso de
ajax. Utilizar várias janelas ou até mesmo ficar recarregando toda a página
para fazer apenas uma pequena modificação pode se tornar algo meio “chato”
para um usuário final e com o gwt você pode ter inclusive sistemas em apenas
uma janela do seu navegador bem semelhante ao um aplicativo desktop de
uma maneira extremamente fácil.




Links:
http://code.google.com/intl/pt-BR/webtoolkit/

http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink

O projeto:

http://softwarelivre.org/otagonsan/codigofonte/gwt.zip

More Related Content

What's hot

What's hot (20)

Grails: O Java em Alta Produtividade
Grails: O Java em Alta ProdutividadeGrails: O Java em Alta Produtividade
Grails: O Java em Alta Produtividade
 
Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Android Studio: Primeiros Passos
Android Studio: Primeiros PassosAndroid Studio: Primeiros Passos
Android Studio: Primeiros Passos
 
Gradle
GradleGradle
Gradle
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Conhecendo o NuGet e utilizando com ASP.NET MVC
Conhecendo o NuGet e utilizando com ASP.NET MVCConhecendo o NuGet e utilizando com ASP.NET MVC
Conhecendo o NuGet e utilizando com ASP.NET MVC
 
Apresentação maven
Apresentação mavenApresentação maven
Apresentação maven
 
Rapida apresentacao sobre o Grails
Rapida apresentacao sobre o GrailsRapida apresentacao sobre o Grails
Rapida apresentacao sobre o Grails
 
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
 
Grails
GrailsGrails
Grails
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Vuejs
VuejsVuejs
Vuejs
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Carrefour E-commerce - Multicloud Brasil Day 2017
Carrefour E-commerce - Multicloud Brasil Day 2017Carrefour E-commerce - Multicloud Brasil Day 2017
Carrefour E-commerce - Multicloud Brasil Day 2017
 
Introdução Vue JS
Introdução Vue JSIntrodução Vue JS
Introdução Vue JS
 
Vagrant uma ferramenta realmente útil e versátil
Vagrant   uma ferramenta realmente útil e versátilVagrant   uma ferramenta realmente útil e versátil
Vagrant uma ferramenta realmente útil e versátil
 
Tekton: Pipelines para o Mundo Moderno
Tekton: Pipelines para o Mundo ModernoTekton: Pipelines para o Mundo Moderno
Tekton: Pipelines para o Mundo Moderno
 
Automação de build para frontend
Automação de build para frontendAutomação de build para frontend
Automação de build para frontend
 
LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Life...
LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Life...LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Life...
LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Life...
 

Viewers also liked

Viewers also liked (9)

Mês do java 2011 no javaBahia
Mês do java 2011 no javaBahiaMês do java 2011 no javaBahia
Mês do java 2011 no javaBahia
 
Javaonebrasil2010
Javaonebrasil2010Javaonebrasil2010
Javaonebrasil2010
 
Java magazine july/august 2012
Java magazine july/august 2012Java magazine july/august 2012
Java magazine july/august 2012
 
Nos Batidores do FLISOL2010 Salvador com JEE6
Nos Batidores do FLISOL2010 Salvador com JEE6Nos Batidores do FLISOL2010 Salvador com JEE6
Nos Batidores do FLISOL2010 Salvador com JEE6
 
Movendo o java para Frente- Parte 1
Movendo o java para Frente- Parte 1Movendo o java para Frente- Parte 1
Movendo o java para Frente- Parte 1
 
Porque java
Porque javaPorque java
Porque java
 
Testes de Software parte 2
Testes de Software parte 2Testes de Software parte 2
Testes de Software parte 2
 
GWT revista espirito
GWT revista espiritoGWT revista espirito
GWT revista espirito
 
Movendo o java para Frente- projeto Coin
Movendo o java para Frente- projeto CoinMovendo o java para Frente- projeto Coin
Movendo o java para Frente- projeto Coin
 

Similar to Gwt

435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Data Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI AndroidData Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI Android
Vinícius Thiengo
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
Renato Groff
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
Teles Maciel
 

Similar to Gwt (20)

Desenvolvendo aplicações web com GWT
Desenvolvendo aplicações web com GWTDesenvolvendo aplicações web com GWT
Desenvolvendo aplicações web com GWT
 
Gwt parte 01
Gwt   parte 01Gwt   parte 01
Gwt parte 01
 
Pyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para WebPyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para Web
 
GWT - RIA baseada em AJAX
GWT - RIA baseada em AJAXGWT - RIA baseada em AJAX
GWT - RIA baseada em AJAX
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
gae
gaegae
gae
 
Vue.js - Framwork Progressivo
Vue.js - Framwork ProgressivoVue.js - Framwork Progressivo
Vue.js - Framwork Progressivo
 
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
 
Data Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI AndroidData Binding Para Vinculo de Dados na UI Android
Data Binding Para Vinculo de Dados na UI Android
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
 
Introdução ao VUE JS
Introdução ao VUE JSIntrodução ao VUE JS
Introdução ao VUE JS
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET (Agosto/2015)
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
 
Angular 2
Angular 2Angular 2
Angular 2
 
Gwt-Guice_TDC2009
Gwt-Guice_TDC2009Gwt-Guice_TDC2009
Gwt-Guice_TDC2009
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Mvc model view controller - java para desenvolvimento web
Mvc   model view controller - java para desenvolvimento webMvc   model view controller - java para desenvolvimento web
Mvc model view controller - java para desenvolvimento web
 
Zk Framework
Zk FrameworkZk Framework
Zk Framework
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 

More from Otávio Santana

More from Otávio Santana (20)

NoSQL design pitfalls with Java
NoSQL design pitfalls with JavaNoSQL design pitfalls with Java
NoSQL design pitfalls with Java
 
Modern Cloud-Native Jakarta EE Frameworks: tips, challenges, and trends.
Modern Cloud-Native Jakarta EE Frameworks: tips, challenges, and trends.Modern Cloud-Native Jakarta EE Frameworks: tips, challenges, and trends.
Modern Cloud-Native Jakarta EE Frameworks: tips, challenges, and trends.
 
Architecting Cloud Computing Solutions with Java [1.1]
Architecting Cloud Computing Solutions with Java [1.1]Architecting Cloud Computing Solutions with Java [1.1]
Architecting Cloud Computing Solutions with Java [1.1]
 
Arquitetando soluções de computação em nuvem com Java
Arquitetando soluções de computação em nuvem com JavaArquitetando soluções de computação em nuvem com Java
Arquitetando soluções de computação em nuvem com Java
 
Build, run, and scale your Java applications end to end
Build, run, and scale your Java applications end to endBuild, run, and scale your Java applications end to end
Build, run, and scale your Java applications end to end
 
Jakarta NoSQL: Meet the first Jakarta EE specification in the Cloud
Jakarta NoSQL: Meet the first Jakarta EE specification in the CloudJakarta NoSQL: Meet the first Jakarta EE specification in the Cloud
Jakarta NoSQL: Meet the first Jakarta EE specification in the Cloud
 
ORMs: Heroes or Villains Inside the Architecture?
ORMs: Heroes or Villains Inside the Architecture?ORMs: Heroes or Villains Inside the Architecture?
ORMs: Heroes or Villains Inside the Architecture?
 
Jakarta EE Meets NoSQL at the Cloud Age
Jakarta EE Meets NoSQL at the Cloud AgeJakarta EE Meets NoSQL at the Cloud Age
Jakarta EE Meets NoSQL at the Cloud Age
 
Boost your APIs with GraphQL 1.0
Boost your APIs with GraphQL 1.0Boost your APIs with GraphQL 1.0
Boost your APIs with GraphQL 1.0
 
Jakarta EE Meets NoSQL in the Cloud Age [DEV6109]
Jakarta EE Meets NoSQL in the Cloud Age [DEV6109]Jakarta EE Meets NoSQL in the Cloud Age [DEV6109]
Jakarta EE Meets NoSQL in the Cloud Age [DEV6109]
 
Let’s Make Graph Databases Fun Again with Java [DEV6043]
Let’s Make Graph Databases Fun Again with Java [DEV6043]Let’s Make Graph Databases Fun Again with Java [DEV6043]
Let’s Make Graph Databases Fun Again with Java [DEV6043]
 
Eclipse JNoSQL: One API to Many NoSQL Databases - BYOL [HOL5998]
Eclipse JNoSQL: One API to Many NoSQL Databases - BYOL [HOL5998]Eclipse JNoSQL: One API to Many NoSQL Databases - BYOL [HOL5998]
Eclipse JNoSQL: One API to Many NoSQL Databases - BYOL [HOL5998]
 
The new generation of data persistence with graph
The new generation of data persistence with graphThe new generation of data persistence with graph
The new generation of data persistence with graph
 
Eclipse JNoSQL updates from JCP September 11
Eclipse JNoSQL updates from JCP September 11Eclipse JNoSQL updates from JCP September 11
Eclipse JNoSQL updates from JCP September 11
 
Stateless Microservice Security via JWT and MicroProfile - Guatemala
Stateless Microservice Security via JWT and MicroProfile - GuatemalaStateless Microservice Security via JWT and MicroProfile - Guatemala
Stateless Microservice Security via JWT and MicroProfile - Guatemala
 
Stateless Microservice Security via JWT and MicroProfile - Mexico
Stateless Microservice Security via JWT and MicroProfile - MexicoStateless Microservice Security via JWT and MicroProfile - Mexico
Stateless Microservice Security via JWT and MicroProfile - Mexico
 
Eclipse JNoSQL: The Definitive Solution for Java and NoSQL Database
Eclipse JNoSQL: The Definitive Solution for Java and NoSQL DatabaseEclipse JNoSQL: The Definitive Solution for Java and NoSQL Database
Eclipse JNoSQL: The Definitive Solution for Java and NoSQL Database
 
Polyglot persistence
Polyglot persistencePolyglot persistence
Polyglot persistence
 
Management 3.0 and open source
Management 3.0 and open sourceManagement 3.0 and open source
Management 3.0 and open source
 
Building a Recommendation Engine with Java EE
Building a Recommendation Engine with Java EEBuilding a Recommendation Engine with Java EE
Building a Recommendation Engine with Java EE
 

Gwt

  • 1. Google web Toolkit O Google web toolkit (GWT) é um kit de ferramenta de desenvolvimento para aplicações web feita pela google ela permite que se faça aplicações ricas com ajax usando apenas java ele permite a comunicação cliente servidor, você pode desenvolver com ele em qualquer IDE java além de ser open source. O gwt basicamente transforma o código java em javascript, que rodará em seu navegador com isso é possível “debugar “linha por linha do seu código. Para começar a utilizar o gwt basta simplesmente ir ao site http://code.google.com/intl/pt-BR/webtoolkit/download.html e baixar o seu SDK , Kit de Desenvolvimento de Software. Tanto o ecilpse como o Netbeans já possuem plugins para desenvolver no gwt, no caso do netbeans basta somente baixar o plugin GWT4NB, presente no menu ferramentas e no item plugin e após sua instalação selecionar o local aonde se encontra o SDK e no caso do eclipse basta somente instalar o plugin sem precisar baixar o SDK já que ele faz isso junto com a instalação.
  • 2. Tão logo se inicie um projeto usando o gwt não importando a IDE existe uma básica estrutura do gwt como mostra a figura. GWT no NetBeans GWT no Eclipse Reparem que ambos possuem o arquivo com extenção .gwt.xml este arquivo é o descritor gwt sua função é comandar o processo de transição java/javascript. A aplicação gwt é constituída a partir de módulos a sua própria arquitetura é realizada de forma modular então ao criar novos módulos pode-se herdar tudo o que foi feito em outros módulos. Agora vamos fazer um pequeno exemplo utilizando o GWT, para esse exemplo estarei utilizando o netbeans versão 6.8 após a instalação do plugin crie um novo projeto java web e em frameworks selecione a opção Google Web ToolKit e em seguida informe o local aonde o SKD se encontra como mostra na figura abaixo.
  • 3. Tão logo iniciado o projeto existe três componentes principais o exemplo.gwt.xml, já explicado anteriormente, a classe exemploEntryPoint como o nome dá a ideia é o ponto de entrada da aplicação é a partir dela que se constrói a aplicação e o html no qual a aplicação roda. O descritor gwt chamando a classe Entrypoint para iniciar a aplicação Html chamando o sua classe java agora javascript Uma informação importante na estrutura de aplicativos usando o gwt é que as classes dentro do pacote br.com.client são transformadas em JavaScript, enquanto dentro de br.com.server o conteúdo permanece em Java rodando dentro do web-server. Além dessa transformação o GWT também otimiza o código gerado, removendo método que nunca é usado ou que sempre retorna o mesmo valor. Vamos agora criar alguns componentes em gwt com recurso ajax para isso vamos apenas modificar o arquivo exemploEntryPoint.java. Reparem a semelhança do gwt com o swing, agora é possível construir novíssimos conceitos de aplicações ricas com aquele velho conceito básico do swing do java. Para esse exemplo criaremos oito componentes básicos quatro botões, um combobox, um label, uma caixa de dialogo e uma caixa de texto. Com a caixa de texto será inserido valor no combobox a partir de um botão ou modificará o texto com o segundo botão, o terceiro botão irá chamar a caixa de dialogo e o quarto e ultimo botão irá simplesmente mostrar e esconder os componentes todos esses recursos sem precisar atualizar a tela usando o ajax.
  • 4. Uma tarefa que tirava noite de vários desing pode agora ser feito de maneira bastante simples, para não delongar muito esse artigo não demonstrarei o código aqui, mas no final estarei disponibilizando um link com todo o projeto. O gwt permite que você use qualquer outro recurso em conjunto com ele, como html, folha de esilo e até mesmo outros frameworks. No nosso caso estaremos adicionando uma folha de estilo. Em adicionar arquivo escolha a opção outro e então escolha folha de estilo em cascata. Reparem que é possível também modificar o estilo do componente gwt.
  • 5. Feito as modificações e adicionando a folha de estilo é somente compilar o projeto uma desvantagem do gwt é o fato dele exigir um alto poder computacional para compilar os seus códigos e transforma-los para javascript além do tempo para executar a operação.
  • 6. Como todos os componentes são classes você pode simplesmente criar uma classe que “herde” de um componente e modifica-lo se assim o quiser em fim o céu é o limite. O gwt é uma ferramenta fantástica nesse exemplo utilizamos o glassfish versão 3 como servidor, mas ele é compatível com qualquer outro servidor java como o tomcat e o Jboss. Existe hoje várias ferramentas bastante semelhantes com o gwt servindo inclusive como extenção. Com o crescimento acelerado de sites e de aplicativos web o grande diferencial é o uso de uma web rica e o uso de ajax. Utilizar várias janelas ou até mesmo ficar recarregando toda a página para fazer apenas uma pequena modificação pode se tornar algo meio “chato” para um usuário final e com o gwt você pode ter inclusive sistemas em apenas uma janela do seu navegador bem semelhante ao um aplicativo desktop de uma maneira extremamente fácil. Links: http://code.google.com/intl/pt-BR/webtoolkit/ http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink O projeto: http://softwarelivre.org/otagonsan/codigofonte/gwt.zip