Vaadin を触ってみる

Java コードだけ？（こう限定していいのか微妙だけど）Webフレームワークである
Vaadin をちょっと始めてみる
Vaadin | The Web App Platform for Java

Getting Started | Vaadin Docs
ここを参考に、もしくはこれに従って、、
Maven project の場合、
バージョン

<properties>
	<java.version>17</java.version>
	<vaadin.version>24.4.3</vaadin.version>
</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>
		<artifactId>vaadin-spring-boot-starter</artifactId>
		<version>${vaadin.version}</version>
	</dependency>
</dependencies>

プラグイン

<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>

Application.java

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.theme.Theme;
/**
 * The entry point of the Spring Boot application.
 *
 * Use the @PWA annotation make the application installable on phones, tablets
 * and some desktop browsers.
 *
 */
@SpringBootApplication
@Theme(value = "my-app")
public class Application implements AppShellConfigurator {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

画面の部品は、コンポーネントとして設置

import org.springframework.stereotype.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Component
@Route("")
public class MainView extends VerticalLayout{
	public MainView() {
        TextField textField = new TextField("Input:");
        Span label = new Span("Hello");
        Button button = new Button("送信");
        button.addClickListener(e -> label.setText(textField.getValue()));

        add(textField, button, label);
    }
}

画面；フロントは、src/main/java と並行して src/main/frontend のフォルダ構成で
Application.java の @Theme で指定したフォルダ名で、、

CSSを配置
src/main/frontend/themes/my-app/main-layout.css

vaadin-scroller[slot="drawer"] {
  padding: var(--lumo-space-s);
}

vaadin-side-nav-item vaadin-icon {
  padding: 0;
}

[slot="drawer"]:is(header, footer) {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-s) var(--lumo-space-m);
  min-height: var(--lumo-size-xl);
  box-sizing: border-box;
}

[slot="drawer"]:is(header, footer):is(:empty) {
  display: none;
}

src/main/frontend/themes/my-app/styles.css

@import url('./main-layout.css');

src/main/frontend/themes/my-app/theme.json

{
  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ]
}

「テスト」と入力してクリックすると

これは、Google chrome で実行だが、Microsoft Edgeだと、まったく表示されない。

Vaadin リリースページの
Release Vaadin 24.0.0 · vaadin/platform · GitHub
サポートするブラウザは、Chrome FireFox Safari の他は、
　Edge (Chromium, evergreen)
と書いてある。