Vaadin 7.2
3 likes4,782 views
The document discusses Vaadin, an open source web framework for building Java applications. It provides: - An overview of recent releases and maintenance of Vaadin, including 11 releases in the past year and contributions from 37 authors. - A discussion of upcoming features in Vaadin 7.2 like improved grids, new themes, and support for hybrid applications that combine client-side and server-side UI layers. - An explanation of the benefits of different approaches to building web applications using only client-side, only server-side, or a hybrid model combining both approaches.
![Disclaimer
Vaadin 7.2 is nowhere
near release even though I
though it would have been released
by DevNexus when submitting this
presentation. I hope you would not take this a case
example for missing the estimated release dates. Even though it is clearly the case….
!
Sorry, it will be released soon [when it is ready]](https://image.slidesharecdn.com/vaadin7-140225001431-phpapp02/85/Vaadin-7-2-2-320.jpg)
![// Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
!
!
// CSS
.v-ui[width-range~="0-800px"] {
/* Styles that apply when the UI's width is
between 0 and 800 pixels */
}
.v-ui[width-range~="801px-"] {
/* Styles that apply when the UI's width is
over 800 pixels */
}
http://demo.vaadin.com/responsive/](https://image.slidesharecdn.com/vaadin7-140225001431-phpapp02/85/Vaadin-7-2-53-320.jpg)
Vaadin 7.2
- 2. Disclaimer Vaadin 7.2 is nowhere near release even though I though it would have been released by DevNexus when submitting this presentation. I hope you would not take this a case example for missing the estimated release dates. Even though it is clearly the case…. ! Sorry, it will be released soon [when it is ready]
- 3. 7 .1 11 maintenance releases since 28.6.2013 - one every 3 weeks 37 authors, 345 change sets
- 4. Agenda: The future Hybrid apps & RPC TB4 Beautifying apps with new sassy theme 7.2 Power(ful) Grid Vaadin 8 & GWT 3 7.2 TK4
- 5. Hybrid apps?
- 6. 8.6L/100km 2.5L/100km 0L/100km 13€/100km 4€/100km 1€/100km 550km range! 500km range! 450km range! gas stations everywhere gas stations everywhere growing charge station network
- 7. Web application layers Client-side UI Backend server Web server Communication JavaScript
- 8. Web application layers Backend server Web server Server-side UI Communication JavaScript Automated
- 9. Web application layers Backend server Web server Communication Java to JavaScript JavaScript GWT required required required JS Client-side UI required required required required optional required
- 10. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required Client-side UI required
- 11. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required Server-side UI & Client-side UI required
- 12. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required required required optional required required required required
- 13. Web application layers JS GWT Vaadin Backend server Web server Communication Java to JavaScript JavaScript required required optional optional optional required required 1 layer -50% dev. time required -50% maintenance optional vs required required required vs required required 3 layers full control over DOM and communications
- 14. ity tiv or df ize tim uc Op od Pr O tim p fo ed iz e rol d ont i C s r e v r e S r tien Cl
- 16. Client-side Use for Server-side Use for • Offline! • Most places ( - 50% cost )! • Low latency interaction! • High security! • Maximum scalability • Utilizing full Java platform Hybrid Benefits of the both sides, but adds complexity
- 17. Client-side Hybrid Server-side 3 layer UI 1-3 layer UI 1 layer UI Full control! You choose! Automated! offline ready architecture offline for chosen functionality connection to server required
- 21. Web Page Title Google http://domain.com Client-side GWT-RPC Server-side First name Table cell Table cell Table cell Table cell Table cell Client-side Vaadin-RPC Last name Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Delete New Last name Phone number rd mountains, Far far away, behind the wo ia and far from the countries Vokal the blind texts. Consonantia, there live okmarksgrove Separated they live in Bo mantics, a right at the coast of the Se large language ocean. Table cell Table cell Edit First name Server-side Email address Phone number Email address Save Offline Cancel n flows by their A small river named Dude the necessary place and supplies it with matic country, in regelialia. It is a paradise tences fly into which roasted parts of sen your mouth. ng has no Even the all-powerful Pointi ts it is an control about the blind tex ic life One day almost unorthograph d text by the however a small line of blin cided to leave name of Lorem Ipsum de r. The Big for the far World of Gramma to do so, Oxmox advised her not nds of bad because there were thousa Commas.
- 24. Client-side 4 classes 2 interfaces ~ 500 LOC Server-side 3X 1 class ! 190 LOC
- 25. Vaadin RPC State
- 27. public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this); ! public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); } client Demo private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; ! public Button() { registerRpc(rpc); } server
- 28. Client-side! (with Conntector) Client-side! (with GWT-RPC) AddressbookEditor AddressbookEditor create Connector Client Client! Server! Server RPC RPC create implements Proxy Connector (generated) State ServiceAsync place & ! serve View equal place View RPCServlet Frontend Service implements Backend Address AddressbookBackend Impl
- 29. Since 7.1 PUSH
- 32. Publish API from Java getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
- 33. Server-side Java API for Widget ! public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } ! public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); } ! ! }
- 34. Widget implementation in JavaScript window.com_example_MyWidget = function() { var element = $(this.getWidgetElement()); // Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); } ! // Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } }); }
- 35. Grid
- 36. Table: challenges • >10 years old architecture • Really hard to customize • Client-side API missing (and impossible) • Performance (heavy DOM tree) • Some key features missing (frozen columns, ..)
- 37. Grid: New generation table for the next 10 years? • Super fast on all devices • Unlimited datasets ("zillion rows") • Built for extensibility • Superset of features compared to Table • Client- and Server API
- 38. Escalator Renderer Connector Widget Widget Widget Grid Renderer Widget Per column Widget Editor row In headers and cells (Hierarchical) DataSource Component Component Component Component Component Editor row Grid (Hierarchical) DataSource In headers and cells
- 39. Escalator
- 40. Some of the key features in 7.2 • Renderers • Client-side API and data sources • Editor rows • "Billion pixel scrolling" • Hierarchical headers • Widgets in headers
- 41. Some of the key features in 7.x • Hierarchy • Variable row height • Embedding to super long pages (body scrollbars) • Infinite scrolling • Components in cells • Details rows
- 42. Valo Theme
- 43. Seriously SASSy
- 45. Mixins
- 46. Nesting
- 52. Responsive
- 53. // Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); } ! ! // CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ } http://demo.vaadin.com/responsive/
- 54. TouchKit 4
- 55. Vaadin TouchKit 4.0 New cross-platform theme http://demo.vaadin.com/parking/ Windows Phone 8 support
- 56. Vaadin TouchKit 4.0 New cross-platform theme http://demo.vaadin.com/parking/ Windows Phone 8 support
- 57. TestBench 4
- 58. ElementQuery API ButtonElement okButton = $(ButtonElement.class).caption("OK").first(); okButton.focus(); okButton.click(); List<AbstractLayoutElement> list = $(AbstractLayoutElement.class).all();
- 59. getting started
- 63. Netbeans Download plugin Netbeans Plugin Portal
- 65. Download for Free vaadin.com/book -93- 1970 -1 01 728 pages PDF, ePub, HTML
- 66. Apache License
- 67. community of 100.000+ developers Ohloh #2 used Java Web Framework