Vaadin学习笔记——Page、UI和View在用法上的区别

时间 2019-11-09

标签 vaadin 学习笔记 page view 在用法上区别繁體版

原文原文链接

前言

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

本文基于Vaadin 7.7.6撰写，不一样Vaadin版本会有细微差别。web

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。app

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

图-1ui

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

Vaadin推荐咱们用single-page的方式来构建web应用，这也是当前的趋势，因此，通常状况下一个由vaadin构建的web应用中只有一个UI。到这里你确定会有一大堆疑问，别着急，接着往下看。component

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（分别是view一、view2），在UI中有一个成员变量Navigator，并将两个View（view一、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的用途就介绍到这里，欢迎各位读者赐教、指正。