by Davide Cerbo e Stefano Linguerri La programmazione web sta facendo passi da gigante e oggi l’utente si aspetta che l’esperienza di utilizzo si avvicini sempre di più a quella a cui è abituato nei classici applicativi desktop. Il mondo degli sviluppatori ha risposto inventanto una nuova sigla: RIA, cioè Rich Internet Application. Google non è stata a guardare e ha fornito la sua risposta a questa esigenza donando alla community Google Web Toolkit. Questo nuovo framework permette di sviluppare in Java tutta l’interfaccia utente per poi ottenere un codice javascript che funzionerà su qualsiasi browser web senza l’installazione di plugin aggiuntivi. In questa presentazione vedremo: * perchè sviluppare applicazioni RIA * perchè usare GWT * come GWT utilizza AJAX per comunicare con il server * le ottimizzazione che avremo utilizzando GWT * come uscire dal browser con Google Gear e Mozilla Prism * e non solo…

1. YA GWT O GOOGLE WEB TOOLKIT

2. YA GWT O GOOGLE WEB TOOLKIT

3. RIA? RICH INTERNET APPLICATION UNA NUOVA USER EXPERIENCE!

5. mantenere molto codice Javascript

6. gestire il ciclo di vita del software

7. utilizzare correttamente AJAX

9. gestione corretta della history del browser

10. localizzazione senza refresh della pagina

11. offuscamento del codice

12. riduzione del codice

13. image bundle in poche parole OTTIMIZZAZIONE

14. GWT = JAVA TO JAVASCRIPT Perchè Java? Una sola risposta: TOOL

15. GWT contro tutti VS.

16. Hello JUG! applicationCreator it.pronetics.gwt. client .HelloJUGApp

17. Moduli *.gwt.xml In GWT è possibile definire dei moduli . Ogni modulo è configurato in un file con estensione: gwt.xml < module > < inherits name =&quot;com.google.gwt.user.User&quot;/> < entry-point class =&quot;com.example.foo.MyModule&quot;/> </ module > Qui definiamo l'entry-point MyModule che sarà il &quot;main&quot; del nostro applicativo

18. Tags *.gwt.xml <inherits name=&quot;logical-module-name&quot; /> : Per importare altri moduli <entry-point class=&quot;classname&quot; /> : La classe entry point dell'applicazione <source path=&quot;path&quot; //> : Definisce in quale package riesodo i sorgenti della parte client, per default il package è client <public path=&quot;path&quot;/> : Il percorso dove risiedono le componenti statiche e componenti di terze parti (javascript, html, immagini, etc, etc). <servlet path=&quot;url-path&quot; class=&quot;classname&quot;/> : Definisce il componente lato server per le chiamate RPC. <script src=&quot;js-url&quot;/>,<stylesheet src=&quot;css-url&quot;/> : Per includere javascript e css <extend-property name=&quot;client-property-name&quot; values=&quot;comma-separated-values&quot;/> : Per aggiungere delle proprietà

20. Hanno in comune l'estensione JAR

