JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 908 views

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 ...

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.

Statistics

Views

Total Views
908
Views on SlideShare
197
Embed Views
711

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 711

http://javacro.org 710
http://www.google.hr 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Vaadin 7Building web applications Peter Lehto Vaadin Expert
  • What is Vaadin? App lifecycle Why Vaadin?
  • Structuring the App Building Responsive Layouts
  • How to get started? QA Field Data binding Server @Push
  • ?
  • User interface framework for Rich Internet Applications with pure Java
  • Servlet backend GWT frontend
  • Vaadin += GWT
  • Why?
  • Developer Productivity Rich UX Why?
  • JavaScript DOM AJAX JSON … htmljava Why?
  • App Lifecycle
  • http://localhost:8080/Vaadin/ App Lifecycle
  • New session Loader page
  • Vaadin Loader page Loads theme Loads widgetset Fetch root configuration
  • New UI instance is created UI.init() is called
  • 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) { } }
  • 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); } }
  • 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()); } }); } }
  • Vaadin UIDL • UI is added to the DOM
  • Vaadin
  • Vaadin User activity
  • 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()); } }); } }
  • Vaadin UIDL
  • Vaadin Heart beats
  • No user activity? 3 heartbeats are missed? UI is detached
  • closeIdleSession=true Session timeout expires after last non-heartbeat request Session and all of its UIs are closed
  • VaadinServlet HttpSession VaadinSession n active users UI 1 n 1 1 1 n Resources 1 ** 1 1 servlet
  • UI instance can be preserved between refreshes with @PreserveOnRefresh annotation
  • Structuring the App
  • View: any logical collection of components Structuring the App
  • Navigation between views is done by exchanging the content of the UI or by replacing components in a layout Structuring the App
  • 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) { } ! }
  • 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); ! … }
  • Activating a view programmatically UI.getCurrent().getNavigator().navigateTo("customers"); Structuring the App
  • http://localhost:8080/vaadin/#!customers ! #! : Navigator identifier customers : View name Navigating to a view via URL
  • Building Responsive Layouts
  • Building Responsive Layouts public class DashBoard extends CssLayout implements com.vaadin.navigator.View { ! public DashBoard() { setSizeFull(); addStyleName("dashboard"); Responsive.makeResponsive(this); }
  • Building Responsive Layouts .stylename[width-range~="300-500px"] .stylename[height-range~="300-500px"]
  • Server @Push
  • Request-response cycle ServerClient State Click Server @Push
  • Request-response cycle with polling ServerClient Poll Poll State Click Progress Indicator Server @Push
  • Request-response cycle with push ServerClient State Click Progress Indicator Server @Push
  • 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
  • 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
  • Field Data binding
  • Examples of Fields Field Data binding
  • Fields are bound to Properties which are simple objects with type and value
  • 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; } }
  • Customer customer = getCustomer(); TextField nameField = new TextField(); MethodProperty<String> nameProperty = new MethodProperty<String>(customer, "name"); ! nameField.setPropertyDataSource(nameProperty); Field Data binding
  • BeanItem<Customer> Field Data binding
  • Customer customer = getCustomer(); ! TextField nameField = new TextField(); BeanItem<Customer> customerBean = new BeanItem<Customer>(customer); nameField.setPropertyDataSource(customerBean.getItemProperty("name")); Field Data binding
  • FieldGroup is used to bind multiple properties from Item Field Data binding
  • 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
  • Fields are Buffered and can be Committed and Discarded Field Data binding
  • 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
  • commit() Buffering Data source UI Logic Field Button Browser TextField value change Save button pressed ClickEvent
  • 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"));
  • How do I get started ?
  • Eclipse Download plugin from Marketplace How do I get started ?
  • IntelliJ IDEA Built-in support How do I get started ?
  • Netbeans Download plugin Netbeans Plugin Portal How do I get started ?
  • mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype- application -DarchetypeVersion= 7.1.15 Maven How do I get started ?
  • Download for Free vaadin.com/book > 600 pages 01 -93-1970-1 PDF, ePub, HTML
  • Ohloh #2 used Java Web Framework Community of 100.000+
  • 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...
  • Questions or Comments?
  • peter@vaadin.com Questions or Comments?