Google Web Toolkit (GWT) è un toolkit di sviluppo per la creazione e l'ottimizzazione di applicazioni complesse basate su browser. GWT è utilizzato da molti prodotti Google, inclusi Google AdWords e orkut.

Di seguito sono riportate le caratteristiche di GWT:

• Google Web Toolkit (GWT) è un toolkit di sviluppo per creare RICH Internet Application (RIA).

• GWT fornisce agli sviluppatori l'opzione per scrivere applicazioni lato client in JAVA.

• GWT compila il codice scritto in JAVA in codice JavaScript.

• L'applicazione scritta in GWT è compatibile con tutti i browser. GWT genera automaticamente codice javascript adatto a ogni browser.

• GWT è open source, completamente gratuito e utilizzato da migliaia di sviluppatori in tutto il mondo. È concesso in licenza con la licenza Apache versione 2.0.

Perché dovremmo usare GWT?

Di seguito sono riportati i motivi per preferire GWT per i progetti di sviluppo:

• Essendo basato su Java, puoi utilizzare IDE JAVA come Eclipse per sviluppare applicazioni GWT. Gli sviluppatori possono utilizzare il completamento automatico del codice / il refactoring / la navigazione / la gestione dei progetti e tutte le funzionalità degli IDE.

• GWT offre funzionalità di debug complete. Gli sviluppatori possono eseguire il debug dell'applicazione lato client proprio come un'applicazione Java.

• GWT fornisce una facile integrazione con Junit e Maven.

• Essendo di nuovo basato su Java, GWT ha una curva di apprendimento bassa per gli sviluppatori Java.

• GWT genera codice javascript ottimizzato, produce autonomamente il codice javascript specifico del browser.

• GWT fornisce la libreria Widget che fornisce la maggior parte delle attività richieste in un'applicazione.

• GWT è estensibile ed è possibile creare widget personalizzati per soddisfare le esigenze dell'applicazione.

• Oltre a tutto, le applicazioni GWT possono essere eseguite su tutti i principali browser e smartphone, inclusi telefoni / tablet basati su Android e iOS.

Quali sono gli svantaggi di GWT?

Di seguito sono riportati gli svantaggi di GWT:

• Not indexable − Le pagine web generate da GWT non verrebbero indicizzate dai motori di ricerca perché queste applicazioni sono generate dinamicamente.

• Not degradable − Se l'utente dell'applicazione disabilita Javascript, l'utente vedrà solo la pagina di base e nient'altro.

• Not designer's friendly − GWT non è adatto per i web designer che preferiscono utilizzare HTML semplice con segnaposto per inserire contenuto dinamico in un secondo momento.

Di seguito sono riportati i componenti principali di GWT:

• GWT Java to JavaScript compiler −Questa è la parte più importante di GWT che lo rende un potente strumento per la creazione di RIA. Il compilatore GWT viene utilizzato per tradurre tutto il codice dell'applicazione scritto in Java in JavaScript.

• JRE Emulation library −Google Web Toolkit include una libreria che emula un sottoinsieme della libreria di runtime Java. L'elenco include java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util e java.util.logging.

• GWT UI building library − Questa parte di GWT è composta da molte sottoparti che includono i componenti dell'interfaccia utente effettivi, il supporto RPC, la gestione della cronologia e molto altro.

• GWT Hosted Web Browser − GWT Hosted Web Browser consente di eseguire ed eseguire le applicazioni GWT in modalità ospitata, in cui il codice viene eseguito come Java nella Java Virtual Machine senza compilare in JavaScript.

Un'applicazione GWT consiste nel seguire quattro parti importanti di cui l'ultima parte è facoltativa ma le prime tre parti sono obbligatorie:

• Descrittori del modulo

• Risorse pubbliche

• Codice lato client

• Codice lato server

Un descrittore del modulo è il file di configurazione sotto forma di XML che viene utilizzato per configurare un'applicazione GWT. L'estensione di un file descrittore del modulo è * .gwt.xml, dove * è il nome dell'applicazione e questo file dovrebbe risiedere nella radice del progetto.