23. it/pronetics/module/client/.../*.java

26. RootPanel rappresenta, nella pagina, il contenitore di più alto livello (body html o un elemento div da noi definito). Per aggiungere elementi a RootPanel è sufficente chiamare: RootPanel.get().add(myPanel);

27. Vi ricordate Swing?

28. Hello JUG! ./HelloJUG-shell

29. Ecco il codice! public void onModuleLoad() { Image img = new Image( &quot;http://code.google.com/webtoolkit/logo-185x175.png&quot; ); Button button = new Button( &quot;Click me&quot; ); ... VerticalPanel vPanel = new VerticalPanel(); ... vPanel.add(button); // Add image and button to the RootPanel RootPanel.get().add(vPanel); // Create the dialog box final DialogBox dialogBox = new DialogBox(); dialogBox.setText( &quot;Welcome to GWT!&quot; ); dialogBox.setAnimationEnabled(true); Button closeButton = new Button( &quot;close&quot; ); VerticalPanel dialogVPanel = new VerticalPanel(); ... closeButton.addClickListener( new ClickListener() { public void onClick(Widget sender) { dialogBox.hide(); } }); dialogBox.setWidget(dialogVPanel); button.addClickListener( new ClickListener() { public void onClick(Widget sender) { dialogBox.center(); dialogBox.show(); } }); } }

30. Architettura classica

31. Remote Procedure Call Una Remote Procedure Call è una funzione implementata lato server invocata dal client. GWT RPC NON è la stessa tecnologia su cui sono basati i web services SOAP o REST .

32. RPC gwt.xml Nel nostro file gwt.xml dovremmo configurare la classe che implementa il servizio lato server. Dobbiamo mappare inoltre anche la path alla quale tale implementazione risponderà ... <servlet path=&quot; /countVisitors &quot; class=&quot; it.jk.server.VisitorsCountServiceImpl &quot;/> ...

34. L'interfaccia MyServiceAsync

35. L'implementazione lato server MyServiceImpl

36. RPC interfaccie package it.jk.client; import com.google.gwt.user.client.rpc.RemoteService; import com.google.gwt.user.client.rpc.RemoteServiceRelativePath; @RemoteServiceRelativePath(&quot;countVisitors&quot;) public interface VisitorsCountService extends RemoteService { public String getVisitors (String name); } package it.jk.client; import com.google.gwt.user.client.rpc.RemoteService; import com.google.gwt.user.client.rpc.RemoteServiceRelativePath; import com.google.gwt.user.client.rpc.AsyncCallback; public interface VisitorsCountServiceAsync { void getVisitors (String name, AsyncCallback async); }

37. RPC Server package it.jk.server; import com.google.gwt.user.client.rpc.RemoteServiceRelativePath; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import it.jk.client.VisitorsCountService; @RemoteServiceRelativePath(&quot;countVisitors&quot;) public class VisitorsCountServiceImpl extends RemoteServiceServlet implements VisitorsCountService { public String getVisitors (String name) { VISITORS++; return &quot;Ciao &quot; + name + &quot; è il click numero &quot; + VISITORS; } private static int VISITORS = 0; }

38. RPC Client private void getVisitorInfo(String userName) { // Iniziallizza il proxy per il servizio if (visitorCountService == null) { visitorCountService = GWT.create(VisitorsCountService.class) ; } // Prepara l'ogetto per la callback AsyncCallback <String> callback = new AsyncCallback <String>() { public void onFailure(Throwable caught) { // TODO: Gestione errore } public void onSuccess(String result) { salutoLabel.setText(result); } }; // Chiama il metodo per sapere quante visite ci sono state visitorCountService.getVisitors(userName, callback); }

39. Screenshot esempio RPC

41. Generazione automatica file WAR

42. Gestione dipendenze

43. Scarica in automatico GWT da un repository di Maven

44. Flickr Mash-up Miliardi di informazioni sparse per la rete Fare un applicativo Mash-up vuol dire sviluppare un software capace di aggregarle in un solo punto

45. Ringraziamo le API... ...e vediamo quelle che usa Flickr http://www.flickr.com/services/api/ REST + JSON

46. Prima prova di contatto... String url = &quot; http://www.flickr.com/services/rest/?format=json& method =flickr.interestingness.getList& api_key =a1234567a1ce1bd1aba1234 aaec123e1& user_id =1234567@N01 &quot;; RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, apiUrl); Request req = builder.sendRequest(null, new JsonRequestCallBack()); public class JsonRequestCallBack implements RequestCallback { public void onError(Request request, Throwable exception) { //gestisco richiesta in errore } public void onResponseReceived(Request req, Response response) { //gestisco richiesta avvenuta con successo } }

47. ...ma non funziona AJAX non permette richieste CROSS-SITE Questo a causa del principio di sicurezza SOP (same origin policy) Abbiamo 3 soluzioni: 1) configurare un alias dell'host remoto in modo da poterlo chiamare come se fosse localhost 2) Creare un componente server-side che faccia da proxy 3) Imbrogliare : l'unica risorsa che possiamo richiedere esternamente è Javascript...uhm...interessante

49. myCallbackFunction ({&quot;photos&quot;: {&quot;page&quot;:1, &quot;pages&quot;:5, &quot;perpage&quot;:100, &quot;total&quot;:500, ...) myCallbackFunction sarà il nome di una funzione Javascript a cui sarà passato l'oggetto JSON ritornato da Flickr L'url è diventato: String url = &quot; http://.../rest/?format=json& method =...& api_key =a...1& user_id =1234567@N01& jsoncallback = myCallbackFunction &quot;;

51. GWT rinomina i metodi per ridurre le dimensioni del js Soluzione Con JSNI definiamo codice Javascript in una una classe public native static void getJson(String callback , String url, MyHandler h ) /*-{ var script = document.createElement(&quot;script&quot;); script.setAttribute(&quot;src&quot;, url+ callback ); script.setAttribute(&quot;type&quot;, &quot;text/javascript&quot;); window[callback] = function(jsonObj){ h .@ it.pronetics.MyHandler::handle (Lcom/google/gwt/core/client/JavaScriptObject;)( obj ); window[callback + &quot;done&quot;] = true; } document.body.appendChild(script); }-*/;

