チュートリアル - shinkasystems/kintaikanri GitHub Wiki
開発のための基本的なチュートリアルです。 開発の手順に一歩踏み込んだドキュメントです。
Hello, World!
まず、画面上に「Hello, World!」と表示するだけの画面を作成する。
画面を新規作成するために必要なファイルは以下の3つ
- HelloWorld.java
- HelloWorld.html
- HelloWorld.properties
上記3つのファイルはファイル名の拡張子以外を同じにし、 同じパッケージに作成する。
HelloWorld.properties
画面表示用の文言などのデータを定義する。
helloworld=Hello, World!
HelloWorld.html
画面表示時の HTML を定義する。
<p>
<wicket:message key="helloworld">HELLO WORLD</wicket:message>
</p>
HelloWorld.java
画面項目の組み立てやデータ処理を行う（MVCでいうところのコントローラにあたる）。
処理は空のままでよい。
KintaiWebApplication.java
ウェブアプリケーションの基本設定を行う。
init メソッドに以下の一文を追加する。 これは、URLを指定してアクセスするために必要な設定。
mountPage("/helloworld", HelloWorld.class);
動かしてみよう
- ブラウザから「http://localhost:8080/helloworld」にアクセスする。
- 画面上に「Hello, World!」と表示されればOK
要点は、HTMLに記述した「HELLO WORLD」ではなく、 プロパティファイルに記述した「Hello, World!」が表示されているということ。 画面上の文言は出来るだけ、プロパティファイルに定義するようにする。
足し算を行う
Hello World と同じ要領で HTML と Class を作成する。
作成したら KintaiWebApplication でマウントするのを忘れずに。
Addition.html
Addition.java
HTML の要素と Java 上のコンポーネントは wicket:id と呼ばれる識別子で
関連付けられている。
定義した wicket:id が Java と HTML で食い違っているとエラーになる。
動かしてみよう
二つのテキストフィールドに数字を入力し、加算ボタンを押下したとき、 合計値が表示されればOK。
フォームと各部品の組み立て方、およびフォームのイベントリスナーがポイント。
- HTML の要素はコンポーネントとして Java に定義される
- コンポーネントはコンポーネントを包括する
- HTML 側ではタグの入れ子に相当する
- コンポーネントはイベントを受け取る
バリデーション
ここで、入力値にどんな値を入れたらエラーになるか調べてみよう。
よく使うバリデータは Wicket に用意されている。
- 必須
- 型
- 数値の範囲
- 文字列の長さ
- 日付の範囲
- 正規表現へのマッチ
- メールアドレスへのマッチ
など。
独自バリデータ
用意されたバリデータでチェックしきれない場合は、 独自にバリデータを作る必要がある。
メッセージの表示
Wicket としては FeedbackPanel を使用すればよいが、 Bootstrap などと連携するために、AlertPanel や InfomationPanel という部品を作成したので、基本的にはこれらを使う。
画面入力を保存する
入力値も、計算した内容も画面を閉じると失われてしまうので、 画面入力値をデータベースに保存する。
テストデータの修正
H2 Databaseのクライアントを起動
Eclipse のパッケージエクスプローラから、lib > h2 > h2.bat を実行する。
JDBC URLを指定して接続する。