Panoramica su Google Web Toolkit

1. Introduzione a
Google Web Toolkit
Torino 8 novembre 2010
Marchi, nomi, prodotti e loghi delle società menzionate
appartengono ai rispettivi proprietari.
Alessandro Franceschetti
franceschetti.alessandro@gmail.com

2. GWT – Punti di forza
Google Web Toolkit (GWT) is a development toolkit for building and
optimizing complex browser-based applications. Its goal is to enable
productive development of high-performance web applications without the
developer having to be an expert in browser quirks, XMLHttpRequest, and
JavaScript.
• Si sviluppa in Java
• Ajax totalmente integrato
• Internazionalizzazione
• Portabilità fra differenti browser
• Debug in locale

3. Google Web Toolkit
Strumenti di sviluppo
• Plugin Eclipse (lo stesso che si usa con GAE)
• Script Ant
• Esecuzione in locale con debug

4. Google Web Toolkit
Client side
– Entry Point
– Widget
– UiBinder
– Event Handler
– ClientBundle
– Internationalization

5. Google Web Toolkit
Entry Point
package com.example.foo.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Hello, AJAX");
}
});
RootPanel.get().add(b);
}
}

6. Google Web Toolkit
Widget
• Button
• CheckBox
• Date Picker
• …
http://gwt.google.com/samples/Showcase/Showcase.html

7. Google Web Toolkit
UiBuinder
Modalità di creazione delle pagine html introdotta con la versione 2.0 di GWT.
Una pagina viene costruita tramite 2 file:
• file xml che contiene la struttura della pagina con html e widget
• classe java tramite cui si gestisce la parte dinamica: eventi, valorizzazione
di attrubuti, cicli…

8. Google Web Toolkit
UiBuinder – file xml
<!-- HelloWidgetWorld.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.
</g:HTMLPanel>
</ui:UiBinder>

9. Google Web Toolkit
UiBuinder – classe Java
<!– HelloWidgetWorld.java -->
public class HelloWidgetWorld extends Composite {
interface MyUiBinder extends UiBinder<Widget, HelloWidgetWorld> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiField ListBox listBox;
public HelloWidgetWorld(String... names) {
// sets listBox
initWidget(uiBinder.createAndBindUi(this));
for (String name : names) {
listBox.addItem(name);
}
}
}

10. Google Web Toolkit
Event Handler
public class MyFoo extends Composite {
@UiField Button button;
public MyFoo() {
initWidget(button);
}
@UiHandler("button")
void handleClick(ClickEvent e) {
Window.alert("Hello, AJAX");
}
}

11. Google Web Toolkit
Client Bundle
public interface Resources extends ClientBundle {
@Source("Style.css")
Style style();
@Source("Logo.jpg") // viene creata un immagine sprite unica
ImageResource logo();
public interface Style extends CssResource {
String nameSpan();
Sprite userPictureSprite();
}
}
…
Resources res = (Resources)GWT.create(Resources.class);
new Image(res.logo());
…
Dichiarazione
Utilizzo

12. Google Web Toolkit
Internationalization
Gestita tramite varie tecniche.
Da approfondire…

13. Google Web Toolkit
Comunicazione client-server
Ci sono due possibilità:
• Framework GWT RPC
• Chiamate http custom

14. Google Web Toolkit
GWT Remote Procedure Calls

15. Google Web Toolkit
GWT Remote Procedure Calls - Implementazione
@RemoteServiceRelativePath("email")
public interface MyEmailService extends RemoteService {
void emptyMyInbox(String username, String password);
}
public class MyEmailServiceImpl extends RemoteServiceServlet implements
MyEmailService {
public void emptyMyInbox(String username, String password) {
// Do something ...
}
}
Interface
Interface
Async
Impl
public interface MyEmailServiceAsync {
void emptyMyInbox(String username, String password,
AsyncCallback<Void> callback);
}

16. Google Web Toolkit
GWT Remote Procedure Calls - Utilizzo
public void menuCommandEmptyInbox() {
// (1) Create the client proxy.
MyEmailServiceAsync emailService = (MyEmailServiceAsync)
GWT.create(MyEmailService.class);
// (2) Create an asynchronous callback to handle the result.
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Void result) {
// do some UI stuff to show success
}
public void onFailure(Throwable caught) {
// do some UI stuff to show failure
}
};
// (3) Make the call. Control flow will continue immediately and later
// 'callback' will be invoked when the RPC completes.
emailService.emptyMyInbox(fUsername, fPassword, callback);
}
Nel modulo