GWT integration with Vaadin. Peter expert & trainer

Transcription

1 GWT integration with Vaadin Peter expert & trainer

2 Vaadin & GWT GWT Transport mechanisms

3 Web components with Polymer QA Vaadin Connectors

4 Vaadin & GWT

5

6 Server driven UI framework with GWT based thin client

7 UI Browser

8 Widgets UI Browser

9 Widgets Theme UI Browser

10 Widgets Backend Theme UI Browser Server

11 Widgets Backend Theme UI Service (GWT-RPC) Browser Server

12 Server Backend

13 UI Backend Server

14 Widgets Components UI Backend Browser Server

15 Widgets Components UI Backend Theme Browser Server

16 Widgets Components UI Backend Theme Browser Server

17 User Interface Components

18 Developer Rich Productivity UX

19 Vaadin += GWT

20

21

22 GWT Transport mechanisms

23 RequestBuilder RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url); try { builder.sendrequest(requestdatastring, new RequestCallback() public void onresponsereceived(request request, Response response) { int statuscode = response.getstatuscode(); String text = response.gettext(); public void onerror(request request, Throwable exception) { // TODO Handle asynchronous problems } }); } catch (RequestException e) { // TODO Handle synchronous problems }

24 RequestBuilder Good It just works

25 RequestBuilder Good Bad It just works Very low level

26 What to send?

27 Contact public class Contact { private String name; private int yearofbirth; private List<String> addresses; private Address address; } public static class Address { private String street; private String city; } // + Getters and setters

28 String conversion String data = contact.getname(); data += "," + contact.getyearofbirth(); String[] parts = data.split(","); contact.setname(parts[0]); contact.setyearofbirth(integer.parseint(parts[1]));

29 String conversion String data = contact.getname(); data += "," + contact.getyearofbirth(); String[] parts = data.split(","); contact.setname(parts[0]); contact.setyearofbirth(integer.parseint(parts[1]));

30 JSON { } name: "John Doe", yearofbirth: 1900, address: { street: "Happy Street 1", city: "Turku" }, addresses: ["john@doe.com", "johndoe@gmail.com"]

31 JSONValue parsing JSONObject json = JSONParser.parseStrict(string).isObject(); contact.setname(json.get("name").isstring().stringvalue()); contact.setyearofbirth( (int) json.get("yearofbirth").isnumber().doublevalue()); contact.setaddress( parseaddress(json.get("address").isobject())); JSONArray addresses = json.get(" addresses").isarray(); for (int i = 0; i < addresses.size(); i++) { contact.get addresses().add( } }

32 JSONValue Good It s standard Human readable Compact format

33 JSONValue Good Bad It s standard Human readable Compact format Not completely typesafe Boilerplate Client only

34 What about the server?

35 Jackson on the server ObjectMapper mapper = new ObjectMapper(); try { Contact contact = mapper.readvalue(string, Contact.class); } catch (VariousExceptions e) { // Do something sensible }

36 Jackson and GWT? - gwt-jackson

37 gwt-jackson public static interface ContactMapper extends ObjectMapper<Contact> {} public Contact parsecontact(string jsonstring) { ContactMapper mapper = GWT.create(ContactMapper.class); Contact contact = mapper.read(jsonstring); return contact; }

38 Jackson Good Bad Minimal boiler plate Can share code Only creating and reading Strings between server and client

39 Where to send?

40 Remote procedure call public interface ContactService extends RemoteService { public void savecontact(contact contact); public List<Contact> getcontacts(); } public interface ContactServiceAsync { public void savecontact(contact contact, AsyncCallback<Void> callback); public void getcontacts(asynccallback<list<contact>> }

41 GWT-RCP Good Bad Simple but powerful concept Default solution Sending large object graph Polymorphism problems Optimized

42 Prefer JSON + REST? - me too :)

43 REST GET /contacts DELETE /contacts/5 PUT /contacts { name: John Doe,... }

44 public interface ContactsService public public void deletecontact(@pathparam("id") int id); public void createcontact(contact contact);

45 Vaadin Connectors

46 So how about Vaadin? - Put server in charge!

47

48 State synchronization public class ContactState extends SharedState { public String name; public int private void updatename() { dosomethingwiththename(getstate().name); }

49 RPC public interface ContactRpc extends ServerRpc { public void deletecontact(int id); } // Register RPC handler on the server registerrpc(new ContactRpc() public void deletecontact(int id) { ContactDAO.deleteById(id); } }); // Send RPC from the client public void senddelete(int contactid) { getrpcproxy(contactrpc.class).deletecontact(contactid); }

50 Button Server

51 VButton Browser Button Server

52 VButton ButtonConnector Browser Button Server

53 VButton ButtonConnector SharedState Browser SharedState Button Server

54 VButton ButtonConnector SharedState Browser SharedState Button Server

55 VButton ButtonConnector SharedState RPC Browser SharedState RPC Button Server

56 VButton ButtonConnector SharedState RPC Browser SharedState RPC Button Server

57 VButton ButtonConnector SharedState RPC Browser SharedState RPC Button Server

58 VButton ButtonConnector SharedState RPC Browser SharedState RPC Button Server

59 Widget Connector client State server RPC Component

60 public class ButtonConnector extends AbstractComponentConnector implements ClickHandler, FocusHandler { public void init() { getwidget().addclickhandler(this); "caption", "captionashtml" }) void setcaption() { getwidget().setcaptiontext(getstate()); }

61 } public void onclick(clickevent event) { getrpcproxy(buttonserverrpc.class). click(builddetails(event)); }

62 ButtonState public class ButtonState extends AbstractComponentState { public String caption; public boolean disableonclick; public int tabindex; }

63 ButtonServerRPC public interface ButtonServerRpc extends ServerRpc { } public void click(mouseeventdetails mouseeventdetails);

64 Server RPC implementation public class Button extends AbstractComponent { private ButtonServerRpc rpc = new ButtonServerRpc() { public void click(mouseeventdetails details) { fireclick(details); } }

65 Vaadin Connectors Good Bad Stateful server Websocket support Stateful server Tied to framework Integrated JSON

66 Web components with Polymer

67 Reuseable HTML components!

68 Problem: Unique DOM tree

69 Solution: Shadow DOM

70 Encapsulation

71 What shadow DOM looks like?

72 How? With Polymer polymer-project.org/

73 <v-grid>

74 Vaadin Grid Client Widget Expose JavaScript API via JsInterop from GWT 2.8 Use Shadow DOM and HTML imports from Polymer

75 @JsNamespace(JS.VAADIN_JS_NAMESPACE) public class GridComponent private final Grid grid; // Grid widget public JSColumn addcolumn(jscolumn jscolumn, Object beforecolumnid) { grid.addcolumn }

76 @JsType public interface JSColumn String void setname(string s);

77 <link rel='import' href='vaadin-grid-import.html'> <link rel='import' href='../bower_components/polymer/polymer.html'> <link rel="stylesheet" href="vaadin-grid.css" shim-shadowdom> <dom-module id="v-grid"> <template> </template> </dom-module> <script> var prototype = { is: v-grid", properties: { }, created: function() { this._grid = new vaadin.gridcomponent(); }, attached: function() { this._grid.attached(this, Polymer.dom(this).querySelector( table ), Polymer.dom(this.root)); }, } </script>

78 polymer.html demo.html vaadin-grid.html webcomponents.js GridComponent (js) GridWidget (js)

79 Lessons learned today 1. There are several ways of communicating between GWT client and server 2. Vaadin Connectors use custom hybrid of JSON and RequestBuilder wrapped to higher level SharedState and RPC 3. gwt-jackson with REST is very interesting option 4. Polymer allows browsers to support features needed for for web components

80 Thank you! Peter expert & trainer