tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightningアプリ開発『Lightning Event』の使い方

Lightningアプリ開発ではコンポーネント間でイベント処理を実行するためにLightning Eventが用意されています。これを利用することでそれぞれ独立したコンポーネントを関連付けることが可能になります。

f:id:tyoshikawa1106:20141125231751p:plain


動作確認用にサンプルアプリを用意しました。ラジオボタンと取引先一欄はそれぞれ別のコンポーネントとなっています。ラジオボタンの値を変更すると取引先一覧のリスト件数上限値が変更される仕組みです。

f:id:tyoshikawa1106:20141125222130p:plain


初めにLightning Eventのファイルを用意します。ここではコンポーネント間で値の受け渡しに使用する変数を宣言します。

f:id:tyoshikawa1106:20141125235251p:plain


ラジオボタンを表示しているコンポーネントから説明します。

f:id:tyoshikawa1106:20141125232524p:plain


イベント処理を開始するコンポーネントでは『aura:registerEvent』を宣言する必要があります。Typeで指定するのは最初に用意したLightning Eventのファイル名です。

<aura:registerEvent name="selectLimitSize" type="BarnSwallow:LightningEventDemoChangeListLimit" />

この宣言で『LightningEventDemoChangeListLimit』という名称のLightning Eventを呼び出すことができます。


ラジオボタン選択時のonChangeイベントで呼び出されるController.jsの処理は次のようになります。

f:id:tyoshikawa1106:20141125232920p:plain


『event.target.value』の処理では選択したラジオボタンの値を取得できます。

listLimit = event.target.value;


『$A.get( 'Event Name')』ではイベント情報を取得できます。一度変数にセットすることでパラメータに値をセットするなどが可能になります。

var evt = $A.get("e.BarnSwallow:LightningEventDemoChangeListLimit");


『setParams』でイベント処理のパラメータに値をセットできます。

evt.setParams({
    "listLimit": listLimit
});


『evt.fire();』を宣言することでイベント処理が実行されます。ラジオボタンのコンポーネント側の処理は以上となります。


続いて取引先一覧を表示するコンポーネントに移ります。

f:id:tyoshikawa1106:20141125233759p:plain


『event.fire()』の処理でイベントを実行すると取引先一覧を表示するコンポーネントで宣言した『aura:handler event="Event Name".. 』のaction処理が実行されます。actionではControlloer.jsの処理を呼び出すことができます。

<aura:handler event="BarnSwallow:LightningEventDemoChangeListLimit" action="{!c.handleGetAccounts}"/>


actionで実行される処理は次のようになります。

f:id:tyoshikawa1106:20141125233944p:plain


最初にラジオボタン変更時にセットしたパラメータの値を取得します。

var listLimit = event.getParam("listLimit");


続いて次の処理で実行されるApexクラスの情報を取得し引数で使用する値をセットします。

var action = component.get("c.getSelectAccounts");
action.setParams({
    "listLimit": listLimit
});


『setCallback』では処理結果をどのように扱うかを指定します。今回のサンプルでは画面に表示するリストにApexクラスで取得した取引先情報をセットしています。

action.setCallback(this, function(data) {
    component.set("v.accounts", data.getReturnValue());
});


『$A.enqueueAction』でaction処理が実行されます。これでラジオボタンコンポーネントで選択した条件をつかって取引先の検索処理が再度実行されます。

$A.enqueueAction(action);

f:id:tyoshikawa1106:20141126000242p:plain


以上がLightning Event処理のおおまかな流れとなります。今回使用したサンプルアプリのコードはGitHubにアップしました。jQueryやBootstrapSF1を静的リソースに用意して名前空間プレフィックスを変更すればDeveloper環境で動作すると思います。