efw ダイアログサンプル

概要

本サンプルは、efwフレームワークにおけるダイアログ機能の完全な実装を展示し、多种類のダイアログタイプ（警告、確認、待機、プレビュー、カスタムダイアログ）の使用方法を含みます。efwフレームワークは、様々なユーザーインタラクションダイアログを作成および管理するための簡潔なAPIを提供します。

コアファイル

メインページ: helloDialog.jsp
カスタムダイアログコンポーネント: helloDialog_myDialog.jsp
ダイアログ初期化イベント処理: helloDialog_init.js

機能実装

1. ダイアログタイプ

警告ダイアログ (Alert)

efw.dialog.alert("I am here");

シンプルな警告メッセージを表示
ユーザーはOKクリックでのみ閉じることが可能

確認ダイアログ (Confirm)

efw.dialog.confirm(
    "alertテストしています。",
    {
        "はい": function(){ alert("「はい」を押しました。"); },
        "いいえ": function(){ alert("「いいえ」を押しました。"); }
    },
    "alertテスト",
    function(){ alert("テスト完了"); }
);

カスタムボタン付きの確認ダイアログを表示
各ボタンに独立したコールバック関数
ダイアログタイトルをサポート
閉じた後のコールバックをサポート

待機ダイアログ (Wait)

efw.dialog.wait(
    "５秒待ってください。",
    5,
    "waitテスト",
    function(){ alert("テスト完了"); }
);

待機メッセージを表示
待機時間（秒）を設定
ダイアログタイトルをサポート
タイムアウト後のコールバックをサポート

プレビューダイアログ (Preview)

efw.dialog.preview("a.jpg", "a.jpg");

ファイル内容をプレビュー
画像などのファイルタイプのプレビューをサポート

カスタムダイアログ (Dialog)

function testDialog(){
    myDialog.p1 = 'hello world! ' + new Date();
    myDialog.dialog('open');
}

完全にカスタマイズ可能なダイアログ
パラメータ伝達をサポート
開閉イベント処理をサポート

2. カスタムダイアログワークフロー

ダイアログ初期化:
- helloDialog_myDialog.jspでダイアログ構造と初期化ロジックを定義
- jQuery UIのdialogコンポーネントを使用してダイアログを作成
ダイアログオープン:
- testDialog()関数でパラメータを設定しダイアログを開く
- myDialog.p1を通じてパラメータを伝達
初期化イベント:
- ダイアログオープン時にopenイベントをトリガー
- Efw("helloDialog_init", { msg: myDialog.p1 })を呼び出し
- パラメータを初期化イベントハンドラーに伝達
初期化処理:
- helloDialog_init.jsがパラメータを受信
- Resultオブジェクトを使用してダイアログ内容を更新
- メッセージをダイアログの.msg要素に表示

技術的特長

1. モジュール化設計

メインページ、ダイアログコンポーネント、イベント処理を分離
<efw:part>を使用してコンポーネントを導入

2. パラメータ伝達メカニズム

カスタム属性（myDialog.p1など）を通じてパラメータを伝達
イベントハンドラーがparamsを通じてパラメータを受信

3. チェーン操作API

return (new Result())
    .runat("#myDialog")
    .withdata({".msg": params["msg"]});

4. イベント駆動アーキテクチャ

ダイアログオープン時に初期化イベントをトリガー
Efw()関数を使用してサーバーサイドイベントを呼び出し

5. デバッグサポート

params.debug(); // パラメータ情報を出力

6. 柔軟なダイアログ設定

高度にカスタマイズ可能なダイアログオプション
モーダル/非モーダルダイアログをサポート
サイズと位置の調整が可能

使用シナリオ

本サンプルは以下に適用:

ユーザー確認が必要な操作
ファイルプレビュー機能
カスタム複雑ダイアログ
パラメータ伝達が必要なダイアログシナリオ

本サンプルを通じて、開発者はefwフレームワークにおける各種ダイアログの使用方法、およびカスタムダイアログの作成と管理方法を学ぶことができます。