Fornisce il nome dell'applicazione.

Questo aggiunge un altro modulo gwt nell'applicazione proprio come l'importazione fa nelle applicazioni java. Qualsiasi numero di moduli può essere ereditato in questo modo.

Specifica il nome della classe che inizierà a caricare l'applicazione GWT.

Sì! È possibile aggiungere un numero qualsiasi di classi di punti di ingresso.

La funzione onModuleLoad () viene chiamata e agisce in modo simile al metodo principale di un'applicazione java.

Vengono chiamate sequenzialmente nell'ordine in cui le classi del punto di ingresso appaiono nel file del modulo. Quindi, quando l'onModuleLoad () del primo punto di ingresso finisce, il punto di ingresso successivo viene chiamato immediatamente.

Specifica i nomi delle cartelle di origine che il compilatore GWT cercherà per la compilazione di origine.

Il percorso pubblico è il punto del progetto in cui vengono archiviate le risorse statiche a cui fa riferimento il modulo GWT, come CSS o immagini.

Il percorso pubblico predefinito è la sottodirectory pubblica in cui è archiviato il file XML del modulo.

Inserisce automaticamente il file JavaScript esterno situato nella posizione specificata da src.

Inserisce automaticamente il file CSS esterno situato nella posizione specificata da src.

Un punto di ingresso del modulo è qualsiasi classe assegnabile a EntryPoint e che può essere costruita senza parametri. Quando viene caricato un modulo, viene creata un'istanza di ogni classe del punto di ingresso e viene chiamato il suo metodo EntryPoint.onModuleLoad ().

Contiene il codice javascript necessario per risolvere le configurazioni di binding differite (ad esempio, il rilevamento del browser) e per utilizzare la tabella di ricerca generata dal compilatore GWT per individuare uno dei file .cache.html.

Contiene il programma effettivo di un'applicazione GWT.

Di seguito sono riportati i passaggi della procedura di bootstrap per l'applicazione GWT quando un browser carica l'applicazione GWT:

• Il browser carica la pagina html host e il file .nocache.js.

• Il browser esegue il codice javascript del file .nocache.js.

• Il codice .nocache.js risolve le configurazioni di binding differite (ad esempio, il rilevamento del browser) e utilizza la tabella di ricerca generata dal compilatore GWT per individuare uno dei file .cache.html.

• Il codice .nocache.js crea quindi un iframe nascosto html, inserisce tale iframe nel DOM della pagina host e carica il file .cache.html nello stesso iframe.

• .cache.html contiene il programma effettivo di un'applicazione GWT e una volta caricata in iframe mostra l'applicazione GWT nel browser.

Il compilatore GWT genera ogni volta il file .nocache.js con lo stesso nome ogni volta che viene compilata un'applicazione GWT. Quindi il browser dovrebbe sempre scaricare il file .nocache.js per ottenere l'ultima applicazione gwt. Il codice gwt.js in realtà aggiunge un timestamp univoco alla fine del nome del file in modo che il browser lo consideri sempre un nuovo file e non lo dovrebbe mai memorizzare nella cache.

La risorsa pubblica più importante è la pagina host che viene utilizzata per richiamare l'applicazione GWT effettiva. Una tipica pagina host HTML per un'applicazione potrebbe non includere alcun contenuto del corpo HTML visibile, ma ci si aspetta sempre che includa l'applicazione GWT tramite un tag <script ... />.

Per impostazione predefinita, il nome della classe per ogni componente è gwt- <classname>. Ad esempio, il widget Button ha uno stile predefinito gwt-Button e in modo simile il widget TextBox ha uno stile predefinito gwt-TextBox.

No! Per impostazione predefinita, né il browser né GWT creano attributi ID predefiniti per i widget.

