Your SlideShare is downloading. ×
0
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Vaadin7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Vaadin7

796

Published on

My Vaadin 7 presentation at Confess

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
796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
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

×