lightning component × lightning design system
Post on 09-Apr-2017
1.137 Views
Preview:
TRANSCRIPT
Lightning Component もくもく会 #5
Lightning Component × SLDS
Taiki Yoshikawa
- Profile -
Taiki Yoshikawahttp://tyoshikawa1106.hatenablog.com/
@tyoshikawa1106
+TaikiYoshikawa
tyoshikawa1106
tyoshikawa1106
• Lightning ComponentとLightning Design Systemの話 • Lightning Experienceの話
- Agenda -
※タイトルのSLDSとはSalesforce Lightning Design Systemの略です
Winter’16でLightning ComponentがGAになりました!
新しいUIのLightning Experienceもリリースされました
SalesforceのCSS Framework - Lightning Design Systemも登場しています。
https://www.lightningdesignsystem.com/#role=regular&status=all
今日はこの3つでどんなアプリが開発できるかのデモと 開発時に気をつけるポイントを紹介します。
DEMO!!
Lightning ComponentとSLDSをつかって こんな感じのアプリが作成できました!
それでは開発で気をつけるポイントについて 紹介したいと思います。
Lightning ComponentとSVG
Lightning ComponentとSVG
Lightning ComponentではSVGのuseタグをそのまま利用できません。
Lightning ComponentとSVG
CDATAで囲ってRenderer.jsとHelper.jsでreplaceが必要です。
Lightning ComponentとSVG
同じaura:idを指定して一括置換できます。
Controller.jsとApexの命名規則
Controller.jsとApexの命名規則
開発中に謎のエラーに遭遇しました。
Controller.jsとApexの命名規則
原因はController.jsとApexの名前の付け方だと思われます。 どちらも[c.doSaveNewEvent]で呼び出すから?
this.superAfterRender();
this.superAfterRender();
Modal側で編集/保存した結果が呼び出し元に反映されませんでした。 Renderer.jsの処理に『this.superAfterRender()』を宣言したら解決。
aura:iterationとaura:if
aura:iterationとaura:if
IDが無くなったら非表示。 問題なさそう ?
aura:iterationとaura:if
・・ところが関係ないレコードまで非表示になるケースがありました。 詳しい原因は不明。実装方法で間違いがあるだけかも。
リストから非表示にするときは、きちんと除外処理を実装するか クエリで取得し直すのが良さそう。
Salesforce1 MobileとSLDS
Salesforce1 MobileとSLDS
Lightning Design SystemのModalコンポーネントがS1モバイルアプリで 少し表示がおかしかったです。
ページ高さの判定方法がS1モバイルの場合は他と違うのかも。 Modalコンポーネント以外は大丈夫そうです。
Lightning Experienceとhref=“#”
最後にLightning Experience開発での注意点を 1つ紹介します。
Lightning Experienceとhref=“#”
aタグにhref=“#”を宣言するとLightning Experienceの場合は、 トップページに戻る仕組みみたいです。(※Winter’16で確認)
以上、Lightning開発で押さえておきたいポイントでした
Thank you
top related