Vaadin 7

118
Vaadin 7 today @joonaslehtinen

description

My Introduction to Vaadin 7 presentation at Jfokus 2013

Transcript of Vaadin 7

Page 1: Vaadin 7

Vaadin7today

@joonaslehtinen

Page 2: Vaadin 7

Intro toVaadin

new Label(“Hello world”)

Page 3: Vaadin 7

New in

7

Who is [using] Vaadin?

Page 4: Vaadin 7

Gettingstarted

QA

Page 5: Vaadin 7
Page 6: Vaadin 7

User interface framework for rich

web applications

Page 7: Vaadin 7
Page 8: Vaadin 7

htmljava

Page 9: Vaadin 7

Why on earth?

Page 10: Vaadin 7

enterpriseconsumers

Page 11: Vaadin 7
Page 12: Vaadin 7

expectations

Page 13: Vaadin 7

reality

Page 14: Vaadin 7

businessconsumer

“million” users10 views1!/user

“500” users50 views500!/user

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

Page 15: Vaadin 7

ProblemHow to build consumer

grade UX with business system budget

Page 16: Vaadin 7

How?

Page 17: Vaadin 7

123Key Ideas

Page 18: Vaadin 7

1RichComponents

Page 19: Vaadin 7

User IntefaceData Source

Theme

Page 26: Vaadin 7
Page 27: Vaadin 7
Page 28: Vaadin 7
Page 29: Vaadin 7
Page 30: Vaadin 7
Page 31: Vaadin 7

User IntefaceData Source

Theme

Page 36: Vaadin 7

User IntefaceData Source

Theme

Page 37: Vaadin 7
Page 38: Vaadin 7
Page 39: Vaadin 7

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

Page 40: Vaadin 7

2Server + Client

Page 41: Vaadin 7

Web application layers

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

RPC

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

Page 42: Vaadin 7

How does it work, really?

Page 43: Vaadin 7
Page 44: Vaadin 7

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

830k total

250k

compress

120k

reducedwidgetset

Page 45: Vaadin 7

• name=”Joonas”• button clicked

150 bytes

Page 46: Vaadin 7
Page 47: Vaadin 7

• name=”Joonas”• button clicked

150 bytes

• Add notification

466 bytes

Page 48: Vaadin 7

Trying it out

Page 50: Vaadin 7

3EmbracingJava

Page 51: Vaadin 7

Any JVMLanguage

Page 52: Vaadin 7

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

Page 53: Vaadin 7

Nobrowserplugins

Nothing toinstall

Page 54: Vaadin 7

Servlet Portlet

(most) clouds

Page 55: Vaadin 7

EclipseIntelliJ IDEA

NetbeansMaven

AntSpring Roo

∙ ∙ ∙

Page 56: Vaadin 7
Page 57: Vaadin 7

Vaadin7today

0.0

Page 58: Vaadin 7

v32002

v0.12001

OpenSource

Page 59: Vaadin 7

v42006

Ajax

v52007

Page 60: Vaadin 7

7todayv6

2009

Page 61: Vaadin 7

Completestack

Renewedfrom Inside

Sass

JS

HTML5+=GWT

RPCState

UI

Field

Page 62: Vaadin 7
Page 63: Vaadin 7
Page 64: Vaadin 7
Page 65: Vaadin 7
Page 66: Vaadin 7
Page 67: Vaadin 7
Page 68: Vaadin 7
Page 69: Vaadin 7
Page 70: Vaadin 7
Page 71: Vaadin 7
Page 72: Vaadin 7

Favorite picks7

Page 73: Vaadin 7

Vaadin += GWT

Page 74: Vaadin 7
Page 75: Vaadin 7
Page 76: Vaadin 7
Page 77: Vaadin 7

GWTCompatible

Page 78: Vaadin 7

Server-

Client-

side

Optim

ized for

Productivity

Opt

imiz

ed fo

r

Cont

rol

Page 79: Vaadin 7

Server-

Client-

sideO

ptim

ized

for

Prod

uctiv

ity

Optim

ized for

Control

Page 80: Vaadin 7

Architecture

Page 81: Vaadin 7
Page 82: Vaadin 7
Page 83: Vaadin 7
Page 84: Vaadin 7
Page 85: Vaadin 7
Page 86: Vaadin 7
Page 87: Vaadin 7
Page 88: Vaadin 7

New Windowing API

Page 89: Vaadin 7
Page 90: Vaadin 7

Built-in high levelView management

Page 91: Vaadin 7

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

}

Page 92: Vaadin 7

@Title("Vaadin 7 Application")public class Vaadin7uiUI extends UI {

public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }

}

Page 93: Vaadin 7

Sass

Page 94: Vaadin 7

Variables & functions

Page 95: Vaadin 7

Mixins

Page 96: Vaadin 7

RedesignedForms

Page 97: Vaadin 7

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

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

6

Page 98: Vaadin 7
Page 99: Vaadin 7
Page 100: Vaadin 7

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

Page 101: Vaadin 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));

7

Page 102: Vaadin 7

public class Person {

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

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

// + constructor + setters + getters}

Page 103: Vaadin 7

model

presentation

“Joonas Lehtinen”

Component

firstName = “Joonas”lastName = “Lehtinen”

Page 104: Vaadin 7

RPCState

Page 105: Vaadin 7

Component

Widget

Paintable

server

clientVariable

Changes

UIDL

6

Page 106: Vaadin 7

server

client

Component

Widget

Connector

RPC

7State

Page 107: Vaadin 7

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

Page 108: Vaadin 7

JavaScriptAdd-ons

Page 109: Vaadin 7

getPage().getJavaScript().addCallback("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

Page 110: Vaadin 7

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

Page 111: Vaadin 7

public class MyWidget extends AbstractJavaScriptComponent {

public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); }

public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters }

}

Server-side Java API for Widget

Page 112: Vaadin 7

gettingstarted

Page 113: Vaadin 7
Page 114: Vaadin 7

Eclipse

Page 115: Vaadin 7

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

Maven

Page 116: Vaadin 7

Download for Freevaadin.com/book

~700 pages

Vaadin 7 Draft Edition

US $29.95

Vaadin is an open source Java framework for building modern web applications that look great, perform well and make you and

your users happy. http://vaadin.com/

2675387895299

ISBN 978-952-92-6753-890000

Page 117: Vaadin 7

vaadin.com/vaadin7

Page 118: Vaadin 7

? [email protected] vaadin.com/joonas

@joonaslehtinen