Vaadin6.4.9_中文开发手册

Vaadin

1.简介

略

2.Vaadin入门

本章将以一个实例来说明Vaddin的安装和工具使用，以及如何在Eclipse（Vaadin提供Eclipse等开发IDE的插件）下如何运行和调试。

2.1.安装

本章将对Vaadin包以及安装做个概述。安装有两种方式可选：

◆下载安装包

◆如果你使用Eclipse，可以安装Vaadin的Eclispe插件，“Eclipse下的Vaadin插件”章节

会做详细介绍。

如果€使用Eclispe，可以安装安装包，然后导入“快速入门”项目到Eclipse下。你将可以运行并调试演示程序及包含的文档。

2.1.1.安装发布包

按照下面简单几步完成安装：

1.从https://www.360docs.net/doc/6013714273.html,/download/下载最新版的Vaadin安装包

2.用你系统中的压缩软件解压安装包到任意目录下（参考下例）

●

警告

●在Linux、Mac OS X和UNIX系列系统下用InfoZIP或其他ZIP程序用unzip

vaadin-6.x.x.zip命令解压安装包

2.1.2.启动内容浏览器

当你在使用Vaadin的时候，内容浏览器（Content Browser）（没用过这个软件）是你最好的朋友。它允许你浏览文档和一些示例源码，以及演示程序。演示程序演示了大部分Vaadin的主要特性。你可以从Vaadin站点：https://www.360docs.net/doc/6013714273.html,/demo找到演示程序。

启动内容浏览器，运行Vaadin安装目录中的启动脚本。这将会启动一个独立的Web服务器，运行在本地主机的8888端口，使用网页浏览器输入地址http://localhost:8888/。

内容浏览器会你打开你系统中默认的网页浏览器。如果默认的浏览器与Vaadin的演示程序不兼容导致无法正常工作。在这种情况下，需要启动一个可被支持的浏览器并访问http://localhost:8888/

如果内容浏览器启动失败，确认一下其他的服务没有占用8888端口。

JRE

防火墙软件

Windows

双击运行start.bat批处理文件图标，等待一会，直到Web服务器和网页浏览器已启动。

Linux / UNIX

略

Mac OS X

略

浏览器支持

2.1.

3.包内容

在安装根目录下，你可以找到start.bat（Windows）或start.sh（Linux和Mac）脚本文

件启动内容浏览器，你可以运行演示程序，并阅读包中含有的文档。

图1.1 包内容

WebContent目录包含Vaadin所有相关文件。如果你不希望或者不能运行内容浏览器，你可以在网页浏览器中打开index.html文件查看安装包内容和文档。虽然这些示例程序并不可用。

release-notes.html文件包含了最新发布版本所作修改的内容介绍和发布历史。License子目录包含Vaadin的授权指南(licensing-guidelines.html)及其他类库的安装授权。安装目录根下的COPYING文件也包含了授权信息。Vaadin自己的库在WebContent/vaadin-6.x.x.jar。jar中包含了完整源码以及编译后的class文件。

WebContent/docs目录下包含了全部Vaadin文档，包括JavaDoc，API相关文档（api子目录）和该手册的HTML格式及PDF格式。

WebContent/WEB-INF目录下的src子目录下包含了实例程序的源码，lib子目录下包含所需类库。

GWT目录包含了完整的Google Web Toolkit安装包，包含所选操作系统的运行库（*.dll），完整的文档和示例。如果你打算为Vaadin编译客户端组件，那么你就需要GWT。（参考“自定义组件开发”章节）

此外，安装目录包含了可以作为Eclipse项目的所需文件，可以导入到Eclipse中。参考“用Eclispe快速入门”章节如何使用

2.1.4.示例程序

内容浏览器允许你运行安装包中的几个实例程序。示例程序将展示如何帮你用Vaadin来处理不同的任务。所有示例的源码都包含在安装包中，如果你导入了安装包到Eclipse中，你可以直接编辑这些源码。参考“用Eclispe快速入门”章节。

