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。所以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
Vaadin介绍与开发练习之一(总体介绍与创建项目)相关推荐
- 基础实验篇 | RflySim底层飞行控制算法开发系列课程总体介绍
本讲主要介绍多旋翼的特点及选用多旋翼作为实验平台的原因.对于无人系统教育的一些新需求.RflySim平台对于飞控的底层控制算法的开发优势.本期平台课程的设置.以及如何开发自驾仪系统. 相较于固定翼和直 ...
- 【Django】开发日报_3_Day:员工管理系统-创建项目
目录 0.创建新的Django项目 1.创建app 2.注册app 3.设计表结构 4.在MySQL中生成表 5.静态文件管理 6.部门管理 6.1 部门列表 0.创建新的Django项目 step1 ...
- 【Django】开发日报_4_Day:手机号码管理系统-创建项目并实现基本功能
目录 0.新建Django项目 (1)修改setting.py (2)删除根目录下的templates (3)创建App (4)注册App (5)创建App->templates (6)引入st ...
- uni-app卖座电影多端开发纪实(一):创建项目
@关于uni-app 今日之C端主要都是跑在手机而非PC上了,其形态也以小程序.App.手机H5页面为主了: 大前端之C端 作品拿粗给人看,也十之八九要掏手机了: 好在我们有 宇宙制霸人间值得流芳千古 ...
- SRPG游戏开发(三)第二章 创建项目
返回目录 第二章 创建项目 本章开始我们来创建我们的项目,导入用到的素材. 一 创建项目 打开Unity3D,点击New按钮.这时我们看到创建项目的设置界面. 图 2 - 1创建项目 Project ...
- 从零开始用Unity开发《坦克世界》1.创建项目,导入素材
哈喽,大家好,我是飞麦菌. 这一系列的文章将记录我自己使用Unity开发网游<坦克世界>(对,白毛子做的那个)的全过程,会重点详细记录我自己遇到代码上的困难.我想把这个记录做得对新手极度友 ...
- Android电子书阅读器开发笔记(1):创建电子书阅读器项目
项目开发工具是Android Studio. 创建项目 选择菜单命令:File->New->New Project,填入项目信息. (2)设置项目运行的设备和最低Android SDK版本 ...
- Vaadin介绍与开发练习之二(创建第一个Vaadin类)
文章目录 默认项目目录结构 开发实例 本篇承接上一篇: Vaadin介绍与开发练习之一 在上一篇中通过Vaadin在线工具产生了一个普通的Servlet项目:my-vaadin,之后将该项目导入Ecl ...
- ABP开发框架前后端开发系列——框架的总体介绍
ABP开发框架前后端开发系列--框架的总体介绍 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架. ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领 ...
最新文章
- @Query Annotation in Spring Data JPA--转
- 【效率专精系列】善用API统一描述语言提升RestAPI开发效率
- 二叉树类型笔试面试题大总结(含代码)
- Jupyter.net:使用Jupyter进行交互式计算的Windows应用程序
- SQL Tuning 基础概述05 - Oracle 索引类型及介绍
- 集成学习-蒸汽量预测案例
- DRBD+Heratbeat+NFS高可用文件共享存储
- (14)Python_SimpleImputer缺失值处理
- java抓取豆瓣网页内容_爬取豆瓣网页上的电影(包括图片,评分,和简介等)
- 接口压力测试:Jmeter【专门做接口压力测试】
- C语言中自定义的标识符
- 17、Python的循环结构(一)
- 服务器bios界面usb无线网卡,BIOS怎么开启无线网卡
- OpenEuler树莓派基础实验 20212802范辰宇
- Android 使用Service 实现的简易音乐播放器(有播放、暂停(继续)、重播、停止)
- 【仿真建模】第四课:AnyLogic入门基础课程 - 轨道交通仿真入门讲解
- java word 颜色设置_如何在Java中为word文档(.doc或.docx)设置背景颜色(页面颜色)?...
- C语言编程>第十六周 ⑦ s是全部由小写字母字符和空格字符组成的字符串,由len传入字符串的长度,请补充fun函数,该函数的功能是:统计字符串s中的单词数,结果由变量len传回。
- SiamCAR: Siamese Fully Convolutional Classification and Regression for Visual Tracking
- python文件的打开模式有几种_以下选项中,不是Python打开文件模式的是( )_学小易找答案...
热门文章
- Unity2018 2019 Prefab 说明(官方文档翻译)
- 大数据前端团队生存指南
- C# winform 制作串口助手(仅需一小时手把手学会制作简单串口助手)
- 【无标题】 `x` is assigned to here but it was already borrowed
- 解决Consider adding an error boundary to your tree to customize error handling behavior报错
- 杭州恒生电子笔试凉经
- input标签默认值
- 2010最具幸福感城市排名,可信吗?
- 简约而不简单-软件测试自动化的魅力和力量
- [转载]矩阵行列式为零和不为零的充分必要条件