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的用途就介紹到這裏，歡迎各位讀者賜教、指正。