モーダルダイアログ

ダイアログコントロールは動的コンテンツを表示し、モーダルダイアログ内の入力内容を受け入れます。

ダイアログコンテンツは、子コントロールとして定義されます。ダイアログが表示されるまで、これらのコントロールは実際には作成されません。最初に作成されるコントロールも最初に開かれるデータソースもないので、これにより最高のパフォーマンスが実現されます。

ダイアログの定義

ダイアログのコンテンツは、別の XPages コンテンツとして定義され、現在のコンテキストにアクセスすることができます。

例えば、前述のダイアログはビューの行内に配置されます。このダイアログは現在の Note ID または行にアクセスして、文書を開きます。

<xe:dialog id="inPlaceDialog1" title="Edit User" >
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument
        var="document1" formName="Contact" action="editDocument"
        documentId="#{ javascript:row.getNoteID() }"
        ignoreRequestParams="true" >
      </xp:dominoDocument>
    </xp:this.data>

ダイアログの表示

モーダルダイアログは、以下の方法でクライアントサイドのアクションによってトリガーされます。

XSP.openDialog('#{id:inPlaceDialog1}')

これが呼び出されると、Ajax 要求がサーバーに送信され、JSF ツリー内にダイアログコンテンツが作成されます。Dojo ダイアログウィンドウが作成され、Ajax コールの結果が表示されます。

`[OK]` ボタンの実装

[OK] ボタンは、2 つのシンプルアクションを持つ (送信ボタンではなく) 標準ボタンとして実装する必要があります。

最初のアクションはデータソースを保存し、2 番目のアクションは以下のスクリプトを実行します。

var c = getComponent("inPlaceDialog1")
c.hide()

一般的に、ボタンイベントが発生すると、ページの他の部分を部分更新する必要があります。これは特に、[OK] ボタンがクリックされたときに該当します。なぜならこの状況は、何らかのデータが変更され、その変更内容をページに反映する必要があることを意味するためです。これは、ボタンに onclick 部分更新ターゲットを設定するといった単純なものではありません。なぜなら、[OK] アクションが正しく実行されなかった場合は (例えば、検証の失敗後など)、ダイアログが閉じられず、更新も行われないためです。この場合は、ダイアログを更新する必要があります。

この解決策として、hide() メソッドの拡張バージョンを使用して、いくつかの追加パラメータ (ダイアログが閉じた後に更新するコンポーネントなど) を指定します。

var c = getComponent("inPlaceDialog1")
c.hide("repeat1")

最初のパラメータは、更新するコントロールの ID です。また、部分更新要求の発行時に使用するパラメータのマップを指定することもできます。ただし、これを使用するのはまれなケースです。

hide() メソッドによって生成されるクライアントサイドのコードは、ダイアログ閉じ、さらにオプションで部分更新を実行することに注意してください。また、JSF ツリーから JSF コントロールが適切に削除されます。

このダイアログは、ユーザーがダイアログのタイトルバーにある [閉じる] ボタンをクリックして閉じることもできます。この場合は、サーバーに要求が送信されないため、ツリーにはダイアログコントロールが挿入されたままになります。これらのコントロールは、次にページがレンダリングされる際に自動的に削除されます。

モーダルダイアログ

ダイアログの定義

ダイアログの表示

[OK] ボタンの実装

`[OK]` ボタンの実装