java web mvc-07-Vaadin 入门介绍

news2024/10/6 1:47:00

拓展阅读

Spring Web MVC-00-重学 mvc

mvc-01-Model-View-Controller 概览

web mvc-03-JFinal

web mvc-04-Apache Wicket

web mvc-05-JSF JavaServer Faces

web mvc-06-play framework intro

web mvc-07-Vaadin

web mvc-08-Grails

开源

The jdbc pool for java.(java 手写 jdbc 数据库连接池实现)

The simple mybatis.(手写简易版 mybatis)

Vaadin Flow 快速入门

需求

添加代码

运行应用程序

Vaadin Flow 可以帮助您快速构建纯 Java 的 Web 应用程序,无需编写任何 HTML 或 JavaScript。本指南演示了如何使用 Vaadin Flow 构建一个小型但完全功能的 ToDo 应用程序。

需求

首先,您需要 JDK 17 或更高版本(例如 Eclipse Temurin JDK)。接下来,您需要下载快速入门项目。您可以通过点击这里的按钮进行下载:

https://start.vaadin.com/dl?preset=flow-quickstart-tutorial

完成下载后,请将下载的ZIP文件解压到本地文件夹中。然后将项目导入到一个集成开发环境(IDE)中。

添加代码

接下来,您将添加代码。

打开位于 src/main/java/com/example/application/views/main/ 目录下的 MainView.java 文件。

用以下代码替换该文件中的代码:

package com.example.application.views.main;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("") 
public class MainView extends VerticalLayout { 

  public MainView() {
    VerticalLayout todosList = new VerticalLayout(); 
    TextField taskField = new TextField(); 
    Button addButton = new Button("Add"); 
    addButton.addClickListener(click -> { 
      Checkbox checkbox = new Checkbox(taskField.getValue());
      todosList.add(checkbox);
    });
    addButton.addClickShortcut(Key.ENTER); 

    add( 
      new H1("Vaadin Todo"),
      todosList,
      new HorizontalLayout(
        taskField,
        addButton
      )
    );
  }
}

@Route 注解使得该视图对终端用户可访问,在这种情况下,使用了空的 "" 路由。

由于 MainView 类扩展了 VerticalLayout,因此添加到其中的组件按垂直顺序排列。

todosList 是一个垂直布局,显示任务列表以及复选框。

taskField 是一个文本输入字段,用于输入新任务的描述。

addButton 是一个用于添加新任务的按钮。

在按钮点击的监听器中,首先创建一个新的复选框,其标签为来自 taskField 的值。然后将复选框添加到 todosList 中。

addButton 组件添加一个快捷键,当按下 Enter 键时触发。

调用 VerticalLayout 上的 add() 方法以垂直方式显示这些组件。请注意,taskFieldaddButton 位于一个 HorizontalLayout 中,这使它们并排显示。

运行应用程序

到目前为止,您所做的可能看起来并不多,但已足以运行应用程序。

在您的 IDE 中运行它,启动位于 src/main/java/org/vaadin/example 目录下的 Application.java。

或者,您可以在命令行中运行该项目,输入以下命令:

  • 在 macOS 或 Linux 系统上输入 ./mvnw
  • 在 Windows 系统上输入 mvnw

然后,在浏览器中打开 localhost:8080。您应该会看到以下内容:

[外链图片转存中…(img-9zLTjq9x-1706024506586)]

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1406480.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通信入门系列——复变函数

