Vaadin7today

@joonaslehtinenFounder & CEO

Intro toVaadin

new Label(“Hello world”)

New in

7

Gettingstarted

QA

User interface framework for rich

web applications

Building blocks

htmljava

Why on earth?

expectations

reality

businessconsumer

“million” users “500” users

>>100,000! / view 5,000! / view

10 views1!/user

50 views500!/user

ChallengeHow to build consumer

grade UX with business system budget

How?

123Key Ideas

1RichComponents

User IntefaceData Source

Theme

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%25.7%

Phones

36.1%

Tablets

Desktop browsers

Others

2.1%

“Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones”

Daniel

Browsers developers expect to support in 2013

3.5 Browsers to support in 2012

IE 6/7 Safari Opera IE 8

6/7 8

14% 18% 36% 54%

Chrome

9 10IE 9 IE 10 Firefox

79% 80% 94% 94%Browsers developers expect to support in 2013

3.5 Browsers to support in 2012

IE 6/7 Safari Opera IE 8

6/7 8

14% 18% 36% 54%

Chrome

9 10IE 9 IE 10 Firefox

79% 80% 94% 94%

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for

desktop, tablet, and mobile consumption. As can be expected, over 98% of apps

support desktop browsers, but we found it interesting that tablets had overtaken

phones (at least when it came to support from GWT-based apps). In US, the number

of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%

25.7%

Phones

36.1%

Tablets

Desktop

browsers

Others2.1%

“Since gwt is used extensively

in the enterprise, this may

explain why tablets are more

popular than support for

phones”

Daniel

iPhoneAndroid

WP 8

1.6 Going mobile

GWT is a versatile technology that allows developers to create application UI for

desktop, tablet, and mobile consumption. As can be expected, over 98% of apps

support desktop browsers, but we found it interesting that tablets had overtaken

phones (at least when it came to support from GWT-based apps). In US, the number

of apps supporting tablets was as high as 46%, while it was just 34% in Europe.

What kind of devices does your app support?

98.1%

25.7%

Phones

36.1%

Tablets

Desktop

browsers

Others2.1%

“Since gwt is used extensively

in the enterprise, this may

explain why tablets are more

popular than support for

phones”

Daniel

iPadAndroidWindows 8

350 add-oncomponents

User IntefaceData Source

Theme

User IntefaceData Source

Theme

InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...

2Server + Client

Web application layers

Backendserver

Webserver

Commu-nication JavaScript

Web application layers

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

Commu-nication

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Web application layers

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

Commu-nication

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

1 layervs

3 layers

-50% codelines-50% development-50% maintenanceeasier to learn

How does it work, really?

• Initial HTML• CSS (theme)• Images• JavaScript

1.2M total

307k

compress

135k

reducedwidgetset

• name=”Joonas”• button clicked

261 bytes

• name=”Joonas”• button clicked

261 bytes

• Add notification

267 bytes

Hello World!

https://github.com/vaadin/documentmanager

https://vaadin.com/learn

Source

HOWTO Screencast

3EmbracingJava

Any languageon JVM

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

Nobrowserplugins

Nothing toinstall

Servlet Portlet

(most) clouds

EclipseIntelliJ IDEA

NetbeansMaven

Ant∙ ∙ ∙

Vaadin7today

v32002

v0.12001

OpenSource

v42006

Ajax

v52007

7Febv6

2009

934 tickets closed during 16 months of development

3939 commits made by 23 authors

Oldest ticket created 3/2008Newest ticket 2/2013

3939 commits made by 23 authors93 % by 6 persons

> 1 000 000 lines of code touched

Completestack

Renewedfrom Inside

Sass

JS

HTML5+=GWT

RPCState

UI

Field

vaadin.com/7

Favorite picks7

Vaadin += GWT

1/6

GWTCompatible

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Control

Architecture

New Windowing API

2/6

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; }

}

@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"))); }

}

@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"))); }

}

Built-in high levelView management

Demo

SassSyntactically Awesome Stylesheets

Demo

3/6

RedesignedForms

4/6

public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, …}

Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));

6

form.setFormFieldFactory(new FormFieldFactory() {

public Field createField(Item item, Object propertyId, Component uiContext) {

if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; }

// ..

return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });

6

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));

7

public class Person {

@Size(min = 5, max = 50) private String name;

@Min(0) @Max(100) private int age;

// + constructor + setters + getters}

model

presentation

“Joonas Lehtinen”

Component

firstName = “Joonas”lastName = “Lehtinen”

Demo

RPCState

5/6

Component

Widget

Paintable

server

clientVariable

Changes

UIDL

6

server

client

Component

Widget

Connector

RPC

7State

Demo

public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details);}

private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this);

public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event));}

serverclient

private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff }};

public Button() { registerRpc(rpc);}

Demo

JavaScriptAdd-ons

6/6

getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });

Publish API from Java

window.myCallback('foo', 100);

Use from JavaScript

public 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(); }

}

Server-side Java API for Widget

window.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); } });}

Widget implementation in JavaScript

Roadmap

Vaadin Framework 7.1 beta• Server push

• Based on Atmosphere Framework• Web sockets, long polling and polling

• Calendar (now under Apache 2.0 license)• Limited IE 10 support (without pointer events)• CSS string inject• Renewed debug console features◦Redesigned UI/UX for debug window◦Optimize widgetset

• Arithmetics for SASS• Packaging SCSS / CSS for add-ons

April

Vaadin Charts 1.1

• 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

May

Vaadin TouchKit 3.0 beta

• Vaadin 7 support

• New components: • URLField• Datefield• Combobox

just released

Vaadin TestBench 3.1

• Headless mode with Phantom JS

May

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

just released

gettingstarted

Eclipse

mvn archetype:generate-DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application-DarchetypeVersion=7.0.4

Maven

Migration Guide:Vaadin 6 to 7

https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7

Download for Freevaadin.com/book

728 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

? joonas@vaadin.com vaadin.com/joonas

@joonaslehtinen

slideshare.com/joonaslehtinen