Google Web Toolkit. Angelo Di Iorio

Transcript

1 Google Web Toolkit Angelo Di Iorio

2 Google Web Toolkit GWT è un framework open- source per costruire e ges<re applicazioni Ajax in Java hcps://developers.google.com/web- toolkit/ Sia i moduli server- side che client- side sono scrii in Java: Il framework compila la parte client- side in HMTL + Javascript La parte server- side è tradoca in Servlet Java La comunicazione, sia sincrona che asincrona, è in HTTP ma in modo trasparente all utente acraverso GWT RPC Gli oggei sono spedi< direcamente dal client al server e il framework si occupa della serializzazione/deserializzazione e trasmissione via HTTP

3

4 Toolkit La distribuzione GWT include un set di tool: SDK: le librerie core e il compilatore GWT Plugin Eclipse: supporto per sviluppo, debug e deploy dire;amente in Eclipse webappcreator: comman- line tool per generare tui i file necessari per un progeco GWT SpeedTracer: estensione del browser Chrome per monitorare le performance GWT Designer: Java GUI per creare interfacce e layout delle applicazioni GWT e generare automa<camente il codice rela<vo

5 GWT in Eclipse hcps://developers.google.com/web- toolkit/usingeclips

6 Web Applica<on Project Il plugin Eclipse genera automa<camente un applicazione di esempio, completa. Un buon punto di partenza. [vedi demo]

7 Debug e Produc<on mode Development mode Codice compilato ed eseguite direcamente sulla JVM Semplifica il debug, non richiede compilazione Web Container locale (JeCy o Tomcat) Richiede installazione di un plug- in per il browser Interamente integrato in Eclipse Produc<on mode Il sorgen< del client sono compila< in HTML + JS Non richiede un Web Container Deploy on Google App Engine [vedi demo]

8 StruCura di un progeco GWT File di configurazione e dichiarazione dei moduli GWT Sorgen< del client EntryPoint Sorgen< del server Classi e moduli condivisi Test Directory di deploy e risorse web pubbliche Foglio di s<le principale Host Page

