Vaadin7

1,123 views

Published on

My Vaadin 7 presentation at Confess

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,123
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Vaadin7

  1. 1. Vaadin 7 Joonas Lehtinen Founder / Vaadin @joonaslehtinen
  2. 2. Intro to Vaadin new Label( “Hello world”)
  3. 3. New in 7
  4. 4. Gettingstarted QA
  5. 5. User interfaceframework for rich web applications
  6. 6. java html
  7. 7. Why on earth?
  8. 8. expectations
  9. 9. reality
  10. 10. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  11. 11. Challenge How to build consumergrade UX with business system budget
  12. 12. How?
  13. 13. 123Key Ideas
  14. 14. 1RichComponents
  15. 15. User IntefaceData Source Theme
  16. 16. User IntefaceData Source Theme
  17. 17. User IntefaceData Source Theme
  18. 18. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  19. 19. 2Server + Client
  20. 20. Web application layers Backend Web Java to RPC JavaScript server server JavaScriptGWT Vaadin required required optional optional optional required required required required optionalJS required required required required
  21. 21. How does it work,really?
  22. 22. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total compress307k reduced widgetset135k
  23. 23. • name=”Joonas”• button clicked261 bytes
  24. 24. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  25. 25. Hello World!
  26. 26. Sourcehttps://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  27. 27. 3EmbracingJava
  28. 28. Any language on JVM
  29. 29. Internet Explorer Chrome Firefox Safari Opera iOS Android
  30. 30. No browser pluginsNothing to install
  31. 31. Servlet Portlet(most) clouds
  32. 32. EclipseIntelliJ IDEA Netbeans Maven Ant ∙∙∙
  33. 33. 7Vaadin today
  34. 34. v0.12001 v3 2002 Open Source
  35. 35. v4 2006Ajax v5 2007
  36. 36. 7 v6 Feb2009
  37. 37. 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
  38. 38. Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  39. 39. vaadin.com/7
  40. 40. 7Favorite picks
  41. 41. Vaadin += GWT
  42. 42. GWTCompatible
  43. 43. Server Pr Op - od t r im fo uc d ti ize ize vit dfy or tim e rol Op t- s d ont i C ien Cl
  44. 44. Architecture
  45. 45. New Windowing API
  46. 46. 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; }}
  47. 47. @Title("Vaadin 7 Application")public class HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); }}
  48. 48. @PreserveOnRefresh@Title("Vaadin 7 Application")public class HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); }}
  49. 49. DemoBuilt-in high levelView management
  50. 50. DemoSass
  51. 51. RedesignedForms
  52. 52. public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  53. 53. 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()); } });
  54. 54. 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<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
  55. 55. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  56. 56. Demo “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  57. 57. RPCState
  58. 58. 6 Widget Paintable Variableclient Changesserver UIDL Component
  59. 59. 7 Widget Demo Connectorclient Stateserver RPC Component
  60. 60. public interface ButtonRpc extends ServerRpc { Demo 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
  61. 61. JavaScriptAdd-ons
  62. 62. Publish API from JavagetPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScriptwindow.myCallback(foo, 100);
  63. 63. Server-side Java API for Widgetpublic 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(); }}
  64. 64. 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 component element.bind(plotclick, function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } });}
  65. 65. Roadmap
  66. 66. Vaadin Framework 7.1 April • 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 SCSS / CSS for add-ons
  67. 67. Vaadin Charts 1.1 May • 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
  68. 68. Vaadin TouchKit 3.0 April • Vaadin 7 support • New components: • URLField • Datefield • Combobox
  69. 69. Vaadin TestBench 3.1 May • Headless mode with Phantom JS
  70. 70. Vaadin CDI • Registering UI with @CDIUI annotation (web.xml no more) • Registering Views (to CDIViewManager) • Decoupling UI:s by injecting UI components (handy for MVP) • Injecting all the normal Java EE stuff (ejbs, events, ...) • UI Scope to complement the session scope • Supports JAAS (set @RolesAllowed for a View, ...) • 1.0 alpha to be released any day now (in staging repo today) • Apache 2.0 License
  71. 71. Vaadin JPAContainer • License changed to Apache 2.0 • Vaadin 7 compatible version released in March
  72. 72. gettingstarted
  73. 73. Eclipse
  74. 74. mvn archetype:generate -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.3
  75. 75. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  76. 76. Download for Free vaadin.com/book-93- 1970 -1701 728 pages PDF, ePub, HTML
  77. 77. ?joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×