Vaadin 7

2,696 views

Published on

My Introduction to Vaadin 7 presentation at Jfokus 2013

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

  • Be the first to like this

No Downloads
Views
Total views
2,696
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
81
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin 7

  1. 1. 7Vaadin today @joonaslehtinen
  2. 2. Intro to Vaadin new Label( “Hello world”)
  3. 3. Who is [using] Vaadin? 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. enterpriseconsumers
  9. 9. expectations
  10. 10. reality
  11. 11. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  12. 12. Problem How to build consumergrade UX with business system budget
  13. 13. How?
  14. 14. 123Key Ideas
  15. 15. 1RichComponents
  16. 16. User IntefaceData Source Theme
  17. 17. User IntefaceData Source Theme
  18. 18. User IntefaceData Source Theme
  19. 19. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  20. 20. 2Server + Client
  21. 21. 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
  22. 22. How does it work,really?
  23. 23. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  24. 24. • name=”Joonas”• button clicked150 bytes
  25. 25. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  26. 26. Trying it out
  27. 27. https://github.com/jojule/NotesDemo
  28. 28. 3EmbracingJava
  29. 29. Any JVMLanguage
  30. 30. Internet Explorer Chrome Firefox Safari Opera iOS Android
  31. 31. No browser pluginsNothing to install
  32. 32. Servlet Portlet(most) clouds
  33. 33. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  34. 34. 7Vaadin today 0.0
  35. 35. v0.12001 v3 2002 Open Source
  36. 36. v4 2006Ajax v5 2007
  37. 37. 7 v6 today2009
  38. 38. Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  39. 39. 7Favorite picks
  40. 40. Vaadin += GWT
  41. 41. GWTCompatible
  42. 42. 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
  43. 43. Se rve r P r- e Op odu sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  44. 44. Architecture
  45. 45. New Windowing API
  46. 46. Built-in high levelView management
  47. 47. 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; }}
  48. 48. @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")); }}
  49. 49. Sass
  50. 50. Variables & functions
  51. 51. Mixins
  52. 52. RedesignedForms
  53. 53. public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  54. 54. 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()); } });
  55. 55. 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));
  56. 56. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  57. 57. “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  58. 58. RPCState
  59. 59. Widget 6 Paintable Variableclient Changesserver UIDL Component
  60. 60. Widget 7 Connectorclient Stateserver RPC Component
  61. 61. 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); } client server
  62. 62. JavaScriptAdd-ons
  63. 63. 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);
  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. 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<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters }}
  66. 66. gettingstarted
  67. 67. Eclipse
  68. 68. mvn archetype:generate -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0
  69. 69. Download for Free vaadin.com/book ework s thato u an d ~700 pages
  70. 70. vaadin.com/vaadin7
  71. 71. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×