引路蜂移动软件

在前面Vaadin Web应用开发教程(2):安装开发环境 我们创建了一个Helloworld项目，现在回过头详细说明一个这个简单Web应用。使用Eclipse Vaadin 插件创建项目，自动生成的项目目录如下：可以看到，Vaadin库文件放在目录Webcontent/WEB-INF/lib 下，生成的Web应用主程序放在src 目录下，而部署描述文件web.xml 则放在Webcontent/

Item接口用来管理一组命名的Property对象。每个Property由一个标识符（PID）来定义，Item通过PID使用方法getItemProperty()来读写其中的Property。使用Item的地方例如Table的一行，每个属性（Property）对应行的每个字段（列column)。或者是Tree的一个节点，以及绑定到表单From的数据，此时Item中的每个属性对应的表单中的一个输

Property接口为Vaadin数据模型的基本接口，它提供了读写单个数据对象的标准API。 一个Property对象总是有数据类型的，尽管它支持可选的数据类型转换。Property的数据可以为任意的Java对象，Property 也提供了监听数据变化的事件消息。Property的读写方法为getValue()和setValue() 。getValue() 返回通用的Object 类型的对

本篇介绍Vaadin的数据模型及数据绑定-将数据源绑定到UI组件。Vaadin通过数据绑定可以支持用户提供UI组件（界面）直接操作数据模型（显示或者直接修改）。Vaadin的数据模型分为三个层次： Property, Item 和 Container. 类比Excel电子表格，可以分别类比电子表格的单元格，一行和整个表单。Vaadin数据某些相关的接口和类定义在包 com.vaad

