Lightning コンポーネント開発者ガイド
jアプリケーションイベントの例
- ユーザがノーティファイアコンポーネント aeNotifier.cmp のボタンをクリックします。
- aeNotifier.cmp のクライアント側コントローラが、コンポーネントイベントにメッセージを設定し、イベントを起動します。
- ハンドラコンポーネント aeHandler.cmp が、起動されたイベントを処理します。
- aeHandler.cmp のクライアント側コントローラが、イベントで送信されたデータに基づいて aeHandler.cmp の属性を設定します。
この例のイベントおよびコンポーネントは、docsample 名前空間にあります。この名前空間は特別なものではありませんが、コードの数か所で参照されます。必要に応じて、別の名前空間を使用するようにコードを変更します。
アプリケーションイベント
aeEvent.evt アプリケーションイベントには属性が 1 つ設定されています。この場合は、起動時にこの属性を使用してイベントに一定のデータを渡します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:aeEvent-->
18<aura:event type="APPLICATION">
19 <aura:attribute name="message" type="String"/>
20</aura:event>ノーティファイアコンポーネント
aeNotifier.cmp ノーティファイアコンポーネントは aura:registerEvent を使用して、アプリケーションイベントを起動する可能性があることを宣言します。name 属性は必須ですが、アプリケーションイベントでは使用されません。name 属性が関係するのは、コンポーネントイベントのみです。
コンポーネントのボタンには、press ブラウザイベントがあり、クライアント側コントローラの fireApplicationEvent アクションに結び付けられています。このボタンをクリックすると、アクションが呼び出されます。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:aeNotifier-->
18<aura:component>
19 <aura:registerEvent name="appEvent" type="docsample:aeEvent"/>
20
21 <h1>Simple Application Event Sample</h1>
22 <p><ui:button
23 label="Click here to fire an application event"
24 press="{!c.fireApplicationEvent}" />
25 </p>
26</aura:component>aeNotifierController.js
クライアント側コントローラが、$A.get("e.docsample:aeEvent") をコールして、イベントのインスタンスを取得します。このコントローラがイベントの message 属性を設定して、イベントを起動します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 fireApplicationEvent : function(cmp, event) {
19 // Get the application event by using the
20 // e.<namespace>.<event> syntax
21 var appEvent = $A.get("e.docsample:aeEvent");
22 appEvent.setParams({
23 "message" : "An application event fired me. " +
24 "It all happened so fast. Now, I'm everywhere!" });
25 appEvent.fire();
26 }
27}ハンドラコンポーネント
aeHandler.cmp ハンドラコンポーネントは、<aura:handler> タグを使用して、アプリケーションイベントを処理することを登録します。
イベントが起動されると、ハンドラコンポーネントのクライアント側コントローラで handleApplicationEvent アクションが呼び出されます。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:aeHandler-->
18<aura:component>
19 <aura:attribute name="messageFromEvent" type="String"/>
20 <aura:attribute name="numEvents" type="Integer" default="0"/>
21
22 <aura:handler event="docsample:aeEvent" action="{!c.handleApplicationEvent}"/>
23
24 <p>{!v.messageFromEvent}</p>
25 <p>Number of events: {!v.numEvents}</p>
26</aura:component>aeHandlerController.js
コントローラがイベントで送信されたデータを取得し、そのデータを使用してハンドラコンポーネントの messageFromEvent 属性を更新します。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 handleApplicationEvent : function(cmp, event) {
19 var message = event.getParam("message");
20
21 // set the handler attributes based on event data
22 cmp.set("v.messageFromEvent", message);
23 var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
24 cmp.set("v.numEvents", numEventsHandled);
25 }
26}コンテナコンポーネント
aeContainer.cmp コンテナコンポーネントには、ノーティファイアコンポーネントとハンドラコンポーネントが含まれます。この点は、ハンドラにノーティファイアコンポーネントが含まれるコンポーネントイベントの例とは異なります。
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:aeContainer-->
18<aura:component>
19 <docsample:aeNotifier/>
20 <docsample:aeHandler/>
21</aura:component>すべてをまとめる
このコードをテストする場合は、リソースをサンプルアプリケーションに追加して、コンテナコンポーネントに移動します。たとえば、docsample アプリケーションがある場合は、次のアドレスに移動します。
http://<mySalesforceInstance>/<namespace>/docsample/aeContainer.cmp (mySalesforceInstance は、na1.salesforce.com など、組織をホストするインスタンスの名前です)。
サーバ上のデータにアクセスする場合は、この例を拡張して、ハンドラのクライアント側コントローラからサーバ側コントローラをコールします。