Mc56 gwt

392 visualizações

Publicada em

Curso de GWT

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
392
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mc56 gwt

  1. 1. Mini-curso Gratuito
  2. 2. 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
  3. 3. 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
  4. 4. Cenário. Web de hoje em dia... Introdução Quanto tempo voce fica off-line?
  5. 5. 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
  6. 6. Google Web Toolkit, uma solução para RIA! • Tornando desenvolvimento web mais produtivo. • Construa aplicações web sem “tédio”. Introdução
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Ecosistema Introdução Compilador JRE Emulador JSNI Widgets / Panel RPC / Http i18n JUnit Integration XML Parser API Utilitários webAppCreator junitCreator i18nCreator
  13. 13. 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
  14. 14. Estrutura do GWT Introdução
  15. 15. 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
  16. 16. 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(); ...
  17. 17. 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")); ...
  18. 18. Eventos Tratamento de eventos com Listeners; ... btnEnviar.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Ola GWT"); } }); ... Introdução
  19. 19. 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
  20. 20. 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.
  21. 21. Hosted Mode Introdução Jetty / Web Server Agilidade durante desenvolvimento
  22. 22. Fluxo de trabalho Introdução Desenvolvimento Produção
  23. 23. 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
  24. 24. 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)
  25. 25. Módulo <?xml version="1.0" encoding="UTF-8"?> <module rename-to='GlobalcodeGWT'> <!-- biblioteca core do gwt --> <inherits name='com.google.gwt.user.User' /> <!-- tema / estilo da aplicacao --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Ponto de entrada do aplicativo. --> <entry-point class='br.com.globalcode.gwt.client.GlobalcodeGWT'/> </module> Introdução
  26. 26. 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
  27. 27. 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
  28. 28. Hosted HTML <html> <head> … </head> <body> <!– javascript do projeto --> <script language=‘javascript‘ src=‘projeto.nocache.js‘> </script > <!-- Include a history iframe to enable full GWT history support --> <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
  29. 29. 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
  30. 30. Demo – executando projeto GWT Introdução
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Serviço RPC Introdução
  35. 35. Demo GWT com RPC... Introdução
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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()); …
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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”)); … } … }
  47. 47. 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
  48. 48. 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
  49. 49. 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.
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Perguntas Introdução

×