本节目录 一、复变函数 1、复数 2、复数的四则运算 二、复指数函数 三、欧拉公式本节内容 一、复变函数 1、复数 复数单位i,也就是满足i^2-1,将zxiy表示为复数z,x和y为任意的实数,称为复数z的实部和虚部。由复数zxiy对应的点(x,y…

LiveGBS流媒体平台GB/T28181常见问题-如何配置使用自己已有的redis服务替换redis版本升级redis版本

LiveGBS如何配置使用自己已有的redis服务替换redis版本升级redis版本 1、Redis服务2、如何切换REDIS?2.1、停止启动REDIS2.2、配置信令服务2.3、配置流媒体服务2.4、启动 3、搭建GB28181视频直播平台 1、Redis服务 在LivGBS中Redis作为数据交换、数据订阅、数据发布的高速缓存…

TensorRT英伟达官方示例解析(一)

系列文章目录 TensorRT英伟达官方示例解析(一) TensorRT英伟达官方示例解析(二) 文章目录 系列文章目录前言一、参考资料二、配置系统环境三、00-MNISTData四、01-SimpleDemo4.1 Makefile4.2 main.cpp4.3 main.py 总结 前言 一、…

上位机图像处理和嵌入式模块部署(自定义算法)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 我们在使用opencv的时候,虽然大部分算法都不需要我们自己重头开始编写,但是总有一些关于我们自己产品的know-how&#xff0…

Redis--Bitmap有序集合的语法和使用场景举例

文章目录 前言Bitmap概述Bitmap命令介绍使用场景结尾 前言 Redis除了常见的五种数据类型之外,其实还有一些少见的数据结构,如Geo,HyperLogLog,Bitmap等。虽然它们少见,但是作用却不容小觑。本文将介绍Bitmap数据类型的…

c语言-柔性数组

文章目录 前言一、柔性数组的介绍1.1 柔性数组的定义 二、柔性数组的使用2.1 使用说明2.2 结构体中的成员只包含一个柔性数组成员2.3 结构体中的成员包含其他成员和一个柔性数组成员 三、模拟柔性数组总结 前言 本篇文章介绍c语言中的柔性数组。 一、柔性数组的介绍 1.1 柔性…

【动态规划】【字符串】【C++算法】940. 不同的子序列 II

作者推荐 【动态规划】【广度优先搜索】【状态压缩】847 访问所有节点的最短路径 本文涉及知识点 动态规划汇总 LeetCode940. 不同的子序列 II 给定一个字符串 s,计算 s 的 不同非空子序列 的个数。因为结果可能很大,所以返回答案需要对 10^9 7 取…

MySQL之数据库DDL

文章目录 MySQL数据库基本操作数据定义DDL对数据库的常用操作创建表修改表格式结构 MySQL数据库基本操作 首先我们先了解SQL的语言组成,他分为四个部分 数据定义语言(DDL)数据操纵语言(DML)数据控制语言(…

网络安全---防御保护--子接口小实验

子接口小实验: 环境准备: 防火墙区域配置为trust: PC设置其ip为同一个网段: 此时尝试ping无法ping通的原因是没有打开防火墙允许ping,我们在图形化界面允许ping即可 最终结果: .com域名服务器: …

机器视觉系统选型-参数-镜头各个参数之间相互关系

焦距越小,景深越大;焦距越小,畸变越大; 光圈越大,图像亮度越高;光圈越大,景深越小; 光圈越大,分辨率越高; 一般像场中心较边缘分辨率高,像场中心较…

K8S四层代理Service-02

Service的四种类型使用 ClusterIP使用示例Pod里使用service的服务名访问应用 NodePort使用示例 ExternalName使用示例 LoadBalancer K8S支持以下4种Service类型:ClusterIP、NodePort、ExternalName、LoadBalancer 以下是使用4种类型进行Service创建,应对…

网络协议与攻击模拟_06攻击模拟SYN Flood

一、SYN Flood原理 在TCP三次握手过程中, 客户端发送一个SYN包给服务器服务端接收到SYN包后,会回复SYNACK包给客户端,然后等待客户端回复ACK包。但此时客户端并不会回复ACK包,所以服务端就只能一直等待直到超时。服务端超时后会…

.NET国产化改造探索(七)、更改大金仓数据库认证方式

随着时代的发展以及近年来信创工作和…废话就不多说了,这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来,看操作。 之前安装人大金仓数据库的时候,连接数据库所使用的加密方式选择的是scram-sm3,权限管理框架的ORM使用的…

机器学习实验2——线性回归求解加州房价问题

文章目录 🧡🧡实验内容🧡🧡🧡🧡数据预处理🧡🧡代码缺失值处理特征探索相关性分析文本数据标签编码数值型数据标准化划分数据集 🧡🧡线性回归🧡&am…

router4j--SpringCloud动态路由利器

前言 本文介绍Java的动态路由中间件:router4j。router4j用于SpringCloud项目,它可以将某个url请求路由到指定的机器上,也可以将所有请求强制转到指定机器。 问题描述 Java后端在开发SpringCloud项目时如果同一个应用起了多个实例&#xff…

汽车网络架构与常用总线汇总

汽车CAN总线简述 CAN 是控制器局域网Controller Area Network 的缩写,1986年,由德国Bosch公司为汽车开发的网络技术,主要用于汽车的监测与控制,目的为适应汽车“减少线束的数量”“通过多个网络进行大量数据的高速传输”的需求。…

php中laravel项目开发技巧与避坑

公司开发新业务,涉及到地址引用和循环遍历,结果测试人员说部分数据对不上,经排查,ID无值,name却有值,断点定位后,发现是地址引用的问题引起的 问题原因 数据库查询也确实是0 解决方案 注意事项…

理想架构的非对称高回退Doherty功率放大器理论与仿真

Doherty理论—理想架构的非对称高回退Doherty功率放大器理论与仿真 参考: 三路Doherty设计 01 射频基础知识–基础概念 Switchmode RF and Microwave Power Amplifiers、 理想架构的Doherty功率放大器(等分经典款)的理论与ADS电流源仿真参考…

什么是ORM思想?

1. ORM概念 ORM(Object Relational Mapping)对象关系映射模式,是一种技术,解决了面向对象与关系型数据库存互不匹配的现象。 ORM在业务逻辑层和数据库层之间充当了桥梁的作用。 2. ORM由来 在软件开发的过程中,通常…

UE5.2、CesiumForUnreal实现加载GeoJson绘制单面

文章目录 前言一、实现目标二、实现过程1.实现原理2.数据读取3.三角剖分3.具体代码 4.蓝图测试 前言 UE5、CesiumForUnreal实现加载GeoJson绘制单面(Polygon)功能(StaticMesh方式) 一、实现目标 通过读取本地的Geojson数据&…