コンポーネントイベントの例

コンポーネントイベント

ceEvent.evt コンポーネントイベントには属性が 1 つ設定されています。この場合は、起動時にこの属性を使用してイベントに一定のデータを渡します。

1<!--docsample:ceEvent-->
2<aura:event type="COMPONENT">
3    <aura:attribute name="message" type="String"/>
4</aura:event>

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

docsample:ceNotifier コンポーネントは aura:registerEvent を使用して、コンポーネントイベントを起動する可能性があることを宣言します。

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

1<!--docsample:ceNotifier-->
2<aura:component>
3    <aura:registerEvent name="cmpEvent" type="docsample:ceEvent"/>
4
5    <h1>Simple Component Event Sample</h1>
6    <p><ui:button
7        label="Click here to fire a component event"
8        press="{!c.fireComponentEvent}" />
9    </p>
10</aura:component>

クライアント側コントローラが、cmp.getEvent("cmpEvent") をコールして、イベントのインスタンスを取得します。この cmpEvent は、コンポーネントのマークアップにある <aura:registerEvent> タグの名前属性の値と一致します。このコントローラがイベントの message 属性を設定して、イベントを起動します。

1/* ceNotifierController.js */
2{
3    fireComponentEvent : function(cmp, event) {
4        // Get the component event by using the
5        // name value from aura:registerEvent
6        var cmpEvent = cmp.getEvent("cmpEvent");
7        cmpEvent.setParams({
8            "message" : "A component event fired me. " +
9            "It all happened so fast. Now, I'm here!" });
10        cmpEvent.fire();
11    }
12}

ハンドラコンポーネント

docsample:ceHandler ハンドラコンポーネントには、docsample:ceNotifier コンポーネントが含まれます。<aura:handler> タグでは、docsample:ceNotifier にある <aura:registerEvent> タグの name 属性である cmpEvent と同じ値が使用されます。これは、docsample:ceNotifier からバブルアップされたイベントを処理するための docsample:ceHandler を結び付けます。

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

1<!--docsample:ceHandler-->
2<aura:component>
3    <aura:attribute name="messageFromEvent" type="String"/>
4    <aura:attribute name="numEvents" type="Integer" default="0"/>
5
6    <!-- Note that name="cmpEvent" in aura:registerEvent
7     in ceNotifier.cmp -->
8    <aura:handler name="cmpEvent" event="docsample:ceEvent" action="{!c.handleComponentEvent}"/>
9
10    <!-- handler contains the notifier component -->
11    <docsample:ceNotifier />
12    
13    <p>{!v.messageFromEvent}</p>
14    <p>Number of events: {!v.numEvents}</p>
15
16</aura:component>

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

1/* ceHandlerController.js */
2{
3    handleComponentEvent : 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}

すべてをまとめる

docsample:ceHandler コンポーネントを docsample:ceHandlerApp アプリケーションに追加します。アプリケーションに移動し、ボタンをクリックしてコンポーネントイベントを起動します。

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

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