Vaadin介绍与开发练习之一（总体介绍与创建项目）

文章目录

Vaadin是什么？
- Vaadin与JavaScript区别
- Vaadin与Java以及GWT的关系
- 总结
Vaadin 初貌
- Vaadin提供的组件
Vaadin 开发概述
创建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。

Jetty启动成功的控制台输出如下：

运行项目
在浏览器输入 http://localhost:8080/，执行成功的页面效果如下：

开发参考

Vaadin的源码控管在GitHub，地址是：
https://github.com/vaadin

在线文档地址：
https://vaadin.com/docs/index.html