Lightning コンポーネント開発者ガイド
jVisualforce ページでの Lightning コンポーネントの使用
Visualforce 用の Lightning コンポーネントは、Lightning Out (Lightning コンポーネントをほぼすべての Web ページに埋め込むことができる強力かつ柔軟な機能) に基づいています。Visualforce と共に使用すると、いくつのかの細かな要素が簡略化されます。たとえば、認証を処理したり、接続アプリケーションを設定したりする必要がなくなります。
その他の点では、Visualforce 用の Lightning コンポーネントは Lightning Out と同じように使用できます。詳細は、このガイドの「Lightning Out」セクションを参照してください。
- <apex:includeLightning /> コンポーネントを Visualforce ページに追加する。
- コンポーネントの連動関係を宣言する Lightning アプリケーションを $Lightning.use() を使用して参照する。
- $Lightning.createComponent() を使用してページ上にコンポーネントを作成する関数を記述する。
<apex:includeLightning> の追加
ページの先頭に <apex:includeLightning /> を追加します。このコンポーネントは Visualforce 用の Lightning コンポーネントで使用される JavaScript ファイルを読み込みます。
Lightning アプリケーションの参照
1<aura:application access="GLOBAL" extends="ltng:outApp">
2 <aura:dependency resource="ui:button"/>
3</aura:application>1$Lightning.use("theNamespace:lcvfTest", function() {});ページでのコンポーネントの作成
最後に、$Lightning.createComponent(String type, Object attributes, String locator, function callback) を使用して、ページ上にコンポーネントを作成します。この関数は $A.createComponent() に似ていますが、コンポーネントの挿入先となる DOM 要素を指定する追加の domLocator パラメータが含まれています。
1<apex:page>
2 <apex:includeLightning />
3
4 <div id="lightning" />
5
6 <script>
7 $Lightning.use("c:lcvfTest", function() {
8 $Lightning.createComponent("ui:button",
9 { label : "Press Me!" },
10 "lightning",
11 function(cmp) {
12 // do some stuff
13 });
14 });
15 </script>
16</apex:page>このコードでは、「lightning」という ID を持つ DOM 要素が作成され、$Lightning.createComponent() メソッドで参照されます。このメソッドでは、「Press Me!」と表示される ui:button が作成され、コールバック関数が実行されます。