Visualforce 開発者ガイド
j任意のコンポーネントでのイベントへの Ajax 動作の適用
ページの部分更新を実装するためにコマンドリンクやボタン���使用することは比較的単純ですが、マウスポインターを取引先責任者の名前に重ねたときに同様のページ更新が行われると、さらに便利です。
取引先責任者リストの例を使ってこれを実装するには、データテーブルから <apex:commandLink> タグを取り除き、代わりに <apex:outputPanel> タグで取引先責任者の名前をラップします。この出力パネル内に、取引先責任者の名前の同階層として <apex:actionSupport> 要素を追加します。
- <apex:outputPanel> タグは、特化した動作を実行する領域を定義します。
-
<apex:actionSupport> タグは、コマンドリンクによって以前に実装した部分ページ更新動作を定義します。
- event 属性は、更新をトリガーする DOM イベントを指定します。<apex:commandLink> は「onclick」イベント中にのみ実行しますが、<apex:actionSupport> は「onclick」、「ondblclick」、またはこの例では「onmouseover」など、すべての有効なイベントで実行できます。
- reRender 属性は、ページのどの部分を更新するのかを指定します。
- <apex:param> タグは、指定されたイベントが発生したときに、cid クエリ文字列パラメーターの値を設定します。
reRender 属性は必須ではありません。この属性を設定しない場合、ページは指定されたイベント時に更新されませんが、≤apex:param> で引き続き cid の名前と値が設定されます。
この結果作成されるマークアップは次のようになります。
1<apex:page standardController="Account">
2 <apex:pageBlock title="Hello {!$User.FirstName}!">
3 You are displaying contacts from the {!account.name} account.
4 Mouse over a contact's name to view his or her details.
5 </apex:pageBlock>
6 <apex:pageBlock title="Contacts">
7 <apex:form>
8 <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4"
9 border="1">
10 <apex:column>
11 <apex:outputPanel>
12 <apex:actionSupport event="onmouseover" rerender="detail">
13 <apex:param name="cid" value="{!contact.id}"/>
14 </apex:actionSupport>
15 {!contact.Name}
16 </apex:outputPanel>
17 </apex:column>
18 </apex:dataTable>
19 </apex:form>
20 </apex:pageBlock>
21 <apex:outputPanel id="detail">
22 <apex:actionStatus startText="Requesting...">
23 <apex:facet name="stop">
24 <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false"
25 title="false"/>
26 </apex:facet>
27 </apex:actionStatus>
28 </apex:outputPanel>
29</apex:page>ページを保存したら、任意の取引先責任者にマウスポインターを移動し、クリックしなくても詳細領域が適切な情報で更新されることを確認します。