Vaadin Web应用开发教程(3):Vaadin应用程序框架介绍

Vaadin 应用程序框架为一服务器端技术,允许开发人员采用和开发桌面应用类似的方法开发Web应用。尽管Vaadin 底层采用了HTML,JavaScript,AJAX等Web技术,Vaadin应用程序框架很好的隐藏了这些细节,开发人员一般无需了解上述Web技术来开发Vaadin应用。

下图为Vaadin 总体结构图:

Vaadin Web应用开发教程(3):Vaadin应用程序框架介绍

Vaadin 包含了一组Web 应用开发的API,大量的UI 组件,多种内置主题,以及数据绑定允许将数据源直接绑定到UI组件。

一个Vaadin应用实际为运行在Java Web服务器上的Serverlet,Vaadin的Terminal Adapter接受来自客户端浏览器发来的请求并解释用户事件(Event),Event 由UI组件发送给应用,应用通过Listener来响应用户事件。这和桌面应用非常类似。 如果应用程序需要修改UI显示,这是通过Terminal Adapter向浏览器发回响应(Response)来实现的。

所以Vaadin应用都由com.vaadin.Application派生。应用创建用户界面,响应用户事件等。

Vaadin应用程序框架的几个主要组成部分如下:

用户界面组件( User Interface Components)

包括界面布局(Layout),UI控件(如Button,Link,Lable等),和Swing提供的UI组件类似。Vaadin 的UI 组件由两部分组成:Client-Side 和 Server-Side。每个客户端部分对应一个服务器部分。他们之间通信通过Terminal Adapter来完成。

客户端引擎(Client-side Engine)

Vaadin的客户端引擎使用GWT(Google Web Toolkit)来渲染显示UI组件,它通过Terminal Aapater与服务器端UI组件部分通信。UI 变化使用UIDL(User Interface Definition Language)语言来描述。UIDL基于JSON表述。

终端适配器 (Terminal Adapter)

Vaadin 的UI组件不直接显示在网页上,而是通过终端适配器。有了这个额外的抽象层使得Vaadin应用可以运行于大部分的浏览器上。最新的Vaadin应用使用GWT来显示UI控件。UI组件向Terminal Adapter报告界面变化,当用户触发某个事件(比如点击按钮),这个事件由Client-Side Engine以AJAX请求的方法报告给服务器端的Terminal Adapter。服务端处理事件后再通过Terminal Adapter 以Response的方式返回给Client-Side Engine,从而进一步修改UI显示。

显示主题(Theme)

Vaadin将UI显示的表述(Presentation)和逻辑(Logic)分开. 其中UI逻辑由对应的Java代码处理。而采用主题通过CSS来定义UI显示。Vaadin内置多种显示主题,开发人员也可自定义主题。

用户界面定义语言(UIDL)

Terminal Adapter使用UIDL来描述UI控件及其变化。UIDL 本身通过JSON来描述。所有的UI变化,如Check 按钮选择与否的状态都是通过UIDL来描述的。

事件(Events)

用户交互触发事件,如鼠标按键,事件首先由Client-Side Engine处理,然后以HTTP请求的方式发送多到服务器,Terminal Adapter, 服务器端UI组件部分等。

数据模型(Data Model)

Vaadin 定义了数据模型,使用这种数据模型,UI组件可以绑定到数据源,比如变量,数组,数据库的表。

你可能感兴趣的:(Web应用)