5.1. ダイアログ
この章では、JavaScript UI コンポーネントを使用し、ダイアログボックスを組み込む手順について説明します。
JavaScript ファイルを読み込む
HTMLテンプレートのHEAD部にて、JavaScriptファイル「 dialog.js 」を読み込みます。
※本コンポーネントを使用する際は、「 prototype.js 」が必須です。
<head>
  <script language="javascript" type="text/javascript" src="js/prototype/prototype_1_6_0.js"></script>
  <script type="text/javascript" src="ls/dialog.js"></script>
</head>
画面表示時のオブジェクト作成処理を記述する
HTML テンプレート の BODY 部の最後で、ダイアログオブジェクトの作成処理を行います。
<body>
  …
  <script type="text/javascript"><!--
      dw = new ls.Dialog('lsDialog', {modal:true, width:470, height:395});
  // -->
  </script>
</body>

作成処理

画面のロード時に、「 ls.Dialog 」オブジェクトを作成します。
第1パラメータにはダイアログに割り当てる任意の ID を指定します。
第2パラメータでは連想配列で、以下の内容を指定します。
  • modal：モーダルウィンドウとするか否か。
  • width ／ height：ダイアログのサイズ（ピクセル）を指定します。
ダイアログの ActionPage クラス、HTML テンプレートを作成する
通常の画面と同様の手順で、ダイアログ用の ActionPage クラス及び HTML テンプレートを作成します。
親画面 HTML テンプレートに ActionPage 連携用の記述を追加する
アクションメソッドを呼び出す記述を追加します。
<td>
  <span onclick="dw.exec('showDialog','2007/12/01');">
      2007/12/01
  </span>
</td>

アクションメソッドの呼び出し

ダイアログオブジェクトのメソッド「 dw.exec('アクションメソッド') 」を呼び出し、ActionPage と連携します。
第 2 引数以降は、アクションメソッドの引数となります。
親画面 ActionPage クラスにアクションメソッドを追加する
ActionPage クラスに画面から呼び出すアクションメソッドを追加します。
/* ダイアログを開く */
public void showDialog(String date) throws Exception {
  WorkDialogPage dialog = new WorkDialogPage();
  dialog.init(getRequest(), getResponse());
  dialog.setParentPage(this);
  dialog.loadDatabase(this.empId, date);
  dialog.show();
}

インスタンスの生成及び初期処理

ダイアログ ActionPage を生成し、「 init 」メソッドにより初期処理を行います。

「 setParentPage 」メソッド

ダイアログ ActionPage の「 setParentPage 」メソッドを呼び出して、親画面とダイアログの ActionPage を結び付けます。

ダイアログを開く

ダイアログ ActionPage の「 show 」メソッドを呼び出して、ダイアログを表示します。
ダイアログを閉じる処理を記述する
ダイアログ HTML テンプレートの HEAD 部に、閉じるための関数を追加します。
<script type="text/javascript">
<!--
  function dwClose() {
      parent.dw.hide();
      ls.exec('closeSubPage');
  }
//-->
</script>

ダイアログを閉じる

ダイアログを閉じる際は必ず、この関数を呼び出してください。
ページを表示する
ダイアログが表示されることを確認します。