Questo metodo cancellerà tutti gli stili esistenti e imposterà lo stile del widget sulla nuova classe CSS fornita usando lo stile.

Questo metodo aggiungerà un nome di stile secondario o dipendente al widget. Un nome di stile secondario è un nome di stile aggiuntivo, quindi se sono stati applicati nomi di stile precedenti, vengono mantenuti.

Questo metodo rimuoverà lo stile dato dal widget e lascerà tutti gli altri associati al widget.

Questo metodo ottiene tutti i nomi di stile dell'oggetto, come un elenco separato da spazi.

Questo metodo imposta il nome di stile principale dell'oggetto e aggiorna tutti i nomi di stile dipendenti.

Per impostazione predefinita, il nome dello stile principale di un widget sarà il nome dello stile predefinito per la sua classe widget. Ad esempio, gwt-Button per i widget Button. Quando aggiungiamo e rimuoviamo nomi di stile utilizzando il metodo AddStyleName (), questi stili vengono chiamati stili secondari.

L'aspetto finale di un widget è determinato dalla somma di tutti gli stili secondari aggiunti, più il suo stile principale. Si imposta lo stile principale di un widget con il metodo setStylePrimaryName (String).

Esistono diversi approcci per associare file CSS al modulo. Le moderne applicazioni GWT utilizzano in genere una combinazione di CssResource e UiBinder.

• Utilizzando un tag <link> nella pagina HTML host.

• Utilizzando l'elemento <stylesheet> nel file XML del modulo.

• Utilizzando un CssResource contenuto in un ClientBundle.

• Utilizzo di un elemento <ui: style> inline in un modello UiBinder.

La classe UIObject è la superclasse per tutti gli oggetti dell'interfaccia utente.

• La classe UIObject è la superclasse per tutti gli oggetti dell'interfaccia utente. Semplicemente avvolge un elemento DOM e non può ricevere eventi. Fornisce classi figlio dirette come Widget, MenuItem, MenuItemSeparator, TreeItem.

• Tutti gli oggetti UIObject possono essere stilizzati utilizzando CSS.

• Ogni UIObject ha un nome di stile principale che identifica la regola di stile CSS chiave che dovrebbe essere sempre applicata ad esso.

• È possibile ottenere un comportamento di stile più complesso manipolando i nomi degli stili secondari di un oggetto.

La classe Widget è la classe base per la maggior parte degli oggetti dell'interfaccia utente. Widget aggiunge il supporto per la ricezione di eventi dal browser e l'aggiunta diretta ai pannelli.

Questo widget contiene testo, non interpretato come HTML utilizzando un elemento <div>, facendolo visualizzare con layout a blocchi.

Questo widget può contenere testo HTML e visualizza il contenuto html utilizzando un elemento <div>, facendolo visualizzare con layout a blocchi.

Questo widget mostra un'immagine a un dato URL.

Questo widget rappresenta un semplice elemento <a>.

Il widget pulsante rappresenta un pulsante di comando standard.

PushButton rappresenta un normale pulsante con uno stile personalizzato.

Il widget ToggleButton rappresenta un elegante pulsante con stato che consente all'utente di alternare tra gli stati su e giù.

Il widget CheckBox rappresenta un widget di casella di controllo standard. Questa classe funge anche da classe base per RadioButton.

Il widget RadioButton rappresenta un widget del pulsante di opzione di selezione che si esclude a vicenda.

Il widget ListBox rappresenta un elenco di scelte per l'utente, sia come casella di riepilogo che come elenco a discesa.

Il widget SuggestBox rappresenta una casella di testo o un'area di testo che visualizza un insieme preconfigurato di selezioni che corrispondono all'input dell'utente. Ogni SuggestBox è associato a un singolo SuggestOracle. SuggestOracle viene utilizzato per fornire una serie di selezioni data una specifica stringa di query.

Il widget TextBox rappresenta una casella di testo a riga singola.

Il widget PasswordTextBox rappresenta una casella di testo che maschera visivamente il suo input per evitare intercettazioni.

