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 の照合で上に移動してから下に戻る必要がある場合は、一致しません。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page >
18
19 <style>
20 .clicker { border: 1px solid #999; cursor: pointer;
21 margin: .5em; padding: 1em; width: 10em; text-align: center; }
22 </style>
23
24 <apex:form id="theForm">
25 <apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
26 <apex:pageBlockSection id="theSection">
27 <apex:pageBlockSectionItem id="theSectionItem">
28 All the alerts refer to this component.
29
30 <p>The full DOM ID resembles something like this:<br/>
31 j_id0:theForm:thePageBlock:theSection:theSectionItem</p>
32 </apex:pageBlockSectionItem>
33
34 <!-- Works because this outputPanel has a parent in common
35 with "theSectionItem" component -->
36 <apex:outputPanel layout="block" styleClass="clicker"
37 onclick="alert('{!$Component.theSectionItem}');">
38 First click here
39 </apex:outputPanel>
40 </apex:pageBlockSection>
41
42 <apex:pageBlockButtons id="theButtons" location="bottom">
43 <!-- Works because this outputPanel has a grandparent ("theSection")
44 in common with "theSectionItem" -->
45 <apex:outputPanel layout="block" styleClass="clicker"
46 onclick="alert('{!$Component.theSection.theSectionItem}');">
47 Second click here
48 </apex:outputPanel>
49
50 <!-- Works because this outputPanel has a distant ancestor ("theForm")
51 in common with "theSectionItem" -->
52 <apex:outputPanel layout="block" styleClass="clicker"
53 onclick="alert('
54 {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
55 Third click here
56 </apex:outputPanel>
57 </apex:pageBlockButtons>
58
59 </apex:pageBlock>
60
61 <!-- Works because this outputPanel is a sibling to "thePageBlock",
62 and specifies the complete ID path from that sibling -->
63 <apex:outputPanel layout="block" styleClass="clicker"
64 onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
65 Fourth click here
66 </apex:outputPanel>
67
68 <hr/>
69
70 <!-- Won't work because this outputPanel doesn't provide a path
71 that includes a sibling or common ancestor -->
72 <apex:outputPanel layout="block" styleClass="clicker"
73 onclick="alert('{!$Component.theSection.theSectionItem}');">
74 This won't work
75 </apex:outputPanel>
76
77 <!-- Won't work because this outputPanel doesn't provide a path
78 that includes a sibling or common ancestor -->
79 <apex:outputPanel layout="block" styleClass="clicker"
80 onclick="alert('{!$Component.theSectionItem}');">
81 Won't work either
82 </apex:outputPanel>
83
84 </apex:form>
85</apex:page>一意の ID の使用
コンポーネント id はページの各階層セグメント内で一意である必要があります。ただし Salesforce では、参照する必要があるすべてのコンポーネント、およびその参照に必要なコンポーネント階層の上位コンポーネントに対して、ページで一意の id を使用することをお勧めします。
たとえば、1 つのページに 2 つのデータテーブルがあるとします。両方のデータテーブルが同じページブロック内に指定されている場合は、両方のデータテーブルの id 属性が一意である必要があります。それぞれが別のページブロックに指定されている場合は、同じコンポーネント id を付与することができます。ただし、この場合、特定のデータテーブルを参照できる唯一の方法として、すべてのコンポーネントに id を割り当ててから、Visualforce で自動的に参照するのではなく、コンポーネント階層を使用してデータテーブルのコンポーネントを参照する必要があります。また、ページ階層に変更があると、プログラムが機能しません。
コンポーネント ID での反復
テーブル、リストなどの一部のコンポーネントでは、レコードのコレクションの反復をサポートしています。これらのタイプのコンポーネントに ID を割り当てると、コンポーネントの各反復に、最初の ID に基づいて一意の「複合 ID」が割り当てられます。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardController="Account" recordSetVar="accounts" id="thePage">
18 <apex:dataTable value="{!accounts}" var="account" id="theTable">
19 <apex:column id="firstColumn">
20 <apex:outputText value="{!account.name}"/>
21 </apex:column>
22 <apex:column id="secondColumn">
23 <apex:outputText value="{!account.owner.name}"/>
24 </apex:column>
25 </apex:dataTable>
26</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 の値は含まれません。