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!
Top Related