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 のマークアップは次のようになります。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:compEvent-->
18<aura:event type="COMPONENT">
19 <!-- pass context of where the event was fired to the handler. -->
20 <aura:attribute name="context" type="String"/>
21</aura:event>アプリケーションイベント
appEvent.evt のマークアップは次のようになります。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:appEvent-->
18<aura:event type="APPLICATION">
19 <!-- pass context of where the event was fired to the handler. -->
20 <aura:attribute name="context" type="String"/>
21</aura:event>ノーティファイアコンポーネント
eventsNotifier.cmp ノーティファイアコンポーネントには、コンポーネントイベントまたはアプリケーションイベントを開始する press ブラウザイベントが含まれます。
ノーティファイアコンポーネントは aura:registerEvent タグを使用して、コンポーネントイベントおよびアプリケーションイベントを起動する可能性があることを宣言します。name 属性は必須ですが、アプリケーションイベントでは空のままにします。
parentName 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:eventsNotifier-->
18<aura:component>
19 <aura:attribute name="parentName" type="String"/>
20 <aura:registerEvent name="componentEventFired" type="docsample:compEvent"/>
21 <aura:registerEvent name="appEvent" type="docsample:appEvent"/>
22
23 <div>
24 <h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
25 <p><ui:button
26 label="Click here to fire a component event"
27 press="{!c.fireComponentEvent}" />
28 </p>
29 <p><ui:button
30 label="Click here to fire an application event"
31 press="{!c.fireApplicationEvent}" />
32 </p>
33 </div>
34</aura:component>
35CSS ソース
CSS は eventsNotifier.css にあります。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* eventsNotifier.css */
18.docsampleEventsNotifier {
19 display: block;
20 margin: 10px;
21 padding: 10px;
22 border: 1px solid black;
23}
24クライアント側コントローラのソース
eventsNotifierController.js コントローラはイベントを起動します。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* eventsNotifierController.js */
18{
19 fireComponentEvent : function(cmp, event) {
20 var parentName = cmp.get("v.parentName");
21
22 // Look up event by name, not by type
23 var compEvents = cmp.getEvent("componentEventFired");
24
25 compEvents.setParams({ "context" : parentName });
26 compEvents.fire();
27 },
28
29 fireApplicationEvent : function(cmp, event) {
30 var parentName = cmp.get("v.parentName");
31
32 // note different syntax for getting application event
33 var appEvent = $A.get("e.docsample:appEvent");
34
35 appEvent.setParams({ "context" : parentName });
36 appEvent.fire();
37 }
38}
39ボタンをクリックしてコンポーネントイベントやアプリケーションイベントを起動することはできますが、まだハンドラコンポーネントをイベントに結び付けて応答するようにしていないため、出力に変化はありません。
コントローラがイベントを起動する前に、コンポーネントイベントまたはアプリケーションイベントの context 属性をノーティファイアコンポーネントの parentName に設定します。ハンドラコンポーネントを確認しながら、この設定が出力にどのように影響するかについて説明します。
ハンドラコンポーネント
eventsHandler.cmp ハンドラコンポーネントには、ノーティファイアコンポーネントまたは <aura:handler> タグが含まれ、イベントの起動後に実行されるコントローラアクションをコールします。
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:eventsHandler-->
18<aura:component>
19 <aura:attribute name="name" type="String"/>
20 <aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
21 <aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
22 <aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>
23 <aura:handler event="docsample:appEvent" action="{!c.handleApplicationEventFired}"/>
24
25 <div>
26 <h3>This is {!v.name}</h3>
27 <p>{!v.mostRecentEvent}</p>
28 <p># component events handled: {!v.numComponentEventsHandled}</p>
29 <p># application events handled: {!v.numApplicationEventsHandled}</p>
30 <docsample:eventsNotifier parentName="{!v.name}" componentEventFired="{!c.handleComponentEventFired}"/>
31 </div>
32</aura:component>
33CSS ソース
CSS は eventsHandler.css にあります。
1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* eventsHandler.css */
18.docsampleEventsHandler {
19 display: block;
20 margin: 10px;
21 padding: 10px;
22 border: 1px solid black;
23}
24クライアント側コントローラのソース
クライアント側コントローラは eventsHandlerController.js にあります。
1swfobject.registerObject("clippy.codeblock-7", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* eventsHandlerController.js */
18{
19 handleComponentEventFired : function(cmp, event) {
20 var context = event.getParam("context");
21 cmp.set("v.mostRecentEvent",
22 "Most recent event handled: COMPONENT event, from " + context);
23
24 var numComponentEventsHandled =
25 parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
26 cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
27 },
28
29 handleApplicationEventFired : function(cmp, event) {
30 var context = event.getParam("context");
31 cmp.set("v.mostRecentEvent",
32 "Most recent event handled: APPLICATION event, from " + context);
33
34 var numApplicationEventsHandled =
35 parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
36 cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
37 }
38}
39name 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
ボタンをクリックでき、UI がイベントタイプを示すものに変更されます。クリック数が 1 つ増え、コンポーネントイベントかアプリケーションイベントかを示します。これで終了ではありません。イベントの context 属性が設定されていないため、イベントのソースが未定義です。
コンテナコンポーネント
eventsContainer.cmp のマークアップは次のようになります。
1swfobject.registerObject("clippy.codeblock-8", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:eventsContainer-->
18<aura:component>
19 <docsample:eventsHandler name="eventsHandler1"/>
20 <docsample:eventsHandler name="eventsHandler2"/>
21</aura:component>
22コンテナコンポーネントには、2 つのハンドラコンポーネントが含まれます。このコンテナコンポーネントは、両方のハンドラコンポーネントの name 属性を設定します。この属性がパススルーされ、ノーティファイアコンポーネントの parentName 属性が設定されます。この操作によって、ノーティファイアコンポーネントまたはハンドラコンポーネント自体の説明で確認した UI テキストのギャップが埋められます。
いずれかのイベントハンドラの [Click here to fire a component event (コンポーネントイベントを起動する場合はここをクリック)] をクリックします。処理されたコンポーネントイベント数のカウンタには、起動元のコンポーネントのハンドラのみが通知されるため、このコンポーネントのみのイベント数が増加します。
いずれかのイベントハンドラの [Click here to fire an application event (アプリケーションイベントを起動する場合はここをクリック)] をクリックします。処理されたアプリケーションイベント数のカウンタには、処理しているすべてのコンポーネントが通知されるため、両方のコンポーネントのイベント数が増加します。