機能SAMPLE.16 「EzServlet/HTMLのincludeを利用する方法」

今回は、HTMLのインクルードについて説明します。


EzServletでは、ViewをHTMLで開発しますが「HTML」に「他のHTML」にインクルード(含む)する機能を提供します。記述の仕方は、HTMLソースのインクルードしたい箇所に下記のTGタグを記述すればOKです。

<tg:include name="インクルードするHTMLのPATH">モックHTML</tg>

あとは、インクルードするHTMLのDTOを、EzResponseのaddIncludePage(DTO)メソッドで格納しておけばOKです。


以下にインクルードされるHTMLを例に説明します。ファイル名は「jp.co.xxx.menu.Toolbar.html」です。

<html>
   <head></head>
   <body>
      <form method="POST">
	 <a name="file"   href="...">ファイル</a>
	 <a name="edit"   href="...">編集</a>
	 <a name="search" href="...">検索</a>
      </form>
   </body>
</html>


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

public class Toolbar implements Serializable {
	/** Toolbarに対応するコントロラークラスを保持する属性です */
	public static final Class CONTROLLER_CLASS = ToolbarController.class;
}

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

public class ToolbarController {
	/** 「ファイル」リンクが押された時に呼び出されるメソッドです */
	public void file(Toolbar toolbar) {
		System.out.println("ファイル・リンクが押されたよ!")
		// 次に表示するHTML(画面)に対応するDTOをセットします。
		response.setPage(new XxxDto());
	}
	/** 「編集」リンクが押された時に呼び出されるメソッドです */
	public void edit(Toolbar toolbar) {
		System.out.println("編集・リンクが押されたよ!")
		// 次に表示するHTML(画面)に対応するDTOをセットします。
		response.setPage(new YyyDto());
	}
	/** 「検索」リンクが押された時に呼び出されるメソッドです */
	public void search(Toolbar toolbar) {
		System.out.println("検索・リンクが押されたよ!")
		// 次に表示するHTML(画面)に対応するDTOをセットします。
		response.setPage(new ZzzDto());
	}
}

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

<html>
   <head></head>
   <body>
      <tg:include name="jp.co.xxx.menu.ToolBar.html">
            ここに、モック用HTMLソースを記述します。
      </tg>
      <form method="POST">
		<h1>WellComeページ</h1>
		<br>
		ようこそ<tg:out name="name">ほげほげ</tg></form>
   </body>
</html>


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

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

	/** 出力項目「name」を保持する属性です */
	public String name;
}

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

public class HogeController {
	/** 初期画面を出力するメソッドです  */
	public void index(Hoge hoge) {
		// インクルードするToolbar.htmlに対応するDTOを生成します。
		Toolbar toolbar = new Toolbar();
		// ToolbarインスタンスをEzResponseに「include用ページ」として追加します。
		response.addIncludePage(toolbar);

		// Hogeの出力項目「name」をセットします。
		hoge.name="T.RYoken"
		// 表示するHtmlのDTOをセットします。
		response.setPage(hoge);
	}
}

これで、Hoge.htmlを表示すると、Toolbar.htmlをインクルードがインクルードされた状態で表示されます。


通常は、Toolbarの内容も動的に変わると思いますので、他の<tg>タグと併用して利用することになります。


また、システム開始から終了まで、情報が変わらない様なインクルードHTML(本来のメニューバー等)は、EzSessionのaddIncludePage(DTO)メソッドで格納して置く事も可能です。


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