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

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

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

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

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

 

前回までの画面にこの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;
}

 

getter,setterは普通です。

 

選択肢として表示する値は、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を抜粋します。

まず、単一選択の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です。

<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  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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