2.2.设置开发环境

2.2.1.安装JDK

2.2.2.安装Eclipse安装Tomcat

2.2.

3.Firefox和Firebug

2.2.4.Vaadin的Eclipse插件

2.3.用Eclipse快速入门

2.3.1.启动Eclipse

2.3.2.导入Vaadin项目

2.3.3.在Eclipse中启动示例程序

2.3.4.在Eclipse中调试示例程序

2.4.你的第一个Vaadin项目

本章节提供说明一个用Vaadin插件创建一个新的Eclipse项目，包含以下几步：

1 创建新的项目

2 编写源码

3 配置Tomcat（或其他Web服务器）

4 打开网页浏览器用于浏览程序

我们将展示如何在Eclipse中调试应用程序。

本示例假设您已安装好Vaadin并设置好你的开发环境。

2.4.1.创建项目

让我们用前一章节安装的工具创建第一个应用程序。首先启动Eclipse按照下面的步骤进行：

1.创建一个新的项目，选择菜单：文件（File）->新建（New）->项目(Project…)

2.在“新建项目”窗口弹出后，选择Web->Vaadin Project，然后点击“Next”

3.在“Vaadin Project”步骤中，需要设置Web项目的基本配置。至少需要设置项目

名称和运行时，其他选项保持默认值即可。

此处，你可以点击“Finish”完成，其他设置将采用默认值，或者点击“Next”4.在“Web Module”步骤定义Servlet相关的设置及Web应用程序的项目结构。所有

设置项都是预先填好的，通常情况下可以采用这些设置而无需修改。如果同意这些设置，则点击“Next”。

5.在“Vaadin project”步骤页有各种Vaadin特有的应用程序设置。如果你是第一次

尝试Vaadin，你最好不要修改这些设置。除了创建Portal配置，你可以修改大多数设置。

Create project template 是否使用模板向导创建一个应用程序类存根

Application Name 显示在浏览器窗口上的标题名称

Base package name应用程序被指定的Java包名

Application class name Vaadin应用程序类名

Create portlet configuration 如果选择该项，向导将创建一个门户应用程序所需的文件最后，点击“Finish”创建项目

6. Eclipse可能要求切换到J2EE透视图。动态Web项目使用外部Web服务器和J2EE

透视图提供了工具来控制服务器和管理应用程序部署。点击“Yes”。

2.4.2.项目探索

“New Project”向导退出后，他将为我们做一下工作：Vaadin类库存放在WebContent/WEB-INF/lib目录下。源码存在于src目录下。WebContent/WEB-INF/web.xml中包含了部署描述符。

图一个新的动态Web项目：

通过插件创建的Application类的代码如下：

WebContent/WEB-INF/web.xml中定义的Vaadin框架的Servlet，Application类和Servlet-mapping

Web.xml更多关于部署描述符的的文章，参考章节4.8.3, “Deployment Descriptor

web.xml”.

2.4.

3.设置并启动Web服务器

Eclipse IDE for Java EE Developers安装了Web标准工具包。支持各种Web服务器，并可在项目有修改时自动部署到服务器。

确认以用户权限安装了Tomcat，如果用户对于Tomcat的安装目录没有写的配置和部署权限，

则在Eclipse里对Web服务器的配置也会失败。

遵循以下步骤：

1. 切换Eclipse下面的面板选项卡到“Servers”，安装后的Eclipse的服务器面板里应该是空

的，在面板的空白区域鼠标右键，然后选择“New”->“Server”。

2. 选择Apache Tomcat v6.0 Server ，设置作为本地服务器的服务器主机名字。如果你只

安装了Tomcat，Server runtime也只有一个选择。点击“Next”

3. 点击“Add”将你的项目从左侧添加到右侧的已配置项目里。点击“Finish”

4. 服务器和项目现已安装在Eclipse中，并在“Servers”选项卡上显示了已配置的服务器。

要启动服务器时，只需在服务器上右键鼠标选择“Debug”，启动调试模式。如果不需要调试模式，则选择“Start”。

