vaadin 7 cn

Vaadin7Dr. Joonas Lehtinen�始人兼 CEO

原始幻灯片位于slideshare.com/joonaslehtinen

Vaadin �介

new Label(“Hello world”)

版本中的新特性7

入門

用于富 web 用程序的用�界面框架

�建�

开人

提效

htmljava

究竟�什么？

期望

��

��消�者“百万”用� “500”用�

>>100,000! / �� 5,000! / ��

10 个��1! / 用�

50 个��500! / 用�

挑�如何用��系��算�建消�者� UX

主要思路

123主要思路

1富�件

用�界面数据源主�

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

Tablets

Desktop browsers

Others

“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

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

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.

Phones

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

iPhoneAndroid

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.

Phones

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

360 多个插件�件

用�界面数据源主�

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

2服�器 + 客�端

Web 用程序�

后端服�器

Web服�器通信 JavaScript

Web 用程序�

必需可� 可�必需可�

必需可�必需

必需必需JS

必需必需

JavaScriptJava 到

JavaScriptWeb服�器

后端服�器通信

Web 用程序�

必需可� 可�必需可�

必需可�必需

必需必需JS

必需必需

JavaScriptJava 到

JavaScriptWeb服�器

后端服�器通信

代�行减少 50%

开工作量降低 50%

��工作量降低 50%

更容易学�

它到底是如何工作的？

• 初始 HTML• CSS（主�）• �片• JavaScript

共 1.2M

��

减少widgetset

• name=”Joonas”• ��按�

261 字�

• name=”Joonas”• ��按�

261 字�

• 添加通知

267 字�

Hello World!

https://github.com/vaadin/documentmanager

https://vaadin.com/learn

来源

如何制作截屏��

3利用 Java

JVM 上的任何�言

Internet ExplorerChromeFirefoxSafariOpera

iOSAndroid

没有 ��器插件

不需要安装任何�西

Servlet Portlet

（大多数）云

EclipseIntelliJ IDEA

NetbeansMaven

Ant∙ ∙ ∙

Vaadin7.1

v32002

v0.12001

开源

v42006

v52007

7二月v6

934 tickets closed during 16 months of development

3939 commits made by 23 authors

Oldest ticket created 3/2008Newest ticket 2/2013

3939 commits made by 23 authors93 % by 6 persons

> 1 000 000 lines of code touched

完整的体系

脱胎骨Sass

HTML5+=GWT

RPC状

字段

推送

vaadin.com/7

收藏精� 7.1

Vaadin += GWT

GWT兼容

服�器-

客�-

端�生�力而

�化�控制而 �化

服�器-客�

端�生�力而 �化

�控制而

�化

架�

Sass�法超�的�式表

演示

重新��的表�

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

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

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

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

public class Person {

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

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

// + constructor + setters + getters}

模型�

表示�

“Joonas Lehtinen”

Component

firstName = “Joonas”lastName = “Lehtinen”

演示

RPC状

Component

Widget

Paintable

服�器

客�端Variable

Changes

Component

Widget

Connector

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

服�器客�端

private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff }};

public Button() { registerRpc(rpc);}

演示

JavaScript插件

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

用 Java �布 API

window.myCallback('foo', 100);

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

用于 Widget 的服�器端 Java API

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 的服�器端 Java API

服�器推送

@Push MyUI

async-supported = true

vaadin-push dependency

入門

Eclipse

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

迁移指南：从 Vaadin 6 到 7

https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7

免�下�vaadin.com/book

728 �

9 789529 319701

ISBN 978-952-93-1970-1

PDF, ePub, HTML

免�下�vaadin.com/refcard

8 �PDF

By: Marko Grönroos

Vaadin is a web application development framework that allows you

to build web applications much as you would with traditional desktop

frameworks, such as AWT or Swing. A UI is built hierarchically from user

interface components contained in layout components. User interaction is

handled in an event-driven manner.Vaadin supports both a server-side and a client-side development model.

In the server-side model, the application code runs on a server, while the

actual user interaction is handled by a client-side engine that runs in the

browser. The client-server communications and client-side technologies,

such as HTML and JavaScript, are invisible to the developer. The client-

side engine runs as JavaScript in the browser, so there is no need to install

plug-ins.

Figure 1: Vaadin Client-Server Architecture

The client-side development model allows building new client-side widgets

and user interfaces with the GWT toolkit included in Vaadin. The widgets

can be integrated with server-side component counterparts to enable

using them in server-side applications. You can also make pure client-side

UIs, which can communicate with a back-end service.A server-side Vaadin application consists of one or more UI classes that

extend the com.vaadin.UI class and implement the init() method.

@Title(“My Vaadin UI”)

public class HelloWorld extends com.vaadin.UI {

@Override protected void init(VaadinRequest request) {

// Create the content root layout for the UI

VerticalLayout content = new VerticalLayout();

setContent(content); // Display the greeting

content.addComponent(new Label(“Hello World!”));

Normally, you need to:� extend the UI class� build an initial UI from components

� GHQH�HYHQW�OLVWHQHUV�WR�LPSOHPHQW

Optionally, you can also:� set a custom theme for the UI

� bind components to data

� bind components to resources

Figure 2: Architecture for Vaadin Applications

You can create a Vaadin application project easily with the Vaadin Plugin

for Eclipse, with NetBeans, or with Maven.HotTip

You can get a reference to the UI object associated

with the currently processed request from anywhere in

the application logic with UI.getCurrent(). You can also

access the current VaadinSession, VaadinService, and

VaadinServlet objects in the same way.

CONTENTS INCLUDE:k�Creating a Server-side UI

k�Componentsk�Themesk�Class Diagramk�Data Bindingk�Widget Integration... and more!

Vaadin 7: Modern Web Apps in Java

Vaadin ChartsThe best charting component for Vaadin

with over 50 chart types.Learn more

ABOUT VAADIN

CREATING A SERVER-SIDE UI

Brought to you by: