vaadin today and tomorrow

Download Vaadin today and tomorrow

Post on 10-May-2015

992 views

Category:

Documents

3 download

Embed Size (px)

DESCRIPTION

My presentation at Vaadin Meetup Paris

TRANSCRIPT

  • 1.Vaadin7 today and tomorrow@joonaslehtinenVaadin, Founder

2. v0.12001v3 2002 OpenSource 3. v4 2006Ajax v52007 4. v62009 7 5. 934 tickets closed during 16 months ofdevelopmentOldest ticket created 3/2008Newest ticket 2/20133939 commits made by 23 authors93 % by 6 persons> 1 000 000 lines of code touched 6. https://github.com/vaadin/dashboard-demo 7. Renewed JSSass from Inside HTML5+=UIGWTRPCCompleteState Fieldstack 8. 7Favorite picks 9. Vaadin += GWT 10. GWTCompatible 11. ServerPr odOpt- im ruc fo ti izedf d vit izeyortim e rolOpt-s d ont i C ien Cl 12. Architecture 13. New Windowing API 14. public class Vaadin6App extends 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; }} 15. @Title("Vaadin 7 Application")public class Vaadin7uiUI extends UI { public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }} 16. Built-in high levelView management 17. Sass 18. Variables & functionsDemo 19. Mixins Demo 20. RedesignedForms 21. public class Employee { String firstName; String lastName; double salary;6 Date birthDate;// Getters, setters, }Form form = new Form();form.setItemDataSource( new BeanItem(employee)); 22. 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()); } }); 23. 7 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 fieldGroup = new BeanFieldGroup(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem(employee)); 24. public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setters + getters} 25. Joonas Lehtinen presentation Component model rstName = JoonasDemolastName = Lehtinen 26. RPCState 27. Widget6 PaintableVariableclient Changesserver UIDL Component 28. Widget7Connector clientState serverRPCComponentDemo 29. public interface ButtonRpc extends 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); }clientserver 30. JavaScriptAdd-ons 31. Publish API from JavagetPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScriptwindow.myCallback(foo, 100); 32. Widget implementation in JavaScriptwindow.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 componentelement.bind(plotclick, function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); }});} 33. Server-side Java API for Widgetpublic 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>> plotSeriesData = new ArrayList>>(); // getters & setters }} 34. HTML5 35. 36. Lighter DOM Minimized reflows6.87.0 37. IE8 (norm) 38. Roadmap 39. 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 40. 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 41. Vaadin TouchKit 3.0 version to be released in April Vaadin 7 support New components: URLField Dateeld Combobox Preparing WP8 support 42. Vaadin TestBench 3.1 adds headless modein May 43. Vaadin CDI Alpha to be released in the end of March Apache 2.0 License 44. Vaadin JPAContainer License changed to Apache 2.0 Vaadin 7 compatible version released in March 45. ? joonas@vaadin.comvaadin.com/joonas@joonaslehtinen