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

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

以下に、アプリケーションイベントを使用して、別のコンポーネントの属性を更新する簡単な使用事例を示します。

ユーザがノーティファイアコンポーネント aeNotifier.cmp のボタンをクリックします。
aeNotifier.cmp のクライアント側コントローラが、コンポーネントイベントにメッセージを設定し、イベントを起動します。
ハンドラコンポーネント aeHandler.cmp が、起動されたイベントを処理します。
aeHandler.cmp のクライアント側コントローラが、イベントで送信されたデータに基づいて aeHandler.cmp の属性を設定します。

この例のイベントおよびコンポーネントは、デフォルトの c 名前空間を使用します。自分の組織に名前空間がある場合は、その名前空間を使用してください。

メモ

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

aeEvent.evt アプリケーションイベントには属性が 1 つ設定されています。この場合は、起動時にこの属性を使用してイベントに一定のデータを渡します。

1<!--c:aeEvent-->
2<aura:event type="APPLICATION">
3    <aura:attribute name="message" type="String"/>
4</aura:event>

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

aeNotifier.cmp ノーティファイアコンポーネントは aura:registerEvent を使用して、アプリケーションイベントを起動する可能性があることを宣言します。name 属性は必須ですが、アプリケーションイベントでは使用されません。name 属性が関係するのは、コンポーネントイベントのみです。

コンポーネントのボタンには、onclick ブラウザイベントがあり、クライアント側コントローラの fireApplicationEvent アクションに結び付けられています。このボタンをクリックすると、アクションが呼び出されます。

1<!--c:aeNotifier-->
2<aura:component>
3    <aura:registerEvent name="appEvent" type="c:aeEvent"/>
4
5    <h1>Simple Application Event Sample</h1>
6    <p><lightning:button
7        label="Click here to fire an application event"
8        onclick="{!c.fireApplicationEvent}" />
9    </p>
10</aura:component>

クライアント側コントローラが、$A.get("e.c:aeEvent") をコールして、イベントのインスタンスを取得します。このコントローラがイベントの message 属性を設定して、イベントを起動します。

1/* aeNotifierController.js */
2{
3    fireApplicationEvent : function(cmp, event) {
4        // Get the application event by using the
5        // e.<namespace>.<event> syntax
6        var appEvent = $A.get("e.c:aeEvent");
7        appEvent.setParams({
8            "message" : "An application event fired me. " +
9            "It all happened so fast. Now, I'm everywhere!" });
10        appEvent.fire();
11    }
12}

ハンドラコンポーネント

aeHandler.cmp ハンドラコンポーネントは、<aura:handler> タグを使用して、アプリケーションイベントを処理することを登録します。

<aura:handler> で name 属性を設定すると、アプリケーションイベントのハンドラは機能しません。name 属性は、コンポーネントイベントを処理する場合にのみ使用します。

メモ

イベントが起動されると、ハンドラコンポーネントのクライアント側コントローラで handleApplicationEvent アクションが呼び出されます。

1<!--c:aeHandler-->
2<aura:component>
3    <aura:attribute name="messageFromEvent" type="String"/>
4    <aura:attribute name="numEvents" type="Integer" default="0"/>
5
6    <aura:handler event="c:aeEvent" action="{!c.handleApplicationEvent}"/>
7
8    <p>{!v.messageFromEvent}</p>
9    <p>Number of events: {!v.numEvents}</p>
10</aura:component>

コントローラがイベントで送信されたデータを取得し、そのデータを使用してハンドラコンポーネントの messageFromEvent 属性を更新します。

1/* aeHandlerController.js */
2{
3    handleApplicationEvent : function(cmp, event) {
4        var message = event.getParam("message");
5
6        // set the handler attributes based on event data
7        cmp.set("v.messageFromEvent", message);
8        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
9        cmp.set("v.numEvents", numEventsHandled);
10    }
11}

コンテナコンポーネント

aeContainer.cmp コンテナコンポーネントには、ノーティファイアコンポーネントとハンドラコンポーネントが含まれます。この点は、ハンドラにノーティファイアコンポーネントが含まれるコンポーネントイベントの例とは異なります。

1<!--c:aeContainer-->
2<aura:component>
3    <c:aeNotifier/>
4    <c:aeHandler/>
5</aura:component>

すべてをまとめる

このコードをテストする場合は、<c:aeContainer> をサンプル aeWrapper.app アプリケーションに追加して、アプリケーションに移動します。

https://<myDomain>.lightning.force.com/c/aeWrapper.app (<myDomain> はカスタム Salesforce ドメインの名前)

サーバ上のデータにアクセスする場合は、この例を拡張して、ハンドラのクライアント側コントローラからサーバ側コントローラをコールします。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)