52. Ancora J ava S cript N ative I nterface package it.pronetics; ... public class MyHandler { public void handle(JavaScriptObject javaScriptObject) { //creiamo l'oggetto JSON JSONObject object = new JSONObject(javaScriptObject); // isObject() e isArray() ritornano null in caso di errore, // il valore recuperato in caso di successo JSONArray photos = object.get( &quot;photos&quot; ).isObject().get( &quot;photo&quot; ).isArray(); String thumbnail = buildPhotoUrl(photoJson, &quot;s&quot;); .... Image image = new Image(thumbnail); gallery.setWidget(row, column, image); } ... bla bla bla ... }

53. Finalmente...

54. Il mio widget public class ImageSlide extends Composite { //estendere la classe Composite come consigliato da GWT public ImageSlide(String thumbnail, String preview, final String link) { VerticalPanel mainPanel = new VerticalPanel(); HorizontalPanel details = new HorizontalPanel(); Image thumbnailImage = new Image(thumbnail); mainPanel.add(thumbnailImage); mainPanel.add(details); mainPanel.setBorderWidth(1); Button show = new Button(&quot;Show&quot;); Button open = new Button(&quot;Open&quot;); details.add(show); details.add(open); final PopupPanel popup = new PopupPanel(); Image previewImage = new Image(preview); VerticalPanel imagePanel = new VerticalPanel(); imagePanel.add(previewImage); previewImage.addClickListener(new ClickListener(){ public void onClick(Widget sender) { popup.hide(); } }); popup.setWidget(imagePanel); show.addClickListener(new ClickListener(){ public void onClick(Widget sender) { popup.show(); } }); open.addClickListener(new ClickListener(){ public void onClick(Widget sender) { Window.open(link, &quot;_blank&quot;,&quot;enabled&quot;);}}); initWidget(mainPanel); //chiamata obbligatoria! } }

55. Già stiamo migliorando...

56. ...ma questa è meglio...

57. ...c'è anche qualche info...

58. ...ma come abbiamo fatto? public ImageSlide(String thumbnail, String preview, String title, final String link) { ... creo vari panel ... Image thumbnailImage = new Image(thumbnail); thumbnailImage.setStyleName(&quot;image-panel&quot;); mainPanel.add(thumbnailImage); mainPanel.setCellHorizontalAlignment(thumbnailImage, HasHorizontalAlignment.ALIGN_CENTER); mainPanel.add(details); Button open = new Button(&quot;View on Flickr&quot;, new OpenLinkOnClick(link)); open.setWidth(&quot;100%&quot;); Button close = new Button(&quot;Close me!&quot;, new ClosePopupPanelOnClick(popup)); close.setWidth(&quot;100%&quot;); Image previewImage = new Image(preview); VerticalPanel imagePanel = new VerticalPanel(); imagePanel.add(previewImage); infoPanel.add(new Label(title, true)); infoPanel.add(open); infoPanel.add(close); previewTab.add(imagePanel, &quot;Image&quot;); previewTab.add(infoPanel, &quot;Get Info&quot;); previewTab.selectTab(0); previewTab.setAnimationEnabled(true); previewImage.addClickListener(new ClosePopupPanelOnClick(popup)); thumbnailImage.addClickListener(new DisplayPopupOnClick(popup)); initWidget(mainPanel); //chiamata obbligatoria! }

59. Ma soprattutto CSS E' stato modificato il file FlickrGWT.css .image-panel { background: url('img/bg.png') no-repeat top center; padding: 0px 10px 10px 10px; } Ricordate : GWT in fondo crea semplici pagine HTML i cui stili possono essere impostati con semplici CSS

61. Specifichiamo l'id del div che conterrà la nostra applicazione: RootPanel.get(&quot;flickr-gallery&quot;).add(gallery);

62. Scriviamo un po' di css e html e...

63. Image Bundle? Problema Troppe request uccidono i nostri server Soluzione Una sola request per le immagini usate nel nostro applicativo

65. Basta definire una interfaccia interface ToolBarImage extends ImageBundle { @Resource ( &quot;img/open.png&quot; ) AbstractImagePrototype open(); .... @Resource ( &quot;img/save.png&quot; ) AbstractImagePrototype save(); }

66. L'utilizzo è ancora più semplice ToolBarImage bundle = (ToolBarImage)GWT.create(ToolBarImage. class ); Image save = bundle.save().createImage(); toolbar.add(save);

67. Plugin e widget per la view

70. SUCO - http://code.google.com/p/suco/

71. RocketGWT - http://code.google.com/p/rocket-gwt/

73. GWT Widget Library -http://gwt-widget.sourceforge.net/

75. Usciamo dal browser con PRISM Mozilla Prism è un plugin per Firefox che permette la trasformazione di applicazioni web in applicazioni desktop

77. Geo localizzazione

78. Interazione col desktop

79. Local server per file, immagini, javascript, css

80. Una combinazione vincente GWT + GEAR + PRISM = COOL APPLICATION

82. http://www.ociweb.com/mark/programming/GWT.html

83. http://code.google.com/p/gwt-google-apis/

84. http://gears.google.com/

85. http://www.gwtsite.com/

86. http://www.ongwt.com

87. http://labs.mozilla.com/projects/prism/ Link & Libri

89. Stefano Linguerri stefano.linguerri @pronetics.it http://www.eljeko.net Contatti

90. Q&A