vaadin 7 cn
DESCRIPTION
My presentation about Vaadin 7.1 at JavaOne Shanghai on Jul 24, 2013. The slides are mostly in Chinese.TRANSCRIPT
Vaadin7Dr. Joonas Lehtinen�始人兼 CEO
原始幻灯片位于slideshare.com/joonaslehtinen
Vaadin �介
new Label(“Hello world”)
版本 中的新特性7
入門
QA
用于富 web 用程序的用�界面框架
�建�
开人
提效
富
UX
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
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
iPhoneAndroid
WP 8
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
iPadAndroidWindows 8
360 多个插件�件
用�界面数据源主�
用�界面数据源主�
InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
2服�器 + 客�端
Web 用程序�
后端服�器
Web服�器 通信 JavaScript
Web 用程序�
必需 可� 可�必需 可�
Vaa
din
必需 可�必需
GW
T
必需必需JS
必需必需
必需 必需
JavaScriptJava 到
JavaScriptWeb服�器
后端服�器 通信
Web 用程序�
必需 可� 可�必需 可�
Vaa
din
必需 可�必需
GW
T
必需必需JS
必需必需
必需 必需
JavaScriptJava 到
JavaScriptWeb服�器
后端服�器 通信
1 �
3 �
代�行减少 50%
开工作量降低 50%
��工作量降低 50%
更容易学�
它到底是如何工作的?
• 初始 HTML• CSS(主�)• �片• JavaScript
共 1.2M
307k
��
135k
减少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
Ajax
v52007
7二月v6
2009
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
JS
HTML5+=GWT
RPC状
UI
字段
推送
收藏精� 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));
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}
模型�
表示�
“Joonas Lehtinen”
Component
firstName = “Joonas”lastName = “Lehtinen”
演示
RPC状
Component
Widget
Paintable
服�器
客�端Variable
Changes
UIDL
6
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));}
服�器客�端
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
Get
Mor
e R
efca
rdz!
Vis
it r
efca
rdz.
com
#85
Vaa
din
7: A
New
Way
to
Bui
ld W
eb U
Is w
ith
Java
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:
免�下�vaadin.com/refcard
8 �PDF
Get
Mor
e R
efca
rdz!
Vis
it r
efca
rdz.
com
#85
Vaa
din
7: A
New
Way
to
Bui
ld W
eb U
Is w
ith
Java
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:
Apache�可
社区内活�着
100.000多 名开�人�
? [email protected] vaadin.com/joonas
@joonaslehtinen
vaadin.com/forumvaadin.com/pro (support)
slideshare.com/joonaslehtinen