Spring Boot 基本

複数画面をもつSpring BootのWEBアプリケーションを作成してみた

今回は、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・セレクトボックス・ラジオボタン・チェックボックスを含むWEBアプリケーションを作成してみたので、そのサンプルプログラムを共有する。

様々なサイト上で、テキストとボタンのみを含むSpring BootのWEBアプリケーションのサンプルプログラムは多く見かけたが、開発現場でよく見かける、セレクトボックス・ラジオボタン・チェックボックスも含むようなプログラムはなかなか見つからなかったので、今回、いろいろなフォームオブジェクトを含むサンプルプログラムを作成してみることにした。

前提条件

以下の記事のSpring BootのWEB画面用アプリが作成済であること。

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...

また、以下の記事のlombokの設定が完了していること。

IntelliJ IDEAでlombokを使ってみたlombokというライブラリを使うと、JavaBeanクラスにおいて、アノテーション付与するだけで、getterメソッド・setterメ...

 

やってみたこと

  1. 完成した画面イメージの共有
  2. サンプルプログラムの作成

 

完成した画面イメージの共有

今回は、サンプルプログラムの内容をより理解しやすくするために、先に完成した画面イメージの共有を行う。

まずは、Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすることで、以下の入力画面を表示する
入力画面1

上記画面のプルダウン(月)の内容は以下の通り
入力画面2

また、上記画面のプルダウン(日)の内容は以下の通り
入力画面3

入力画面の値を、以下のように変更し、「確認」ボタンを押下し、確認画面に遷移
入力画面4

確認画面では、入力画面の値が以下のように表示される。この状態で「送信」ボタンを押下し、完了画面に遷移
確認画面
なお、「戻る」ボタンを押下した場合は、入力画面に戻る。

以下のような完了画面が表示される。「閉じる」ボタンを押下すると、この画面が閉じる
完了画面



サンプルプログラムの作成

今回作成したサンプルプログラムの構造は以下の通り。
複数画面をもつプログラムの構成

上記のうち、「DemoForm.java」の内容は以下の通り。こちらは画面間で持ち回す項目のformオブジェクトを定義している。

この中で、各項目のSetter/Getterメソッドは、lombokを利用している。また、セレクトボックス・ラジオボタンで表示するリストについては、getXXXItemsメソッドにより定義していて、それらはMapオブジェクト(キー項目, 値)のリストにより返却される仕組みになっている。



コントローラクラスである「DemoController.java」の内容は以下の通り。

ここでは、各画面に遷移する処理を定義しているが、それに加え、画面で持ち回すformオブジェクト(demoForm)を生成し、セッションとしてもたせる機能ももっている。createDemoFormメソッドでformオブジェクトを生成し、ここで初期値の設定も行い、コントローラクラスの先頭のアノテーション「@SessionAttributes(types = DemoForm.class)」により、セッションによる持ち回しができるようにしている。

さらに、createDemoFormメソッドに「@ModelAttribute(“demoForm”)」が指定してあり、これによって、画面を定義するhtmlソースから、demoFormを参照できるようになっている。

また、HTTP通信のGETリクエスト/POSTリクエストの使い分けを、@GetMapping、@PostMappingというアノテーションで実現している。詳細は以下のサイトを参照のこと。
https://dkssksk.com/springbootmapping/

その他、ボタンの二度押し防止のため、sendメソッド内ではPRGパターンを利用している。PRGパターンを利用したサンプルプログラムについては、以下のサイトを参照のこと。

Spring BootでPRGパターンを利用してみたPRGパターンの「PRG」は「Post&Redirect&Get」の略で、Postした後でリダイレクトして画面表示するパターンのことをい...

入力画面である「input.html」の内容は以下の通り。

ここでは、formタグの「th:object=”${demoForm}”」を指定することで、DemoController.javaで生成したフォームオブジェクト「demoForm」を参照している。また、フォームの各フィールドには「th:field=”*{XXX}”」と指定することで、demoFormオブジェクトのXXXフィールドへのgetterメソッド・setterメソッドや、XXXメソッドにアクセスしている。

プルダウンオブジェクトを「select~optionタグ」で、ラジオボタンを「input」タグで「type=”radio”」を指定することで生成している。さらに、プルダウン・ラジオボタンの各項目は、「th:each」タグ内で、「DemoForm.java」の「getXXXItems」メソッドを呼び出すことで生成している。



確認画面である「confirm.html」の内容は以下の通り。

ここでは、例えば「*{getSexItems().get(‘__*{sex}__’)}」という記述をすることで、性別の表示文言「女」を表示している。getメソッド内の引数「__*{sex}__」を先に実行し(これをプリプロセッシング機能という)、性別Mapオブジェクトのキー項目である「2」が取得される。その後、「*{getSexItems().get(‘2’)}」を実行し、「女」が表示されるようになっている。生年月日_月、生年月日_日も、性別と同じ仕組みで表示している。

完了画面である「complete.html」の内容は以下の通り。

こちらは、完了メッセージと「閉じる」ボタンを表示している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-web-somescreen/demo

また、その他のフォームオブジェクトを利用した場合の実装方法は、下記サイトが参考になる。
https://qiita.com/rubytomato@github/items/8da1bb19537bbfc9c2ea

要点まとめ

  • 画面間で持ち回す各項目のformオブジェクトや、セレクトボックス・ラジオボタンで表示するリストは、Formクラス内で定義する。
  • formオブジェクトはコントローラクラスで生成し、「@ModelAttribute」アノテーションでHTMLファイルとの紐付けを行い、「@SessionAttributes」アノテーションでセッションとしてもたせされる。
  • HTMLファイルでのformオブジェクトの参照は「th:object」タグで行い、formオブジェクト内のメソッドへのアクセスは「th:field」タグで行う。
  • 式の一部に含まれる「__(変数)__」はプリプロセッシング機能で、式の中で先に実行される。