Visualforce 開発者ガイド
jコンポーネント ID へのアクセスのベストプラクティス
JavaScript または他の Web 対応言語で Visualforce コンポーネントを参照するには、そのコンポーネントの id 属性の値を指定する必要があります。DOM ID はコンポーネントの id 属性とその要素を含むすべてのコンポーネントの id 属性の組み合わせで構成されます。
$Component グローバル変数を使用すると、Visualforce コンポーネント用に生成される DOM ID の参照が簡略化され、ページ構造全体での連動関係の一部が削減されます。特定の Visualforce コンポーネントの DOM ID を参照するには、ページのコンポーネント階層の各レベルを区切るドット表記を使用して、コンポーネントのパス指定子を $Component に追加します。たとえば、Visualforce コンポーネント階層の同じレベルにあるコンポーネントを参照するには $Component.itemId を使用し、完全なコンポーネントパスを指定するには $Component.grandparentId.parentId.itemId を使用します。
- $Component が使用されているコンポーネント階層の現在のレベルでまず照合されます。
- 次に、一致が検出されるか、コンポーネント階層の最上位レベルに達するまで、コンポーネント階層の各上位レベルが照合されます。
バックトラッキングはないため、ID の照合で上に移動してから下に戻る必要がある場合は、一致しません。
1<apex:page >
2
3 <style>
4 .clicker { border: 1px solid #999; cursor: pointer;
5 margin: .5em; padding: 1em; width: 10em; text-align: center; }
6 </style>
7
8 <apex:form id="theForm">
9 <apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
10 <apex:pageBlockSection id="theSection">
11 <apex:pageBlockSectionItem id="theSectionItem">
12 All the alerts refer to this component.
13
14 <p>The full DOM ID resembles something like this:<br/>
15 j_id0:theForm:thePageBlock:theSection:theSectionItem</p>
16 </apex:pageBlockSectionItem>
17
18 <!-- Works because this outputPanel has a parent in common
19 with "theSectionItem" component -->
20 <apex:outputPanel layout="block" styleClass="clicker"
21 onclick="alert('{!$Component.theSectionItem}');">
22 First click here
23 </apex:outputPanel>
24 </apex:pageBlockSection>
25
26 <apex:pageBlockButtons id="theButtons" location="bottom">
27 <!-- Works because this outputPanel has a grandparent ("theSection")
28 in common with "theSectionItem" -->
29 <apex:outputPanel layout="block" styleClass="clicker"
30 onclick="alert('{!$Component.theSection.theSectionItem}');">
31 Second click here
32 </apex:outputPanel>
33
34 <!-- Works because this outputPanel has a distant ancestor ("theForm")
35 in common with "theSectionItem" -->
36 <apex:outputPanel layout="block" styleClass="clicker"
37 onclick="alert('
38 {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
39 Third click here
40 </apex:outputPanel>
41 </apex:pageBlockButtons>
42
43 </apex:pageBlock>
44
45 <!-- Works because this outputPanel is a sibling to "thePageBlock",
46 and specifies the complete ID path from that sibling -->
47 <apex:outputPanel layout="block" styleClass="clicker"
48 onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
49 Fourth click here
50 </apex:outputPanel>
51
52 <hr/>
53
54 <!-- Won't work because this outputPanel doesn't provide a path
55 that includes a sibling or common ancestor -->
56 <apex:outputPanel layout="block" styleClass="clicker"
57 onclick="alert('{!$Component.theSection.theSectionItem}');">
58 This won't work
59 </apex:outputPanel>
60
61 <!-- Won't work because this outputPanel doesn't provide a path
62 that includes a sibling or common ancestor -->
63 <apex:outputPanel layout="block" styleClass="clicker"
64 onclick="alert('{!$Component.theSectionItem}');">
65 Won't work either
66 </apex:outputPanel>
67
68 </apex:form>
69</apex:page>一意の ID の使用
コンポーネント id はページの各階層セグメント内で一意である必要があります。ただし Salesforce では、参照する必要があるすべてのコンポーネント、およびその参照に必要なコンポーネント階層の上位コンポーネントに対して、ページで一意の id を使用することをお勧めします。
たとえば、1 つのページに 2 つのデータテーブルがあるとします。両方のデータテーブルが同じページブロック内に指定されている場合は、両方のデータテーブルの id 属性が一意である必要があります。それぞれが別のページブロックに指定されている場合は、同じコンポーネント id を付与できます。ただし、この場合、特定のデータテーブルを参照できる唯一の方法として、すべてのコンポーネントに id を割り当ててから、Visualforce で自動的に参照するのではなく、コンポーネント階層を使用してデータテーブルのコンポーネントを参照する必要があります。また、ページ階層に変更があると、プログラムが機能しません。
コンポーネント ID での反復
テーブル、リストなどの一部のコンポーネントでは、レコードのコレクションの反復をサポートしています。これらのタイプのコンポーネントに ID を割り当てると、コンポーネントの各反復に、最初の ID に基づいて一意の「複合 ID」が割り当てられます。
1<apex:page standardController="Account" recordSetVar="accounts" id="thePage">
2 <apex:dataTable value="{!accounts}" var="account" id="theTable">
3 <apex:column id="firstColumn">
4 <apex:outputText value="{!account.name}"/>
5 </apex:column>
6 <apex:column id="secondColumn">
7 <apex:outputText value="{!account.owner.name}"/>
8 </apex:column>
9 </apex:dataTable>
10</apex:page>1<table id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
2<colgroup span="2"/>
3<tbody>
4 <tr class="">
5 <td id="thePage:theTable:0:firstColumn">
6 <span id="thePage:theTable:0:accountName">Burlington Textiles</span>
7 </td>
8 <td id="thePage:theTable:0:secondColumn">
9 <span id="thePage:theTable:0:accountOwner">Vforce Developer</span>
10 </td>
11 </tr>
12 <tr class="">
13 <td id="thePage:theTable:1:firstColumn">
14 <span id="thePage:theTable:1:accountName">Dickenson</span>
15 </td>
16 <td id="thePage:theTable:1:secondColumn">
17 <span id="thePage:theTable:1:accountOwner">Vforce Developer</span>
18 </td>
19 </tr>
20</table>列のすべてのエントリを参照するには、テーブルの行を反復して、列の形式に従った ID を含む各 <td> 要素を参照する必要があります。
同じタイプの ID の生成がテーブルセル内の要素に対して実行されます。たとえば、最初の行の取引先名は、ID が thePage:theTable:0:accountName である span として生成されます。ID にはその ID がある列の ID の値は含まれません。