Download as PDF, PPTX
Uploaded byJoonas Lehtinen
Vaadin today and tomorrow
Vaadin is an open source web framework for building web applications and websites. It began in 2001 and has gone through several major versions including versions 3, 4, 5, 6, and the current version 7. Version 7 features a renewed JavaScript architecture, Sass support, redesigned forms, and built-in view management. The Vaadin framework is used by over 50,000 companies worldwide and has a large community on GitHub.
Vaadin today and tomorrow
- 1. Vaadin 7 today and tomorrow @joonaslehtinen Vaadin, Founder
- 2. v0.1 2001 v3 2002 Open Source
- 3. v4 2006 Ajax v5 2007
- 4. v6 2009 7
- 6. 934 tickets closedduring 16 months of development 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
- 9.
- 13. Renewed JS Sass from Inside HTML5 += UI GWT RPC Complete State Field stack
- 24.
- 25.
- 29.
- 30. Server Pr od Op t - im r uc fo ti ize df d vit ize y or tim e rol Op t- s d ont i C ien Cl
- 31.
- 39.
- 41. 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; } }
- 42. @Title("Vaadin 7 Application") publicclass Vaadin7uiUI extends UI { public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); } }
- 43. Built-in high level Viewmanagement
- 44.
- 45.
- 46. Mixins Demo
- 47.
- 48. public class Employee{ String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee));
- 51. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { 6 DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
- 52. 7 GridLayoutform = 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));
- 53. public class Person{ @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 54. “Joonas Lehtinen” presentation Component model firstName = “Joonas” Demo lastName = “Lehtinen”
- 55.
- 56. Widget 6 Paintable Variable client Changes server UIDL Component
- 57. Widget 7 Connector client State server RPC Component Demo
- 58. public interface ButtonRpcextends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click( private ButtonRpc rpc = MouseEventDetails details) { RpcProxy.create(ButtonRpc.class, this); // do stuff } public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() { } registerRpc(rpc); } client server
- 59.
- 60. Publish API fromJava getPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
- 61. Widget implementation inJavaScript 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); } }); }
- 62. Server-side Java APIfor Widget public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters } }
- 63.
- 64.
- 65. Lighter DOM Minimized reflows 6.8 7.0
- 68.
- 70.
- 71. Vaadin Framework 7.1 • Server push • Based on Atmosphere Framework • Web sockets, long polling and polling • Calendar (now under Apache 2.0 license) • Limited IE 10 support without touch • CSS string inject • Renewed debug console features ◦ Redesigned UI/UX for debug window ◦ Optimize widgetset • Arithmetics for SASS • Packaging CSS for add-ons without a widgetset
- 73. Vaadin Charts •1.1 version to be released in May, 2013 • New charts: • Funnel • Box plot • Waterfall • Bubble • Error bars • Different coloring of a graph above and below a threshold • Pinch zooming and panning for touch devices
- 81. Vaadin TouchKit • 3.0 version to be released in April • Vaadin 7 support • New components: • URLField • Datefield • Combobox • Preparing WP8 support
- 82. Vaadin TestBench • 3.1 adds headless mode in May
- 83. Vaadin CDI • Alpha to be released in the end of March • Apache 2.0 License
- 84. Vaadin JPAContainer • License changed to Apache 2.0 • Vaadin 7 compatible version released in March
- 85. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen