コンポーネント型Java WebフレームワークVaadinをSpring Bootで試すメモ

java

ZK、JSFとコンポーネント型フレームワークをやってきたので、Vaadinもやっておきます。
https://vaadin.com/

典型的な画面パターンが用意されたアプリケーションビルダーも用意されているので、ベースにできます。
このアプリケーションビルダーもVaadinで作られているようです。
https://start.vaadin.com/app/p

プロジェクト作成

Spring Bootでの始め方はここ。
https://vaadin.com/docs/latest/integrations/spring/spring-boot

まずSprig Bootのプロジェクトを作る。
https://start.spring.io/

Dependencyは何もいらないと思うので、そのまま。

設定

pom.xmlに依存などを追加。 プロパティとしてvaadin.versionでバージョンを指定しておきます。

<vaadin.version>24.3.12</vaadin.version>

dependencyManagementを追加

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <!-- declare the latest Vaadin version
                 as a property or directly here -->
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

そして、dependencyにvaadin-spring-boot-starterを追加

    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>
            vaadin-spring-boot-starter
        </artifactId>
        <version>${vaadin.version}</version>
    </dependency>

あと、pluginを追加

    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>
            vaadin-spring-boot-starter
        </artifactId>
        <version>${vaadin.version}</version>
    </dependency>

コードを書く

VaddinではJavaコードだけで画面を構築します。

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;
import org.springframework.stereotype.Component;

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

        add(textField, button, label);
    }
}

これで、こんな画面ができます。

Swingっぽいですね。