{"id":495,"date":"2018-02-05T22:25:27","date_gmt":"2018-02-05T21:25:27","guid":{"rendered":"http:\/\/www.valeriofinazzo.it\/wordpress\/?p=495"},"modified":"2018-02-05T22:25:27","modified_gmt":"2018-02-05T21:25:27","slug":"tutorial-gwt-creare-una-webapp-con-gwt-2-8","status":"publish","type":"post","link":"http:\/\/www.valeriofinazzo.it\/wordpress\/2018\/02\/tutorial-gwt-creare-una-webapp-con-gwt-2-8\/","title":{"rendered":"TUTORIAL GWT &#8211; CREARE UNA WEBAPP CON GWT 2.8"},"content":{"rendered":"<p>Da tempo pensavo di aggiornare i componenti che uso in ufficio e ho deciso di partire da GWT. Nel momento in cui scrivo l&#8217;ultima versione \u00e8 la\u00a0 2.8.2.\u00a0 Mi piace GWT, mi piace l&#8217;idea di lavorare solo in java e xml e non dovermi preoccupare delle librerie javascript, durante la generazione del war sar\u00e0 GWT a trasformare le classi java in unico file javascript che sar\u00e0 incluso all&#8217;interno del mio progetto.<\/p>\n<p>Andiamo sul sito <a href=\"http:\/\/www.gwtproject.org\">http:\/\/www.gwtproject.org<\/a> e partiamo dall&#8217;analisi dei requisiti di sistema. La nuova versione ha una dipendenza minima di JDK 1.8, Google ci avvisa che il sistema compila correttamente su JDK 1.7 ma che la modalit\u00e0 in devmode presenta malfunzioni.\u00a0 L&#8217;IDE di riferimento \u00e8 <a href=\"http:\/\/www.eclipse.org\/downloads\/\">Eclipse<\/a>, nel momento in cui scrivo sto usando la versione Oxygen. Su questa installiamo il <a href=\"http:\/\/gwt-plugins.github.io\/documentation\/\">GWT Eclipse plugin<\/a>\u00a0\u00a0e possiamo iniziare.<\/p>\n<p>A questo punto avete 2 possibilit\u00e0:<\/p>\n<ol>\n<li>usare il wizard che vi tira su il progetto con la sua alberatura e lo rende gi\u00e0 eseguibile .<\/li>\n<li>Integrare maven, integrare il plugin disponibile e creare il nostro progetto a partire da un archetipo .<\/li>\n<\/ol>\n<p>L&#8217;opzione 1 \u00e8 quella pi\u00f9 rapida, selezionando i dati di esempio,\u00a0 ci permette di avere subito il progetto operativo e poterlo lanciare tramite una delle seguenti opzioni :<\/p>\n<ol>\n<li>GWT Development Mode (Avvia un server in ascolto delle richieste del client. Se tutto \u00e8 ok vai all&#8217;indirizzo http:\/\/127.0.0.1:9876\/ per vedere il server attivo. A questo punto occorre configurare un qualsiasi server per caricare il contesto web )<\/li>\n<li>GWT Development Mode with jetty (Avvia il code server ed un jetty server con il client attivo. A questo punto se tutto \u00e8 ok accedete alla pagina\u00a0http:\/\/127.0.0.1:8888\/ e vedrete la home page dell&#8217;applicativo. Rispetto al punto precedente, abbiamo gi\u00e0 il web server pronto.)<\/li>\n<li>GWT Legacy Development Mode with jetty (Avvia l&#8217;applicativo usando un processo\u00a0OOHPM. Tale processo non \u00e8 pi\u00f9 supportato dai moderni browser. Infatti \u00e8 possibile vederlo attivo solo su una vecchia versione di firefox su cui va installato il google web toolkit developer plugin).<\/li>\n<\/ol>\n<p>Il plugin ha creato la directory war e 3 package per i sorgenti: client, server e shared. Ad ogni package corrisponde una visibilit\u00e0 ed un comportamento diverso. Tutti i sorgenti saranno compilati in .class sotto la WEB-INF, i sorgenti del package server sono visibile solo alla parte server del progetto e non al frontend, i sorgenti della parte client verranno trasformati in javascript, pertanto alcune classi non saranno disponibili perch\u00e8 non supportate da Javascript (es. Calendar o String.format), i sorgenti del package shared saranno visibili sia al frontend che al backend.<\/p>\n<p>Nota dolente di questo approccio \u00e8 che il wizard fallisce qualora si chiede la creazione del progetto con struttura maven. Appena generato il progetto indica errori di compilazione e questo non \u00e8 bello, visto che ha fatto tutto da solo.<\/p>\n<p><a href=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-500\" src=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven-300x37.png\" alt=\"\" width=\"300\" height=\"37\" srcset=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven-300x37.png 300w, http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven-768x94.png 768w, http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven-1024x126.png 1024w, http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/erroreMaven.png 1239w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Aprendo la console \u00e8 possibile far partire il progetto usando la direttiva mvn war:exploded gwt:devmode, mentre in eclipse occorre configurare il progetto per correggere gli errori. Per correggere l&#8217;errore in Eclipse lanciate la direttiva mvn eclipse:eclipse e fate il refresh in Eclipse del progetto, in questo modo dovrete soltanto da aggiungere la dipendenza da GWT tramite IDE e tutto dovrebbe riattivarsi.<\/p>\n<p>Adesso veniamo al punto 2, con Maven posso partire da un archetipo che mi mette a disposizione tutte le librerie che mi servono con minimo sforzo. Devo realizzare una webapp che esponga un front-end gwt e dei servizi rest per l&#8217;accesso alla base dati. Parto quindi dall&#8217;archetipo minimo previsto per gwt e a questo aggiungo spring web per la gestione dei servizi rest e restyGWT per integrarli in modo pi\u00f9 rapido. Voglio rendere al minimo l&#8217;uso delle chiamate RPC. In questo modo potr\u00f2 disaccoppiare i sistemi e un domani eventualmente sostituire GWT con un altro frontend, senza dover toccare il backend. Impostato il progetto lo facciamo partire con la direttiva e il gioco \u00e8 fatto<\/p>\n<pre class=\"lang:default decode:true\">mvn war:exploded gwt:devmode<\/pre>\n<p>Per riassumere trovate il <a href=\"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-content\/uploads\/2018\/02\/pom.zip\">pom\u00a0<\/a>del progetto con le dipendenze gi\u00e0 pronte.<\/p>\n<p>Buon divertimento<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Da tempo pensavo di aggiornare i componenti che uso in ufficio e ho deciso di partire da GWT. Nel momento in cui scrivo l&#8217;ultima versione \u00e8 la\u00a0 2.8.2.\u00a0 Mi piace GWT, mi piace l&#8217;idea di lavorare solo in java e xml e non dovermi preoccupare delle librerie javascript, durante la generazione del war sar\u00e0 GWT &hellip; <a href=\"http:\/\/www.valeriofinazzo.it\/wordpress\/2018\/02\/tutorial-gwt-creare-una-webapp-con-gwt-2-8\/\" class=\"more-link\">Continua la lettura di <span class=\"screen-reader-text\">TUTORIAL GWT &#8211; CREARE UNA WEBAPP CON GWT 2.8<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[92],"tags":[],"_links":{"self":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/495"}],"collection":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/comments?post=495"}],"version-history":[{"count":7,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/495\/revisions"}],"predecessor-version":[{"id":509,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/posts\/495\/revisions\/509"}],"wp:attachment":[{"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/media?parent=495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/categories?post=495"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.valeriofinazzo.it\/wordpress\/wp-json\/wp\/v2\/tags?post=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}