Google  Web  Toolkit  

Angelo  Di  Iorio  

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    

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    

GWT  in  Eclipse  

•  hCps://developers.google.com/web-­‐toolkit/usingeclips  

Web  Applica<on  Project  

Il  plugin  Eclipse  genera  automa<camente  un’applicazione  di  esempio,  completa.  Un  buon  punto  di  partenza.  

[vedi  demo]  

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]  

StruCura  di  un  progeCo  GWT  File  di  configurazione  e  dichiarazione  dei  moduli  GWT  

Sorgen<  del  client  

Sorgen<  del  server  

Classi  e  moduli  condivisi  

Test  

Host  Page  

Foglio  di  s<le  principale  

Directory  di  deploy  e  risorse  web  pubbliche  

EntryPoint  

Host  page,  Entry  Point  e  onModuleLoad  

/** * 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 widgetssendButton.addStyleName("sendButton");

// Add the nameField and sendButton to the RootPanel// Use RootPanel.get() to get the entire body elementRootPanel.get("nameFieldContainer").add(nameField);…  

<tr> <td id="nameFieldContainer"></td>

<td id="sendButtonContainer"></td> </tr>

Creazione    Widgets  

S<le  CSS  

Bind  HTML  

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    

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)  

Events  // Add a handler to send the name to the serverMyHandler handler = new MyHandler();sendButton.addClickHandler(handler);

// Create a handler for the sendButton and nameFieldclass 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();}

}  

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  

RPC  Plumbing  Diagram  

@RemoteServiceRelativePath("color")public interface ColorService extends RemoteService {

Color translate(String color) throws IllegalArgumentException;}  

ColorService.java  

public interface ColorServiceAsync {

void translate(String color, AsyncCallback<Color> callback);

}  

ColorServiceAsync.java  

public class ColorServiceImpl extends RemoteServiceServlet implementsColorService {

public Color translate(String color) throws IllegalArgumentException{

//implementazione del servizio}  

ColorServiceImpl.java  

SERV

ER  

CLIENT  

[vedi  demo  Eclipse]  

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 bodyRootPanel.get().add(new HTML(result.getName()));}

});  

Chiamata  RPC  in  un  EventHandler  @Overridepublic 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 bodyRootPanel.get().add(new HTML(result.getName()));}

});}  

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 java.io.Serializable;

@SuppressWarnings("serial")public class Color implements Serializable{

private String name;

public String getName() {return name;}

public void setName(String name) {this.name = name;}

}  

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  

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    

GWT  Tutorial  e  Development  Guide    

•  hCps://developers.google.com/web-­‐toolkit/doc/latest/tutorial/  

•  hCps://developers.google.com/web-­‐toolkit/doc/latest/DevGuide