vaadin 7.2

Vaadin7@joonaslehtinen Founder & CEO .2

Disclaimer Vaadin 7.2 is nowhere near release even though I though it would have been released by DevNexus when submitting this presentation. I hope you would not take this a case example for missing the estimated release dates. Even though it is clearly the case….

!Sorry, it will be released soon [when it is ready]

11 maintenance releases since 28.6.2013 - one every 3 weeks 37 authors, 345 change sets7.1

Beautifying apps with new sassy theme

Power(ful) Grid

Hybrid apps & RPC

Vaadin 8 & GWT 3

Agenda: The future TB4 TK4

7.2

7.2

Hybrid apps?

0L/100km1€/100km

450km range!growing charge station network

2.5L/100km4€/100km

500km range!gas stationseverywhere

8.6L/100km13€/100km

550km range!gas stationseverywhere

Web application layers

Backend server

Web server

Commu- nication JavaScript

Client-side UI

Web application layers

Backend server

Web server

Commu- nication JavaScript

Server-side UI Automated

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

Commu- nication

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Client-side UI

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Client-side UI

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Client-side UIServer-side UI &

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Web application layers

JavaScriptJava to JavaScript

Web server

Backend server

required optional optionalrequired

Commu- nication

optional

Vaad

in

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

1 layer vs

3 layers

-50% dev. time -50% maintenance vs full control over DOM and communications

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol

Server-Client-

sideO

ptim

ized

for

Prod

uctiv

ity

Optim

ized for

Control

Server-sideClient-side

Use for

• Offline!• Low latency interaction!• Maximum scalability

Use for

• Most places ( - 50% cost )!• High security!• Utilizing full Java platform

Benefits of the both sides, but adds complexity

Hybrid

Server-side1 layer UI

Automated!connection to

server required

Hybrid1-3 layer UI

You choose!offline for chosen

functionality

Client-side3 layer UI

Full control!offline readyarchitecture

http://demo.vaadin.com/parking/

Examplehttps://github.com/jojule/hybrid

Google

http://domain.com

Web Page Title

First nameTable cell

Table cell

Phone number

Table cell

Table cell

Table cellTable cellTable cell

Table cell

Table cellTable cell

Table cellTable cell

Table cell

Table cell Table cell

Table cell

Last name

Table cellTable cell

Email address

Table cellTable cell

Far far away, behind the word mountains,

far from the countries Vokalia and

Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove

right at the coast of the Semantics, a

large language ocean.

A small river named Duden flows by their

place and supplies it with the necessary

regelialia. It is a paradisematic country, in

which roasted parts of sentences fly into

your mouth.

Even the all-powerful Pointing has no

control about the blind texts it is an

almost unorthographic life One day

however a small line of blind text by the

name of Lorem Ipsum decided to leave

for the far World of Grammar. The Big

Oxmox advised her not to do so,

because there were thousands of bad

Commas.

Server-side

OfflineClient-side Vaadin-RPC

Client-side GWT-RPCServer-side

Edit Delete New

Save Cancel

First name Last name

Phone number Email address

AddressbookBackendAddress ImplBackendFrontend

Server-side!(with Vaadin)

Client-side!(with GWT-RPC)

AddressbookEditor

AddressbookEditor

RPCServlet Service

ServiceAsync

View

Connector

Client

Server

Proxy(generated)

create

place

implements

implements

equal

Estimating Complexity

Server-sideClient-side

1 class !

190 LOC

4 classes 2 interfaces ~ 500 LOC 3X

Vaadin RPC State

server

client

Component

Widget

Connector

RPC

State

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

AddressbookBackendAddress ImplBackendFrontend

Client-side!(with Conntector)

Client-side!(with GWT-RPC)

AddressbookEditor

RPCServlet Service

ServiceAsync

View

Client

Serverplace

implements

equal

View

place & !serve

AddressbookEditor

StateServer!RPC

Client!RPC

Connector Proxy(generated)

createimplementsConnector

create

PUSHSince 7.1

@Push MyUI !

!

<async-supported/> !

!

vaadin-push dependency

JavaScript Add-ons

6/7

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

Grid

• >10 years old architecture • Really hard to customize • Client-side API missing (and impossible) • Performance (heavy DOM tree) • Some key features missing (frozen

columns, ..)

Table: challenges

• Super fast on all devices • Unlimited datasets ("zillion rows")

• Built for extensibility • Superset of features compared to Table • Client- and Server API

Grid: New generation table for the next 10 years?

Editor rowWidgetWidgetWidget

Editor rowComponentComponentComponent

Widget

Renderer

Grid

Escalator

Connector (Hierarchical) DataSource

(Hierarchical) DataSource

Grid

Component Component

Widget

Renderer Per column

In headers and cells

In headers and cells

Escalator

• Renderers • Client-side API and data sources • Editor rows • "Billion pixel scrolling" • Hierarchical headers • Widgets in headers

Some of the key features in 7.2

• Hierarchy • Variable row height • Embedding to super long pages (body

scrollbars) • Infinite scrolling • Components in cells • Details rows

Some of the key features in 7.x

Valo Theme

Seriously SASSy

Variables & functions

Mixins

Nesting

Selector Inheritance

<Beat design example>

Responsive

// Vaadin UI protected void init(VaadinRequest request) { new Responsive(this); } !!// CSS .v-ui[width-range~="0-800px"] { /* Styles that apply when the UI's width is between 0 and 800 pixels */ } .v-ui[width-range~="801px-"] { /* Styles that apply when the UI's width is over 800 pixels */ }

http://demo.vaadin.com/responsive/

TouchKit 4

New cross-platform theme http://demo.vaadin.com/parking/

Windows Phone 8 support

Vaadin TouchKit 4.0

New cross-platform theme http://demo.vaadin.com/parking/

Windows Phone 8 support

Vaadin TouchKit 4.0

TestBench 4

ButtonElement okButton = $(ButtonElement.class).caption("OK").first(); okButton.focus(); okButton.click(); List<AbstractLayoutElement> list = $(AbstractLayoutElement.class).all();

ElementQuery API

getting started

Eclipse

Download plugin from Martketplace

IntelliJ IDEA

Built-in support

Netbeans

Download plugin Netbeans Plugin Portal

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

Maven

Download for Freevaadin.com/book

728 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

ApacheLicense

community of

100.000+ developers

Ohloh #2 used

Java Web Framework

? joonas@vaadin.com vaadin.com/joonas

@joonaslehtinen

slideshare.com/ joonaslehtinen