さぁ、Vaadinをはじめよう(自分が)
なぜ始めるのか
それなりに整ったUIのWebアプリケーションを簡単に作れる…らしい。
コンポーネントを中心とした書き方なので、SwingとかJavaFX(JavaFX、いい奴だったな…)になれてる私には親しみやすそう。
あと、JavaScriptにちょっと疲れたので。
Vaadinって何?
フロントエンド側もJavaで書けるようになる素敵なフレームワーク。
GWT…?知らない子ですね。
この資料がめちゃくちゃわかりやすくて有難い。
全部 Java で作っちゃえ!😁 Vaadin 8 によるオール Java Web アプリ開発の仕組みと実践
こんな感じで業務システムでよく使いそうなコンポーネントがたくさん。
FullCalendarみたいでっかいカレンダーもアドオンであるみたいですね。
https://demo.vaadin.com/sampler/
Vaadin 10 と 8
これを書いている現在、公式に行くとVaadin FlowとVaadin Framework 8という2つがあって何のこっちゃ状態です。
どちらを選べばよいのやら。
Vaadin 10からVaadin FrameworkはVaadin Flowへ
現行バージョンであるVaadin 8までは、Vaadin Frameworkという名前だったが、次期バージョンのVaadin 10からは名称が変わってVaadin Flowという名称になるとのこと。
(それよりずーっと前はまた別の名称だったみたいですね)
この辺に書いてありますね。
Vaadin Flow - the next piece of Vaadin 10 is now in developer preview | Blog | Vaadin
Vaadin FlowとVaadin Framework 8って何が違うの?
この辺の資料を読む限り、開発者からしてみると大きくは変わってないのかな。
Differences between V10 and V8 Applications - Vaadin Flow | Vaadin 10 Docs | Vaadin
これ以外にはこれまでのGWTで作ったコンポーネントをやめて、HTMLとWeb Componentsを使っているとのこと。
リリースとサポート期間
そんなこんなで、絶賛Beta中のVaadin Flowですが、これから勉強しようというときに10と8、どちらを取るべきかと悩みます。
参考までにリリースとサポート期間を見てみました。
Stability in production – Bleeding edge in development | Blog | Vaadin
ここにある通り、Vaadin 10からリリースは3か月ごとに行われる。
んで、2年ごとにLTSのバージョンをリリースしてそのバージョンは5年間サポートするとのこと。
これとは別にVaadin 8も5年間サポートだそうな。
なんか最近Javaでこんな図を見たような…
お勉強の予定
なんだかんだと公式ではVaadin 10押しみたいですが、とありあえず今回はVaadin 8を扱います。
独学では躓いたときに資料が多いほうがいいですからね。
- 公式のチュートリアルをやる
- Vaadin+Spring Bootで簡単なフォームアプリケーションを作る
- コンポーネントを一通り使ってみよう
- Kotlinで書き直してみよう
- サーバにデプロイしてみよう(AWS編)
慣れてるJavaでしばらく使ってそれとなくわかってきたらKotlinで書いていくという進め方。
最後のデプロイ云々はAWSの練習もやりたいので、あんまり関係ないけど寄り道です。
チュートリアル
チュートリアルに沿って進め行きます。 https://vaadin.com/docs/v8/framework/tutorial.html
1.Overview
まずは動かさないと始まらない、環境構築から。
IDEはIntelliJ IDEAかEclipseどちらでも行けそうなんだけど、慣れてるEclipseでやっていきます。
書いてる時点の最新Oracle JDK8u171とJava EE用のEclipse Oxygenをサクッとインストール。
それにしても、いつみても30億のデバイスで走ってんな。
2.Creating a Project from an Archetype
スクリーンキャプチャに加えて、ご丁寧に動画まであるので、特に書くこともないのですが…
Mavenのvaadin-archetype-application
というアーキタイプでプロジェクトを作成する。
今回は最新の8.4.1で作ります。
諸々ダウンロードとビルドが終わるとUI
という抽象クラスを継承したMyUI
というクラスができてました。
これが、最初のサンプルというかスタブのようです。
レイアウト用のコンポーネントにテキストフィールドとボタンが追加されていて、ボタンを押すとラベルが表示されるようです。
Button button = new Button("Click Me"); button.addClickListener(e -> { layout.addComponent(new Label("Thanks " + name.getValue() + ", it works!")); });
この辺りはJavaFXなどなどで見慣れた書き方ですね。
ボタンにクリック時のリスナを登録して、クリックされたときに中の処理が実行されるというやつ。
チュートリアル通りにJettyで実行。
おー、動いた。
既にスタイルが適用されているのか、ちょっぴりモダンで素敵な感じ。
3.Adding a demo "backend"
サーバサイドのドメイン(とサービス)クラスをコピペする。
このあとのステップの準備ですね。
Eclipseで任意のパッケージにソースコードをペーストすると、.javaファイルが出来るの知らなかった…
4. Listing entities in a Grid
顧客リストを表形式で表示する。
表はGridというコンポーネントを使って表示する。
Gridには任意のモデルのリストを渡してデータを格納する。
grid.setColumns("firstName", "lastName", "email");
で格納したカラムと同じ名前のプロパティがデータとして表示される。
今回の例だとモデルのCustomer
の3つのプロパティが対応付けられている。
デフォルトでソート機能が付いてて素晴らしい。
5. Creating live filtering for entities
テキストフィールドからの入力で表のデータを絞り込めるようにする。
filterText.addValueChangeListener(e -> updateList());
でテキストフィールドの変更を検知するリスナーが追加できる。
また、filterText.setValueChangeMode(ValueChangeMode.LAZY);
でいつイベントを発生させるかを設定できる。
即時、フォーカスアウト時などバリエーションあり。
今回のLAZY
は、一定間隔遅延してイベントが発生する、その時にイベントが既に発生している場合はキャンセルされる。
つまりは、連続してイベントが発生しないようになっているらしい。
入力の変化のたびにサーバとの通信が発生すると負荷がかかるので、このような設定がデフォルトであるのはうれしい。
ちょっと遅れてフィルターがかかってるの、わかりますかね。
6. Creating a form to edit Customer objects
顧客情報を入力するフォームを作成する。
このチュートリアルではVaadin DesignerというGUIでレイアウトを作成するツールを使うか、Javaのコードで追加するか選べる。
Vaadin Designerって、JavaFXでいうところのScene Builder的なあれですかね。
(Scene Builder、アイツもいいヤツだったよ…)
Vaadin Designerは、有料のPROかPRIMEじゃないと使えないので今回はJavaのコードで追加しましょう。
PROで月90ドルか…個人だとちょっとお高い。
フォームクラスを作成して、それをメインのUIから呼び出す。
日付ピッカーもあるんですねぇ。
7. Connecting the form to the application
さっき追加したフォームを実際に動くようにする。
表が選択されたときにフォーム側にその行の顧客情報を渡すリスナーを追加する。
単一選択の時だけ発火するリスナーとか、賢いな。
grid.asSingleSelect().addValueChangeListener(event -> { if (event.getValue() == null) { form.setVisible(false); } else { form.setCustomer(event.getValue()); } });
感想
業務アプリケーションを作るには、最適なフレームワークじゃなかろうか。
標準のまま使えるクオリティのコンポーネント、クライアントサイド・サーバサイドをあまり意識しないで書けることなどからデザイナーさんなしでプログラマーが数人でサクッと作るようなシステムなら効率よさそう。
というわけで、次からは自分でちょっとしたアプリケーションをつくっていくぞ!