VerticalLayout和HorizontalLayout 分别垂直和水平安排其中的UI组件。这是Vaadin框架中两个最为重要的布局方式。比如Window及其父类Panel 缺省的布局就为VerticalLayout。这两种布局的基本用法如下：VerticalLayout vertical = new VerticalLayout ();vertical.addComponent(

Vaadin主题的使用一个重要的方法是使用CSS风格文件。本篇对CSS的使用做个简单的介绍。基本CSS规则一个CSS文件包含一组规则，每个规则包含一个“风格选择符”，由逗号分开。然后通过花括号将风格描述括在里面。例如：p, td { color: blue;}td { background: yellow; font-weight: bold;}上例中p,t

Vaadin提供的UI组件大体可以分为两类，一类为之前介绍的UI组件主要和用户交互。另外一类为布局类，主要目的是用来管理用户界面中所放置的UI组件的大小和位置。在创建Window对象时，如果你不想使用缺省的布局，可以着手创建根布局对象，如下例：// Create the main window.Window main = new Window("My Application");set

Vaadin中创建的主题必须放置在VAADIN/themes 目录下。目录名称即为新的主题名称，新主题中必须包含一个styles.css 文件。新主题也必须继承某个Vaadin内置主题，如：@import "../reindeer/styles.css";.v-app { background: yellow;}前面介绍的Vaadin个UI组件和布局都可以通过CSS

在前面介绍Vaadin的UI组件及布局时，特地没有介绍这些UI组件对应的CSS设置，而是留在这里介绍Vaadin 主题时一并说明。Vaadin应用可以通过主题（Theme）来修改界面的外观，用户主题包括Css文件，自定义的HTML 布局及使用的图像等。主题资源(Theme Resource)可以通过ThemeResource类访问 。用户自定义的主题必须放置在目录WebContent/VA

Vaadin 支持自定义组件，典型的用法是将各种Vaadin内置的组件组合而成构成自定义组件。 创建自定义组件可以通过派生CustomComponent 然后调用setCompositionRoot 为自定义组件设置根容器。例如：class MyComposite extends CustomComponent { public MyComposite(String messag

LoginForm组件专门用来接受用户输入用户名和密码，并可以自动记住用户输入的用户名和密码。其基本用法如下:// A wrapper with a caption for the login formPanel loginPanel = new Panel("Login");loginPanel.setWidth("250px"); LoginForm login =

GridLayout布局使用网格来布置其中的UI组件。每个网格提供行，列来定义。每个UI组件可以占据一个或多个网格。由网格的坐标(x1,y1,x2,y2)来定义。GridLayout布局内部使用一个游标(cursor)来记录当前的网格位置，GridLayout布局添加UI组件的顺序为从左到右，从上到下。如果游标越过当前网格的右下角，GridLayout布局自动添加一行。下例为GridLay

FormLayout布局为使用表单（Form）时的缺省布局方式。它通常将Field组件的标题和输入域并排以两列的方式显示，并可以显示可选的必填标识。在用户输入错误时显示错误提示。Form本身可以有标题，错误提示，表单尾注等，具体参见Vaadin Web应用开发教程(23):UI组件-Form组件FormLayout布局的基本用法如下：// A FormLayout used outsi

单个属性使用Property接口，一组Property使用Item接口来管理，Container接口则管理一组具有相同属性的Item。Container所包含的Item使用Item标识符（IID）来区分。Item通过方法addItem()方法向Container添加Item。 查询某个属性可以先通过getItem()取得Item对象，然后再使用getItemProperty()方法，或者直接使

到目前为止基本介绍了开发Vaadin使用的基本方法，包括概述，UI组件，布局方法，主题的使用，数据绑定及SQLContainer，可以满足初学者的需求，其它关于开发自定义UI组件，AJAX，使用插件，测试等后面在Vaadin高级进阶时在介绍。为方便查询，下面列出Vaadin Web应用开发教程相关文章。Vaadin Web应用开发教程(1):概述Vaadin Web应用开发教程(2):安装开发环境

在大部分情况下使用TableQuery就可以满足应用要求，如果需要使用复杂查询，比如多表查询，则可以使用FreeformQuery。 缺省情况下FreeformQuery为只读，如果需要支持写操作，可以自行实现FreeformQueryDelegate接口。// Read-only queriespublic StatementHelper getCountStatement()publi

数据库表之间存在参考关键，这对应到数据库通常为外键引用。Vaadin 的SQLContainer提供了不同SQLContainer之间引用的有限支持，但其实现主要是通过Java 代码来实现的，并不需要数据库的表之间一定要有外键定义。给一个SQLContainer添加引用的方法为：public void addReference(SQLContainer refdCont,

和普通Container修改其中Item项类似，SQLContainer 可以使用类似的方法来编辑其中的Item。RowItem的ColumnProperties 会自动通知SQLContainer关于数据的变化并应用到数据库。添加Item向SQLContainer中添加一项是通过方法addItem()来完成的。这个方法将创建一个新的Item，新创建的Item可以在内存中缓存或直接添加到数

在Vaadin中使用SQLContainer简单而直接，本篇及后面几篇将使用HSQLDB为例，HSQLDB为一纯JAVA实现的数据库系统，支持多种模式，如服务器模式（如其它数据库服务器比如Sql server, MySQL) 或者作为应用程序的一部分，或是直接使用内存。 本例使用HSQLDB的主要原因是因其简单，不需要另外安装数据库服务器，只要使用jar 包，例子使用随HSQLDB下载包中提供的示

SQLContainer 的过滤及排序在设计时总是通过数据库操作来完成，也就是说在使用Filter 和Sorting 时应用与数据库之间会发生通信。实际上Filter 对应到SQL语句的WHERE语句，Sorting 则对应到ORDER BY语句。除了Container支持的Filter之外（可以参见Vaadin Web应用开发教程(44): 使用Container接口管理一组Item），SQ

TabSheet布局支持标签显示。TabSheet布局通过方法 addTab()添加一个标签页。// Create an empty tab sheet.TabSheet tabsheet = new TabSheet(); // Make the tabsheet shrink to fit the contents.tabsheet.setSizeUndefined();tab

Web应用一个重要的组成部分为访问数据库，Vaadin提供的SQLContainer 实现了Container接口用来连接各种数据库。SQLContainer支持两种类型的数据库访问，通过TableQuery,使用这一预设的查询生成器可以通过Container接口直接读取，更新，插入数据库表格中。而使用FreeformQuery允许程序员使用自定义的查询语句来读取数据，并可以选择实现如何写入数

Panel 为带有边框和标题的简单容器类，它的客户区为一布局对象，其缺省布局方式为VerticalLayout，可以通过setContent来修改缺省布局。 Panel的标题可以由图标和文字构成.// Create a panel with a caption.final Panel panel = new Panel("Contact Information");panel.addS

HorizontalSplitPanel和VerticalSplitPanel为水平和垂直分割窗口，可以将空间分成上下或左右两部分。用户可以通过中间的分隔条调整两部分的大小。可以通过setFirstComponent()和setFirstComponent()为分隔的两部分设置不同的UI组件， addComponent()也可以依次添加两个UI组件。// Have a panel to p

AbsoluteLayout 布局允许将其中的UI组件任意指定其位置。方法addComponent()可以指定相对于AbsoluteLayout边界的纵横坐标。还可以指定一个Z方向深度值，用来表示UI组件的前后顺序。UI组件的位置是通过left,right,top,bottom 及z-index 来指定（CSS对应的属性）// A 400x250 pixels size layout

前面基本介绍了Vaadin提供的各种UI组件和布局，所以界面都是通过代码来完成的。安装Vaadin的Eclipse插件后，可以通过拖拉的方式来开始话设计用户界面。设计出的界面为CustomComponent 的派生类。使用CustomComponent的基本方法如下：并可以参见Vaadin Web应用开发教程(27):UI组件-自定义组件public class MyApplication

Slider组件可以显示为垂直或是水平滑动条，可以使用鼠标拖动来设置其值。 其基本使用如下：// Create a vertical sliderfinal Slider vertslider = new Slider(1, 100);vertslider.setOrientation(Slider.ORIENTATION_HORIZONTAL);// Shows the value

Button 按钮，在前面Vaadin Web应用开发教程(5):Vaadin Web应用的基本组成部分 中介绍事件处理时已经对Button的用法做了说明。当用户点击按钮时会触发Button.ClickEvent ，可以使用 Button.ClickListener 来侦听这个事件。public class TheButton extends CustomComponent

DateField 用于显示和输入日期和时间。它有两个变种：一是PopupDateField ，以Popup 日历选取框，另外为InlineDateField，会一直显示日期选择窗口。DateField 缺省使用 Popup方式。下面代码为DateField的基本使用方法：// Create a DateField with the default styleDateField date

PasswordField 为TextField 的一个变种，主要用来获取用户密码。PasswordField tf = new PasswordField("Keep it secret");

RichTextArea 允许输入带格式的文本。 RichTextArea 内容以HTML格式显示。它继承自TextArea，本身没有提供什么附加功能，你可以通过扩展VRichTextArea, VRichTextToolbar 的方法来为RichTextArea添加客户端功能// Create a rich text areafinal RichTextArea rtarea = new

前面TextField 一般为单行显示，而TextArea为多行显示。基本用法如下：// Create the areaTextArea area = new TextArea("Big Area");// Put some content in itarea.setValue("A row\n"+ "Another row\n"+

TextField文本框，可以接受用户输入文字。它实现Field接口，支持数据绑定。基本用法：// Create a text fieldTextField tf = new TextField("A Field");// Put some initial content in ittf.setValue("Stuff in the field");显示如下:支持Fi

组件Link为超链接。指向一个外部资源。 Link实际为一HTML 链接。和Button 不同的是,Link 不会在服务器端触发一个事件。你也可以使用setIcon 为Link添加一个图标：// Textual linkLink link = new Link("Click Me!", new ExternalResource("http://vaadin.com/"))

Web应用使用多种资源，比如图像或是供下载的文件。Vaadin中的Embeded UI通常显示图像而Link提供可供下载的文件，其它的UI组件，比如TabSheet可以使用图标资源。Web服务器通常无需Application对象的帮助就可以处理对静态资源的请求，对于一些可以动态生成的资源（图像，或文件等）Application则需动态创建这些资源。Vaadin支持多种资源类型的创建，比如动态创

从本篇开始介绍Vaadin提供的UI组件的基本用法，这些UI组件包括Label, Link, TextField, TextArea, PasswordField, RichTextArea, DateField, Button, CheckBox, Select, Table, Tree ,MenuBar, Embeded, Upload, Form, ProgressIndicator, Sl

上篇博客Vaadin Web应用开发教程(4):开始编写Web应用 介绍了一个最简单的Vaadin应用。一般来说，一个Vaadin应用由下面几个部分构成：Windows 每个Web应用都有一个主窗口。主窗口(Main windows) 为应用程序级窗口，或是指UI层次的根元素。实际上Web应用可以包含多个应用程序级(application level)窗口,这些窗口都和Applicatio

Checkbox 的状态可以为checked和unchecked. 其值可以通过getValue, setValue 来操作。基本用法如下// A check box with default state (not checked, false).final CheckBox checkbox1 = new CheckBox("My CheckBox");main.addComponent

Vaadin 中提供了多种组件允许用户从多个选项中选择某个或多个选项。比如列表，下拉框，一组RadioButton或CheckBox，表格或Tree等。下面为由Vaddin提供的核心选项组件，都是从基类AbstractSelect派生而来。Select  在单选模式时，提供一个文本框和一个下拉框，用户可以通过输入文字来筛选选项。在多选模式下等同ListSelect。ComboB

Table 用来显示一个二维表，Table算是Vaadin提供的功能最强大的组件，每个单元格既可以显示字符串也可以显示其它的UI组件。你可以实现可编辑的表格，比如点击某个单元格后将其变为可编辑的文本框。Table关联的数据采用Vaadin 的Container数据模型。从而使得Table可以直接绑定数据库的表或查询。Table只载入当前需要显示的数据，当数据载入时，Table会给出提示正在显示