How to Lightning Components – Part 2です。今回はLightningの開発で使用するCSSとJavaSciprtについて紹介します。

LightningとCSS

Part 1で作成したLightningHelloWorldComponentを開いて下さい。右側にパネルが表示されています。これはWorlPanelと呼ばれるものでLightningに紐付くCSSやJavaScriptをクリック一つで作成できるパネルです。

STYLEと書かれている部分をクリックしてください。「LightningHelloWorldComponent.css」が作成されます。LightningのCSSは「.THIS」という指定の仕方がベースになります。これにより他のコンポーネントに影響しないCSSを作成することが可能になります。

実際にCSSをカスマイズしてみたいと思います。

LightningHelloWorldComponentの方は次のように変更してください。

これで次のように表示されます。

フォントサイズを大きくするクラスの部分はclass=”largeFont”というようにクラスを指定した要素にのみ適用されていることを確認できます。.THISの部分はh1タグやdivタグなどすべての要素に適用される仕組みとなっていました。.THISというのが少し特殊ですが、使い方に慣れてしまえば通常のCSSと同じようにカスタマイズしていけると思います。

Gist Link – Lightning Hello World

https://gist.github.com/tyoshikawa1106/9f53b106aa9bed891593

Bootstrap SF1で簡単カスタマイズ

Lightningアプリ開発の勉強するために、一からCSSを用意するのは少し大変です。そんな時はBoostrasp SF1が便利です。このBootstrap SF1を利用すればSalesforce1アプリのテーマを簡単に適用することができます。静的リソースにアップロードしておけばLightningアプリ開発でも使うことができます。

Bootstrap SF1をLightningアプリで使用する際の手順

Bootstrap SF1はトップページにあるDownloadボタンをクリックすることで必要なファイル一式をダウンロードできます。ダウンロードしたZipファイルを解凍すると次のファイルを確認できます。

bootstrap-sf1フォルダ内のファイルを選択しZipファイルに変換してください。

このZipファイルを静的リソースにアップロードすればLightningアプリの開発で使用できるようになります。

それからBootstrapSF1を利用する際にはjQueryが必要になります。こちらも静的リソースにアップロードしてください。

それでは実際にBootstrapSF1を利用したLightningアプリをつくってみます。BootstrapSF1の読み込みはLightning Application側で行う必要があります。次のように記載することで必要なファイルを読み込むことが可能です。

以下のコンポーネントを作成します。

LightningBootstrapSF1Header.cmp

LightningBootstrapSF1Cards.cmp

Lightning Componentで使用している「aura:attribute」タグは呼び出し元からパラメータを受け取るためのものです。name部分は変数名となります。これで受け取った値は「{!v.name}」というように記載することで使用することができます。

作成したコンポーネントは次のようにアプリケーションで呼び出します。

BootstrapSF1はLightning Applicationでのみ読み込むことができるので各コンポーネント専用としては使用できませんが、Lightningの勉強するときに便利だと思います。また、BootstrapSF1はLightning開発以外でも使用可能です。Visualforceはもちろん、Salesforce以外の開発でも利用できます。

Gist Link – Lightning BootstrapSF1 Sample
https://gist.github.com/tyoshikawa1106/601b2efde30b1d972b07

LightningとJavaScirpt

続いてJavaScriptについてです。Lightning開発ではJavaScirptをメインに開発します。静的リソースにアップロードしたJavaScriptファイルを読み込むのではなく、WorkPanelから作成することで自動でComponentに読み込まれるような仕組みとなっています。WorkPanelのCONTROLLERをクリックすることでcontroller.jsを作成できます。

作成したcontroller.jsはこのようになっています。myActionというのが関数名になります。

conntroller.jsの関数は『”{!c.myAction}”』 というように宣言することで、呼び出すことができます。ui:buttonをクリック時に実行したい場合は、次のように宣言してください。

ボタンをクリック時にInputTextに入力した値をOutputTextにセットする処理を試してみます。

『component.find(“ui-inputText”);』という指定の仕方でInputTextの情報を取得するとこができます。find内で指定するのはaura:Idに指定した値になります。取得したInputTextの情報をセットした変数に対して、『get(“v.value”)』と指定することでInputTextの値を取得できます。

値の取得は『get』を使用しますが、値のセットは『set』を使って行うことができます。『outputTextField.set(“v.value”, inputText);』という感じになります。『set』を使用するには２つの引数が必要です。一つ目は”v.value”です。これは固定の宣言になります。２つ目がセットする値になります。ここは固定の文字列でも変数でも問題ありません。

ボタンクリック時にInputTextの値をOutputTextにセットします。。

LightningではJavaScriptの処理をキレイにまとめるためにHelper.jsが用意されています。細かい処理はHelper.jsに記載してController.jsはHelper.jsのメソッドを呼び出す流れとなります。Helper.jsを作成するにはWorkPanelのHELPERをクリックしてください。

先程の処理をHelper.jsを使用して作成すると次のようになります。

Gist Link – Lightning Input Form
https://gist.github.com/tyoshikawa1106/7167afd1a5e638ce10b0

Lightningアプリ開発『取引先の登録画面』

LightningでのCSSとJavaScriptの基本的な使い方について確認できましたので、実際に取引先を登録するアプリを作成してみたいと思います。取引先を登録するINSERTの処理ですが、Apexクラスで行います。次のように『@AuraEnabled』を宣言することでLightningからApexクラスにアクセスすることが可能になります。

Lightningで使用するApexクラスは次のように宣言します。

Lightning内で使用する変数はaura:attributeタグで宣言します。aura:attributeタグではdefaultを指定することで各項目に初期値をセットできます。また、Lightning内で使用できるsObjectの項目はdefaultで宣言した項目のみとなります。

aura:attributeで宣言したsObject型の変数は、ui:inputタグなどで『”{!v.newAccount.Name}”』と宣言することで使用することができます。

取引先を登録する機能のJavaScriptの側の処理はこんな感じになります。

LightningからApexクラスのメソッドを呼び出す場合は、『component.get(“c.saveAccount”)』という形で呼び出すことができます。その下の『action.setParams』ではApexクラスに渡す引数の値をセットしています。最後の『$A.enqueueAction』の部分でApexクラスの処理が実行されます。

これで取引先の登録画面を作成できます。保存処理後に新しく取引先が登録されることを確認できると思います。

YouTube: Lightning Account Register

Gist Link – Lightning Account Register
https://gist.github.com/tyoshikawa1106/0c8d4b3b504bc05b7012

以上でLightning開発で使用するCSSとJavaScriptの基本的な使い方まで確認できました。次回、Part 3ではLightning Eventを使ったアプリ開発について紹介します。