JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto

2,212 views

Published on

Vaadin is quickly popularizing Java framework for developing rich and interactive server-driven web applications. Vaadin is built around core Servlet and Google Web Toolkit (GWT) technologies and it strives to developer productivity by providing large library of components and ready made functionality that hides the hard parts of web development allowing developers to concentrate to the real business problem at hand. During this session we’ll cover the basics of building Vaadin based web applications: layouting, data binding, application deployment and Vaadin Touckit integration for mobile devices. Attending the speech does not require thorough understanding of web technologies in general, session will include demonstration and live coding.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto

  1. 1. Vaadin 7Building web applications Peter Lehto Vaadin Expert
  2. 2. What is Vaadin? App lifecycle Why Vaadin?
  3. 3. Structuring the App Building Responsive Layouts
  4. 4. How to get started? QA Field Data binding Server @Push
  5. 5. ?
  6. 6. User interface framework for Rich Internet Applications with pure Java
  7. 7. Servlet backend GWT frontend
  8. 8. Vaadin += GWT
  9. 9. Why?
  10. 10. Developer Productivity Rich UX Why?
  11. 11. JavaScript DOM AJAX JSON … htmljava Why?
  12. 12. App Lifecycle
  13. 13. http://localhost:8080/Vaadin/ App Lifecycle
  14. 14. New session Loader page
  15. 15. Vaadin Loader page Loads theme Loads widgetset Fetch root configuration
  16. 16. New UI instance is created UI.init() is called
  17. 17. public class MyVaadinUI extends UI { ! @WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class) public static class Servlet extends VaadinServlet { } ! @Override protected void init(VaadinRequest request) { } }
  18. 18. public class MyVaadinUI extends UI { ! @WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class) public static class Servlet extends VaadinServlet { } ! @Override protected void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); ! final TextField textField = new TextField("Name"); final Button button = new Button("Greet"); ! layout.addComponents(textField, button); ! setContent(layout); } }
  19. 19. public class MyVaadinUI extends UI { ! @WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class) public static class Servlet extends VaadinServlet { } ! @Override protected void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); ! final TextField textField = new TextField("Name"); final Button button = new Button("Greet"); ! layout.addComponents(textField, button); ! setContent(layout); ! button.addClickListener(new Button.ClickListener() { @Override public void buttonClick(ClickEvent event) { Notification.show("Hello " + textField.getValue()); } }); } }
  20. 20. Vaadin UIDL • UI is added to the DOM
  21. 21. Vaadin
  22. 22. Vaadin User activity
  23. 23. public class MyVaadinUI extends UI { ! … ! @Override protected void init(VaadinRequest request) { … ! button.addClickListener(new Button.ClickListener() { @Override public void buttonClick(ClickEvent event) { Notification.show("Hello " + textField.getValue()); } }); } }
  24. 24. Vaadin UIDL
  25. 25. Vaadin Heart beats
  26. 26. No user activity? 3 heartbeats are missed? UI is detached
  27. 27. closeIdleSession=true Session timeout expires after last non-heartbeat request Session and all of its UIs are closed
  28. 28. VaadinServlet HttpSession VaadinSession n active users UI 1 n 1 1 1 n Resources 1 ** 1 1 servlet
  29. 29. UI instance can be preserved between refreshes with @PreserveOnRefresh annotation
  30. 30. Structuring the App
  31. 31. View: any logical collection of components Structuring the App
  32. 32. Navigation between views is done by exchanging the content of the UI or by replacing components in a layout Structuring the App
  33. 33. public class CustomersView extends CustomComponent implements com.vaadin.navigator.View { ! @Override public void enter(ViewChangeEvent event) { } ! } Structuring the App public class InvoicesView extends CustomComponent implements com.vaadin.navigator.View { ! @Override public void enter(ViewChangeEvent event) { } ! }
  34. 34. Structuring the App @Override protected void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); setContent(layout); Navigator navigator = new Navigator(this, layout); navigator.addView("customers", CustomerView.class); navigator.addView("invoices", InvoicesView.class); ! … }
  35. 35. Activating a view programmatically UI.getCurrent().getNavigator().navigateTo("customers"); Structuring the App
  36. 36. http://localhost:8080/vaadin/#!customers ! #! : Navigator identifier customers : View name Navigating to a view via URL
  37. 37. Building Responsive Layouts
  38. 38. Building Responsive Layouts public class DashBoard extends CssLayout implements com.vaadin.navigator.View { ! public DashBoard() { setSizeFull(); addStyleName("dashboard"); Responsive.makeResponsive(this); }
  39. 39. Building Responsive Layouts .stylename[width-range~="300-500px"] .stylename[height-range~="300-500px"]
  40. 40. Server @Push
  41. 41. Request-response cycle ServerClient State Click Server @Push
  42. 42. Request-response cycle with polling ServerClient Poll Poll State Click Progress Indicator Server @Push
  43. 43. Request-response cycle with push ServerClient State Click Progress Indicator Server @Push
  44. 44. To use push Always use locking with UI.access(Runnable) or VaadinSession.lock() when modifying the UI from an external thread Annotate UI with @Push Include vaadin-push JAR in your project Server @Push
  45. 45. Technical details Manually managed pushing also available Fallback to the best supported push method: Long polling or Streaming Implemented with the Atmosphere library using WebSockets Server @Push
  46. 46. Field Data binding
  47. 47. Examples of Fields Field Data binding
  48. 48. Fields are bound to Properties which are simple objects with type and value
  49. 49. public class Customer { private String name; private Date birthDate; private Address address; ! public String getName() { return name; } ! public void setName(String name) { this.name = name; } public Date getBirthDate() { return birthDate; } ! public void setBirthDate(Date birthDate) { this.birthDate = birthDate; } ! public Address getAddress() { return address; } ! public void setAddress(Address address) { this.address = address; } }
  50. 50. Customer customer = getCustomer(); TextField nameField = new TextField(); MethodProperty<String> nameProperty = new MethodProperty<String>(customer, "name"); ! nameField.setPropertyDataSource(nameProperty); Field Data binding
  51. 51. BeanItem<Customer> Field Data binding
  52. 52. Customer customer = getCustomer(); ! TextField nameField = new TextField(); BeanItem<Customer> customerBean = new BeanItem<Customer>(customer); nameField.setPropertyDataSource(customerBean.getItemProperty("name")); Field Data binding
  53. 53. FieldGroup is used to bind multiple properties from Item Field Data binding
  54. 54. Customer customer = getCustomer(); BeanItem<Customer> customerItem = new BeanItem<Customer>(customer); FieldGroup fieldGroup = new FieldGroup(customerItem); fieldGroup.bind(new TextField(), "name"); fieldGroup.bind(new PopupDateField(), "birthDate"); Field Data binding
  55. 55. Fields are Buffered and can be Committed and Discarded Field Data binding
  56. 56. Customer customer = getCustomer(); BeanItem<Customer> customerItem = new BeanItem<Customer>(customer); FieldGroup fieldGroup = new FieldGroup(customerItem); fieldGroup.bind(new TextField(), "name"); fieldGroup.bind(new PopupDateField(), “birthDate"); ! fieldGroup.commit(); Field Data binding
  57. 57. commit() Buffering Data source UI Logic Field Button Browser TextField value change Save button pressed ClickEvent
  58. 58. Field Data binding Collection<Customer> customers = getCustomers(); BeanItemContainer<Customer> customerContainer = new BeanItemContainer<Customer>(Customer.class, customers); Table customersTable = new Table(); ! customersTable.setContainerDataSource(customerContainer, Arrays.asList("name", "birthDate"));
  59. 59. How do I get started ?
  60. 60. Eclipse Download plugin from Marketplace How do I get started ?
  61. 61. IntelliJ IDEA Built-in support How do I get started ?
  62. 62. Netbeans Download plugin Netbeans Plugin Portal How do I get started ?
  63. 63. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.1.15 Maven How do I get started ?
  64. 64. Download for Free vaadin.com/book > 600 pages 01 -93-1970-1 PDF, ePub, HTML
  65. 65. Ohloh #2 used Java Web Framework Community of 100.000+
  66. 66. By Marko Grönroos ABOUT VAADIN .dzone.comGetMoreRefcardz!Visitrefcardz.com#85 Getting Started with Vaadin CONTENTS INCLUDE: About Vaadin Creating An Application Components Layout Components Themes Data Binding and more... Vaadin is a server-side Ajax web application development framework that allows you to build web applications just like with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components. In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache License 2.0. Figure 1: Vaadin Client-Server Architecture If the built-in selection of components is not enough, you can Figure 2: Architecture for Vaadin Applications Hot Tip You can get a reference to the application object from any component attached to the application with Event Listeners In the event-driven model, user interaction with user interface components triggers server-side events, which you can handle Web Browser Client-Side Engine Java Web Server Vaadin UI Components Your Java Application Web Service EJB DB Servlet Container User Application Event Listener Data Model Application Themes Application Resources Default Theme File Resources External Resources Database Data Binding Inherits Events Changes AJAX Requests Inherits UI Component Java Servlet Application Class Web Browser Client-Side Engine brought to you by...
  67. 67. Questions or Comments?
  68. 68. peter@vaadin.com Questions or Comments?

×