Salesforce App Cloud Advent Calendar 2015

Lightning Component で ページ遷移する

～LightningRouter の提案～

Salesforce DUG [Tokyo] Meetup 2016 新年会 (2016/1/28)

TeamSpirit Inc. @a_kuratani

Akira Kuratani / 倉谷 彰

　　　@a_kuratani

　　　kuratani

　　　TeamSpirit Inc.

–Lightning コンポーネント開発者ガイド

“Lightning コンポーネントフレームワークは、モバイルデバイス用およびデスクトップデバイス用の動的な Web アプリケーションを開発する UI フレームワークです。これは、拡張性に優れた単一ページアプリケーションを構築する最新のフレームワークです。”

単一ページアプリケーション

Single Page Application

• 単一ページによるWebアプリケーション

• ページはDOMの操作により切り替える

• サーバとのやりとりはRESTやWebSocketなどを利用

きっと Angular/Reactとかで できることが重要

そういえば…

react-router Angular ngRoute

的なやつがない気がする

Spring’15 Releasenote

• aura:locationChange イベントが追加

• URLのクエリー文字列やハッシュが変更されたタイミングで発火する

LightningRouterの提案

• aura:locationChangeイベントを利用してハッシュタグによるページ切替を実現する

<aura:component> <div> Hello, Sample2! <a href="#Sample1">Sample1</a> </div></aura:component>

例えば、

<aura:component> <div> Hello, Sample1! <a href="#Sample2">Sample2</a> </div></aura:component>

src/aura/Sample1Cmp/Sample1Cmp.cmp

src/aura/Sample2Cmp/Sample2Cmp.cmp

<aura:application> <c:LightningRouter init="Sample1" route='{ "Sample1" : "Sample1Cmp", "Sample2" : "Sample2Cmp" }' /></aura:application>

JSONでルーティングを定義

src/aura/LightningRouterApp/LightningRouterApp.app

例えば、

LightningRouterコンポーネント

<aura:component> <aura:handler event="aura:locationChange" action="{!c.render}" /> <aura:handler event="init" action="{!c.render}" /> <aura:attribute name="init" type="String" access="global" /> <aura:attribute name="route" type="String" access="global" />

{!v.body}</aura:component>

src/aura/LightningRouter/LightningRouter.cmp

({ render : function (component, event, helper) { var token = event.getParam("token"); var querystring = event.getParam("querystring");

var route = JSON.parse(component.get("v.route")); if($A.util.isUndefined(token)) { token = component.get("v.init"); } var cmpName = route[token];

$A.createComponent( "c:" + cmpName, { "aura:Id": cmpName, }, function(newCmp){ if (component.isValid()) { var body = component.get("v.body"); body.pop(); body.push(newCmp); component.set("v.body", body); } } ); }})

src/aura/LightningRouter/LightningRouter.js

eventのパラメータを取得

var token = event.getParam("token"); var querystring = event.getParam("querystring");

token:URL のハッシュ部分 querystring:ハッシュのクエリ文字列部分

コンポーネントを入れ替える

$A.createComponent( "c:" + cmpName, { "aura:Id": cmpName, }, function(newCmp){ if (component.isValid()) { var body = component.get("v.body"); body.pop(); body.push(newCmp); component.set("v.body", body); } } );

コンポーネントを生成して、{!v.body}のコンポーネントを追加・削除

Demo

まとめ

• aura:locationChangeイベントを利用してコンポーネントによるページ切替の手法を提案

• リソース

• Salesforce App Cloud Advent Calendar 2015 9日目Lightning Componet でページ遷移する～LightningRouter の提案～http://qiita.com/a_kuratani/items/75947a62b98f38af86f7

宣伝

• Slackチーム

• TOKYO Salesforce DG tokyosalesforcedg.slack.com

• 方向性は定まっていません！

• 参加はこちらからslackin-tokyosalesforcedg.herokuapp.com

Enjoy Lightning!