Your SlideShare is downloading. ×
  • Like
Vaadin7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Vaadin7

  • 697 views
Published

My Vaadin 7 presentation at Confess

My Vaadin 7 presentation at Confess

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
697
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
31
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Vaadin 7 Joonas Lehtinen Founder / Vaadin @joonaslehtinen
  • 2. Intro to Vaadin new Label( “Hello world”)
  • 3. New in 7
  • 4. Gettingstarted QA
  • 5. User interfaceframework for rich web applications
  • 6. java html
  • 7. Why on earth?
  • 8. expectations
  • 9. reality
  • 10. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  • 11. Challenge How to build consumergrade UX with business system budget
  • 12. How?
  • 13. 123Key Ideas
  • 14. 1RichComponents
  • 15. User IntefaceData Source Theme
  • 16. User IntefaceData Source Theme
  • 17. User IntefaceData Source Theme
  • 18. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  • 19. 2Server + Client
  • 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. How does it work,really?
  • 22. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total compress307k reduced widgetset135k
  • 23. • name=”Joonas”• button clicked261 bytes
  • 24. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  • 25. Hello World!
  • 26. Sourcehttps://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
  • 27. 3EmbracingJava
  • 28. Any language on JVM
  • 29. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 30. No browser pluginsNothing to install
  • 31. Servlet Portlet(most) clouds
  • 32. EclipseIntelliJ IDEA Netbeans Maven Ant ∙∙∙
  • 33. 7Vaadin today
  • 34. v0.12001 v3 2002 Open Source
  • 35. v4 2006Ajax v5 2007
  • 36. 7 v6 Feb2009
  • 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. Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  • 39. vaadin.com/7
  • 40. 7Favorite picks
  • 41. Vaadin += GWT
  • 42. GWTCompatible
  • 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. Architecture
  • 45. New Windowing API
  • 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. @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. @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. DemoBuilt-in high levelView management
  • 50. DemoSass
  • 51. RedesignedForms
  • 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. 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. 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. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  • 56. Demo “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  • 57. RPCState
  • 58. 6 Widget Paintable Variableclient Changesserver UIDL Component
  • 59. 7 Widget Demo Connectorclient Stateserver RPC Component
  • 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. JavaScriptAdd-ons
  • 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. 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. 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. Roadmap
  • 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. 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. Vaadin TouchKit 3.0 April • Vaadin 7 support • New components: • URLField • Datefield • Combobox
  • 69. Vaadin TestBench 3.1 May • Headless mode with Phantom JS
  • 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. Vaadin JPAContainer • License changed to Apache 2.0 • Vaadin 7 compatible version released in March
  • 72. gettingstarted
  • 73. Eclipse
  • 74. mvn archetype:generate -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.3
  • 75. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  • 76. Download for Free vaadin.com/book-93- 1970 -1701 728 pages PDF, ePub, HTML
  • 77. ?joonas@vaadin.com vaadin.com/joonas @joonaslehtinen