動的コンテンツ

動的コンテンツコントロールには、必要に応じて表示可能なコンテンツの代替セットが含まれます。

以下の例に示すコントロールは、ユーザーがリンクをクリックしたときに、ビューまたはフォームを表示することができます。クリックによってコントロールのコンテンツの部分更新がトリガーされるため、ブラウザは実際には同じページに留まります。サーバーサイドでは、動的コンテンツコントロールが自身の子を置き換えています。

ユーザーが [すべての連絡先を表示] をクリックすると、以下のようなページが表示されます。

[すべての連絡先を表示] をクリックした後の動的コンテンツ

ユーザーが [最初の連絡先を編集] をクリックすると、以下のようなページが表示されます。

[最初の連絡先を編集] をクリックした後の動的コンテンツ

動的コンテンツコントロール

動的コンテンツコントロールには、ファセットをいくつでも含めることができます。各ファセットは、表示可能な 1 つの UI を表します。参照するファセットを識別するには、key プロパティを使用します。
<xe:dynamicContent id="dynp" defaultFacet="view" useHash="true" >
  <xp:this.facets>
    <xp:panel xp:key="view" id="panel1" >
      <xp:viewPanel rows="10" id="viewPanel1" var="row" >
        ...
      </xp:viewPanel>
    </xp:panel>
    <xp:panel xp:key="contact" id="panel2" >
      <xp:this.data>
        <xp:dominoDocument var="document1" formName="Contact" >
        </xp:dominoDocument>
      </xp:this.data>
        ...
    </xp:panel>
  </xp:this.facets>
</xe:dynamicContent>
既存の動的コンテンツを破棄し、ファセットのコンテンツを表示するには、以下のサーバーサイドのコードを使用します。以下の例では、dynp が動的コンテンツコントロールの ID、view がファセットの ID です。
var c = getComponent("dynp")
c.show("view")
show() メソッドには、オプションのパラメータがあります。このパラメータは、URL パラメータをコントロールの子に渡す際に使用されます。渡されたパラメータは一時的に requestParameterMap に追加され、コントロールと複合タイプで使用することができます。組み込みデータソース (文書データソースなど) は、このマップからこれらのパラメータを読み取ります。
var c = getComponent("dynp")
c.show("contact",{action:'editDocument'
,documentId:dataAccess.firstContactID})

一般的なリンク実装では、show() メソッドを呼び出して動的コンテンツコントロールを部分更新します。

デフォルトでは、動的 UI コントロールによって、子の部分実行と部分更新が強制的に行われます。 これを防ぐには、以下のプロパティを使用します。
partialExecute false

デフォルトのコンテンツ

動的コンテンツコントロールは最初に、何も表示しないか、ファセットのいずれかを表示するように設定できます。初期コンテンツを設定するには、defaultFacet プロパティを指定します。
動的コンテンツコントロールのデフォルトコンテンツ

コンテンツの追跡

現在表示されているファセットとパラメータをブラウザ URL で追跡すると便利な場合があります。これにより、ユーザーがページをブックマークしたり、[戻る] ボタンを使用したりできるようになります。しかし、URL が変更されると、強制的にブラウザが更新され、サーバーに要求が送信されます。ページの更新をトリガーせずに URL を更新する唯一の方法は、URL の # 部分を変更することです。この # 部分を使用する手法は、JavaScript ではよく知られています。 以下のプロパティを設定すると、動的コンテンツコントロールでこれを自動的に管理することができます。
useHash true
新しいファセットが選択されると、URL が更新されます。
http://.../XPagesExt.nsf/Core_DynamicPage.xsp#content=contact&action=editDocument&documentId=8FA

また、ユーザーによる URL の変更 (ブックマークに移動したり、[戻る] ボタンや [次へ] ボタンを使用したりする) を追跡するために、Dojo リスナーもインストールされます。変更が検出されると、Ajax 要求が自動的にサーバーに送信され、コンテンツが更新されます。

このオプションを有効にすると、動的コンテンツコントロールをクライアントサイドの JavaScript によって制御することができます。
XSP.showContent("#{id:dynp}","view")
または、単純な相対 URL によって制御することもできます。
#content=view

サーバーサイドでは、ハッシュからのパラメータが requestMap または requestParameterMap に自動的に追加されるため、データソースや他のコントロールにとって透過的になります。

[OK] ボタンの実装

通常の [送信] ボタンは、成功すると別のページにリダイレクトするため、使用しないでください。 代わりに、以下のシンプルアクションを持つシンプルボタンを使用してください。
動的コンテンツコントロールの [OK] ボタン
2 番目のアクションのスクリプトは、単にコンテンツをリセットします。
var c = getComponent("dynp")
c.show("view")

このボタンイベントでは、動的コンテンツコントロールに対して部分更新を実行する必要があります。

ビューの列のクリック

ビューの列がクリックされたときに、ページ全体を更新せずに、エントリフォームに動的に切り替わるようにするには、動的コンテンツの変更手法 (サーバーサイドのコード、クライアントサイドのコード、相対 URL) のいずれかを使用して、onclick イベントをビューの列に追加します。以下に、サーバーサイドのコードの使用例を示します。
var c = getComponent("dynp")
var id = row.getNoteID()
c.show("contact",{action:'editDocument',documentId:id})
親トピック: dynamicContent - 動的コンテンツ (拡張ライブラリ - コントロール)