dialog - ダイアログ

モーダルダイアログを定義します。

カテゴリ

拡張ライブラリ

構文

<xe:dialog attributes>content</xe:dialog>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `dialog1`、`dialog2` などです。
title	タイトルバーのコンテンツを指定します。(アクセシビリティにも使用されます。)

表 2. すべてのプロパティ
カテゴリ	プロパティ
アクセシビリティ	title、waiRole、waiState
basics	binding、dir、errorMessage、extractContent、href、id、keepComponents、lang、loaded、loadingMessage、partialRefresh、preload、preventCache、refreshOnShow、rendered、rendererType
dojo	dojoAttributes、dojoType、dragRestriction、parseOnLoad、tooltip
イベント	afterContentLoad、beforeContentLoad、onBlur、onClick、onClose、onContentError、onDblClick、onDownloadEnd、onDownloadError、onDownloadStart、onFocus、onHide、onKeyDown、onKeyPress、onKeyUp、onLoad、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp、onShow、onUnload
styling	disableTheme、style、styleClass、themeId

使用法

このコントロールは、ダイアログを定義します。サーバーサイドのスクリプトでダイアログをアクティブにするには、以下のコードを実行します。ここで、dialog1 はコントロール ID です。

getComponent("dialog1").show()

クライアントサイドのスクリプトでダイアログをアクティブにするには、以下のコードを実行します。

XSP.openDialog("#{id:dialog1}")

このコントロールはモーダルです。したがって、ユーザーは先に進む前に、このコントロールを閉じる必要があります。

デフォルトでは、このコントロールにはキャンセルアイコンが含まれています。ただし、必要に応じて、[OK]、[キャンセル]、[送信] など、ユーザーがクリックできるメカニズムをダイアログに組み込むことができます。クライアントサイドのイベントからダイアログを閉じるには、以下のコードを使用します。

XSP.closeDialog('#{id:dialog1}')

詳しくは、モーダルダイアログを参照してください。

例

以下に、ダイアログをアクティブにする 2 つのボタンを示します。一方はクライアントサイド、もう一方はサーバーサイドのボタンです。このダイアログには、現在の時刻を表示する計算結果フィールドとダイアログボタンバーが含まれています。ボタンバーには、[OK] と [キャンセル] というラベルの付いた 2 つのボタンがあります。どちらのボタンも単にダイアログを閉じます。

<xp:button value="Display time client-side" id="button4">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Display time server-side" id="button5">
	<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show()}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Current Time">
	<xe:dialogContent id="dialogContent1">
		<xp:text escape="true" id="computedField1">
			<xp:this.value><![CDATA[#{javascript:var dt:NotesDateTime = session.createDateTime("Today");
			dt.setNow();
			return dt.getLocalTime();}]]></xp:this.value>
		</xp:text>
	</xe:dialogContent>
	<xe:dialogButtonBar id="dialogButtonBar1">
		<xp:button value="OK" id="button6">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
		<xp:button value="Cancel" id="button7">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
	</xe:dialogButtonBar>
</xe:dialog>