9 Host page, Entry Point e onmoduleload <tr> <td id="namefieldcontainer"></td> <td id="sendbuttoncontainer"></td> </tr> /** * This is the entry point method. */ public void onmoduleload() { final Button sendbutton = new Button("Send"); final TextBox namefield = new TextBox(); namefield.settext("gwt User"); final Label errorlabel = new Label(); // We can add style names to widgets sendbutton.addstylename("sendbutton"); Creazione Widgets S<le CSS Bind HTML // Add the namefield and sendbutton to the RootPanel // Use RootPanel.get() to get the entire body element RootPanel.get("nameFieldContainer").add(nameField);

10 Widgets and Panels GWT fornisce un set esteso di classi per costruire l interfaccia dell applicazione: Panels: per organizzare gli oggei nello spazio (TabPanel, FlowPanel, Ver<calPanel, HorizontalPanel, etc.) RootPanel: container per gli elemen< dinamici, può essere usato per generare il body della pagina o elemen</containers specifici Widget: oggei atomici dell interfaccia (BuCon, Label, ListBox, PushBuCon, RadioBuCon, etc.) hcps://developers.google.com/web- toolkit/doc/latest/ RefWidgetGallery

11 Events I comportamen< dinamici client- side si definiscono tramite even< e event handlers Si associa al widget su cui si vuole cacurare un evento l handler corrispondente, che implementa una o più interfacce Ogni interfaccia definisce uno o più metodi che il widget richiama al verificarsi dell evento Gli Event Handlers possono essere anonimi (passa< direcamente al widget) o defini< in classi (riusabili da più widget)

12 Events // Add a handler to send the name to the server MyHandler handler = new MyHandler(); sendbutton.addclickhandler(handler); // Create a handler for the sendbutton and namefield class MyHandler implements ClickHandler, KeyUpHandler { /** * Fired when the user clicks on the sendbutton. */ public void onclick(clickevent event) { sendnametoserver(); /** * Fired when the user types in the namefield. */ public void onkeyup(keyupevent event) { if (event.getnativekeycode() == KeyCodes.KEY_ENTER) { sendnametoserver();

13 GWT RPC GWT RPC (Remote Procedure Call) permece di trasferire oggei Java dal client al server, e viceversa, usando HTTP in modo trasparente Il client invoca direcamente un metodo del server chiamato service E necessario definire: L interfaccia del service L interfaccia asincrona del service (che verrà richiamata dal client) L implementazione del service GWT si occupa di: Generare una classe Proxy che esegue la chiamata al service (via HTTP) Ges<re la serializzazione/deserializzazione degli oggei e il loro trasferimento (tramite metodi e parametri HTTP) Tradurre il service in Servlet hcps://developers.google.com/web- toolkit/doc/latest/ DevGuideServerCommunica<on

14 RPC Plumbing Diagram

15 SERVER CLIENT public interface ColorService extends RemoteService { Color translate(string color) throws IllegalArgumentException; ColorServiceAsync.java public interface ColorServiceAsync { void translate(string color, AsyncCallback<Color> callback); ColorServiceImpl.java public class ColorServiceImpl extends RemoteServiceServlet implements ColorService { public Color translate(string color) throws IllegalArgumentException{ //implementazione del servizio [vedi demo Eclipse]

16 Chiamata RPC private final ColorServiceAsync colorservice = GWT.create(ColorService.class); colorservice.translate(color, new AsyncCallback<Color>() { public void onfailure(throwable caught) { // gestione errori public void onsuccess(color result) { ); // leggi e usa output del servizio, istanza di Color // es: aggiunge widget (frammento HTML) al body RootPanel.get().add(new HTML(result.getName()));

17 Chiamata RPC in un public void onclick(clickevent event) { String color = ((RadioButton) event.getsource()).gettext(); colorservice.translate(color, new AsyncCallback<Color>() { public void onfailure(throwable caught) { // gestione errori public void onsuccess(color result) { ); // leggi e usa output del servizio, istanza di Color // es: aggiunge widget (frammento HTML) al body RootPanel.get().add(new HTML(result.getName()));

18 GWT Serializa<on Gli oggei spedi< tramite RPC devono essere serializzabili GWT definisce alcuni <pi serizalizzabili (primi<vi, String, Boolean, Float, or Double, Enumera<on, etc.) e può serializzare/deserializzare le classi defini< dagli uten<, se si verificano alcune condizioni hcps://developers.google.com/web- toolkit/doc/latest/ DevGuideServerCommunica<on#DevGuideSerializableTypes import public class Color implements Serializable{ private String name; public String getname() { return name; public void setname(string name) { this.name = name;

19 GWT e Persistenza (e Hibernate) GWT non si occupa direcamente della persistenza dei da< I moduli server- side possono usare tuce le comuni librerie Java, ad esempio: JDBC, Java DataBase Connec<vity ORM, Object- Rela<onal Mapping DTO, Data Transfer Object Hibernate Warning: gli oggei client- side GWT non sono compa<bili con gli oggei Hibernate Necessario creare due classi, una server e una client- side, e usare DTO per trasferire gli oggei Tutorial su GWT e Hibernate: hcps://developers.google.com/web- toolkit/ar<cles/using_gwt_with_hibernate

20 Tes<ng su GWT GWT include una classe GWTTestCase che permece di eseguire test in JUnit GWTTestCase estende JUnit TestCase (e può essere quindi lanciata da command- line, Eclipse, etc.) ma è u<le per testare i moduli client- side GWTTestCase permece anche di eseguire chiamate RPC e verificare il risultato API estesa (metodi delaytestfinish() e finishtest()) per eseguire il test i modalità asincrona GWTTestSuite permece di aggregare GWTTestCase Il codice server- side può e deve essere testato con JUnit TestCase hcps://developers.google.com/web- toolkit/doc/latest/ DevGuideTes<ng

21 GWT Tutorial e Development Guide hcps://developers.google.com/web- toolkit/doc/latest/tutorial/ hcps://developers.google.com/web- toolkit/doc/latest/devguide