"BOKU"のITな日常

興味のむくまま気の向くままに調べたり・まとめたりしてます。

入力画面、プルダウンリストとマルチセレクトボックスを使う。STS /Spring Boot/thymeleaf 

単一選択のSELECTボックス(プルダウンリスト)と、複数選択可能なマルチSELECTボックスを配置した画面の処理をやります。 

STS3(3.9.6)+SpringBoot2.0+Tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

 

前回までの画面にこの2つを追加する形でやります。

arakan-pgm-ai.hatenablog.com

コントローラクラスとかは同じものを使い、変更のあった部分のみ書いてます。 

そのため、例えば実行ボタンを押したあとで呼び出されるコントローラクラスのメソッドなど、変更のないものは書いていません。 

 

Formクラス

 

選択された値を受け取るString型を定義します。当たり前ですけど、複数受け取る可能性がある時は、Stringの配列になります。

	private String selectedItem;

	public String getSelectedItem() {
		return selectedItem;
	}

	public void setSelectedItem(String selectedItem) {
		this.selectedItem = selectedItem;
	}
	private String[] selectedItems;

	public String[] getSelectedItems() {
		return selectedItems;
	}

	public void setSelectedItems(String[] selectedItems) {
		this.selectedItems = selectedItems;
	}

 

2018/03/12追記

>上記の例の記載方法を変更しました。

>MathJax.jsを導入してから、一部のソースサンプルが数式と解釈されて欠落してしまう現象が発生していたためです。

 

コントローラクラス

 

選択肢として表示する値は、Controllerクラス側に書きます。

private Map<String,String> getSelectedItems(){
     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オブジェクトを生成し、そこにセットして返すメソッドを用意します。

実際の処理だと、セットするデータはDBなどから取得することになりますが、考え方は一緒です。 

 @RequestMapping(value = "/hello3", method = RequestMethod.GET)
public String index(Hello3Form form, Model model) {
      model.addAttribute("titleMsg",   messageSource.getMessage("hello3.title", null, Locale.JAPAN));
       model.addAttribute("selectItems",getSelectedItems());
      return "hello3";
}

 生成したMapデータを、AddAttributeで、selectItemsという名前で紐付けます。

 

HTML+Tymeleaf

2パターンです。

 

単一選択

 

単一選択のSELECTボックス(プルダウンリスト)です。 

<option>の数は固定できないので、th:eachを指定してループを回してセットします。 

先程のselectItemsから1つずつ取り出し、itemで受けて、そのkeyとvalueをセットしていきます。

<select id="singleSelect" name="selectedItem">
     <option value="">---</option>
     <option th:each="item : ${selectItems}" th:value="${item.value}" th:text="${item.value}" th:selected="${item.value} == *{selectedItem}">singleSelect</option>
</select>

 

複数選択

 

こちらは、複数選択可能なマルチセレクトです。 

th:field="*{selectedItems}">で、Formで定義した選択結果を受け取るString配列との紐付けを行います。

<select id="multiSelect" name="selectedItems" multiple="multiple" size="6">
     <option value="">---</option>
     <option th:each="item : ${selectItems}" th:value="${item.value}" th:text="${item.value}" th:field="*{selectedItems}">multiSelect</option>
</select>

 

画面の表示例です。

 

シングルSELECT(プルダウン)です。左側が閉じた状態、右が開いた状態です。

f:id:arakan_no_boku:20170317220403j:plain

 こちらはマルチセレクトの方です。Ctrl+クリックで、選択肢Bと選択肢Dの2つを選択してみます。

f:id:arakan_no_boku:20170317220843j:plain

 

結果を表示するHTMLと表示例

 

 実行ボタンを押した結果を表示する画面のHTMLです。

  <div th:object="${hello3Form}">
     <p class="msg" th:text="*{selectedItem}"></p>
     <p th:each="sel : *{selectedItems}" th:text="${sel}"></p>
</div>

 

マルチセレクトの場合(下)は、複数ですから、th:eachでループを回して表示します。

f:id:arakan_no_boku:20170317222033j:plain

1行目がシングルセレクトで選択した値、2行目、3行目が複数選択した値です。 

うまくいってるみたいです。 

 


 STS+Spring Boot+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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