Henri KerolaVaadin Expert at Vaadin Ltd

Getting to know Vaadin

26. lokakuuta 12

? 26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

Vaadin is a UI framework

for rich web applications

26. lokakuuta 12

Vaadin is a UI framework

for rich web applications

26. lokakuuta 12

26. lokakuuta 12

htmljava

26. lokakuuta 12

htmljava

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

HistoryWhen What

2001 The framework is born

2002 Released as Open Source

2005 Ajax based rendering

2008 Google Web Toolkit rendering

2009 Renamed to Vaadin

2010 Add-ons

26. lokakuuta 12

ApacheLicense

26. lokakuuta 12

Key Ideas

26. lokakuuta 12

123Key Ideas

26. lokakuuta 12

RichComponents

26. lokakuuta 12

1RichComponents

26. lokakuuta 12

User InterfaceData Source

Theme

26. lokakuuta 12

User InterfaceData Source

Theme

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

User InterfaceData Source

Theme

26. lokakuuta 12

User InterfaceData Source

Theme

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

User IntefaceData Source

Theme

26. lokakuuta 12

User IntefaceData Source

Theme

26. lokakuuta 12

26. lokakuuta 12

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

26. lokakuuta 12

Server + Client

26. lokakuuta 12

2Server + Client

26. lokakuuta 12

Layers of abstraction

JavaScriptJava to

JavaScriptWeb

serverBackend

serverRPC

26. lokakuuta 12

Layers of abstraction

JavaScriptJava to

JavaScriptWeb

serverBackend

serverRPC

required optionalrequired

GW

T

requiredrequired

26. lokakuuta 12

Layers of abstraction

JavaScriptJava to

JavaScriptWeb

serverBackend

server

required optional optionalrequired

RPC

optional

Vaadin

required optionalrequired

GW

T

requiredrequired

26. lokakuuta 12

Layers of abstraction

JavaScriptJava to

JavaScriptWeb

serverBackend

server

required optional optionalrequired

RPC

optional

Vaadin

required optionalrequired

GW

T

requiredrequired

Ext

JS

requiredrequired

required required

26. lokakuuta 12

Vaadin += GWT

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

GWTCompatible

26. lokakuuta 12

Server-

Client-si

deO

ptim

ized fo

r

Prod

uctivity

Optim

ized for

Con

trol

26. lokakuuta 12

Server-

Client-side

Optim

ized for

Pro

duc

tivity

Optim

ized fo

r

Control

26. lokakuuta 12

Architecture

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

EmbracingJava

26. lokakuuta 12

3EmbracingJava

26. lokakuuta 12

Servlet Portlet

(most) clouds

26. lokakuuta 12

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

26. lokakuuta 12

Apache Tomcat, version 4.1 or later

Oracle WebLogic Server, version 9.2 or later

Oracle WebLogic Portal, version 10gR3

IBM WebSphere Application Server, version 6.1 or later

IBM WebSphere Portal, version 6.1 and 7.0

JBoss Application Server, version 3.2.8 or later

Jetty, version 5 or later

Glassfish, version 2 or later

Liferay Portal 5.2 or later

GateIn Portal 3.1

eXo Platform 3

Google App Engine

Vaadin supports Java Servlet API 2.3 and JSR-168 and JSR-286 Portlet Specifications and should work with any Java application server that conforms to these standards.

26. lokakuuta 12

Nobrowserplugins

Nothing toinstall

26. lokakuuta 12

EclipseIntelliJ IDEA

NetbeansMaven

AntSpring Roo

∙ ∙ ∙

26. lokakuuta 12

26. lokakuuta 12

gettingstarted

26. lokakuuta 12

gettingstarted

26. lokakuuta 12

26. lokakuuta 12

mvn archetype:generate-DarchetypeGroupId=com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=7.0.0.beta5

Maven

26. lokakuuta 12

mvn archetype:generate-DarchetypeGroupId=com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=7.0.0.beta5

Maven

yourproject-1.0.warmvn package

26. lokakuuta 12

Eclipse

26. lokakuuta 12

Eclipse

http://vaadin.com/

eclipse/experimental

26. lokakuuta 12

Example

26. lokakuuta 12

Example

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

Vaadin Framework7

26. lokakuuta 12

Em

po

we

r D

eve

lope

rs

Em

bra

ce

Ext

endabilit

y

Cle

an U

p

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsView Management Redesign

• View management API• Multi-tab support by default

26. lokakuuta 12

26. lokakuuta 12

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsFull CSS Control

• Layout calculations are managed by browser • Improved performance • Support border/margin/... • Drop support for IE6/IE7• CSS abstraction language

26. lokakuuta 12

26. lokakuuta 12

Variables & functions

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsGlue for Integrations

• Publish JavaScript API from the server-side • Integrate easily with the rest of the web page• Centralized shared resource loading (JS/CSS)

26. lokakuuta 12

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

Publish

window.myCallback('foo', 100);Use

26. lokakuuta 12

Em

po

we

r D

eve

lope

rs

Em

bra

ce

Ext

endabilit

y

26. lokakuuta 12

Em

po

we

r D

eve

lope

rs

Em

bra

ce

Ext

endabilit

y Easier Client-ServerCommunications

• Client-server RPC API• Shared state API• Phase out “variables” and “attributes”

26. lokakuuta 12

Em

po

we

r D

eve

lope

rs

Em

bra

ce

Ext

endabilit

y Generic JavaScriptWidget Wrapper

• Convert existing 3rd party widgets to Vaadin • GWT compilation not required

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsE

mbra

ce

Ext

endabilit

yC

lean U

p

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsE

mbra

ce

Ext

endabilit

yC

lean U

p

Data Binding andForm redesign

• Form binding and layout are cleanly separated• Explicit property convertters• Two phase commit support• Built-in JSR-303 validations

26. lokakuuta 12

Em

po

we

r D

eve

lope

rsE

mbra

ce

Ext

endabilit

yC

lean U

p

Client-side

• Decouple communication from core widgets thoughtout Vaadin 7 series • Client-side compositions • Support GWT Designer

26. lokakuuta 12

3

Vaadin: A Familiar Way to Build Web Apps with Java

DZone, Inc. | www.dzone.comFigure 4: The Class Diagram presents all user interface component classes and the most important interfaces, relationships, and methods.

Questions?Comments?

henri.kerola@vaadin.com@henrikerola

26. lokakuuta 12