Vaadin 7

Joonas Lehtinen, CEO@joonaslehtinen

Intro toVaadin

new Label(“Hello world”)

New in

7

Gettingstarted

QA

User interface framework for rich

web applications

htmljava

Why on earth?

consumerEE

expectations

reality

businessconsumer

“million” users10 views1!/user

“500” users50 views500!/user

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

ProblemHow to build consumer

grade UX with business system budget

How?

123Key Ideas

1RichComponents

User IntefaceData Source

Theme

Rich Applications

User IntefaceData Source

Theme

User IntefaceData Source

Theme

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

2Server + Client

Layers of abstraction

JavaScriptJava toJavaScript

Webserver

Backendserver

required optional optionalrequired

RPC

optional

Vaa

din

required optionalrequired

GW

T

requiredrequiredJS

requiredrequired

required required

How does it work, really?

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

830k total

250k

compress

120k

reducedwidgetset

• name=”Joonas”• button clicked

150 bytes

• name=”Joonas”• button clicked

150 bytes

• Add notification

466 bytes

Trying it out

https://github.com/jojule/NotesDemo

3EmbracingJava

Any JVMLanguage

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

Nobrowserplugins

Nothing toinstall

Servlet Portlet

(most) clouds

EclipseIntelliJ IDEA

NetbeansMaven

AntSpring Roo

∙ ∙ ∙

Vaadin Framework7

Empower Developers

Embrace Extendability

Clean Up

Vaadin += GWT

GWTCompatible

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

Architecture

Refactored windowing

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 Vaadin7uiUI extends UI {

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

}

SASS

Variables & functions

Mixins

Nesting

Selector Inheritance

RedesignedForms

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”

final TextField textField = new TextField("Name");textField.setConverter(new StringToNameConverter());

// ....

Name name = (Name) textField.getConvertedValue();

public class StringToNameConverter implements Converter<String, Name> {

public Name convertToModel(String text, Locale locale) throws ConversionException {

// do the conversion }

public String convertToPresentation(Name name, Locale locale) throws ConversionException {

// do the conversion }

public Class<Name> getModelType() { return Name.class; }

public Class<String> getPresentationType() { return String.class; }}

Renewed communication

Component

Widget

Paintable

server

clientVariable

Changes

UIDL

6

server

client

Component

Widget

Connector

RPC

7State

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

JavaScriptAdd-ons

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

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

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

gettingstarted

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

Maven

yourproject-1.0.warmvn package

Eclipse

http://vaadin.com/

eclipse/experimental

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

�

By Marko Grönroos

ABOUT VAADIN

ww

w.d

zone

.com

Get

Mo

re R

efca

rdz!

Vis

it re

fcar

dz.c

om

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

Vaadin Client-Server Architecture

If the built-in selection of components is not enough, you can

develop new components with the Google Web Toolkit (GWT)

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

with event listeners.

In the example below, we handle click events for a button with

an anonymous class:

�%$$ ��

*�������

��+��

�%$$ ��

�������#

$���"���

(

��%$$ ��

��������

���&��$�

�&��$��(

*�������

%�+��

Web

Browser

Client-Side

Engine

Java

Web

Server

Vaadin

UIComponents

Your

Java

Application

Web

Service

EJB

DB

Servlet Container

User

Application

Event

Listener

Data

Model

Application

Themes

Application

Resources

Default

Theme

FileResources

External

Resources

Database

DataBinding

InheritsEvents

Changes

AJAX Requests

InheritsUIComponent

Java

Servlet

Application

Class

Web

Browser

Client-Side

Engine

Q&A