機能SAMPLE.8 「EzServlet/selectタグを利用する方法」


今回は、selectタグの利用方法について説明します。

EzServletは、HTMLでビューを作成します。HTMLでは、主にデザインを設計し、極力ロジックは入れない設計になっています。(出力項目、繰り返し項目、表示・非表示項目の設定を行う程度にしています)
画面の表示・非表示制御等のロジックに関する処理は、「DTO」及び「Controller」に記述します。

selectタグは、他のタグと多少異なり「画面に表示する値」と選択された時に「サーバーに受け渡す値」を別々に(optionに)指定するタグです。
また、場合によっては、選択する内容を状況に応じて動的に変更する必要があったります。


EzServletでは「selectタグ」を容易に利用するための「専用クラス:EzSelect」が用意されています。
EzSelectの記述方法を説明します。

EzSelect selectField = new EzSelect("プロパティーファイルのPATH")
				.addOption("画面表示用プロパティー・キー1","選択値1")
				.addOption("画面表示用プロパティー・キー2","選択値2")
				.addOption("画面表示用プロパティー・キー3","選択値3")
				.init("選択値2");

具体的にEzSelectの説明をしていきます。


1.コンストラクター
 new EzSelect("プロパティーファイルのPATH")のシグニチャで受け渡される値は、画面に表示される値が設定され
 ているプロパティーファイルのpathを指定します。

2.addOptionメソッド
 addOptionメソッドは、selectタグの<option>タグを設定するメソッドです。
 addOption("画面表示用プロパティー・キー1","選択値1")のシグニチャの内容は下記の通りです。
 ・第一引数:"画面表示用プロパティー・キー1"は、画面に表示される値のプロパティー・キーです。コンストラ
  クターで指定されたプロパティーファイルより値を取得します。
 ・第二引数:"選択値1"は、選択された時に受け渡される値です。EzSelect#getValueメソッドで取得する事が出
  来ます。
 
3.initメソッド
 initメソッドは、選択された値をセットするメソッドです。
 init("選択値2")のシグニチャは、選択されたoptionの第二引数の値をセットします。

EzSelectを利用する事により、動的なselectタグもControllerによって制御する事
が可能になります。
HTMLに記述されたselectタグは、実行事にEzselectクラスで設定された内容に置き換えられます。



以下のHTMLを例に説明します。ファイル名は「Hoge.html」です。

<html>
   <head></head>
   <body>
      <form method="POST">
         <select name="selectField">
            <option>選択項目1</option>
            <option>選択項目2</option>
            <option>選択項目3</option>
         </select>
         <input type="button" name="execute" value="実行">
      </form>
   </body>
</html>


DTOは以下の様になります。

public class Hoge implements Serializable {

   /** Hogeに対応するコントロラークラスを保持する属性です */
   public static final Class CONTROLLER_CLASS = HogeController.class;

   /** selectタグ「selectField」の情報を保持する属性です */
   public EzSelect selectField = new EzSelect("jp/co/xxx/Hoge1");

}

プロパティー・ファイル(jp/co/xxx/Hoge1.properties)は以下の様になります。

#Hoge1.htmlのselectタグ「selectField」の画面表示値の設定値
select.selectField1="項目1"
select.selectField2="項目2"
select.selectField3="項目3"


CONTROLLERクラスは以下の様になります。

public class HogeController {

   /** 初期画面を表示するメソッドです。*/
   public void index(Hoge hoge) {
      // selectタグ「selectfield」の情報を初期化します。
      hoge.selectField.clear();
      // selectタグ「selectfield」のoptionを設定します。
      hoge.selectField.addOption("select.selectField1","1"),
                      .addOption("select.selectField2","2"),
                      .addOption("select.selectField3","3");
                      .init("3");
   }

   /** 「実行」ボタンが押された時に呼び出されるメソッドです。*/
   public void execute(Hoge hoge) {
      // 画面入力値をDTOにセットします。 
      request.set(hoge);
      // 選択された値を出力します。 
      system.out.println(hoge.selectField.getValue());

      // 表示するHtmlのDTOをセットします。
      response.setPage(hoge);
   }
}

今回の例では、動的なselectタグの例を記述しましたが、静的なselectタグを利用する場合は、DTOのプロパティーの設定で「流れるようなインターフェース」を利用して設定することが可能です。


POINT2!
EzSelectクラスは、上記の通りプロパティーファイルを利用してロケールに対応した記述も可能ですが、ロケールの対応が不要である場合は、下記のような記述も可能です。

EzSelect selectField = new EzSelect()
			.addOption("画面表示値1","選択値1")
			.addOption("画面表示値1","選択値2")
			.addOption("画面表示値1","選択値3")
			.init("選択値2");

超かーんたーん(o^∀^)oネッ♪