ビュー作成

ビューファイル作成

ビューindex.htmlを作成します。左側のエクスプローラーから下記のtemplatesフォルダーを選択してください。

マウス右クリック、「新規(W)」-「その他(O)」を選択してください。

パネルが開きますので、Web/HTMLを選択してください。

さらにパネルが開きますので、「ファイル名」に「index.html」と入力し「完了」ボタンを押下してください。

index.htmlが左側のエクスプローラーに表示され、右側にファイルが開かれています。内容を記述していきます。

プログラムを記述

サンプルプログラムの「gs-handling-form-submission-complete」の「greeting.html」を参考に次のように記述しました。

基本的にhtmlなので、Thymeleafエンジンの命令(「th:」から始まる命令)を中心に見ていきます。11行目のformタグ内に二か所あります。

一つ目の「th:action=”@{/cal}”」によりsubmitされると、

http://<サーバー>:8080/cal

がpostで発行されます。

二つ目の「th:object=”${cal}」によりこれから操作されるオブジェクトがコントローラーから引き渡された”cal”であることを宣言しています。

「th:field=”・・・”」の記述が三か所あります。これによりオブジェクト$calのプロパティ(op1,operator,op2)とinput、selectタグの紐づけを行っています。もしプロパティに値が設定されていればその内容がが表示されます。

22行目に「th:test=”${cal.answer}”」があり、オブジェクトcalのプロパティ(変数)answerの内容を表示しています。

これでコントローラーから引き渡された内容(入力された値、計算された値)を表示しています。

タイトルとURLをコピーしました