読者です 読者をやめる 読者になる 読者になる

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

あれこれ興味をもって考えたことを書いてます

入力画面、チェックボックスを使う。 STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 

Spring Boot 1.5.1)+thymeleafで、チェックボックスを配置した画面の処理をやります。チェックボックスを一つだけつける場合と、いくつか並べて複数選択を可能にする場合の両方をやってみます。

 

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

arakan-pgm-ai.hatenablog.com

 

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

 

チェックボックスも選択された値を受け取るのはString型です。なので、複数受け取る可能性がある時は、Stringの配列になります。

まず、単一選択の場合です。

@Pattern(regexp="checked")
private String inputSingleCheck;

public String getInputSingleCheck() {
      return inputSingleCheck;
}

public void setInputSingleCheck(String inputSingleCheck) {
      this.inputSingleCheck = inputSingleCheck;
}

 

こちらは複数選択を受ける場合です。

private String inputMultiCheck;

public String getInputMultiCheck() {
     return inputMultiCheck;
}

public void setInputMultiCheck(String[] inputMultiCheck) {
     this.inputMultiCheck = inputMultiCheck;
}

 

注意点は単一選択の場合に、@Pattern(regexp="checked")というアノテーションをつけて受取文字列をチェックしている点です。

 

複数選択の場合は、選択肢として表示したキー文字列を返してくるのですが、単一選択の場合は選択された時にどの文字列を返すかを決めておく必要があります。今回の場合は、チェックされたら"checked”という文字列を返すようにするということです。

 

今度は、コントローラクラスです。

 

単一選択しか使わない場合は、特に変更はいりませんが、複数選択をする場合は、選択肢をおさめたMAPを生成して画面に渡してやる必要があります。MAPを生成する部分です。

 

実際の処理だと、データベース等からデータを取得してセットするのですが、今回はサンプルなので決め打ちです。

private Map<String,String> getCheckBoxItems(){
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;
}

 

生成したMAPを画面に渡す部分です。

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

 

チェックボックスを表示する画面のHTMLです。

最初は単一のチェックボックスの場合です。前にFormクラスで定義した受取文字列をvalue="checked"として設定しているのに注意してください。これをしておかないと、チェックをつけても正しく認識されません。

<input type="checkbox" name="inputSingleCheck" value="checked" th:field="*{inputSingleCheck}" /> 

 

複数選択の場合です。divタグでくくって、そこでコントローラクラスでMAPを渡すときに定義した名前(checkboxItems)をth:eachに渡して、選択肢を複数表示するループを回してます。戻り値を受け取るFormの項目名は、th:field="*{inputMultiCheck}" で指定しています

<div th:each="item : ${checkboxItems}">
     <input type="checkbox" name="inputMultiCheck" th:value="${item.key}" th:text="${item.value}" th:field="*{inputMultiCheck}" />
</div> 

 

表示したイメージ例です。動作確認だけが目的で、CSSとかちゃんとしてないのでチェックと選択肢が間延びしてますけど、わかるから良しとさせてください。

f:id:arakan_no_boku:20170319203921j:plain

 

チェック結果を受け取る側のHTMLはこうです。

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


     <p class="msg" th:each="checked : *{inputMultiCheck}" th:text="${checked}"></p>
</div> 

 

上が単一選択の場合、下が複数選択の場合です。複数選択の場合は、いくつ返ってくるかわからないので、th:eachで受けている点に注意してください。

 

thymeleafのチェックボックスは、チェックがついている項目の値(value または th:valueにセットした値)だけを返します。なので、上記で「単一選択分をチェックし、複数選択で、BとEをチェックしたものを受け取って画面に表示させると以下のようになります。

f:id:arakan_no_boku:20170319204838j:plain

 

一応、動きとしてはOKです。

 

あと、途中にでてきた繰り返しに使う 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