Lightning コンポーネント開発者ガイド
jコンポーネントイベントの例
- ユーザがノーティファイアコンポーネント ceNotifier.cmp のボタンをクリックします。
- ceNotifier.cmp のクライアント側コントローラが、コンポーネントイベントにメッセージを設定し、イベントを起動します。
- ハンドラコンポーネント ceHandler.cmp にはノーティファイアコンポーネントが含まれ、起動されたイベントを処理します。
- ceHandler.cmp のクライアント側コントローラが、イベントで送信されたデータに基づいて ceHandler.cmp の属性を設定します。
この例のイベントおよびコンポーネントは、docsample 名前空間にあります。この名前空間は特別なものではありませんが、コードの数か所で参照されます。必要に応じて、別の名前空間を使用するようにコードを変更します。
コンポーネントイベント
ceEvent.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:ceEvent-->
18<aura:event type="COMPONENT">
19 <aura:attribute name="message" type="String"/>
20</aura:event>ノーティファイアコンポーネント
ceNotifier.cmp コンポーネントは aura:registerEvent を使用して、コンポーネントイベントを起動する可能性があることを宣言します。
コンポーネントのボタンには、press ブラウザイベントがあり、クライアント側コントローラの fireComponentEvent アクションに結び付けられています。ボタンをクリックすると、アクションが呼び出されます。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:ceNotifier-->
18<aura:component>
19 <aura:registerEvent name="cmpEvent" type="docsample:ceEvent"/>
20
21 <h1>Simple Component Event Sample</h1>
22 <p><ui:button
23 label="Click here to fire a component event"
24 press="{!c.fireComponentEvent}" />
25 </p>
26</aura:component>ceNotifierController.js
クライアント側コントローラが、cmp.getEvent("cmpEvent") をコールして、イベントのインスタンスを取得します。この cmpEvent は、コンポーネントのマークアップにある <aura:registerEvent> タグの名前属性の値と一致します。このコントローラがイベントの message 属性を設定して、イベントを起動します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 fireComponentEvent : function(cmp, event) {
19 // Get the component event by using the
20 // name value from aura:registerEvent
21 var cmpEvent = cmp.getEvent("cmpEvent");
22 cmpEvent.setParams({
23 "message" : "A component event fired me. " +
24 "It all happened so fast. Now, I'm here!" });
25 cmpEvent.fire();
26 }
27}ハンドラコンポーネント
ceHandler.cmp ハンドラコンポーネントには、<docsample:ceNotifier> コンポーネントが含まれ、<docsample:ceNotifier> にある <aura:registerEvent> タグから、name 属性の値 cmpEvent を使用してハンドラを登録します。
イベントが起動されると、ハンドラコンポーネントのクライアント側コントローラで handleComponentEvent アクションが呼び出されます。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:ceHandler-->
18<aura:component>
19 <aura:attribute name="messageFromEvent" type="String"/>
20 <aura:attribute name="numEvents" type="Integer" default="0"/>
21
22 <!-- handler contains the notifier component
23 Note that cmpEvent is the value of the name attribute in aura:registerEvent
24 in ceNotifier.cmp -->
25 <docsample:ceNotifier cmpEvent="{!c.handleComponentEvent}"/>
26
27 <p>{!v.messageFromEvent}</p>
28 <p>Number of events: {!v.numEvents}</p>
29
30</aura:component>ceHandlerController.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 handleComponentEvent : 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}すべてをまとめる
このコードをテストする場合は、リソースをサンプルアプリケーションに追加して、ハンドラコンポーネントに移動します。たとえば、docsample アプリケーションがある場合は、次のアドレスに移動します。
http://<mySalesforceInstance>/<namespace>/docsample/ceHandler.cmp (mySalesforceInstance は、na1.salesforce.com など、組織をホストするインスタンスの名前です)。
サーバ上のデータにアクセスする場合は、この例を拡張して、ハンドラのクライアント側コントローラからサーバ側コントローラをコールします。