formTable - フォームテーブル

入力コントロールを行と列でフォーマットします。ヘッダー領域、フッター領域、メッセージ領域を指定します。

カテゴリ

拡張ライブラリ

構文

<xe:formTable attributes>content</xe:formTable>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `formTable1`、`formTable2` などです。
formTitle	表の上部のタイトルを指定します。
formDescription	タイトルの下に配置されるテキストを指定します。
labelPosition	コントロールに関連する、行内のラベルのデフォルト位置として、`left` (デフォルト)、`above`、`none` のいずれかを指定します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
アクセシビリティ	ariaLabel、legend
basics	binding、disableErrorSummary、disableRowError、errorSummaryText、fieldHelp、formDescription、formTitle、id、labelWidth、loaded、rendered、rendererType
format	disableRequiredMarks、labelPosition
styling	disableTheme、style、styleClass

例

以下の例は、2 列構成の表を表示します。各列には行が 1 つあり、行には編集ボックスが含まれています。効果は、これらの編集ボックスを同一線上に表示することです。ヘッダーには説明テキストが表示され、フッターには保存ボタンとキャンセルボタンが表示されます。

<xe:formTable id="formTable1" formTitle="Subject and number"
formDescription="Provide your input in the boxes below.">
	<xe:formColumn>
		<xe:formRow id="formRow1" label="Subject" for="inputText1">
		<xp:inputText id="inputText1"
			value="#{document1.subject}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xe:formColumn>
		<xe:formRow id="formRow2" label="Number" for="inputText2">
		<xp:inputText id="inputText2"
			value="#{document1.number}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xp:this.facets>
		<xp:panel xp:key="footer" id="panel1">
			<xp:button value="Save" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="false" save="true">
				</xp:eventHandler>
			</xp:button>
			<xp:button value="Cancel" id="button2">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="true" save="false">
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:this.facets>
</xe:formTable>