Download to read offline
![String conversion
String data = contact.getName();
data += "," + contact.getYearOfBirth();
String[] parts = data.split(",");
contact.setName(parts[0]);
contact.setYearOfBirth(Integer.parseInt(parts[1]));](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/85/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-28-320.jpg)
![String conversion
String data = contact.getName();
data += "," + contact.getYearOfBirth();
String[] parts = data.split(",");
contact.setName(parts[0]);
contact.setYearOfBirth(Integer.parseInt(parts[1]));](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/85/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-29-320.jpg)
![JSON
{
name: "John Doe",
yearOfBirth: 1900,
address: {
street: "Happy Street 1",
city: "Turku"
},
emailAddresses: ["john@doe.com", "johndoe@gmail.com"]
}](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/85/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-30-320.jpg)
![String conversion
String data = contact.getName();
data += "," + contact.getYearOfBirth();
String[] parts = data.split(",");
contact.setName(parts[0]);
contact.setYearOfBirth(Integer.parseInt(parts[1]));](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/75/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-28-2048.jpg)
![String conversion
String data = contact.getName();
data += "," + contact.getYearOfBirth();
String[] parts = data.split(",");
contact.setName(parts[0]);
contact.setYearOfBirth(Integer.parseInt(parts[1]));](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/75/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-29-2048.jpg)
![JSON
{
name: "John Doe",
yearOfBirth: 1900,
address: {
street: "Happy Street 1",
city: "Turku"
},
emailAddresses: ["john@doe.com", "johndoe@gmail.com"]
}](https://image.slidesharecdn.com/javacro15-gwtintegrationwithvaadin-peterlehto-150520122318-lva1-app6892/75/JavaCro-15-GWT-integration-with-Vaadin-Peter-Lehto-30-2048.jpg)
JavaCro'15 - GWT integration with Vaadin - Peter Lehto
This document discusses integrating GWT with Vaadin. It covers various transport mechanisms for communicating between the client and server like RequestBuilder, JSON, and Jackson. It also discusses Vaadin connectors which use shared state and RPC with JSON to keep the UI state synchronized on the server. Finally, it discusses how Polymer allows exposing Vaadin widgets as reusable web components using shadow DOM and JavaScript interop from GWT.
More Related Content
![[WSO2 Integration Summit Madrid 2019] Integration + Ballerina](https://cdn.slidesharecdn.com/ss_thumbnails/wso2integrationsummitmadrid2019-integrationandballerina-190806044925-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![Java Web Programming [9/9] : Web Application Security](https://cdn.slidesharecdn.com/ss_thumbnails/javaweb-module9-130106071127-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to JavaCro'15 - GWT integration with Vaadin - Peter Lehto
More from HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
JavaCro'15 - GWT integration with Vaadin - Peter Lehto
- 1. GWT integration with Vaadin PeterLehto @peter_lehto expert & trainer
- 2.
- 3.
- 4.
- 6. Server driven UI frameworkwith GWT based thin client
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 22.
- 23. RequestBuilder RequestBuilder builder =new RequestBuilder(RequestBuilder.GET, url); try { builder.sendRequest(requestDataString, new RequestCallback() { @Override public void onResponseReceived(Request request, Response response) { int statusCode = response.getStatusCode(); String text = response.getText(); } @Override public void onError(Request request, Throwable exception) { // TODO Handle asynchronous problems } }); } catch (RequestException e) { // TODO Handle synchronous problems }
- 24.
- 25. RequestBuilder Good • It justworks Bad • Very low level
- 26.
- 27. Contact public class Contact{ private String name; private int yearOfBirth; private List<String> emailAddresses; 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" }, emailAddresses: ["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 emailAddresses = json.get("emailAddresses").isArray(); for (int i = 0; i < emailAddresses.size(); i++) { contact.getEmailAddresses().add( } }
- 32. JSONValue Good • It’s standard •Human readable • Compact format
- 33. JSONValue Good • It’s standard •Human readable • Compact format Bad • Not completely typesafe • Boilerplate • Client only
- 34. What about theserver?
- 35. Jackson on theserver 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 interfaceContactMapper extends ObjectMapper<Contact> {} public Contact parseContact(String jsonString) { ContactMapper mapper = GWT.create(ContactMapper.class); Contact contact = mapper.read(jsonString); return contact; }
- 38. Jackson Good • Minimal boilerplate • Can share code between server and client Bad • Only creating and reading Strings
- 39.
- 40. Remote procedure call publicinterface 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 • Simple but powerful concept • Default solution • Optimized Bad • Sending large object graph • Polymorphism problems
- 42. Prefer JSON +REST? - me too :)
- 43. REST GET /contacts DELETE /contacts/5 PUT/contacts { name: “John Doe”, ... }
- 44. JAX-RS @Path("/contacts") public interface ContactsService{ @GET public List<Contact> listContacts(); @Path("/{id}") @DELETE public void deleteContact(@PathParam("id") int id); @PUT public void createContact(Contact contact); }
- 45.
- 46. So how aboutVaadin? - Put server in charge!
- 48. State synchronization public classContactState extends SharedState { public String name; @DelegateToWidget public int yearOfBirth; } @OnStateChange("name") private void updateName() { doSomethingWithTheName(getState().name); }
- 49. RPC public interface ContactRpcextends ServerRpc { public void deleteContact(int id); } // Register RPC handler on the server registerRpc(new ContactRpc() { @Override public void deleteContact(int id) { ContactDAO.deleteById(id); } }); // Send RPC from the client public void sendDelete(int contactId) { getRpcProxy(ContactRpc.class).deleteContact(contactId); }
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. ButtonConnector @Connect(Button.class) public class ButtonConnectorextends AbstractComponentConnector implements ClickHandler, FocusHandler { public void init() { getWidget().addClickHandler(this); } @OnStateChange({ "caption", "captionAsHtml" }) void setCaption() { getWidget().setCaptionText(getState()); }
- 61. public void onClick(ClickEventevent) { getRpcProxy(ButtonServerRpc.class). click(buildDetails(event)); } }
- 62. ButtonState public class ButtonStateextends AbstractComponentState { … public String caption; public boolean disableOnClick; public int tabIndex; … }
- 63. ButtonServerRPC public interface ButtonServerRpcextends ServerRpc { public void click(MouseEventDetails mouseEventDetails); }
- 64. Server RPC implementation publicclass Button extends AbstractComponent { … private ButtonServerRpc rpc = new ButtonServerRpc() { public void click(MouseEventDetails details) { fireClick(details); } … }
- 65. Vaadin Connectors Good • Statefulserver • Websocket support • Integrated JSON Bad • Stateful server • Tied to framework
- 66.
- 67.
- 68.
- 69.
- 70.
- 71. What shadow DOMlooks like?
- 72.
- 73.
- 74. Vaadin Grid ClientWidget Expose JavaScript API via JsInterop from GWT 2.8 Use Shadow DOM and HTML imports from Polymer
- 75. @JsNamespace(JS.VAADIN_JS_NAMESPACE) @JsExport @JsType public class GridComponent… … privatefinal Grid grid; // Grid widget public JSColumn addColumn(JSColumn jsColumn, Object beforeColumnId) { grid.addColumn } …
- 76. @JsType public interface JSColumn{ @JsProperty String getName(); @JsProperty void setName(String s);
- 77. <link rel='import' href='vaadin-grid-import.html'> <linkrel='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.
- 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.