Downloaded 32 times
![> var foo = [0];
> foo == !foo;](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-5-320.jpg)
![> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-6-320.jpg)
![> [] + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-7-320.jpg)
![> [] + [];
>
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-8-320.jpg)
![> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-9-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-10-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-11-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-12-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-13-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-14-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-15-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-16-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-17-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-18-320.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/85/GWT-integration-with-Vaadin-19-320.jpg)
![> var foo = [0];
> foo == !foo;](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-5-2048.jpg)
![> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-6-2048.jpg)
![> [] + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-7-2048.jpg)
![> [] + [];
>
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-8-2048.jpg)
![> [] + [];
>
> [] + {};
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-9-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-10-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-11-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-12-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-13-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-14-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-15-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-16-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-17-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-18-2048.jpg)
![> [] + [];
>
> [] + {};
> [object Object]
> {} + [];
> 0
> {} + {};
> NaN
> NaN == NaN;
> false
> typeof NaN;
> number
> var foo = [0];
> foo == !foo;
> true](https://image.slidesharecdn.com/geekout-vaadin-150623132659-lva1-app6892/75/GWT-integration-with-Vaadin-19-2048.jpg)
Uploaded byPeter Lehto
GWT integration with Vaadin
This document discusses Vaadin, GWT, and Web Components. It contains the following key points: 1. Vaadin is a server-driven UI framework that uses GWT for client-side rendering. 2. Vaadin connectors bridge GWT and Vaadin by forming connections between client-side GWT widgets and server-side Vaadin components. 3. Web Components are emerging web standards for encapsulated custom elements that will be important in the future, but browser support is still lacking without polyfills like Polymer.
More Related Content
Similar to GWT integration with Vaadin
GWT integration with Vaadin
- 1.
- 2.
- 3.
- 5. > var foo= [0]; > foo == !foo;
- 6. > var foo= [0]; > foo == !foo; > true
- 7. > [] +[]; > var foo = [0]; > foo == !foo; > true
- 8. > [] +[]; > > var foo = [0]; > foo == !foo; > true
- 9. > [] +[]; > > [] + {}; > var foo = [0]; > foo == !foo; > true
- 10. > [] +[]; > > [] + {}; > [object Object] > var foo = [0]; > foo == !foo; > true
- 11. > [] +[]; > > [] + {}; > [object Object] > {} + []; > var foo = [0]; > foo == !foo; > true
- 12. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > var foo = [0]; > foo == !foo; > true
- 13. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {};> var foo = [0]; > foo == !foo; > true
- 14. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > var foo = [0]; > foo == !foo; > true
- 15. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > var foo = [0]; > foo == !foo; > true
- 16. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > var foo = [0]; > foo == !foo; > true
- 17. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > var foo = [0]; > foo == !foo; > true
- 18. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 19. > [] +[]; > > [] + {}; > [object Object] > {} + []; > 0 > {} + {}; > NaN > NaN == NaN; > false > typeof NaN; > number > var foo = [0]; > foo == !foo; > true
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Java -> JavaScript -Optimizing compiler GWT
- 28. Browser specific compilation - Nobrowser differences GWT
- 29. Pure Java - Webapps without JavaScript GWT
- 30.
- 33. Server driven UI frameworkwith GWT based thin client
- 34.
- 35. High abstraction level -Components & Events
- 36. Full stack Java -UI runs in JVM
- 37. Rapid development - NoJavaScript compilation
- 38. Any JVM language -Java 8, Scala, Lambdas…
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 50. • Loader page •CSS Theme • Images • JavaScript
- 51. • Loader page •CSS Theme • Images • JavaScript 135k Compressed & reduced thin client
- 54. • name=”Joonas” • buttonclicked 261 bytes
- 56. • name=”Joonas” • buttonclicked 261 bytes • Add notification 267 bytes
- 57.
- 58. 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 }
- 59.
- 60. RequestBuilder Good • It justworks Bad • Very low level
- 61. GWT Remote procedurecalls public interface ContactService extends RemoteService { void saveContact(Contact contact); List<Contact> getContacts(); } public interface ContactServiceAsync { void saveContact(Contact contact, AsyncCallback<Void> callback); void getContacts(AsyncCallback<List<Contact>> }
- 62. GWT-RPC Good • Simple but powerful concept • Default solution • Optimized
- 63. GWT-RPC Good • Simple but powerful concept • Default solution • Optimized Bad • Sending large object graph • Polymorphism problems
- 64.
- 66. State synchronization public classContactState extends SharedState { public String name; @DelegateToWidget public int yearOfBirth; }
- 67. State synchronization public classContactState extends SharedState { public String name; @DelegateToWidget public int yearOfBirth; } @OnStateChange("name") protected void updateName() { doSomethingWithTheName(getState().name); }
- 68. Vaadin RPC public interfaceContactRpc extends ServerRpc { public void deleteContact(int id); }
- 69. Vaadin RPC public interfaceContactRpc extends ServerRpc { public void deleteContact(int id); } // Register RPC handler on the server registerRpc(new ContactRpc() { @Override public void deleteContact(int id) { ContactDAO.deleteById(id); } });
- 70. Vaadin RPC public interfaceContactRpc extends 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); }
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80. @Connect(value = Button.class) publicclass ButtonConnector extends AbstractComponentConnector implements ClickHandler {
- 81. @Connect(value = Button.class) publicclass ButtonConnector extends AbstractComponentConnector implements ClickHandler { @OnStateChange({ "caption", "captionAsHtml" }) void setCaption() { getWidget().setCaptionText(getState().caption); }
- 82. @Connect(value = Button.class) publicclass ButtonConnector extends AbstractComponentConnector implements ClickHandler { @OnStateChange({ "caption", "captionAsHtml" }) void setCaption() { getWidget().setCaptionText(getState().caption); } void onClick(ClickEvent event) { getRpcProxy(ButtonServerRpc.class).click(); }
- 83.
- 84. Vaadin Connectors Good • Statefulserver • Websocket support • JSON
- 85. Vaadin Connectors Good • Statefulserver • Websocket support • JSON Bad • Stateful server • Tied to framework
- 86.
- 87.
- 88.
- 91. <x-component></x-component> var proto =Object.create(HTMLElement.prototype); proto.createdCallback = function() { var div = document.createElement('div'); div.textContent = 'This is Custom Element'; this.appendChild(div); }; var XComponent = document.registerElement('x-component', { prototype: proto });
- 92. var host =document.querySelector('#host'); var root = host.createShadowRoot(); // Create a Shadow Root var div = document.createElement('div'); div.textContent = 'This is Shadow DOM'; root.appendChild(div); // Append elements to the Shadow Root
- 93. index.html <link rel="import" href="component.html"> component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
- 94. <template id="template"> <style> ... </style> <div> <h1>Web Components</h1> <imgsrc="http://webcomponents.org/img/logo.svg"> </div> </template> <script> var template = document.querySelector('#template'); var clone = document.importNode(template.content, true); var host = document.querySelector('#host'); host.appendChild(clone); </script> <div id="host"></div>
- 96.
- 97. Statically typed Java Components Staticallytyped Java Components
- 98. Statically typed Java Components AutomatedCommunication Statically typed Java Components
- 99. Statically typed Java AutomatedCommunication Statically typed Java
- 100. Statically typed Java AutomatedCommunication Statically typed Java
- 101.
- 102.
- 104.
- 107. Custom Elements Support bybrowser market share
- 108. Shadow DOM Support bybrowser market share
- 109. HTML Import Support bybrowser market share
- 110. HTML Template Support bybrowser market share
- 111. Summary Custom Element HTML Template ShadowDOM HTML Import CHROME OPERA FIREFOX SAFARI IE
- 112. Do web components actuallywork? No, but Yes :)
- 114. webcomponents.js Polyfill http://webcomponents.org/polyfills/ Web Components Custom Elements HTMLImports Shadow DOM DOM WeakMap Mutation Observers{
- 116.
- 117.
- 118.
- 119. What shadow DOMlooks like?
- 120.
- 122. Vaadin Grid ClientWidget
- 123. Vaadin Grid ClientWidget Exposed JavaScript API via JsInterop from GWT 2.7+
- 124. Vaadin Grid ClientWidget Exposed JavaScript API via JsInterop from GWT 2.7+ Wrapped as Polymer Element
- 125. @JsNamespace(JS.VAADIN_JS_NAMESPACE) @JsExport @JsType public class GridComponent… … privatefinal com.vaadin.client.widgets.Grid grid; // Grid widget public JSColumn addColumn(JSColumn jsColumn, Object beforeColumnId) { grid.addColumn } … GridComponent
- 126. <link rel='import' href='../bower_components/polymer/polymer.html'/> <script type="text/javascript" language="javascript" src=“VaadinGridImport.nocache.js" /> <dom-module id="v-grid"> <template> … </template> </dom-module> <script> VGrid = Polymer({ 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)); … }, vaadin-grid.html
- 127.
- 128.
- 129.
- 130.
- 131.
- 133. Automated Communication Statically typedJava Components
- 134. Automated Communication Statically typedJava Componentsweb
- 135. Automated Communication Statically typedJava Components Framework Components web
- 136.
- 137. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework
- 138. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering
- 139. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin
- 140. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web!
- 141. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web! 5. Polymer polyfills today’s browsers to support emerging features
- 142. Lessons learned today 1.Vaadin is server driven high abstraction level UI framework 2. GWT is used for client side rendering 3. Vaadin connectors form a bridge between GWT and Vaadin 4. Web Components will be the next big thing in the web! 5. Polymer polyfills today’s browsers to support emerging features 6. Vaadin Components will utilize Polymer providing framework independent way of using the best component library available
- 144.