Google Web Toolkit: criando aplicações web usando a poderosa engine baseada na Java Virtual Machine

Apresenta a poderosa ferramenta GWT, que abstrai a linguagem JavaScript usando a linguagem Java, oferendo maior confiabilidade para aplicações que rodam no lado servidor

Transcript

1. Google Web Toolkit: criando aplicações web usando a poderosa engine baseada na Java Virtual Machine Arthur Ronald F D Garcia Instrutor / Consultor Flisol 2013
2. Google Web Tookit Flisol 2013 Arthur Ronald F D Garcia Instrutor / Consultor soluções de Middleware Desenvolvedor Java, Scala, Groovy, Python Palestrante https://speakerdeck.com/ar Stackoverflow user http://www.stackoverflow.com/u/127359
3. Google Web Tookit Flisol 2013 Google Web Toolkit Google Web Toolkit (GWT) é um conjunto de ferramentas de desenvolvimento para construir e otimizar complexas aplicações web. GWT é usado por muitos produtos no Google, incluindo Google AdWords e Orkut. É open source, completamente livre, e usado por milhares de desenvolvedores no mundo. fonte: https://developers.google.com/web-toolkit/
4. Google Web Tookit Flisol 2013 Visão geral ∙ Uso de Java bytecode para produzir código cliente e servidor ∙ Biblioteca nativa de componentes visuais ∙ Código JavaScript otimizado de acordo com o browser – Deferred binding ∙ Suporte JavaScript nativo - JSNI ∙ Suporte de chamada de procedimento remoto (RPC) ∙ Internacionalização i18n ∙ Inicialização sob demanda – Code Splitting ∙ Gerador integrado de código
5. Google Web Tookit Flisol 2013 Por que a Java Virtual Machine ? ∙ Padrão aberto ∙ Compatibilidade ∙ Solidez ∙ Ampla concorrência (IBM, Oracle, Apache)
6. Google Web Tookit Flisol 2013 GWT engine Scala Java Groovy .class ie MD5.cache.html Firefox MD5.cache.html Chrome MD5.cache.html Safari MD5.cache.html Java – JavaScript Compiler <MODULE_NAME>.nocache.js Nota: versões anteriores do GWT geravam arquivos cache.js em vez de cache.html
7. Google Web Tookit Flisol 2013 Compilador Java - JavaScript ∙ Suporte parcial da Java Virtual Machine JavaScript não suporta aplicações concorrentes (Multithreading) JavaScript não suporta operações de I/O JavaScript não suporta acesso a banco de dados ∙ Por causa dessas restrições, a arquitetura do GWT foi desenhada de tal forma que determinados pacotes contivessem somente classes Java que pudessem ser compiladas para JavaScript Nota: https://developers.google.com/web-toolkit/doc/latest/RefJreEmulation para saber quais artefatos Java podem ser compilados para JavaSript
8. Google Web Tookit Flisol 2013 Criando uma aplicação GWT: webAppCreator A partir da linha de comando, digite >> webAppCreator -out App br.com.app.AppEntryPoint App src/br/com/app/AppEntryPoint.gwt.xml src/br/com/app/client/GreetingService.java src/br/com/app/client/GreetingServiceAsync.java src/br/com/app/client/AppEntryPoint.java src/br/com/app/server/GretingServiceImpl.java src/br/com/app/shared/FieldVerifier.java war/WEB-INF/web.xml war/AppEntryPoint.css war/AppEntryPoint.html war/favicon.ico .classpath .project AppEntryPoint.launch README.txt build.xml Nota: para fins de exemplificação, foi gerada uma aplicação cujo nome é App. No entanto, sinta-se livre para escolher o nome que lhe convier
9. Google Web Tookit Flisol 2013 webAppCreator = aplicação GWT + projeto Eclipse IDE >> webAppCreator -out App br.com.app.AppEntryPoint App src/br/com/app/AppEntryPoint.gwt.xml src/br/com/app/client/GreetingService.java src/br/com/app/client/GreetingServiceAsync.java src/br/com/app/client/AppEntryPoint.java src/br/com/app/server/GretingServiceImpl.java src/br/com/app/shared/FieldVerifier.java war/WEB-INF/web.xml war/AppEntryPoint.css war/AppEntryPoint.html war/favicon.ico .classpath .project AppEntryPoint.launch README.txt build.xml Nota: os arquivos .classpath e .project identificam sua aplicação como um projeto reconhecido pelo Eclipse IDE
10. Google Web Tookit Flisol 2013 Módulo GWT App src/br/com/app/AppEntryPoint.gwt.xml … <?xml version="1.0" encoding="UTF-8"?> <module rename-to='<MODULE_NAME>'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.clean.Clean'/> <entry-point class='br.com.app.client.AppEntryPoint'/> <source path='client'/> <source path='shared'/> </module> Substitua <MODULE_NAME> pelo nome que lher convier.
11. Google Web Tookit Flisol 2013 Módulo GWT: isso lembra algo ? <html> <head> <link rel="stylesheet" href="css/style.css"> | -> 1 arquivo <script src="js/jquery.js"></script> | -> 1 arquivo <script src="js/app.js"></script> | -> 1 arquivo </head> … </html> <?xml version="1.0" encoding="UTF-8"?> <module rename-to='<MODULE_NAME>'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.clean.Clean'/> <entry-point class='br.com.app.client.AppEntryPoint'/> <source path='client'/> <source path='shared'/> </module> No entanto, um módulo GWT encapsula as funcionalidades que você necessita usando apenas 1 arquivo, cujo nome é <MODULE_NAME>.nocache.js
12. Google Web Tookit Flisol 2013 Um módulo GWT <?xml version="1.0" encoding="UTF-8"?> <module rename-to='<MODULE_NAME>'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.clean.Clean'/> <entry-point class='br.com.app.client.AppEntryPoint'/> <source path='client'/> <source path='shared'/> </module> Gera apenas 1 arquivo para a sua aplicação <html> <head> ... <script src="<MODULE_NAME>/<MODULE_NAME>.nocache.js"></script> </head> </html> Nota: por padrão, o arquivo gerado pelo módulo GWT é armazenado no diretório cujo nome é o mesmo do módulo
13. Google Web Tookit Flisol 2013 EntryPoint: o lugar onde reside o código da sua aplicação <?xml version="1.0" encoding="UTF-8"?> <module rename-to='<MODULE_NAME>'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.clean.Clean'/> <entry-point class='br.com.app.client.AppEntryPoint'/> <source path='client'/> <source path='shared'/> </module> public class AppEntryPoint implements EntryPoint { public void onModuleLoad() { Window.alert("Aqui, o código da sua aplicação é executado!!!"); } }
14. Google Web Tookit Flisol 2013 User Interface – Abordagem I: HTML <html> <head> <script src="<MODULE_NAME>/<MODULE_NAME>.nocache.js"></script> </head> <body> <h1>Cadastro de eventos</h1> <form> <div class="field-wrapper"> <label for="evento">Evento</label> <input type="text" name="evento" id="evento" /> </div> <div class="field-wrapper"> <label for="edicao">Edição</label> <input type="text" name="edicao" id="edicao" /> </div> <div class="anchor-wrapper"> <a href="#" id="eventoAnchor">Submeter</a> </div> </form> </body> </html>
15. Google Web Tookit Flisol 2013 User Interface – Abordagem I: HTML public class HTMLEntryPoint implements EntryPoint { public void onModuleLoad() { Anchor.wrap(DOM.getElementById("eventoAnchor")).addClickHandler( new ClickHandler() { @Override public void onClick(ClickEvent event) { Window.alert("Formulário submetido"); } }); } }
16. Google Web Tookit Flisol 2013 User Interface – Abordagem II: GWT Widgets public class GWTWidgetEntryPoint implements EntryPoint { public void onModuleLoad() { final FormPanel form = new FormPanel(); final VerticalPanel panel = new VerticalPanel(); form.setWidget(panel); panel.add(new Label("Evento")); final TextBox eventoField = new TextBox(); eventoField.setName("evento"); panel.add(eventoField); … /** * Adicione o objeto form ao elemento da página cujo id é container */ RootPanel.get("container").add(form); } }
17. Google Web Tookit Flisol 2013 User Interface – Abordagem II: GWT Widgets Se você quiser, pode inserir HTML public class GWTWidgetEntryPoint implements EntryPoint { public void onModuleLoad() { final FormPanel form = new FormPanel(); final VerticalPanel panel = new VerticalPanel(); form.setWidget(panel); panel.add(new HTML("<h1>Cadastro de eventos</h1>")); … RootPanel.get("container").add(form); } }
18. Google Web Tookit Flisol 2013 GWT RPC ∙ GWT suporta chamadas de procedimento remota ∙ Claro que usa Ajax mas de forma invisível ∙ Você até esquece que está usando JavaScript
19. Google Web Tookit Flisol 2013 GWT RPC – Crie a interface @RemoteServiceRelativePath("evento") public interface EventoService extends RemoteService { Boolean add(Evento evento); }
20. Google Web Tookit Flisol 2013 GWT RPC – Crie um callback public interface EventoServiceAsync { void add(Evento evento, AsyncCallback<Boolean> callback); }
21. Google Web Tookit Flisol 2013 GWT RPC – Implemente o código public class EventoServiceImpl extends RemoteServiceServlet implements EventoService { public Boolean add(Evento evento) { return true; } }
22. Google Web Tookit Flisol 2013 GWT RPC – Invoque o Service public interface RPCEntryPoint implements EntryPoint { private final EventoServiceAsync service = GWT.create(EventoService.class); public void onModuleLoad() { Evento evento = new Evento(); evento.setEvento("Flisol"); evento.setEdicao("2013"); service.add(evento, new AsyncCallback<Boolean>() { public void onFailure(Throwable caught) { Window.alert("Ops... Algo errado!!!"); } public void onSuccess(Boolean isAdicionado) { if(isAdicionado) { Window.alert("Evento adiconado com sucesso!!!"); } } }); } }
23. Google Web Tookit Flisol 2013 GWT RPC review @RemoteServiceRelativePath("evento") public interface EventoService extends RemoteService { … } public interface EventoServiceAsync { … } public interface EventoServiceImpl extends RemoteServiceServlet implements EventoService { … } public class RPCEntryPoint implements EntryPoint { private final EventoServiceAsync service = GWT.create(EventoService.class); public void onModuleLoad() { … } }
24. Google Web Tookit Flisol 2013 E se eu quiser usar Ajax ? ∙ Abordagem parecida com a usada pelo JavaScript ∙ Uso do método GET, POST ∙ Objeto RequestBuilder é o ponto central para usar Ajax
25. Google Web Tookit Flisol 2013 GWT Ajax public class AjaxEntryPoint implements EntryPoint { public void onModuleLoad() { RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "eventos"); rb.setCallback(new RequestCallback() { public void onResponseReceived (Request req, Response res) { if(200 == res.getStatusCode()) { Window.alert(res.getText()); } else { Window.alert("Error: " + res.getStatusCode()); } } public void onError (Request req, Throwable e) { Window.alert("Error: " + e.getMessage()); } }); } }
26. Google Web Tookit Flisol 2013 GWT Ajax: submetendo a requisição public class AjaxEntryPoint implements EntryPoint { public void onModuleLoad() { RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "eventos"); … try { rb.send(); } catch (RequestException e) { Window.alert("Error: " + e.getMessage()); } } }
27. Google Web Tookit Flisol 2013 Considerações finais ∙ Configure o excelente plugin do GWT para o Eclipse IDE para melhorar consideravelmente a produtividade Para informações sobre a instalação, acesse: https://developers.google.com/web-toolkit/download ∙ Lembre-se que o compilador Java – JavaScript só funcionará se os artefatos Java (pacotes, classes, métodos) forem suportados pelo JavaScript. Caso contrário, o compilador gerará erros informando que não foi possível realizar a conversão ∙ Como definido pela própria home do GWT, este é um conjunto de ferramentas. Aqui, o principal objetivo foi explorar o máximo de informação para que você use com sucesso a ferramenta. Caso queira aprofundar-se ainda mais, não deixe de explorar o conteúdo do site do GWT, acessível a partir da URL https://developers.google.com/web-toolkit
28. Google Web Tookit Flisol 2013 Obrigado! Arthur Ronald F D Garcia arthurseveral@yahoo.com.br