アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うこと。

入力画面、ラジオボタンとラジオボタングループを使う STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 

Spring Boot 1.5.1)+thymeleafで、ラジオボタンを配置した画面の処理をやります。

 

ラジオボタンは複数の選択肢のうち、ひとつだけを選ばせるのですが、普通に一箇所に固めた選択肢で選ばせる場合と、ページの中にとびとびに離れた場所に配置して、それでも「その中からひとつ」の制約をつけるラジオボタンのグループ化という2つのやり方で選択肢を表示させることができます。

 

今回は、この2つのケースを両方ともやってみます。

 

なお、今回も、前回までの画面にこの2つを追加する形でやるので、コントローラクラスとかは同じものを使い、変更点だけ書いてます。画面で実行ボタンを押したときに呼び出されるコントローラクラスのメソッドなど、変更の必要のなかったものについては触れていません。そちらの解説が必要な方はこちらの記事も一緒に見てください。

arakan-pgm-ai.hatenablog.com

 

さて、まずはFormクラスです。

 

ラジオボタンも選択された値を受け取るのはString型です。ラジオボタンは複数受け取る可能性がないので、そちらの考慮はいりません。

private String selectedRadio;

public String getSelectedRadio() {
      return selectedRadio;
}

public void setSelectedRadio(String selectedRadio) {
      this.selectedRadio = selectedRadio;
}

 

コントローラクラスでは、ラジオボタンの選択肢をMAPにセットして画面に渡します。今回は、ラジオボタングループをためすために、2種類のMAPを返すメソッドを別々に書いてます。

private Map<String,String> getRadioItems(){
     Map<String, String> selectMap = new LinkedHashMap<String, String>();
     selectMap.put("key_A", "ラジオボタンの選択肢Aは、これですよ");
     selectMap.put("key_B", "ラジオボタンの選択肢Bは、これですよ");
     selectMap.put("key_C", "ラジオボタンの選択肢Cは、これですよ");
     selectMap.put("key_D", "ラジオボタンの選択肢Dは、これですよ");
     selectMap.put("key_E", "ラジオボタンの選択肢Eは、これですよ");
     return selectMap;
}

private Map<String,String> getRadioOtherItems(){
     Map<String, String> selectMap = new LinkedHashMap<String, String>();
     selectMap.put("key_F", "ラジオボタンの選択肢Fは、これですよ");
     selectMap.put("key_G", "ラジオボタンの選択肢Gは、これですよ");
     selectMap.put("key_H", "ラジオボタンの選択肢Hは、これですよ");
     selectMap.put("key_I", "ラジオボタンの選択肢Iは、これですよ");
     selectMap.put("key_J", "ラジオボタンの選択肢Jは、これですよ");
     return selectMap;
}

 

同じくコントローラクラスで、生成したMAPを画面に渡します。

@RequestMapping(value = "/hello3", method = RequestMethod.GET)
public String index(Hello3Form form, Model model) {
     model.addAttribute("radioItems",getRadioItems());
     model.addAttribute("radioOtherItems",getRadioOtherItems());
     return "hello3";
}

 

これを受けて、ラジオボタンを表示するHTMLです。

最初のA~Eまでの分です。divタグのth:eachに、コントローラクラスでMAPをセットした名前「radioItems」を渡して、ループさせてます。選択した値を受け取る変数は、th:fieldにFormクラスに定義した名前を渡して指定します。

<div th:each="item : ${radioItems}">
     <input type="radio" name="selectedRadio" th:value="${item.key}" th:text="${item.value}" th:field="*{selectedRadio}" />
</div>

 

次にF~Jまでの分です。ポイントは、nameに渡す名前と、th:fieldに渡す名前です。これを、A~Eまでの分と同じにすれば、同じグループとみなされて、A~Jまででひとつだけ選択できるようになります。

<div th:each="item : ${radioOtherItems}">
     <input type="radio" name="selectedRadio" th:value="${item.key}" th:text="${item.value}" th:field="*{selectedRadio}" />
</div>

 

逆にここを違う名前にすれば、それぞれ独立したラジオボタンになるわけです。

 

画面に表示した例です。例によって動作確認用でCSSをちゃんとしていないので、ちょっと間延びしてますが、目をつぶってください。

今回は、name等を同じにしてグループ化しているので、A~Jで1個しか選択できなくなっています。

f:id:arakan_no_boku:20170319222856j:plain

 

最後に、実行ボタンを押したあとに結果を表示するHTMLです。

<div th:object="${hello3Form}">
     <p class="msg" th:text="*{selectedRadio}"></p>
</div>

 

th:valueにセットした値が返ります。

f:id:arakan_no_boku:20170319224048j:plain

 

まあ、こんな感じですね。

 

途中に出てきた繰り返しを行う、th:eachタグについて、よくわからない方は、こちらの記事で解説しているので、あわせてどうぞ。

arakan-pgm-ai.hatenablog.com

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。

 

 

f:id:arakan_no_boku:20170404203859j:plain