Il widget TextArea rappresenta una casella di testo che consente di inserire più righe di testo.

Il widget RichTextArea rappresenta un editor di testo RTF che consente uno stile e una formattazione complessi.

Il widget FileUpload racchiude l'elemento HTML <input type = 'file'>.

Il widget nascosto rappresenta un campo nascosto in un modulo HTML.

Il widget albero rappresenta un widget albero gerarchico standard. L'albero contiene una gerarchia di TreeItem che l'utente può aprire, chiudere e selezionare.

Il widget MenuBar rappresenta un widget della barra dei menu standard. Una barra dei menu può contenere un numero qualsiasi di voci di menu, ognuna delle quali può attivare un comando o aprire una barra dei menu a cascata.

Il widget DatePicker rappresenta un selettore di date GWT standard.

Il widget CellTree rappresenta una vista di un albero. Questo widget funzionerà solo in modalità standard, che richiede che la pagina HTML in cui viene eseguito abbia una dichiarazione <! DOCTYPE> esplicita.

Il widget CellList rappresenta un elenco di celle a colonna singola.

Il widget CellTable rappresenta una visualizzazione tabulare che supporta la paginazione e le colonne.

Il widget CellBrowser rappresenta una visualizzazione sfogliabile di un albero in cui può essere aperto solo un singolo nodo per livello alla volta. Questo widget funzionerà solo in modalità standard, che richiede che la pagina HTML in cui viene eseguito abbia una dichiarazione <! DOCTYPE> esplicita.

I pannelli di layout possono contenere altri widget. Questi pannelli controllano il modo in cui i widget devono essere visualizzati sull'interfaccia utente. Ogni widget Panel eredita le proprietà dalla classe Panel che a sua volta eredita le proprietà dalla classe Widget e che a sua volta eredita le proprietà dalla classe UIObject.

Panel è la classe base astratta per tutti i pannelli, che sono widget che possono contenere altri widget.

Il widget FlowPanel rappresenta un pannello che formatta i suoi widget figlio utilizzando il comportamento di layout HTML predefinito.

Il widget HorizontalPanel rappresenta un pannello che dispone tutti i suoi widget in una singola colonna orizzontale.

Il widget VerticalPanel rappresenta un pannello che dispone tutti i suoi widget in un'unica colonna verticale.

Il widget HorizontalSplitPanel rappresenta un pannello che dispone due widget in una singola riga orizzontale e consente all'utente di modificare in modo interattivo la proporzione della larghezza dedicata a ciascuno dei due widget. I widget contenuti in un HorizontalSplitPanel verranno automaticamente decorati con barre di scorrimento quando necessario.

Il widget VerticalSplitPanel rappresenta un pannello A che dispone due widget in un'unica colonna verticale e consente all'utente di modificare in modo interattivo la proporzione dell'altezza dedicata a ciascuno dei due widget. I widget contenuti in un VertialSplitPanel verranno automaticamente decorati con barre di scorrimento quando necessario.

Il widget FlexTable rappresenta una tabella flessibile che crea celle su richiesta. Può essere frastagliato (cioè, ogni riga può contenere un numero diverso di celle) e le singole celle possono essere impostate per estendersi su più righe o colonne.

Il widget Griglia rappresenta una griglia rettangolare che può contenere testo, HTML o un widget figlio all'interno delle sue celle. Deve essere ridimensionato esplicitamente al numero desiderato di righe e colonne.

DeckPanel è un pannello che mostra tutti i suoi widget figli in un "mazzo", dove può essere visibile solo uno alla volta. È utilizzato da TabPanel.

Questo widget rappresenta un pannello che dispone i suoi widget figli "agganciati" ai bordi esterni e consente al suo ultimo widget di occupare lo spazio rimanente al centro.

Questo widget rappresenta un pannello che contiene HTML e che può allegare widget figlio a elementi identificati all'interno di tale HTML.

