Lightning コンポーネント開発者ガイド
j高度なイベントの例
次の例は、比較的簡単なコンポーネントイベントおよびアプリケーションイベントの例に基づいています。コンポーネントイベントとアプリケーションイベントの両方で機能する、1 つのノーティファイアコンポーネントと 1 つのハンドラコンポーネントを使用します。イベントに結び付けられたコンポーネントについて説明する前に、関与する個々のリソースを見ていきます。
次の表は、この例で使用する各種リソースの役割をまとめたものです。これらのリソースのソースコードは、表の後に記載されています。
| リソース | リソース名 | 使用方法 |
|---|---|---|
| イベントファイル | コンポーネントイベント (compEvent.evt) およびアプリケーションイベント (appEvent.evt) | コンポーネントイベントとアプリケーションイベントを別々のリソースに定義します。eventsContainer.cmp に、コンポーネントイベントとアプリケーションイベントの両方の使用方法が示されます。 |
| ノーティファイア | コンポーネント (eventsNotifier.cmp) およびそのコントローラ (eventsNotifierController.js) | ノーティファイアには、イベントを開始する onclick ブラウザイベントが含まれます。このコントローラはイベントを起動します。 |
| ハンドラ | コンポーネント (eventsHandler.cmp) およびそのコントローラ (eventsHandlerController.js) | ハンドラコンポーネントには、ノーティファイアコンポーネント (またはアプリケーションイベントの <aura:handler> タグ) が含まれ、イベントの起動後に実行されるコントローラアクションをコールします。 |
| コンテナコンポーネント | eventsContainer.cmp | 完全デモの UI にイベントハンドラを表示します。 |
コンポーネントイベントおよびアプリケーションイ��ントの定義は別々の .evt リソースに保存されますが、ノーティファイアコンポーネントとハンドラコンポーネントの個別のバンドルに、どちらのイベントでも機能するコードを含めることができます。
コンポーネントとアプリケーションのどちらのイベントにも、イベントの形状を定義する context 属性が含まれます。このデータがイベントのハンドラに渡されます。
コンポーネントイベント
compEvent.evt のマークアップは次のようになります。
1<!--docsample:compEvent-->
2<aura:event type="COMPONENT">
3 <!-- pass context of where the event was fired to the handler. -->
4 <aura:attribute name="context" type="String"/>
5</aura:event>アプリケーションイベント
appEvent.evt のマークアップは次のようになります。
1<!--docsample:appEvent-->
2<aura:event type="APPLICATION">
3 <!-- pass context of where the event was fired to the handler. -->
4 <aura:attribute name="context" type="String"/>
5</aura:event>ノーティファイアコンポーネント
eventsNotifier.cmp ノーティファイアコンポーネントには、コンポーネントイベントまたはアプリケーションイベントを開始するボタンが含まれます。
ノーティファイアコンポーネントは aura:registerEvent タグを使用して、コンポーネントイベントおよびアプリケーションイベントを起動する可能性があることを宣言します。name 属性は必要ですが、値が関係するのはコンポーネントイベントのみであり、アプリケーションイベントの他の場所で値が使用されることはありません。
parentName 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
1<!--docsample:eventsNotifier-->
2<aura:component>
3 <aura:attribute name="parentName" type="String"/>
4 <aura:registerEvent name="componentEventFired" type="docsample:compEvent"/>
5 <aura:registerEvent name="appEvent" type="docsample:appEvent"/>
6
7 <div>
8 <h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
9 <p><ui:button
10 label="Click here to fire a component event"
11 press="{!c.fireComponentEvent}" />
12 </p>
13 <p><ui:button
14 label="Click here to fire an application event"
15 press="{!c.fireApplicationEvent}" />
16 </p>
17 </div>
18</aura:component>CSS ソース
CSS は eventsNotifier.css にあります。
1/* eventsNotifier.css */
2.docsampleEventsNotifier {
3 display: block;
4 margin: 10px;
5 padding: 10px;
6 border: 1px solid black;
7}クライアント側コントローラのソース
eventsNotifierController.js コントローラはイベントを起動します。
1/* eventsNotifierController.js */
2{
3 fireComponentEvent : function(cmp, event) {
4 var parentName = cmp.get("v.parentName");
5
6 // Look up event by name, not by type
7 var compEvents = cmp.getEvent("componentEventFired");
8
9 compEvents.setParams({ "context" : parentName });
10 compEvents.fire();
11 },
12
13 fireApplicationEvent : function(cmp, event) {
14 var parentName = cmp.get("v.parentName");
15
16 // note different syntax for getting application event
17 var appEvent = $A.get("e.docsample:appEvent");
18
19 appEvent.setParams({ "context" : parentName });
20 appEvent.fire();
21 }
22}ボタンをクリックしてコンポーネントイベントやアプリケーションイベントを起動することはできますが、まだハンドラコンポーネントをイベントに結び付けて応答するようにしていないため、出力に変化はありません。
コントローラがイベントを起動する前に、コンポーネントイベントまたはアプリケーションイベントの context 属性をノーティファイアコンポーネントの parentName に設定します。ハンドラコンポーネントを確認しながら、この設定が出力にどのように影響するかについて説明します。
ハンドラコンポーネント
eventsHandler.cmp ハンドラコンポーネントには、アプリケーションイベントおよびコンポーネントイベントの docsample:eventsNotifier ノーティファイアコンポーネントと <aura:handler> タグが含まれます。
1<!--docsample:eventsHandler-->
2<aura:component>
3 <aura:attribute name="name" type="String"/>
4 <aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
5 <aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
6 <aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>
7
8 <aura:handler event="docsample:appEvent" action="{!c.handleApplicationEventFired}"/>
9 <aura:handler name="componentEventFired" event="docsample:compEvent" action="{!c.handleComponentEventFired}"/>
10
11 <div>
12 <h3>This is {!v.name}</h3>
13 <p>{!v.mostRecentEvent}</p>
14 <p># component events handled: {!v.numComponentEventsHandled}</p>
15 <p># application events handled: {!v.numApplicationEventsHandled}</p>
16 <docsample:eventsNotifier parentName="{!v.name}" />
17 </div>
18</aura:component>CSS ソース
CSS は eventsHandler.css にあります。
1/* eventsHandler.css */
2.docsampleEventsHandler {
3 display: block;
4 margin: 10px;
5 padding: 10px;
6 border: 1px solid black;
7}クライアント側コントローラのソース
クライアント側コントローラは eventsHandlerController.js にあります。
1/* eventsHandlerController.js */
2{
3 handleComponentEventFired : function(cmp, event) {
4 var context = event.getParam("context");
5 cmp.set("v.mostRecentEvent",
6 "Most recent event handled: COMPONENT event, from " + context);
7
8 var numComponentEventsHandled =
9 parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
10 cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
11 },
12
13 handleApplicationEventFired : function(cmp, event) {
14 var context = event.getParam("context");
15 cmp.set("v.mostRecentEvent",
16 "Most recent event handled: APPLICATION event, from " + context);
17
18 var numApplicationEventsHandled =
19 parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
20 cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
21 }
22}name 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
ボタンをクリックでき、UI がイベントタイプを示すものに変更されます。クリック数が 1 つ増え、コンポーネントイベントかアプリケーションイベントかを示します。これで終了ではありません。イベントの context 属性が設定されていないため、イベントのソースが未定義です。
コンテナコンポーネント
eventsContainer.cmp のマークアップは次のようになります。
1<!--docsample:eventsContainer-->
2<aura:component>
3 <docsample:eventsHandler name="eventsHandler1"/>
4 <docsample:eventsHandler name="eventsHandler2"/>
5</aura:component>コンテナコンポーネントには、2 つのハンドラコンポーネントが含まれます。このコンテナコンポーネントは、両方のハンドラコンポーネントの name 属性を設定します。この属性がパススルーされ、ノーティファイアコンポーネントの parentName 属性が設定されます。この操作によって、ノーティファイアコンポーネントまたはハンドラコンポーネント自体の説明で確認した UI テキストのギャップが埋められます。
docsample:eventsContainer コンポーネントを docsample:eventsContainerApp アプリケーションに追加します。アプリケーションに移動します。
http://<mySalesforceInstance>/<namespace>/docsample/eventsContainerApp.app (mySalesforceInstance は、na1.salesforce.com など、組織をホストするインスタンスの名前です)。
いずれかのイベントハンドラの [Click here to fire a component event (コンポーネントイベントを起動する場合はここをクリック)] をクリックします。処理されたコンポーネントイベント数のカウンタには、起動元のコンポーネントのハンドラのみが通知されるため、このコンポーネントのみのイベント数が増加します。
いずれかのイベントハンドラの [Click here to fire an application event (アプリケーションイベントを起動する場合はここをクリック)] をクリックします。処理されたアプリケーションイベント数のカウンタには、処理しているすべてのコンポーネントが通知されるため、両方のコンポーネントのイベント数が増加します。