Vaadin学习-入门篇

658 阅读1分钟

说明

相比于《practice vaadin》书籍中样例程序中采用jdk16,打包成war,需要使用jetty调试,或者放到tomcat中运行。我对pom文件进行了修改,改为基于jdk 1.8和spring-boot 2.4.2。

准备工作

    1. 需要安装v16版本的nodejs,以及jdk 1.8版本,并配置到环境变量中
    1. 需要安装maven工具,我使用的是3.6.1版本

编译和运行程序

修改后程序上传到了github上,地址如下:
github.com/happytam/pr…

开发调试阶段,使用mvn clean spring-boot:run
生产阶段,使用mvn clean package -Pproduction进行打包

程序启动后的截图如下所示,代码中添加了两个路由地址,点击后就可以完成跳转。 image.png

代码和配置说明:

pom文件中的profile配置项production是vaadin中比较常见的写法,其中build-frontend配置项必须指定周期,比如compile,那么在编译阶段,就会调用webpack,生成js和页面文件,并最终打包到jar包中。

                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>

这个简单的样例,实现了竖直方向的布局,并指定了hello-world的路由关键字,并添加显示了一个段落。

package com.apress.practicalvaadin.ch02;

import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("hello-world")
public class HelloWorldView extends VerticalLayout {

  public HelloWorldView() {
    add(new Paragraph("Hello, World!"));
  }

}