5.启动服务器并将WebContent目录发布到服务器上：http://localhost:8080/myproject/.

2.4.4.运行和调试

从上述章节创建的“myproject”应用程序启动是很简单的，以此选择“Run”->“Debug As”->“Debug on Server”。Eclipse会打开一个内置的网页浏览器。

图运行Vaadin应用程序

你可以在源码窗口双击代码行左侧边缘条以设置断点。例如，如果你在buttonClick()方法上设置断点，点击页面中的“What is the time?”按钮，Eclipse 会切换到调试透视图并在断点处停止，此时你可以修改和查看应用程序的状态。如需继续执行，从“Run”菜单选择“Resume”。

图调试Vaadin应用程序

上述过程可用于调试服务器端程序，如果想了解如何调试客户端组件，请参考章节10.8.6, “GWT Development Mode”。

3.结构

3.1.概述

略

3.2.技术背景

3.2.1.AJAX

略

3.2.2.Google Web Toolkit（GWT）

略

3.2.3.JSON

略

3.2.

4.应用程序Java Servlet的会话

略

3.2.5.事件和监听器

略

4.应用程序编写

4.1.概述

略

4.2.管理主窗口

通常“网页”只运行在一个浏览器窗口中，一般网页在被打开后不会被重载，但他会通过Ajax使远程的通信服务器与用户进行交互。一个Ajax应用程序窗口更像是一个桌面应用程序窗口而并不像一个网页。

一个“Window”在浏览器中是用户界面显示的顶级容器。Ajax应用程序运行在单一的“页面”（URL）上，通常只有一个窗口——主窗口。主窗口可以用URL进行访问，在

addComponent()方法将组件添加到主窗口上，或任何其他窗口上，同时默认为窗口组件绑定了一个根布局组件，如果你希望使用其他的根布局组件，你可以通过setContent()方法进行设置。参考章节6.2, “Window and Panel Root Layout”.

Vaadin有两种类型的窗口：应用程序顶级窗口（如“主窗口”）和子窗口（主窗体内的子窗口）。子窗口将在下一章节介绍，而应用程序及窗口在章节11.2, “Application-Level Windows”介绍

4.3.子窗体

一个主窗口可以有多个浮动的子窗口，他们依靠HTML功能被Vaadin的JavaScript客户端脚本管理的。子窗口可以被打开和关闭，从一个窗口刷新另一个窗口，调整窗口的大小及滚动窗口的内容。子窗口常用于对话窗口和多文档界面程序。子窗口默认不是“模态”的，但你可将其设置为模态窗口，参考章节4.3.3, “Modal Windows”。

所有用户界面组件，窗口的外观和内容都是通过主题（themes）定义的。

对窗口的控制仅限于移动，调整大小和关闭，还暂不支持最大化和最小化。

4.3.1.子窗体的打开和关闭

你可以通过新建一个Window对象来打开一个新的窗口，然后将其通过Application 类的addWindow()方法加入到主窗口中。

Application类的removeWindow()方法。

setReadOnly(true)设置窗口为只读，以达到关闭按钮不可用的效果。提示：你可以设置CSS 样式为"display: none"使关闭按钮在不可用时变的不可见。问题是可能会使有些用户恶意的重启该按钮，并关闭窗口，这样可能会导致一些安全性漏洞。设置为窗口只读并且在客户端设置关闭按钮不可用，可以防止处理在服务端的关闭事件。

下面演示了一个应用程序中使用子窗口的例子。该窗口使用一些自定义组件，包含用于

示例中的自定义组件均继承了CustomComponent类。示例由一个用于打开窗口的“Button”和一个用户描述窗口状态的“Label”组成。当窗口打开时按钮为不可用状态，当窗口关闭后，按钮再次变为可用状态。

The example implements a custom component that inherits the CustomComponent class. It 你可以安装上述实例，在程序中使用自定义组件：

当上面代码加入到一个应用程序后，屏幕截图如下所示：

