Download as PDF, PPTX
Uploaded byJoonas Lehtinen
Vaadin 7
This document provides an introduction to Vaadin, a Java-based web application framework. It highlights key features of Vaadin 7 including rich UI components, support for multiple browsers and devices, built-in themes, and an architecture that separates the user interface from the data model and server communication. The document also summarizes new features in Vaadin 7 such as a windowing API, Sass support, redesign forms, RPC and state handling, and server push capabilities.
More Related Content
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
Vaadin 7
- 1.
- 2.
- 3.
- 4.
- 6. User interface framework forrich web applications
- 7.
- 8.
- 9.
- 10.
- 12.
- 13.
- 14. businessconsumer “million” users “500”users >>100,000€ / view 5,000€ / view 10 views 1€/user 50 views 500€/user
- 15. Challenge How to buildconsumer grade UX with business system budget
- 16.
- 17.
- 18.
- 19.
- 20.
- 24. What kind ofdevices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% es your app support? 25.7% Phones 36.1% O thers2.1% “Since gw in the enterp explain why tab popular than supp phones” Daniel iPhone Android W P 8 pplication UI for r 98% of apps overtaken the num ber rope. 36.1% Tablets “Since gwt is used extensi in the enterprise, this m explain why tablets popular than su phones” iPadAndroid W indow s 8
- 25.
- 29.
- 34.
- 36. InMemory, Bean, Method, Collection,JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 37.
- 38.
- 39.
- 40. Web application layers JavaScript Javato JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
- 41. Web application layers JavaScript Javato JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required 1 layer vs 3 layers -50% codelines -50% development -50% maintenance easier to learn
- 42. How does itwork, really?
- 44. • Initial HTML •CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
- 45. • name=”Joonas” • buttonclicked 261 bytes
- 47. • name=”Joonas” • buttonclicked 261 bytes • Add notification 267 bytes
- 48.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. 934 tickets closedduring 16 months of development 3939 commits made by 23 authors Oldest ticket created 3/2008 Newest ticket 2/2013 3939 commits made by 23 authors 93 % by 6 persons > 1 000 000 lines of code touched
- 63.
- 73.
- 74.
- 75.
- 79.
- 80.
- 81.
- 82.
- 84.
- 86. public class Vaadin6Appextends Application { public void init() { setMainWindow(createWindow()); } public Window getWindow(String name) { Window window = super.getWindow(name); if (window == null) { window = createWindow(); window.setName(name); addWindow(window); } return window; } private Window createWindow() { Window window = new Window("Vaadin 6 Application"); window.addComponent(new TextField("What is your name")); window.addComponent(new Button("Do not push me")); return window; } }
- 87. @Title("Vaadin 7 Application") publicclass HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 88. @PreserveOnRefresh @Title("Vaadin 7 Application") publicclass HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 89. Built-in high level Viewmanagement Demo
- 90.
- 91.
- 92. public class Employee{ String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
- 95. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } }); 6
- 96. GridLayout form =new GridLayout(2,2) { TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); TextField salary = new TextField("Salary"); DateField birthDate = new DateField("Birth date"); { birthDate.setResolution(Resolution.DAY); setSpacing(true); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); } }; BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee)); 7
- 97. public class Person{ @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 98. model presentation “Joonas Lehtinen” Component firstName =“Joonas” lastName = “Lehtinen” Demo
- 99.
- 100.
- 101.
- 102. public interface ButtonRpcextends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this); public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); } serverclient private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; public Button() { registerRpc(rpc); } Demo
- 103.
- 104. getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback(){ public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Publish API from Java window.myCallback('foo', 100); Use from JavaScript
- 105. public class MyWidgetextends 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(); } } Server-side Java API for Widget
- 106. 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); } }); } Widget implementation in JavaScript
- 107.
- 108.
- 109.
- 110.
- 112.
- 113. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0
- 114. Migration Guide: Vaadin 6to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
- 115. Download for Free vaadin.com/book 728pages 701 -93-1970-1 PDF, ePub, HTML
- 116.
- 117.
- 118.