vaadinweb项目开发教程.docx
《vaadinweb项目开发教程.docx》由会员分享，可在线阅读，更多相关《vaadinweb项目开发教程.docx（173页珍藏版）》请在冰豆网上搜索。
vaadinweb项目开发教程
VaadinWeb应用开发教程:
总结
到目前为止基本介绍了开发Vaadin使用的基本方法，包括概述，UI组件，布局方法，主题的使用，数据绑定及SQLContainer，可以满足初学者的需求，其它关于开发自定义UI组件，AJAX，使用插件，测试等后面在Vaadin高级进阶时在介绍。
为方便查询，下面列出VaadinWeb应用开发教程相关文章。
VaadinWeb应用开发教程
（1）:
概述
VaadinWeb应用开发教程
（2）:
安装开发环境
VaadinWeb应用开发教程（3）:
Vaadin应用程序框架介绍
VaadinWeb应用开发教程（4）:
开始编写Web应用
VaadinWeb应用开发教程（5）:
VaadinWeb应用的基本组成部分
VaadinWeb应用开发教程（6）:
使用资源
VaadinWeb应用开发教程（7）:
UI组件概述
VaadinWeb应用开发教程（8）:
UI组件-Label
VaadinWeb应用开发教程（9）:
UI组件-Link
VaadinWeb应用开发教程（10）:
UI组件-TextField
VaadinWeb应用开发教程（11）:
UI组件-TextArea
VaadinWeb应用开发教程（12）:
UI组件-PasswordField
VaadinWeb应用开发教程（13）:
UI组件-RichTextArea
VaadinWeb应用开发教程（14）:
UI组件-DateField
VaadinWeb应用开发教程（15）:
UI组件-Button
VaadinWeb应用开发教程（16）:
UI组件-Checkbox
VaadinWeb应用开发教程（17）:
UI组件-Select组件
VaadinWeb应用开发教程（18）:
UI组件-Table组件
VaadinWeb应用开发教程（19）:
UI组件-Tree组件
VaadinWeb应用开发教程（20）:
UI组件-MenuBar组件
VaadinWeb应用开发教程（21）:
UI组件-Embedded组件
VaadinWeb应用开发教程（22）:
UI组件-Upload组件
VaadinWeb应用开发教程（23）:
UI组件-Form组件
VaadinWeb应用开发教程（24）:
UI组件-ProgressIndicator组件
VaadinWeb应用开发教程（25）:
UI组件-Slider组件
VaadinWeb应用开发教程（26）:
UI组件-LoginForm组件
VaadinWeb应用开发教程（27）:
UI组件-自定义组件
VaadinWeb应用开发教程（28）:
UI布局-概述
VaadinWeb应用开发教程（29）:
UI布局-VerticalLayout和HorizontalLayout布局
VaadinWeb应用开发教程（30）:
UI布局-GridLayout布局
VaadinWeb应用开发教程（31）:
UI布局-FormLayout布局
VaadinWeb应用开发教程（32）:
UI布局-Panel
VaadinWeb应用开发教程（33）:
UI布局-HorizontalSplitPanel和VerticalSplitPanel布局
VaadinWeb应用开发教程（34）:
UI布局-TabSheet布局
VaadinWeb应用开发教程（35）:
UI布局-Accordion布局
VaadinWeb应用开发教程（36）:
UI布局-AbsoluteLayout布局
VaadinWeb应用开发教程（37）:
可视化界面编辑插件
VaadinWeb应用开发教程（38）:
使用主题-概述
VaadinWeb应用开发教程（39）:
使用主题-CSS简介
VaadinWeb应用开发教程（40）:
使用主题-创建和应用新主题
VaadinWeb应用开发教程（41）:
数据绑定-概述
VaadinWeb应用开发教程（42）:
数据绑定-Property接口
VaadinWeb应用开发教程（43）:
使用Item接口管理一组Property
VaadinWeb应用开发教程（44）:
使用Container接口管理一组Item
VaadinWeb应用开发教程（45）:
SQLContainer概述
VaadinWeb应用开发教程（46）:
开始使用SQLContainer
VaadinWeb应用开发教程（47）:
SQLContainer-过滤及排序
VaadinWeb应用开发教程（48）:
SQLContainer-编辑
VaadinWeb应用开发教程（49）:
SQLContainer-引用其它SQLContainer
VaadinWeb应用开发教程（50）:
SQLContainer-使用FreeformQuery
VaadinWeb应用开发教程
（1）:
概述
Vaddin是一个Web应用程序框架，用其开发的浏览器应用界面可以达到和桌面应用类似的效果，但和Flash，Silverlight不同的是，Vaddin应用无需再浏览器上安装任何插件。
它是一个纯Java开发环境，开发人员无需深入了解HTML，XML或是Javascipt。
如果你曾经使用Java开发过Swing，SWT等应用，可以非常容易开始使用Vaddin开发Web应用。
下表为Vaddin应用程序框架和其它一些应用程序框架的比较：
Vaddin应用程序框架具有如下特点：
ComprehensiveComponentFramework
提供大量的UI控件，支持托放，支持移动设备（触摸事件），数据绑定MVC，支持代码或HTML定义界面。
支持自定义控件等。
WebCompatibility
VaddinUI控件基于GWT，因此具有很好的浏览器兼容性，无需安装浏览器插件。
支持分页，回退按键，支持URL参数等。
CustomizableLookandFeel
很好的CSS支持，多种内置Theme和Style，并可以自定义主题和风格。
JavaWebDevelopment
纯Java开发环境，强大的服务器端技术开发模式，部署只需单个Jar文件，兼容多种Java虚拟机。
SecureWebApplicationArchitecture
服务器端状态管理，应用程序代码运行在服务器端，内置输入校验，安全请求检测等。
ExtensibleComponentArchitecture
支持GWT扩展，提供多种插件以满足应用程序开发需求。
Tools
支持多种开发环境如Eclipse,Netbean,Maven并提供VaadinTestBench测试框架。
Deployment
支持JSR154JavaEESevlet2.3+部署框架。
支持JSR168，JSR286Portlet部署。
支持GoogleAppEngine部署。
最后看看Vaadin提供的Sampler的界面。
在线演示
部分截图如下：
VaadinWeb应用开发教程
（2）:
安装开发环境
Vaddin支持多种开发环境，如Eclipse，NetBean等，这里使用Eclipse开发环境，也是最常用的Vaddin开发环境。
这里假定你对开发Java程序有一定的了解，对Eclipse开发也比较熟悉。
如果你在做Android开发，希望开发一些Client/Server的Android应用，Vaddin是一个比较好的选择，Vaddin使用纯Java开发环境，也使用EclipseIDE，可以用来开发服务器端应用。
Vaddin开发环境使用如下工具：
∙SunJava2StandardEdition6.0 （Java1.5ornewerisrequired）
∙EclipseIDEforJavaEEDevelopers
∙ApacheTomcat7.0（Core）ornewer
∙MozillaFirefox browser
∙Firebug debugtool（optional）
∙VaadinFramework
1.安装EclipseJavaEE版 http:
//www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junor
2.安装Vaadin插件
1.启动Eclipse.
2.选择菜单Help→SoftwareUpdates….
3.选择theAvailableSoftwaretab.
4.添加Vaadin插件URL
.
选择Vaadin插件，然后安装.
下面来创建一个HelloWorld项目，如果你的项目能正确运行，说明你安装好Vaadin开发环境。
1.创建新Project->Vaadin->VaadinProject
项目名称:
Helloworld,其它使用缺省值，Vaadin当前版本为6.8.1,如果你没有下载，可以选择Download，自动下载到本地。
点击“Finish”，完成新项目的创建。
2.运行这个项目，在项目浏览器中选择Helloworld,点击右键，选择RunAs->RunonServer,
如果你第一次运行Vaadin项目，可能需要创建一个服务器实例，提供选择Manuallydefineanewserver,如果你希望使用Tomcat作为服务器测试环境，可以选择”Downloadadditionalserveradapters”然后选择下载ApacheGeronimoV3.0server.然后选择你要使用的Tomcat版本，最新的版本为Tomcat7.你可以使用”DownloadandInstall”自动下载Tomcat到本地：
3.修改HelloworldApplication.java代码如下：
publicclassHelloworldApplicationextendsApplication{
@Override
publicvoidinit（）{
WindowmainWindow=newWindow（“HelloworldApplication”）;
Labellabel=newLabel（“Helloworld“）;
mainWindow.addComponent（label）;
setMainWindow（mainWindow）;
}
}
如果你可以得到如下结果，就表示你Vaadin环境安装成功：
注：
你可能需要在url后面加上?
restartApplication通知Vaddin/Tomcat使用新编译的代码。
后面将逐步详细介绍Vaadin开发
VaadinWeb应用开发教程（3）:
Vaadin应用程序框架介绍
Vaadin应用程序框架为一服务器端技术，允许开发人员采用和开发桌面应用类似的方法开发Web应用。
尽管Vaadin底层采用了HTML，JavaScript，AJAX等Web技术，Vaadin应用程序框架很好的隐藏了这些细节，开发人员一般无需了解上述Web技术来开发Vaadin应用。
下图为Vaadin总体结构图：
Vaadin包含了一组Web应用开发的API，大量的UI组件，多种内置主题，以及数据绑定允许将数据源直接绑定到UI组件。
一个Vaadin应用实际为运行在JavaWeb服务器上的Serverlet，Vaadin的TerminalAdapter接受来自客户端浏览器发来的请求并解释用户事件（Event）,Event由UI组件发送给应用，应用通过Listener来响应用户事件。
这和桌面应用非常类似。
如果应用程序需要修改UI显示，这是通过TerminalAdapter向浏览器发回响应（Response）来实现的。
所以Vaadin应用都由com.vaadin.Application派生。
应用创建用户界面，响应用户事件等。
Vaadin应用程序框架的几个主要组成部分如下：
用户界面组件（UserInterfaceComponents）
包括界面布局（Layout），UI控件（如Button，Link，Lable等），和Swing提供的UI组件类似。
Vaadin的UI组件由两部分组成：
Client-Side和Server-Side。
每个客户端部分对应一个服务器部分。
他们之间通信通过TerminalAdapter来完成。
客户端引擎（Client-sideEngine）
Vaadin的客户端引擎使用GWT（GoogleWebToolkit）来渲染显示UI组件，它通过TerminalAapater与服务器端UI组件部分通信。
UI变化使用UIDL（UserInterfaceDefinitionLanguage）语言来描述。
UIDL基于JSON表述。
终端适配器（TerminalAdapter）
Vaadin的UI组件不直接显示在网页上，而是通过终端适配器。
有了这个额外的抽象层使得Vaadin应用可以运行于大部分的浏览器上。
最新的Vaadin应用使用GWT来显示UI控件。
UI组件向TerminalAdapter报告界面变化，当用户触发某个事件（比如点击按钮），这个事件由Client-SideEngine以AJAX请求的方法报告给服务器端的TerminalAdapter。
服务端处理事件后再通过TerminalAdapter以Response的方式返回给Client-SideEngine，从而进一步修改UI显示。
显示主题（Theme）
Vaadin将UI显示的表述（Presentation）和逻辑（Logic）分开.其中UI逻辑由对应的Java代码处理。
而采用主题通过CSS来定义UI显示。
Vaadin内置多种显示主题，开发人员也可自定义主题。
用户界面定义语言（UIDL）
TerminalAdapter使用UIDL来描述UI控件及其变化。
UIDL本身通过JSON来描述。
所有的UI变化，如Check按钮选择与否的状态都是通过UIDL来描述的。
事件（Events）
用户交互触发事件，如鼠标按键，事件首先由Client-SideEngine处理，然后以HTTP请求的方式发送多到服务器，TerminalAdapter，服务器端UI组件部分等。
数据模型（DataModel）
Vaadin定义了数据模型，使用这种数据模型，UI组件可以绑定到数据源，比如变量，数组，数据库的表。
VaadinWeb应用开发教程（4）:
开始编写Web应用
在前面VaadinWeb应用开发教程
（2）:
安装开发环境 我们创建了一个Helloworld项目，现在回过头详细说明一个这个简单Web应用。
使用EclipseVaadin插件创建项目，自动生成的项目目录如下：
可以看到，Vaadin库文件放在目录Webcontent/WEB-INF/lib下，生成的Web应用主程序放在src目录下，而部署描述文件web.xml则放在Webcontent/WEB-INF目录下。
有Vaadin插件创建的初始Application类定义如下：
[java] viewplaincopyprint?
1.package com.example.helloworld;
2.
3.import com.vaadin.Application;
4.import com.vaadin.ui.*;
5.
6.public class HelloworldApplication extends Application {
7. @Override
8. public void init（） {
9. Window mainWindow = new Window（"Helloworld Application"）;
10. Label label = new Label（"Hello Vaadin user"）;
11. mainWindow.addComponent（label）;
12. setMainWindow（mainWindow）;
13. }
14.
15.}
所有的VaadinWeb应用都必须派生com.vaadin.Application类作为Web应用的主入口。
而派生类必须实现init用于初始化工作（比如定义应用的主界面，设置应用的显示主题，访问Window对象等）。
类Application提供的方法和JavaServlet提供的API非常类似，但这只是个表象，Vaadin提供的Application类是很Session类相关的。
实际上Application对象为一Session对象，因此上实现Vaadin编写Web应用和使用JavaSESwing编写桌面应用非常相像。
Vaadin应用中运行是为运行在服务器端Servlet容器中的一个HTTPServlet，下图为VaadinWeb应用程序的总体框架图：
应用的入口点为Application类，一般在Application的init方法中定义程序的UI，设置应用的显示主题，定义事件处理函数。
UI控件可以通过数据绑定来操作数据的读写等。
这和编写一般的桌面应用非常类似。
修改一下Application的init方法，添加一个按钮，点击这个按钮之后，显示当前时间。
代码如下：
[java] viewplaincopyprint?
1.public class HelloworldApplication extends Application {
2. @Override
3. public void init（） {
4. final Window mainWindow =
5. new Window（"Myproject Application"）;
6.
7. Label label = new Label（"Hello Vaadin user"）;
8. mainWindow.addComponent（label）;
9.
10. mainWindow.addComponent（
11. new Button（"What is the time?
",
12. new Button.ClickListener（） {
13. public void buttonClick（ClickEvent event） {
14. mainWindow.showNotification（
15. "The time is " + new Date（））;
16. }
17. }））; setMainWindow（mainWindow）;
18. }
19.
20.}
为应用定义UI,首先创建一个根View，通常为Windows对象，然后创建其它UI组件，如Label，Button，通过addComponent添加到windows对象中（使用缺省的布局方法）。
然后使用addListener为Button添加按键处理方法。
最后使用setMainWindow（mainWindow）为应用设置主窗口。
这和编写桌面应用没什么不同。
开发人员无需了解底层的HTML,AJAX,JavaScript，这些都有Vaadin库来管理。
运行结果如下：
编写测试应用之后，就是如何部署Web应用，由Vaadin编写的应用最后打包成单一的War文件，可以使用Tomcat或其它Application应用服务器直接部署这个war文件。
web.xml为部署描述文件，本例如下：
[html] viewplaincopyprint?
1.
xml version="1.0" encoding="UTF-8"?
>
2.xsi="http:
//www.w3.org/2001/XMLSchema-instance" xsi:
schemaLocation="
3. Helloworld
4.
5.
6. Vaadin production mode
7. productionMode
8. false
9.
10.
11. Helloworld Application
12. com.vaadin.terminal.gwt.server.ApplicationServlet
13.
14.
15. Vaadin application class to start
16. application
17. com.example.helloworld.HelloworldApplication
18.
19.
20.
升级会员 