前言

在Vaadin技术框架中会出现三种不同的类，用于架构Web应用。它们分别是：Page、UI、View。本文将对这三者从使用角度进行比较，试图分析三者的异同。本文完全原创，我可不是在强调版权，我只是想告诉读者，下面的内容都是我自己的粗浅理解，欢迎各位读者指正、探讨。

本文基于Vaadin 7.7.6撰写，不同Vaadin版本会有细微差异。

Page

API Doc：https://vaadin.com/api/com/vaadin/server/Page.html

Page对象代表当前的浏览器窗口、Tab页，相当于HTML DOM中的window对象。Page的对象的主要功能有：

  • 注册浏览器级监听器（如：窗口事件、URI变更事件等）；
  • 获得浏览器窗口信息（如：高度、宽度、状态、样式、语言环境、浏览器信息、窗口信息、标题栏信息等）；
  • 设置以上信息；
  • 开启新窗口、修改URI片段、刷新窗口内容等。

UI

API Doc：https://vaadin.com/api/com/vaadin/ui/UI.html

UI对象代表着HTML片段，通常情况下，一个UI将填充整个页面（篇幅、窗口，随便怎么叫，总而言之就是你点了某个链接之后在窗口中看到的内容），当然，也有一个页面包含多个UI的情况（我们在开发HTML页面时也会遇到把一个页面内容嵌到另一个页面中的情况）。从某种意义上讲，UI有点像HTML DOM中的document对象，其实这样说并不确切。UI相当于一个web应用的视口，代表着URL中从context之后的URI。举个例子：如果说Page对应到http://localhost:8080/myvaadinprj，那么，假设我们有一个UI，这个UI的名字是MyUI，那么，对应到URL上就是http://localhost:8080/myvaadinprj/my。

看看下面这幅图（从官网的book of vaadin.pdf中截取）：

图-1

从这个结构上看，UI像不像HTML里的<body>？

Vaadin推荐我们用single-page的方式来构建web应用，这也是当前的趋势，所以，一般情况下一个由vaadin构建的web应用中只有一个UI。到这里你肯定会有一大堆疑问，别着急，接着往下看。

View

API Doc：https://vaadin.com/api/com/vaadin/navigator/View.html

View是个接口。上面我在介绍UI时说UI像个视口（viewport），那么View就是视口中不断切换的内容（Content）。在Vaadin中，所有UI元素都是由组件（component）构成，你在web页面上看到的所有东西都是component。不同的component组成了content，既然View就是content，那么也可以说View就是component组合出来的。

说到View，那就不能不提一下Navigator。UI、View、Navigator这三者是构建single-paged web application的基础：UI提供视口（viewport），View组织组件（Component）形成内容，Navigator用来在一个UI中切换不同的View。这样一来，就模拟了之前在页面上点击链接进行页面跳转查看不同页面内容的行为方式。

说的口干舌燥不如举个例子。

我在一个web应用程序中有一个UI、两个View（分别是view1、view2），在UI中有一个成员变量Navigator，并将两个View（view1、view2）都注册到Navigator中。view1中有一个按钮，按钮的click动作就是去执行一段代码：Navigator.navigateTo(“view2”)。现在，运行这个web应用，作为默认显示的页面出来了，页面上有一个按钮。此时，你看一下浏览器的地址栏，你应该能看到类似http://localhost:8080/myvaadinprj#view1。这个view1的资源指的就是当前被默认显示出来的view1。现在点击页面上的按钮，click，okay，view2的内容显示出来了，view1的按钮没了。你再看看浏览器地址栏，你会发现URL变成了http://localhost:8080/myvaadinprj#view2。就是这样，View所对应的URL就是#后面的那段字符串。

Okay，至此，Page、UI和View的用途就介绍到这里，欢迎各位读者赐教、指正。

Vaadin学习笔记——Page、UI和View在用法上的区别的更多相关文章

  1. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  2. 【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  3. Ext.Net学习笔记22：Ext.Net Tree 用法详解

    Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...

  4. Ext.Net学习笔记23：Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  5. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  6. Xamarin 学习笔记 - Page（页面）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  7. 学习笔记_J2EE_SpringMVC_03_注解配置_@RequestMapping用法

    @RequestMappingde的用法 摘要: 主要介绍注解@RequestMapping的用法 一.@RequestMapping 简介 在Spring MVC 中使用 @RequestMappi ...

  8. Dynamic CRM 2013学习笔记（二）插件基本用法及调试

      插件是可与 Microsoft Dynamics CRM 2013 和 Microsoft Dynamics CRM Online 集成的自定义业务逻辑(代码),用于修改或增加平台的标准行为.也可 ...

  9. Ext.Net学习笔记10：Ext.Net ComboBox用法

    ComboBox是最常用的控件之一,它与HTML中的Select控件很像,但可以进行多选.自定义显示格式.分页等. ComboBox用法 <ext:ComboBox runat="se ...

随机推荐

  1. Python 实现 ZoomEye API SDK

    版权声明:未经作者授权,禁止转载! ZoomEye想必大家都很熟悉,自从官方开放了API,网上各种版本的SDK乱飞.今天我也来发一个自己写的. 首先我们从https://github.com/SEC0 ...

  2. Android应用中添加Log4j的示例

    [2016-06-30]最新的log4j已经集成在DR_support_lib库中 具体请看: https://coding.net/u/wrcold520/p/DR_support_lib/git/ ...

  3. 解决Resharper在Core项目中无法执行单元测试的问题

    项目升级core了,resharper最近升级到2018.1版本,但是安装后还是无法直接运行单元测试,昨天小姐姐发了解决方法,贼有用.所以记录一下,给自己以后或者其他遇到此问题的小伙伴用.  解决Re ...

  4. UI设计师与VI设计师的区别

    企业视觉形象(CorporateVisualImage)与企业视觉形象识别(VI)并不是一个概念.前者是企业与生俱来的客观存在要素,也就是说一个企业无论是否制定了它的VI,也无论其所制定的VI是否成功 ...

  5. oracle 基础知识(十一)----表空间结构

    一,逻辑结构图 二.tablespace 01,Oracle表空间 它是一个逻辑的概念,它在物理上是不存在的. 02,oracle 存储结构 03.表空间特性 一个数据库可以包含多个表空间,一个表空间 ...

  6. nginx 代理服务指令详解

    nginx 正向代理与反向代理说明图 超级形象说明. 正向代理指令: 1, resolver 这个用于DNS服务器的ip . DNS服务器的主要工作是进行域名解析,将域名映射为对应IP地址 resol ...

  7. 安装clouderamaner时出现Failed to detect distribution错误（在ubuntu14.04版本里）

    不多说,直接上干货! 在安装过程中,本来我的ubuntu系统都是14.04的.  问题详情 问题查看 解决办法 然后,再次执行安装即可. 欢迎大家,加入我的微信公众号:大数据躺过的坑        人 ...

  8. 线程同步(windows平台)：事件

    一:介绍 事件Event实际上是个内核对象,事件分两种状态:激发状态和未激发状态.分两种类型:手动处置事件和自动处置事件.手动处置事件被设置为激发状态后,会唤醒所有等待的线程,一直保持为激发状态,直到 ...

  9. 温故而知新，再探ConcurrentHashMap

    这里说的还是1.7的ConcurrentHashMap,在1.8中,ConcurrentHashMap已经不是基于segments实现了. 之前也知道ConcurrentHashMap是通过把锁加载各 ...

  10. vim 配置文件——部分配置

    //vim 相关 set nu set showmatch set autoindent set smartindent set ruler set incsearch set tabstop=4 s ...