首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Vaadin - 来源于北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

2012-10-27 
Vaadin - 来自北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发执行 start.bat (Windows

Vaadin - 来自北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

执行 start.bat (Windows 平台 ) 或 start.sh (UNIX 平台 ) 后 Vaadin SDK 会在浏览器窗口中 (http://localhost:8888/) 启动样例应用程序,在这个程序中包含了 Vaadin 的各种学习资料和 UI 组件的 demo 展示。图二为 Vaadin UI 组件 Demo 展示程序界面,在这个展示程序中列出了各种 UI 组件的外观及生成代码示例。


图 2. Vaadin UI 组件 Demo 展示程序
Vaadin - 来源于北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

使用 Eclipse 创建 Vaadin 项目时只需在 File 菜单下选择 New -> project ->Vaadin ->Vaadin Project 即可建立一个 Vaadin 工程 , 图 4 为建立本文示例工程的配置对话框。需要注意的是本文的示例使用 Tomcat V6 作为 Vaadin 的运行时环境 , 在启动 Vaadin 项目之前须确保 Eclipse 中已经配置好了 Tomcat 服务器。


图 4. 建立 Vaadin Eclipse 工程的参数配置
Vaadin - 来源于北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

在 Eclipse 中启动 Vaadin 项目的过程同样非常简单,在 Eclipse 创建 Vaadin 项目时会预先创建好一个 Vaadin Application 的实现类并配置好相应的 servlet 信息。启动项目只需选中项目,并在 Run 菜单中选择 Run As- 〉 Run On Server 即可在地址 : http://localhost:8080/{ProjectName}/( 本示例程序中地址为 http://localhost:8080/DW_Vaadin_Project/) 访问建立的 Vaadin 应用程序

在 Netbeans 中创建一个 Vaadin 项目需要以下步骤:

首先在 Netbeans 的 File 菜单中选择“New Project”命令,之后在弹出的 New project 面板中选择“Java Web”分类中的“Web Application”类型,点击 Next 按钮。 在 New Web Application 面板中填写项目名称后点击 Next 按钮。 在 New Web Application 面板中设定 Server 为 Netbeans 自带安装的 Tomcat V6,Java EE Version 为 Java EE 5,Context Path 保持不变 ( 本示例程序中为"/DW_Vaadin_Project"), 点击 Next 按钮。 如图 6 所示,在 New Web Application 面板中选择 Vaadin 作为应用程序使用的 Fameworks 框架 , 点击 Finish 按钮完成项目创建的全过程。


图 6. 设定 Vaadin 为应用开发框架
Vaadin - 来源于北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

相对创建项目而言,在 Netbeans 中启动 Vaadin 应用非常简单,只需在 Projects 面板中右键点击项目,在弹出菜单中选择 Run 即可。默认情况下 Netbeans 会使用 Tomcat 在地址 :http://localhost:8084/{ProjectName}/Vaadin( 本示例程序中地址为 http://localhost:8084/DW_Vaadin_Project/Vaadin) 启动 Vaadin 应用。

在 Vaadin 应用程序中必须定义一个 Application 类来作为程序的入口,这个类需要继承 Vaadin 的抽象类 com.Vaadin.Application并且实现 init()方法。当程序运行时,Vaadin 会执行 init() 方法中的代码来生成各个 UI 组件。除此之外,Application 类还提供了应用程序窗口管理,执行控制和主题选择的功能。在初始化 UI 组件时,至少需要建立一个主窗口 (Main Window), 这个主窗口是 Web 浏览器中最高层的 UI 组件 , 其他所有的 UI 部件都包含在主窗口中。由于 Vaadin 应用是一个单页面的 Web 应用程序 , 在整个应用的生命周期中 , 主窗口不会被再次装载 , 所以它和桌面应用程序的主窗口非常类似,是所有其他 UI 组件的容器。如清单 1 所示,可以使用 Application 类的 setMainWindow()方法来为应用程序添加主窗口。


清单 1. 在 Application 中创建主窗口和子 UI 组件



图 9. 一个使用 Vaadin 开发的真实应用的界面截图
Vaadin - 来源于北欧的 Web 应用开发利器,第 1 部分: Vaadin 的基本概况和基础开发

Property: 属性接口是 Vaadin 数据模型的基础 , 它提供了一个标准的 API 来读写单独的数据对象。属性是有具体类型的 Java 对象 , 支持对象的类型转型 , 当属性的值发生改变时,属性对象还能够提供 ValueChangeEvent( 可以被 ValueChangeListener监听器处理 ) 的事件广播。可以通过实现 Property 接口或者使用 Vaadin 内置的 Property 实现类来使用属性对象。内置的 ObjectProperty类用来表示简单的对象属性,MethodProperty类用来表示 Java Bean 属性。除了以上两个类,Vaadin 的很多内置表单控件 ( 例如 Field 控件 ) 也都实现了 Property 接口。Property 对象的值使用方法 setValue() 设置,使用 getValue() 读取,读取的返回值是基本的的 Object 对象。所以在读取属性值时需要对返回值进行转型。清单 4 中的代码演示了 Property 对象的基本使用方法。

清单 4. 使用 Property 对象的代码示例

王颖初 就职于 IBM 中国软件开发中心(CSDL),他是 SUN 认证的 SCJP Java 程序员 ,SCWCD Web 组件开发员以及 SCDJWS Web 服务开发员,目前在 CDL ECM ACM Team 从事使用 Java 和 JavaScript 技术的 Web 软件开发工作。

http://www.lxvoip.net/voip/?m=13335706439

热点排行