この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Visualforce 開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

任意のコンポーネントでのイベントへの 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 クエリ文字列パラメータの値を設定します。

この結果作成されるマークアップは次のようになります。

1swfobject.registerObject("clippy.codeblock-0", "9");<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>

ページを保存したら、任意の取引先責任者にマウスポインタを移動し、クリックしなくても詳細領域が適切な情報で更新されることを確認します。