图打开一个子窗口

4.3.2.窗体定位

窗口被创建后，将会有一个默认的位置定位，你可以通过setHeight() 和setWidth()方法指定窗口的大小，也可以使用setPositionX() 和setPositionY()方法来设置窗口的位置

4.3.3.模态窗口

模态窗口是一个子窗口，在子窗口关闭之前不运行对父窗口进行任何操作。对话框窗口是典型的模态框。模态框的优势在于有助于用户界面交互的简单化，从开发角度讲模态框也是很简单的，因为对于用户交互上他是相对独立的。当模态窗口打开后，会对应用程序状态有更多限制，但他的缺点是对于工作流程有了过多限制。

图示例程序下中的模态框示例截图

安全警告

4.4.用监听器处理事件

学习完章节 3.5, “Events and Listeners”后关于事件处理的学习后，我们就要付诸于实践。你可以通过下面介绍的三中基本方法来处理事件。

下面是个典型的例子，有个“Button”和一个监听器来处理用户交互（单击）作为事件传达给应用程序。我们定义一个点击事件的监听类：

作为经常会接收到同一个类的几个组件的事件的应用程序，例如多个按钮，必须能够区分出每个组件。有几个技术可以帮你完成这个，最简单的方式是将发送对象作为属性设置到事件中，需要手动维护每个发送对象的事件引用。

事件可以使用其中一个带有一个参数的addListener()方法，参数即是用一个String类型值，表示调用的方法名作为“Method”对象，下面的例子中我们将用Srping类型的方法名。

添加一个监听器方法addListener（）实际上只是一个包装，从一个监听适配器的方法创建一个com.vaadin.event.ListenerMethod侦听器对象，实现了java.util.EventListener接口，因此可以适应任何于任何事件源使用的接口。请注意，并不是所有的监听器类都继承了EventListener接口。

第三中方法是定义局部匿名类，这种方法往往是最简单的，因为它不需要创建新的类或接口的方法进行管理。下面的例子就是通过定义匿名类，继承了Button.ClickListener接口并实现了buttonClick()方法

也有其他的技术来区分两个事件源，有的使用对象属性，名称或标题来区分它们，但不赞同使用标题或其它任何可见文字作为区分条件，因为在国际化后可能会发生问题。使用其他特征文字的字符串也是很危险的，因为这样的字符串仅会在运行时被检查。

事件通常被框架发出，但有时应用程序也需要发出一些事件，比如当要更新用户界面的某些部分是有必要的。事件可以被AbstractComponent类的fireEvent(Component.Event)方法触发，然后为这个对象转发给所有特定事件类的监听器。某些组件有默认的事件类型，例如：一个Button有个嵌套的Button.ClickEvent类和相应的Button.ClickListener接口，这些事件可以被fireComponentEvent()方法触发。

4.5.相关资源

Web应用程序工作在网页下，有着各种各样的资源，如图片或可下载文件，网页浏览器必须从服务器上获取这些资源。这些资源往往用于Embedded（图片）或Link（可下载文件）用户界面组件。各种组件，如TabSheet也可以包含图标，这也作为资源处理。

Web服务器可以在不询问应用程序而直接处理很多静态资源请求，或者由Application对象为其提供。对于动态资源，用户应用程序必须能够动态地创建它们。Vaadin为应用程序提供了可以创建各种资源的的请求接口，如文件或动态创建的资源。包括StreamResource类和分别要在11.5.1, “URI Handlers” 章节和11.5.2, “Parameter Handlers”章节介绍的URI和参数处理器。

Vaadin也为从HTTP请求检索URI和其他参数提供了底层工具。首先我们先研究如何让应用程序提供各种资源，并通过底层接口处理URI和参数以便得到资源。参考章节11.1, “Special Characteristics of AJAX Applications”。

4.5.1.资源接口和类

Vaadin有两个资源接口：一个是通用的Resource接口，另一个是更加具体的由应用程序提供的ApplicationResource接口。

图资源的接口和类图