概述
1.Spring Vaadin实例
Vaadin是一个开源的web框架,它可以帮助Java开发人员用最少的工作构建良好的用户体验。专注于创建用户愿意使用的应用程序,Vaadin使得用Java构建漂亮的web应用程序变得很容易。所包含的UI组件库设计为在移动和桌面都能很好地工作。
2.源代码结构
整体的框架为:
3.pom.xml文件
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.keny.myapp</groupId>
<artifactId>viaadindemo</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>ViaadinDemo</name>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8
</project.reporting.outputEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<failOnMissingWebXml>false</failOnMissingWebXml>
<vaadin.version>14.1.21</vaadin.version>
<drivers.dir>${project.basedir}/drivers</drivers.dir>
<drivers.downloader.phase>pre-integration-test</drivers.downloader.phase>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<!-- Replace artifactId with vaadin-core to use only free components -->
<artifactId>vaadin-core</artifactId>
<exclusions>
<!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
<exclusion>
<groupId>com.vaadin.webjar</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.insites</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymer</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.vaadin</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.webcomponents</groupId>
<artifactId>*</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- Added to provide logging output as Vaadin uses -->
<!-- the unbound SLF4J no-operation (NOP) logger implementation -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>2.0.1.Final</version>
</dependency>
<!-- Bean validation implementation -->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.0.16.Final</version>
</dependency>
<!-- Vaadin Testbench -->
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-testbench</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<repositories>
<!-- The order of definitions matters. Explicitly defining central here to make sure it has the highest priority. -->
<!-- Main Maven repository -->
<repository>
<id>central</id>
<url>https://repo.maven.apache.org/maven2</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<!-- Repository used by many Vaadin add-ons -->
<repository>
<id>vaadin-addons</id>
<url>https://maven.vaadin.com/vaadin-addons</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>vaadin-prereleases</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<!-- Main Maven repository -->
<pluginRepository>
<id>central</id>
<url>https://repo.maven.apache.org/maven2</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>https://maven.vaadin.com/vaadin-prereleases</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
<build>
<defaultGoal>jetty:run</defaultGoal>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.4.22.v20191022</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
<!-- Use war output directory to get the webpack files -->
<webAppConfig>
<allowDuplicateFragmentNames>true</allowDuplicateFragmentNames>
</webAppConfig>
</configuration>
</plugin>
<!--
Take care of synchronizing java dependencies and imports.
It also creates webpack.config.js if not exists yet.
-->
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>prepare-frontend</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<!-- Production mode is activated using -Pproduction -->
<id>production</id>
<properties>
<vaadin.productionMode>true</vaadin.productionMode>
</properties>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-server-production-mode</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>build-frontend</goal>
</goals>
<phase>compile</phase>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>it</id>
<build>
<plugins>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<configuration>
<stopPort>8081</stopPort>
<stopWait>5</stopWait>
<daemon>false</daemon>
<stopKey>stopit</stopKey>
<scanIntervalSeconds>-1</scanIntervalSeconds>
</configuration>
<executions>
<execution>
<id>start-jetty</id>
<phase>pre-integration-test</phase>
<goals>
<goal>start</goal>
</goals>
</execution>
<execution>
<id>stop-jetty</id>
<phase>post-integration-test</phase>
<goals>
<goal>stop</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-failsafe-plugin</artifactId>
<version>2.22.2</version>
<executions>
<execution>
<goals>
<goal>integration-test</goal>
<goal>verify</goal>
</goals>
</execution>
</executions>
<configuration>
<trimStackTrace>false</trimStackTrace>
<enableAssertions>true</enableAssertions>
<systemPropertyVariables>
<webdriver.chrome.driver>${webdriver.chrome.driver}</webdriver.chrome.driver>
</systemPropertyVariables>
</configuration>
</plugin>
<!-- Plugin for automatically download Chrome Driver for tests -->
<plugin>
<groupId>com.lazerycode.selenium</groupId>
<artifactId>driver-binary-downloader-maven-plugin</artifactId>
<version>1.0.17</version>
<configuration>
<!-- root directory that downloaded driver binaries will be stored
in -->
<onlyGetDriversForHostOperatingSystem>true</onlyGetDriversForHostOperatingSystem>
<rootStandaloneServerDirectory>.driver</rootStandaloneServerDirectory>
<customRepositoryMap>drivers.xml</customRepositoryMap>
<downloadedZipFileDirectory>.driver/zips</downloadedZipFileDirectory>
<overwriteFilesThatExist>true</overwriteFilesThatExist>
</configuration>
<executions>
<execution>
<goals>
<goal>selenium</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>
4.启动的时候用mvn install 下载类库包编译
5.编译为包 mvn package
会一起打包到war里面去
Building war: /Users/apple/PythonProjects/viaadindemo/target/viaadindemo-1.0-SNAPSHOT.war
6.启动的命令为
6.1 jetty用启动; mvn jetty:run -Pproduction
[INFO] jetty-9.4.22.v20191022; built: 2019-10-22T13:37:13.455Z; git: b1e6b55512e008f7fbdf1cbea4ff8a6446d1073b; jvm 1.8.0_91-b14
[INFO] JVM Runtime does not support Modules
[INFO] Scanning elapsed time=297ms
[INFO] Initializing AtmosphereFramework
[INFO] DefaultSessionIdManager workerName=node0
[INFO] No SessionScavenger set, using defaults
[INFO] node0 Scavenging every 600000ms
6.2.页面效果为:
7.代码分析
通过阅读代码,吸收营养;
绿色部分为,vaadin的flow的component的控件,包括Button的控件都是代码实现的;
代码是图书类型列表部分;通过继承VerticalLayout这个来进行写页面部分,代码耦合性高,如果是多任务部署;不好拆开来搞
例子:实现了crud。小系统可以这么做的。
package com.keny.myapp.bookstore.ui;
import java.util.ArrayList;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.ironlist.IronList;
import com.vaadin.flow.component.notification.Notification;
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.data.binder.BeanValidationBinder;
import com.vaadin.flow.data.provider.ListDataProvider;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.keny.myapp.bookstore.backend.DataService;
import com.keny.myapp.bookstore.backend.data.Category;
/**
* Admin view that is registered dynamically on admin user login.
* <p>
* Allows CRUD operations for the book categories.
*/
public class AdminView extends VerticalLayout {
public static final String VIEW_NAME = "类型列表";
private final IronList<Category> categoriesListing;
private final ListDataProvider<Category> dataProvider;
private final Button newCategoryButton;
public AdminView() {
categoriesListing = new IronList<>();
dataProvider = new ListDataProvider<Category>(
new ArrayList<>(DataService.get().getAllCategories()));
categoriesListing.setDataProvider(dataProvider);
categoriesListing.setRenderer(
new ComponentRenderer<>(this::createCategoryEditor));
newCategoryButton = new Button("添加新类型", event -> {
final Category category = new Category();
dataProvider.getItems().add(category);
dataProvider.refreshAll();
});
newCategoryButton.setDisableOnClick(true);
add(new H2("您好 Admin"), new H4("编辑新类型"), newCategoryButton,
categoriesListing);
}
private Component createCategoryEditor(Category category) {
final TextField nameField = new TextField();
if (category.getId() < 0) {
nameField.focus();
}
final Button deleteButton = new Button(
VaadinIcon.MINUS_CIRCLE_O.create(), event -> {
// Ask for confirmation before deleting stuff
final ConfirmDialog dialog = new ConfirmDialog(
"请确认",
"你确定是要删除这个类型吗? 这个类型的图书将全部删除.",
"删除", () -> {
DataService.get()
.deleteCategory(category.getId());
dataProvider.getItems().remove(category);
dataProvider.refreshAll();
Notification.show("类型删除成功。");
});
dialog.open();
});
deleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
final BeanValidationBinder<Category> binder = new BeanValidationBinder<>(
Category.class);
binder.forField(nameField).bind("name");
binder.setBean(category);
binder.addValueChangeListener(event -> {
if (binder.isValid()) {
DataService.get().updateCategory(category);
deleteButton.setEnabled(true);
newCategoryButton.setEnabled(true);
Notification.show("类型保存成功。");
}
});
deleteButton.setEnabled(category.getId() > 0);
final HorizontalLayout layout = new HorizontalLayout(nameField,
deleteButton);
layout.setFlexGrow(1);
return layout;
}
}
最后
以上就是傻傻白猫为你收集整理的spring Vaadin实例1.Spring Vaadin实例2.源代码结构 3.pom.xml文件4.启动的时候用mvn install 下载类库包编译5.编译为包 mvn package6.启动的命令为7.代码分析的全部内容,希望文章能够帮你解决spring Vaadin实例1.Spring Vaadin实例2.源代码结构 3.pom.xml文件4.启动的时候用mvn install 下载类库包编译5.编译为包 mvn package6.启动的命令为7.代码分析所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复