Introduction to

Peter Lehto7Vaadin

.1Javantura 2014, Zagreb

What?

Why?

How do I

use it?

new Label(“Hello world”)

How does

it work?

How do I get started?

QAWhat’s new in Vaadin 7.2

?

User interface framework for Rich Internet Applications

Why?

To strive on developer

productivity

JavaScriptDOMAJAXJSON…

htmljava

1Server-side RIA

2Rich components

3Embracing Java

How?

Servlet backendGWT frontend

Server-side RIA

DOM

Client Server

ViewHTML Pageover HttpResponse

Controller

Model

Parameters overHttpRequest

DB4

5

6

2

Term

inalAdapter

Term

inalAdapter

Automated bythe RIA framework

3

7

1

9

8

Handled by the framework

Example

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

1.2M

307k

compress

135k

reducedwidgetset and theme

• name=”Johannes”• button clicked

263 bytes

• name=”Johannes”• button clicked

263 bytes

• Add notification

269 bytes

Demo

The architecture of Vaadin

server

client

Component

Widget

Connector

RPC

State

1Server-side RIA

2Rich components

3Embracing Java

How?

User InterfaceData 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

iPhoneAndroidWP 8

1.6 Going mobileGWT 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

400+ add-oncomponents

User InterfaceData Source

Theme

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

User InterfaceData Source

Theme

sass(syntactically awesome stylesheets)

$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

.scss

constants and functions

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.css

@mixin table-base { th { text-align: center; font-weight: bold; } td,th {padding: 2px}}

@mixin left($dist) { float: left; margin-left: $dist;}

#data { @include left(10px); @include table-base;}

#data { float: left; margin-left: 10px;}

#data th { text-align: center; font-weight: bold;}

#data td, #data #th { padding: 2px;}

.scss .cssmixins

1Server-side RIA

2Rich components

3Embracing Java

How?

Any language on JVM

JavaScalaGroovyClojure

PythonRubyCeylon

…

EclipseIntelliJ IDEA

NetbeansMaven

Ant∙ ∙ ∙

Multipledevelopment environments

GWTCompatible

Vaadin+=

GWT

Server-

Client-si

deO

ptim

ized fo

r

Prod

uctivity

Optim

ized for

Con

trol

What’s new in Vaadin 7.2

Beta release Roadmapped to Q1/2014

Grid component

Table and TreeTable component “replacement”

Usable also as pure client side widget

Client side data source API

Grid componentLow level Escalator widget for optimized rendering performance

Frozen columns

Variable row and column sizes

Grid component

Components in header and footer

Clean and Extensible implementation

New Theme

Customizable theme based on SASS

Effortlessly change sizings, paddings, margins and color schemes.

Responsive layout support integrated

New Theme

“Breakpoints” allow changing layouts based on device resolution or browser window size

“Unit tests” for UI with new VaadinDriver

Support for TestBench 4.0

Easier and cleaner way to select and interact with elements in DOM tree

Official support for Windows Phone

Support for TouchKit 4.0

New touckit theme in addition of current iOS theme

How do I get

started?

Eclipse

Download plugin from Marketplace

IntelliJ IDEA

Built-in support

Netbeans

Download plugin Netbeans Plugin Portal

mvn archetype:generate

-DarchetypeGroupId=

com.vaadin

-DarchetypeArtifactId=

vaadin-archetype-application

-DarchetypeVersion=

7.1.11

Maven

Download for Freevaadin.com/book

> 600 pages

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

Ohloh#2 used

Java WebFramework

Community of 100.000+

�

By Marko Grönroos

ABOUT VAADIN

ww

w.d

zone

.co

m

G

et M

ore

Ref

card

z! V

isit

ref

card

z.co

m

#85

Getting Started with VaadinCONTENTS 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.

Figure 1: 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 ListenersIn the event-driven model, user interaction with user interface components triggers server-side events, which you can handle

Web BrowserClient-Side Engine

JavaWeb Server

VaadinUIComponents

YourJavaApplication

WebService

EJB

DB

Servlet Container

UserApplication

EventListener

DataModel

ApplicationThemes

ApplicationResources

DefaultTheme

FileResources

ExternalResources

Database

DataBinding

Inherits Events Changes

AJAX Requests

Inherits

UIComponent

JavaServlet

ApplicationClass

Web BrowserClient-Side Engine

brought to you by...

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?

peter@vaadin.com