dynamicContent - 動的コンテンツ (拡張ライブラリ - コントロール)

動的コンテンツを組み込みます。

カテゴリ

拡張ライブラリ

構文

<xe:dynamicContent attributes>
	<xp:this.facets>
		<xp:panel xp:key="facetID">content</panel>
		...
	</xp:this.facets>
</xe:dynamicContent>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `dynamicContent1`、`dynamicContent2` などです。

表 2. すべてのプロパティ
カテゴリ	プロパティ
basics	binding、defaultFacet、id、loaded、partialEvents、rendered、rendererType、useHash
イベント	afterContentLoad、beforeContentLoad
styling	disableTheme、themeId

使用法

このコントロールは、動的にロードされる代替コンテンツの領域を定義します。各コンテンツ領域は、ファセット内のパネルを表します。

サーバーサイドのスクリプトで動的コンテンツを表示するには、以下のコードを実行します。ここで、dynamicContent1 はコントロール ID、key_1 はファセット ID です。

getComponent("dynamicContent1").show("key_1")

また、シンプルアクションを使用することもできます。動的コンテンツの変更 (シンプルアクション)を参照してください。

動的コンテンツコントロールはファセットをデフォルトとして識別することで、そのファセットを最初にロードすることができます。

defaultFacet="key_1"

詳しくは、動的コンテンツを参照してください。

例

以下の動的コンテンツコントロールには、2 つのファセットが含まれています。各ファセットにはパネルが含まれ、各パネルにはボタンと Domino ビューが含まれています。デフォルトでは、ページのロード時に mainView ファセットが表示されます。 mainView ファセット内のボタンをクリックすると、subjectView ファセットが表示されます。subjectView ファセット内のボタンをクリックすると、mainView ファセットが表示されます。

<xe:dynamicContent id="dynamicContent1" defaultFacet="mainView">
	<xp:this.facets>
		<xp:panel xp:key="subjectView">
			<xp:button value="Switch to main view" id="button4">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("mainView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel1">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager1">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="subject" id="viewColumn1">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader1"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn2">
					<xp:viewColumnHeader value="number" id="viewColumnHeader2"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="$2" id="viewColumn3">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader3"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
		<xp:panel xp:key="mainView">
			<xp:button value="Switch to subject view" id="button3">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("subjectView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel2">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager2">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view2" viewName="main"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="category" id="viewColumn4">
					<xp:viewColumnHeader value="category" id="viewColumnHeader4"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="subject" id="viewColumn5">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader5"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn6">
					<xp:viewColumnHeader value="number" id="viewColumnHeader6"></xp:viewColumnHeader>
				</xp:viewColumn><xp:viewColumn columnName="$2" id="viewColumn7">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader7"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
	</xp:this.facets>
</xe:dynamicContent>