JUG Ancona Italy. Google Web Toolkit. Giovanni Baleani Programmatore Java. Filippetti S.r.l.

Transcript

1 JUG Ancona Italy Google Web Toolkit Giovanni Baleani Programmatore Java Filippetti S.r.l.

2 AJAX e GWT - AJAX: Tecnologia emergente, tra le prime applicazione ajax ci sono proprio gmail e google calendar. - GWT: qualcosa di più che un framework ajax, introduce un concetto nuovo...

3 Compilatore Java to Javascript - Lo sviluppatore AJAX utilizza il linguaggio Java per implementare la Web GUI - Il compilatore pensa alla generazione del codice javascript necessario, ottimizzandolo e rendendolo compatibile ai vari browser

4 Componenti del framework GWT - Un compilatore - Un browser chiamato hosted mode browser - Una serie di librerie java (.jar) - Emulazione JDK - Widgets HTML / AJAX - Sistema RPC (Servizi di backend AJAX) - Unit Testing

5 Crescita del progetto: versioni - Versione 1.0 ( Maggio 25, 2006) - Versione 1.1 ( Agosto 23, 2006) - Inclusione delle risorse automatica - Internazionalizzazione - Versione 1.2 ( Novembre 15, 2006) - Pieno supporto per OSX - Velocizzata la modalità hosted - Possibilità di usare i widgets nei nodi di un albero

6 Finalmente Open Source!! - Versione 1.3 (1.3.1 (RC) - Dicembre 12, 2006) Questa è la prima versione completamente OpenSource - Versione 1.3 ( Gennaio 18, 2007) - Versione 1.4 ( Marzo 17, 2008) - Per usare un modulo in una pagina html basta includere un solo javascript - ImageBundle: combina molte immagini in una singola, per eseguire un solo download - RPC più modulare

7 - Versione 1.5 ( Ottobre 17, 2008) - Supporto alla sintassi Java 5 - Supporto al contextmenu (tasto destro) - Migliorate le DOM api - API per le Animazioni - Temi di default

8 Installazione - Download da webtoolkit/ - Scompattare il file in una cartella - Fatto!!!

9 Primo Esempio con Eclipse Ammesso di aver installato gwt in /opt/gwtmac Lanciamo i seguenti comandi: /opt/gwt-mac-1.5.3/projectcreator -eclipse JUG_GWT_1 -out JUG_GWT_1 /opt/gwt-mac-1.5.3/applicationcreator -eclipse JUG_GWT_1 -out JUG_GWT_1 it.jugancona.gwt.client.app1 - Importiamo il progetto da Eclipse - Lanciamo l hosted browser attraverso il file.launch

10 Eclipse e Web-Tools Se volessimo usare i web tools di eclipse? 1. Creare una variabile in eclipse GWT_HOME

11 Eclipse e Web-Tools 2. Creare un progetto Dynamic Web ed utilizzare www al posto di WebContent

12 Eclipse e Web-Tools 3. Lanciare applicationcreator -eclipse [nomeprogetto] da dentro la cartella del progetto di eclipse precedentemente creato 4. Aggiornare il progetto da eclipse 5. Aggiungere GWT_HOME/gwt-user.jar al classpath del progetto

13 Cosa si può fare con GWT? La versione 1.5 mette a disposizione un ottima vetrina dei widget di gwt GWT_HOME/samples/Showcase/www/ com.google.gwt.sample.showcase.showcase/ Showcase.html

14 GMail

15 Google Calendar

16 Google Docs

17 Punti di debolezza - Distinzione tra codice java client side e codice java server side (non tutta la jdk è emulata) - Difficile (ma non impossibile) da integrare in progetti fatti con altri framework ajax - Meno smart di un semplice javascript che non richiede compilazione: poco adatto per abbellire siti html con comportamenti ed effetti javascript.

18 Punti di forza - Refactoring come in java - Unit Testing - Performances (ottimizzabili ad ogni rilascio di nuove versioni del compilatore) - Debug come in java - Open Source - Riesce ad integrare facilmente librerie esistenti (JSNI)

19 Punti di forza - Modulare - Possibilità di implementare nuovi widget ajax e di redistribuirli facilmente attraverso un.jar - Si possono includere moduli GWT che risiedono su domini diversi rispetto alla pagina html di inclusione - Pieno utilizzo dei CSS

20 Fino a che punto ottimizza? Esempio di ImageBundle package it.jugancona.gwt.client.images; import com.google.gwt.user.client.ui.abstractimageprototype; import com.google.gwt.user.client.ui.treeimages; public interface MyTreeImages extends TreeImages { public AbstractImagePrototype public AbstractImagePrototype public AbstractImagePrototype treeleaf();

21 ImageBundle Per disegnare questo: Il compilatore genera questo:

22 ImageBundle Non più 3 get per ognuna delle icone dell albero Ma... 1 get per tutte le icone dell albero E questo a volte risulta più veloce, specie con tante immagini di piccole dimensioni.

23 Secondo Esempio: Utilizzo di una Remote Procedure Call Illustriamo come implementare una semplice chiamata ajax ad un servizio lato server.

24 Remote Procedure Call L iterfaccia principale package it.jugancona.gwt.client; import com.google.gwt.core.client.gwt; import com.google.gwt.user.client.rpc.remoteservice; import public interface TestService extends RemoteService { String faiqualcosa(string param); }

25 Remote Procedure Call L iterfaccia Async package it.jugancona.gwt.client; import com.google.gwt.user.client.rpc.asynccallback; public interface TestServiceAsync { void faiqualcosa(string param, AsyncCallback<String> callback); }

26 Remote Procedure Call L implementazione package it.jugancona.gwt.server; import it.jugancona.gwt.client.testservice; import com.google.gwt.user.server.rpc.remoteserviceservlet; public class TestServiceImpl extends RemoteServiceServlet implements TestService { private static final long serialversionuid = 1L; public String faiqualcosa(string param) { return "Mi hai passato '"+ param + "' come parametro."; } }

27 Remote Procedure Call Il client final TestServiceAsync service = GWT.create(TestService.class); Button b = new Button("Prova RCP"); b.addclicklistener(new ClickListener() { public void onclick(widget sender) { service.faiqualcosa("parametro", new AsyncCallback<String>() { public void onsuccess(string result) { Window.alert(result); } public void onfailure(throwable caught) { Window.alert(caught.getMessage()); } }); } });

28 Remote Procedure Call Configurazione per il testing <?xml version="1.0" encoding="utf-8"?> <module> <inherits name="com.google.gwt.user.user"/> <entry-point class="it.jugancona.gwt.client.example1"/> <inherits name="com.google.gwt.user.theme.standard.standard"/> <servlet class="it.jugancona.gwt.server.testserviceimpl" path="/testservice"/> </module>

29 Funziona!

30 Struttura finale del progetto

31 Q Cosa bolle in pentola? 1.6 Roadmap - Deploy come war semplificato - Una architettura più configurabile che permetta di usare altri servlet containers oltre che il Tomcat con l Hosted Mode browser - Event handlers Uniformati - Altri widgets (DatePicker, LazyPanel) presi dall incubator - Miglirare le performance delle Stringhe - Compilazione più veloce

32 ?