Visualforce コンポーネントライブラリの使用

ここまでで、例に使用された唯一の Visualforce タグは、すべての Visualforce マークアップの先頭と末尾に配置する必要がある必須の <apex:page> タグです。ただし、<img> または <table> タグを使用して HTML ドキュメントに画像やテーブルを挿入できるのと同様に、Visualforce コンポーネントライブラリに定義されたタグを使用して、Visualforce ページにユーザインターフェースコンポーネントを追加できます。

たとえば、詳細ページでセクションのように見えるコンポーネントを追加するには、<apex:pageBlock> コンポーネントタグを使用します。

1<apex:page standardController="Account">
2    <apex:pageBlock title="Hello {!$User.FirstName}!"> 
3            You are viewing the {!account.name} account.
4    </apex:pageBlock> 
5</apex:page>

<apex:pageBlock> コンポーネント

タグは、関連リスト、詳細ページ、および入力項目などの、一般的な Salesforce インターフェースコンポーネント用にも存在します。たとえば、詳細ページのコンテンツを追加するには、<apex:detail> コンポーネントタグを使用します。

1<apex:page standardController="Account">
2    <apex:pageBlock title="Hello {!$User.FirstName}!">
3        You are viewing the {!account.name} account.
4    </apex:pageBlock>
5    <apex:detail/> 
6</apex:page>

属性がない <apex:detail> コンポーネント

タグに特定の属性が何も指定されていなくても、<apex:detail> は、コンテキストレコードの完全な詳細ビューを表示します。どのレコードの詳細を表示するか、関連リストやタイトルを表示するかなど、プロパティを変更するにはタグで属性を使用できます。たとえば、次のマークアップは、コンテキストの取引先所有者の詳細を表示しますが、関連リストや色付きのタイトルバーは表示しません。

1<apex:page standardController="Account">
2    <apex:pageBlock title="Hello {!$User.FirstName}!">
3        You are viewing the {!account.name} account.
4    </apex:pageBlock>
5    <apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
6</apex:page>

関連リストまたはタイトル要素のない <apex:detail> コンポーネント

コンポーネントが更新または編集されると、そのコンポーネントを参照する Visualforce ページも更新されます。

コンポーネントライブラリを参照するには、ページエディタで [Component Reference (コンポーネントの参照)] をクリックします。このページから、任意のコンポーネントにドリルダウンして、定義した任意のカスタムコンポーネントを含め、各コンポーネントで使用可能な属性を参照できます。