Questo widget rappresenta un pannello che rappresenta un insieme di pagine a schede, ognuna delle quali contiene un altro widget. I suoi widget figlio vengono mostrati mentre l'utente seleziona le varie schede ad essi associate. Le schede possono contenere HTML arbitrario.

Questo widget rappresenta un tipo di widget che può avvolgere un altro widget, nascondendo i metodi del widget avvolto. Quando viene aggiunto a un pannello, un composto si comporta esattamente come se il widget che avvolge fosse stato aggiunto.

SimplePanel è la classe base per i pannelli che contengono un solo widget.

Il widget ScrollPanel rappresenta un semplice pannello che avvolge il suo contenuto in un'area scorrevole.

Il widget FocusPanel rappresenta un semplice pannello che rende i suoi contenuti attivabili e aggiunge la possibilità di catturare gli eventi del mouse e della tastiera.

Questo widget rappresenta un pannello che racchiude i suoi contenuti in un elemento HTML <FORM>.

Questo widget rappresenta un pannello che può apparire su altri widget. Si sovrappone all'area client del browser (e qualsiasi popup creato in precedenza).

Questo widget rappresenta una forma di popup che ha un'area didascalia in alto e può essere trascinata dall'utente. A differenza di PopupPanel, le chiamate a PopupPanel.setWidth (String) e PopupPanel.setHeight (String) imposteranno la larghezza e l'altezza della finestra di dialogo stessa, anche se non è stato ancora aggiunto un widget.

GWT fornisce un modello di gestore eventi simile ai framework di interfaccia utente Java AWT o SWING.

Un'interfaccia listener definisce uno o più metodi che il widget chiama per annunciare un evento. GWT fornisce un elenco di interfacce corrispondenti a vari eventi possibili.

Una classe che desidera ricevere eventi di un tipo particolare implementa l'interfaccia del gestore associata e quindi passa un riferimento a se stessa al widget per iscriversi a una serie di eventi.

Ad esempio, la classe Button pubblica eventi di clic, quindi dovrai scrivere una classe per implementare ClickHandler per gestire l'evento di clic.

Tutti i gestori di eventi GWT sono stati estesi dall'interfaccia EventHandler e ogni gestore ha un solo metodo con un singolo argomento. Questo argomento è sempre un oggetto del tipo di evento associato. Ogni oggetto evento dispone di una serie di metodi per manipolare l'oggetto evento passato.

GWT offre tre modi per creare elementi dell'interfaccia utente personalizzati. Ci sono tre strategie generali da seguire:

• Create a widget by extending Composite Class −Questo è il modo più comune e più semplice per creare widget personalizzati. Qui puoi utilizzare i widget esistenti per creare una vista composita con proprietà personalizzate.

• Create a widget using GWT DOM API in JAVA −I widget di base di GWT vengono creati in questo modo. È ancora un modo molto complicato per creare widget personalizzati e dovrebbe essere usato con cautela.

• Use JavaScript and wrap it in a widget using JSNI −Questo dovrebbe generalmente essere fatto solo come ultima risorsa. Considerando le implicazioni cross-browser dei metodi nativi, diventa molto complicato e diventa anche più difficile eseguire il debug.

• UiBinder è un framework progettato per separare la funzionalità e la visualizzazione dell'interfaccia utente.

• Il framework UiBinder consente agli sviluppatori di creare applicazioni gwt come pagine HTML con widget GWT configurati al loro interno.

• Il framework UiBinder semplifica la collaborazione con i progettisti dell'interfaccia utente che sono più a loro agio con XML, HTML e CSS rispetto al codice sorgente Java.

• L'UIBinder fornisce un modo dichiarativo per definire l'interfaccia utente.

• L'UIBinder separa la logica programmica dall'interfaccia utente.

• L'UIBinder è simile a ciò che JSP è per i servlet.

• RPC, Remote Procedure Call è il meccanismo utilizzato da GWT in cui il codice client può eseguire direttamente i metodi lato server.

