Vaadin介紹與開發練習之一（總體介紹與創建項目）

文章目錄

Vaadin是什麼？

Vaadin是一個web應用程式開發框架。基於這個框架，開發者可以使用Java開發高質量的用戶界面。
Vaadin由位於芬蘭的 IT Mill公司開發。其前身是 IT Mill 公司由2000年起開始研發的 Millstone用戶界面類庫。
Vaadin提供了一系列的用戶界面組件用來創建自己的組件。特點主要包含：易用、可重用、可擴展和滿足大型企業應用需求。

Vaadin與JavaScript區別

不同於Javascript,Vaadin是一個web應用程式開發框架。基於這個框架，開發者可以使用Java開發高質量的用戶界面。
不同於Javascript開發庫和基於瀏覽器插件的解決方案，Vaadin提供了完整的技術棧，包括健壯的服務端編程模型，以及基於GWT和HTML5的服務端開發工具。
Vaadin基於Apache 2.0協議發佈，開源免費，但也提供了收費的服務。

Vaadin與Java以及GWT的關係

Vaadin是Java語言的框架，使用Java語言開發前端頁面。說到這個，就不得不提一下GWT框架，其實Java開發前端的框架的始祖。GWT全稱Google Web Toolkit，從名字可以看出，這個由谷歌推出的一個使用Java語言進行前端開發的框架，基於這個框架，使用Java語言就可以包攬前後端的開發。
GWT出現的時間很早，要追溯到2006年，在那個逐漸由C/S轉向B/S開發的時機上， Java的AWT(Abstract Window Toolkit)，Swing和SWT（Standard Widget Toolkit，Eclipse就是使用這個開發）等界面開發技術逐漸被拋棄， Google適時推出的GWT框架迎合了很多Java開發人員的需求和轉型。突然轉向BS開發，Web技術不會怎麼辦？救星來了，就是ＧＷＴ。所以GWT曾經一度被廣大的Java開發人員所擁埠。
雖然可以避免深入學習Web技術，但是GWT的開發存在着一些不足和缺點。以筆者的親身經歷來看，不足包括：頁面不夠美觀、開發耗費大量的資源（本身Eclipse就耗資源，加上GWT的消耗，在那個年代的機器配置，編譯一次，的確需要喝杯水再來）、開發的速度慢、不直觀。基於這些缺點，就有很多後繼的補鍋者，對GWT進行繼承、改善和發揚，包括：

Vaadin，　對性能和界面進行優化
GXT，　著名的前端框架Ext　JS提供商Sencha提供的基於GWT的框架，　前端組件的頁面效果和Ext　JS很類似。
vue-gwt，　將GWT與時下流行的VUE框架進行結合

總結

一句話總結： Vaadin最大的特點是使用Java後端語言編寫前端頁面的一個框架。同時逐漸Vaadin也提供了HTML的前端組件，可以通過npm的前端包管理工具導入使用。
Vaadin最大的好處就是對於偏重後端的Java開發人員來說，可以不需要太多的前端知識，就可以使用Java代碼呈現美觀的前端頁面效果。

Vaadin 初貌

Vaadin的官方地址是： https://vaadin.com/，包括Vaadin的Java框架在內，提供的產品有：

Vaadin 框架
Java語言或HTML語言的界面組件
Designer，設計工具（需要收費），使用這個工具可以像Viusal的編程工具系列，在開發工具中拖動組件進行開發。
Charts, 交互式的圖表開發庫（收費）
Vaadin 框架實現基本的Java代碼轉換前端頁面的功能，基於框架，Vaadin提供了豐富的組件。

Vaadin提供的組件

Vaadin提供了豐富的組件，主要分爲以下幾類：

表單輸入類。包括單選框、複選框、下拉框、日期輸入框、郵箱輸入框、數字輸入框、密碼輸入框、文本框以及文件上傳框等
可視化與交互組件，包括：按鈕、圖標、鏈接、菜單、對話框、表格、樹形表格、進度條以及標籤頁等
佈局類。包括：應用佈局、表單佈局、登錄框等。
高級組件（需要收費），包括：圖表、高級表格、富文本編輯器以及類Excel的編輯組件。
以上組件的效果和演示可以在 https://vaadin.com/components查看。

Vaadin 開發概述

開發之前，首先要找一個好用的開發工具，作爲Java的開發， Vaadin支持Eclipse IDE、IntelliJ IDEA和NetBeans IDE集成開發環境，推薦使用Eclipse 或IntelliJ IDEA，Vaadin同時提供了相關的插件加速開發。
類似Spring Boot，Vaadin提供了在線產生項目框架的工具，地址是：https://vaadin.com/start/v14
產生項目框架的頁面如下：

從上圖可以看出，這裏使用Maven管理依賴。Vaadin支持不同的技術棧，比如一般的Servlet、Java EE以及Spring Boot。綜合來看，初始化Vaadin的方式有：

技術棧/初始方式	在線工具	Eclipse插件	使用Vaadin Maven工程骨架
普通的Sevlet項目	V	V	V
Java EE	V	V	V
Spring Boot	V	V	V

創建Vaadin項目

這裏使用Vaadin在線工具創建普通的Servlet項目，使用Eclipse進行開發。這裏使用的開發環境如下：

JDK版本： 1.8
Eclipse版本：2019-06
Node.js：v12.16.1

具體步驟包括：

創建空的Vaadin項目。
進入在線生成網頁，選擇技術棧，輸入項目包名和項目名之後，點擊“Download”
解壓項目文件
下載的文件是一個壓縮文件，這裏的名字是my-vaadin.zip。將該壓縮文件解壓到Eclipse的工作區目錄中。
導入項目到Eclipse
File–》Import 選擇Maven/Existing Maven Projects.

在彈出的對話框中，選擇項目路徑後點“Finish”
編譯、單元測試和部署項目
右鍵單擊項目後，使用Maven install 命令編譯、單元測試和部署項目（將編譯後的項目放到本地庫）。初次執行會花費較長時間，因爲需要從遠端庫下載Vaavin相關的依賴包。如果速度慢，可以在Mavan中設置使用阿里的鏡像。

如果Maven執行出現Perhaps you are running on a JRE rather than a JDK，則添加JDK作爲運行時環境。

如果運行正確之後，在Eclipse中還是報找不到包的錯誤，則運行eclipse:eclipse命令，如下圖所示：
運行項目
使用Maven的jetty:run命令，在jetty服務器中運行項目。（當然也可以使用Tomcat）。

初次運行同樣會耗費較長時間，jetty:run命令會首先使用npm下載前端需要的包，再使用Webpack打包。如果控制檯遲遲沒完成，可以到項目目錄下手動執行 npm install之後再重新運行jetty:run。