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

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

aeEvent.evt

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

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:event type="APPLICATION">
2    <aura:attribute name="message" type="String"/>
3</aura:event>

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

aeNotifier.cmp

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

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

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component>
2    <aura:registerEvent name="appEvent" type="docsample:aeEvent"/>
3
4    <h1>Simple Application Event Sample</h1>
5    <p><ui:button
6        label="Click here to fire an application event"
7        press="{!c.fireApplicationEvent}" />
8    </p>
9</aura:component>

aeNotifierController.js

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

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

ハンドラコンポーネント

aeHandler.cmp

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

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

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:component>
2    <aura:attribute name="messageFromEvent" type="String"/>
3    <aura:attribute name="numEvents" type="Integer" default="0"/>
4
5    <aura:handler event="docsample:aeEvent" action="{!c.handleApplicationEvent}"/>
6
7    <p>{!v.messageFromEvent}</p>
8    <p>Number of events: {!v.numEvents}</p>
9</aura:component>

aeHandlerController.js

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

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

コンテナコンポーネント

aeContainer.cmp

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

1swfobject.registerObject("clippy.codeblock-5", "9");<aura:component>
2    <docsample:aeNotifier/>
3    <docsample:aeHandler/>
4</aura:component>

すべてをまとめる

このコードをテストする場合は、リソースをサンプルアプリケーションに追加して、コンテナコンポーネントに移動します。たとえば、docsample アプリケーションがある場合は、次のアドレスに移動します。

http://<mySalesforceInstance>/<namespace>/docsample/aeContainer.cmp (mySalesforceInstance は、na1.salesforce.com など、組織をホストするインスタンスの名前です)。

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