• GWT RPC è basato su servlet.

• GWT RPC è asincrono e il client non viene mai bloccato durante la comunicazione.

• Utilizzando GWT RPC gli oggetti Java possono essere inviati direttamente tra il client e il server (che vengono serializzati automaticamente dal framework GWT).

• Il servlet lato server è definito come servizio.

• La chiamata di procedura remota che chiama metodi di servlet lato server dal codice lato client viene definita invocazione di un servizio.

Di seguito sono riportati i tre componenti utilizzati nel meccanismo di comunicazione RPC GWT:

• Un servizio remoto (servlet lato server) che viene eseguito sul server.

• Codice client per richiamare quel servizio.

• Oggetti dati Java che verranno passati tra client e server.

• Il client e il server GWT serializzano e deserializzano automaticamente i dati in modo che gli sviluppatori non siano tenuti a serializzare / deserializzare gli oggetti e gli oggetti dati possono viaggiare su HTTP.

Un oggetto dati java deve implementare l'interfaccia isSerializable in modo che possa essere trasferito via cavo in GWT RPC.

L'internazionalizzazione è un modo per mostrare informazioni specifiche della località su un sito web. Ad esempio, visualizzare il contenuto di un sito Web in lingua inglese negli Stati Uniti e in danese in Francia.

GWT offre tre modi per internazionalizzare un'applicazione GWT:

• Internazionalizzazione delle stringhe statiche.

• Internazionalizzazione dinamica delle stringhe.

• Interfaccia localizzabile.

Questa tecnica è la più diffusa e richiede un sovraccarico minimo in fase di esecuzione; è una tecnica molto efficiente per tradurre stringhe sia costanti che parametrizzate; più semplice da implementare. L'internazionalizzazione delle stringhe statiche utilizza i file delle proprietà Java standard per memorizzare le stringhe tradotte e i messaggi parametrizzati e vengono create interfacce Java fortemente tipizzate per recuperare i loro valori.

Questa tecnica è molto flessibile ma più lenta dell'internazionalizzazione delle stringhe statiche. La pagina host contiene le stringhe localizzate, pertanto non è necessario ricompilare le applicazioni quando si aggiunge una nuova locale. Se l'applicazione GWT deve essere integrata con un sistema di localizzazione lato server esistente, è necessario utilizzare questa tecnica.

Questa tecnica è la più potente tra le tre tecniche. L'implementazione di Localizable ci consente di creare versioni localizzate di tipi personalizzati. È una tecnica avanzata di internazionalizzazione.

tag di proprietà di estensione con il nome dell'attributo impostato come locale e i valori come locale specifico della lingua, ad esempio de per la lingua tedesca.

Per utilizzare il supporto della cronologia GWT, dobbiamo prima incorporare il seguente iframe nella nostra pagina HTML host.

<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

Il framework di registrazione emula java.util.logging, quindi utilizza la stessa sintassi e ha lo stesso comportamento del codice di registrazione lato server.

La registrazione di GWT viene configurata utilizzando i file .gwt.xml.

Possiamo configurare la registrazione in modo che sia abilitata / disabilitata; possiamo abilitare / disabilitare particolari gestori e modificare il livello di registrazione predefinito.

SystemLogHandler registra su stdout e questi messaggi possono essere visualizzati solo in modalità di sviluppo nella finestra DevMode.

DevelopmentModeLogHandler registra chiamando il metodo GWT.log. Questi messaggi possono essere visualizzati solo in modalità di sviluppo nella finestra DevMode.

ConsoleLogHandler accede alla console javascript, che viene utilizzata da Firebug Lite (per IE), Safari e Chrome.

FirebugLogHandler accede alla console Firebug.

PopupLogHandler accede al popup che risiede nell'angolo superiore sinistro dell'applicazione quando questo gestore è abilitato.

Questo gestore invia i messaggi di registro al server, dove verranno registrati utilizzando il meccanismo di registrazione lato server.