Google Web Toolkit

1. Google Web Toolkit Peter Norrhall

2. Ajax och JavaScript

3. Frågor!

4. Bakgrund o Historik Ajax Pre-Ajax

5. Stateless HTML View Browser Stateful JavaScript UI Browser HTML vs Ajax HTML User Action Stateful Server New HTML page Ajax Remote procedure call Events handled locally Stateless Server Data only, not HTML

6. Ajax + Upplevelse + Funktionalitet/Användbarhet + Hastighet + Ingen installation - Tillgänglighet (accessibility) - JavaScript - Bakåtknappen - Webbläsarinkompabilitet - Säkerhet

7. GWT - Java till JavaScript

8. GWT Demo (Eclipse, Hosted Mode, Debug)

9. GWT - Arkitektur Java till JS Kompilator JSNI JRE Emulering GWT API Widget & Panels i18n RPC XML Parser Historik JUnit integration

10. 6, 7 1.0, 1.5, 2.0 2.0 8.5, 9.0 Webbläsare

11. BookSearch.css BookSearch.html BookSearch.html history.html BookSearch.css gwt-user.jar BookSearch.nocache-xs.js BookSearch.nocache.js history.html ....client.BookSearch.gwt.xml ....client.BookSearch.java Standard App XXXXXXXXXXXX.cache.xml XXXXXXXXXX.cache.html XXXXXXXXXX.cache.js Cross Site App Java-till-JavaScript Kompilator

12. Widgets, Panels & Historik Demo (KitchenSink)

13. Skapa egna Widgets

14. Widget - Arv ButtonBase CheckBox RadioButton

15. RadioButton public class RadioButton extends CheckBox { public RadioButton(String name) { super(DOM.createInputRadio(name)); setStyleName("gwt-RadioButton"); } ... }

16. Label EditLabel - Composite Composite EditLabel Label TextBox

17. ”KompositWidget” publicclass EditLabel extends Composite { public EditLabel() { final HorizontalPanel horizontalPanel = new HorizontalPanel(); initWidget(horizontalPanel); final Label label = new Label("Label"); horizontalPanel.add(label); final TextBox textBox = new TextBox(); horizontalPanel.add(textBox); } }

18. DOM Widget UIObject Widget FileUpload

19. FileUpload – DOM public class FileUpload extends Widget implements HasName { public FileUpload(String name){ super(DOM.createElement("input")); DOM.setAttribute(getElement(), "type", "file"); setStyleName("gwt-FileUpload"); } public String getFilename() { return DOM.getElementProperty(getElement(), "value"); } public String getName() { return DOM.getElementProperty(getElement(), "name"); } public void setName(String name) { DOM.setElementProperty(getElement(), "name", name); } }

20. Paneler

21. Layout, Widgets och CSS .gwt-TextBox { height: 8px} .gwt-TextBox { height: 14px} mobile.css screen.css <div id=”search”> </div RootPanel.get(”search”).add(textBox); SearchFrm.html SearchFrm.java

22. Integration XHR GWT-RPC Remote procedure call RequestBuilder Data only, not HTML

23. Mash-Ups Proxy

24. GWT-RPC Serializable SearchResult.javaString name;String isbn;

25. GWT-RPC - AmazonSearch Klient Server AmazonSearch.javaonClick() { ... }onSuccess() {...} RemoteServiceServlet AmazonSearchService.javapublic List searchBook AmazonSearchServiceImpl.javapublic List searchBook() {...} SearchResult.javaString name;String isbn; Serializable

26. Demo Demo (AmazonSearch)

27. RequestBuilder JSON XML

28. JSON • object peter = {”name”:”Peter”, ”age”:40,”married”:true,”mistress”:null} • array norrhalls = {peter, maria, frida, linnea, jakob, moa}

29. RequestBuilder Klient Server HttpServlet AmazonSearch.javaonClick() { ... }onResponseReceived () {...} AmazonSearchService.javaprotected void service () {...}

30. RequestBuilder JSONObject o = new JSONObject(); o.put("searchString", new JSONString(searchString)); RequestBuilder rb = new RequestBuilder(RequestBuilder.POST, GWT.getModuleBaseURL() + "search"); try { rb.sendRequest(o.toString(), new SearchResultsHandler()); } catch (RequestException e) { GWT.log("Could not send search request", e); }

31. Demo

32. i18n SearchAppConstans.properties buttonText=Search SearchAppConstans_sv.properties buttonText=Sök private static final SearchAppConstants CONSTANTS = (SearchAppConstants) GWT.create(SearchAppConstants.class);…clickMeButton.setText(CONSTANTS.getButtonText());

33. i18n Demo (Îñţérñåţîöñåļîžåţîöñ Sample)

34. JavaScript Native Interface • Att komma åt browserfunktionalitet • Att komma åt andra JavaScript bibliotekt public native static java_class method() /*- { ... } -*/ Effects.java JavaScript Kod

35. JSNI <div class="example" id="demo-effect-pulsate" onclick="new Effect.Pulsate(this)"> <img src="http://script.aculo.us/images/demo-logo.gif" alt="" /> <span>Click me</span> </div> prublic static native JavaScriptObject effect(String name, Element elem) /*-{ return new $wnd.Effect[name](elem); }-*/; ... Effects.Effect("Pulsate", uiObj);

36. JSNI Demo - Effect (script.actulo.us)

37. Prestanda (Källa Google)

38. Prestanda (GWT 1.4) • Bilder • Kodstorlek • Prestanda • Läsbarhet (pretty,detailed, obfuscated) • Cachning <30% <20-50%

39. GWT-svagheter • Ingen inbyggd säkerhet • Sökmotorindexering • Komponenter • DataTransferObject

40. Fördelar GWT • Ej expert på JavaScript • Verktygstöd • Hanterar – Historik och bokmärken • Användbarhet och prestanda i fokus • Google + Apache 2.0 Open Source

41. 6, 7 1.0, 1.5, 2.0 2.0 8.5, 9.0 GWT - Mission To radically improve the web experiencefor users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser

42. Avslutande Frågor

43. Referenser • http://code.google.com/webtoolkit • http://www.instantiations.com/gwtdesigner • http://www.json.org • http://www.manning.com/hanson/