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

高度なイベントの例

次の例は、比較的簡単なコンポーネントイベントおよびアプリケーションイベントの例に基づいています。コンポーネントイベントとアプリケーションイベントの両方で機能する、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");<aura:event type="COMPONENT">
2    <!-- pass context of where the event was fired to the handler. -->
3    <aura:attribute name="context" type="String"/>
4</aura:event>

アプリケーションイベント

appEvent.evt

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:event type="APPLICATION">
2    <!-- pass context of where the event was fired to the handler. -->
3    <aura:attribute name="context" type="String"/>
4</aura:event>

ノーティファイアコンポーネント

eventsNotifier.cmp

ノーティファイアコンポーネントには、コンポーネントイベントまたはアプリケーションイベントを開始する press ブラウザイベントが含まれます。

ノーティファイアコンポーネントは aura:registerEvent タグを使用して、コンポーネントイベントおよびアプリケーションイベントを起動する可能性があることを宣言します。name 属性は必須ですが、アプリケーションイベントでは空のままにします。

parentName 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-2", "9");<aura:component>
2  <aura:attribute name="parentName" type="String"/>
3  <aura:registerEvent name="componentEventFired" type="auradocs:compEvent"/>
4  <aura:registerEvent name="appEvent" type="auradocs:appEvent"/>
5
6  <div>
7    <h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
8    <p><ui:button
9        label="Click here to fire a component event"
10        press="{!c.fireComponentEvent}" />
11    </p>
12    <p><ui:button
13        label="Click here to fire an application event"
14        press="{!c.fireApplicationEvent}" />
15    </p>
16  </div>
17</aura:component>
18

CSS ソース

1swfobject.registerObject("clippy.codeblock-3", "9");.auradocsEventsNotifier {
2    display: block;
3    margin: 10px;
4    padding: 10px;
5    border: 1px solid black;
6}
7

クライアント側コントローラのソース

このコントローラはイベントを起動します。

1swfobject.registerObject("clippy.codeblock-4", "9");{
2    fireComponentEvent : function(cmp, event) {
3        var parentName = cmp.get("v.parentName");
4
5        // Look up event by name, not by type
6        var compEvents = cmp.getEvent("componentEventFired");
7
8        compEvents.setParams({ "context" : parentName });
9        compEvents.fire();
10    },
11
12    fireApplicationEvent : function(cmp, event) {
13        var parentName = cmp.get("v.parentName");
14
15        // note different syntax for getting application event
16        var appEvent = $A.get("e.auradocs:appEvent");
17
18        appEvent.setParams({ "context" : parentName });
19        appEvent.fire();
20    }
21}
22

ボタンをクリックしてコンポーネントイベントやアプリケーションイベントを起動することはできますが、まだハンドラコンポーネントをイベントに結び付けて応答するようにしていないため、出力に変化はありません。

コントローラがイベントを起動する前に、コンポーネントイベントまたはアプリケーションイベントの context 属性をノーティファイアコンポーネントの parentName に設定します。ハンドラコンポーネントを確認しながら、この設定が出力にどのように影響するかについて説明します。

ハンドラコンポーネント

eventsHandler.cmp

ハンドラコンポーネントには、ノーティファイアコンポーネントまたは <aura:handler> タグが含まれ、イベントの起動後に実行されるコントローラアクションをコールします。

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-5", "9");<aura:component>
2  <aura:attribute name="name" type="String"/>
3  <aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
4  <aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
5  <aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>
6  <aura:handler event="auradocs:appEvent" action="{!c.handleApplicationEventFired}"/>
7
8  <div>
9    <h3>This is {!v.name}</h3>
10    <p>{!v.mostRecentEvent}</p>
11    <p># component events handled: {!v.numComponentEventsHandled}</p>
12    <p># application events handled: {!v.numApplicationEventsHandled}</p>
13    <auradocs:eventsNotifier parentName="{!v.name}" componentEventFired="{!c.handleComponentEventFired}"/>
14  </div>
15</aura:component>
16

CSS ソース

1swfobject.registerObject("clippy.codeblock-6", "9");.auradocsEventsHandler {
2  display: block;
3  margin: 10px;
4  padding: 10px;
5  border: 1px solid black;
6}
7

クライアント側コントローラのソース

1swfobject.registerObject("clippy.codeblock-7", "9");{
2    handleComponentEventFired : function(cmp, event) {
3        var context = event.getParam("context");
4        cmp.set("v.mostRecentEvent", 
5            "Most recent event handled: COMPONENT event, from " + context);
6        
7        var numComponentEventsHandled =
8            parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
9        cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
10    },
11
12    handleApplicationEventFired : function(cmp, event) {
13        var context = event.getParam("context");
14        cmp.set("v.mostRecentEvent", 
15            "Most recent event handled: APPLICATION event, from " + context);
16
17        var numApplicationEventsHandled =
18            parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
19        cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
20    }
21}
22

name 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。

ボタンをクリックでき、UI がイベントタイプを示すものに変更されます。クリック数が 1 つ増え、コンポーネントイベントかアプリケーションイベントかを示します。これで終了ではありません。イベントの context 属性が設定されていないため、イベントのソースが未定義です。

コンテナコンポーネント

eventsContainer.cmp

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-8", "9");<aura:component>
2    <auradocs:eventsHandler name="eventsHandler1"/>
3    <auradocs:eventsHandler name="eventsHandler2"/>
4</aura:component>
5

コンテナコンポーネントには、2 つのハンドラコンポーネントが含まれます。このコンテナコンポーネントは、両方のハンドラコンポーネントの name 属性を設定します。この属性がパススルーされ、ノーティファイアコンポーネントの parentName 属性が設定されます。この操作によって、ノーティファイアコンポーネントまたはハンドラコンポーネント自体の説明で確認した UI テキストのギャップが埋められます。

いずれかのイベントハンドラの [Click here to fire a component event (コンポーネントイベントを起動する場合はここをクリック)] をクリックします。処理されたコンポーネントイベント数のカウンタには、起動元のコンポーネントのハンドラのみが通知されるため、このコンポーネントのみのイベント数が増加します。

いずれかのイベントハンドラの [Click here to fire an application event (アプリケーションイベントを起動する場合はここをクリック)] をクリックします。処理されたアプリケーションイベント数のカウンタには、処理しているすべてのコンポーネントが通知されるため、両方のコンポーネントのイベント数が増加します。

Lightning コンポーネント開発者ガイド

No Results

高度なイベントの例

コンポーネントイベント

アプリケーションイベント

ノーティファイアコンポーネント

ハンドラコンポーネント

コンテナコンポーネント

Lightning コンポーネント開発者ガイド

No Results

高度なイベントの例

コンポーネントイベント

アプリケーションイベント

ノーティファイアコンポーネント

ハンドラコンポーネント

コンテナコンポーネント

関連項目: