ちょいメモ。
Lightning コンポーネント開発者ガイドのここを見る。
今回は開発者ガイドに従って、HelloWorld
というコンポーネントを作成する。
以下は Force.com Migration Tool を使ってローカルで開発する場合のファイル構成。
src ├── aura │ └── HelloWorld │ ├── HelloWorld.cmp │ ├── HelloWorld.design │ └── HelloWorld.svg └── package.xml
※ Lightning コンポーネントをデプロイしたい場合、package.xml
には
<?xml version="1.0" encoding="UTF-8"?> <Package xmlns="http://soap.sforce.com/2006/04/metadata"> <types> <members>*</members> <name>AuraDefinitionBundle</name> </types> <version>33.0</version> </Package>
というように AuraDefinitionBundle
を指定する。
手順
1. コンポーネントに implements="flexipage:availableForAllPageTypes"
を追加する
はじめに、HelloWorld.cmp
ファイル。
App Builder に表示したいコンポーネントに上記のインターフェースを実装する。
<aura:component implements="flexipage:availableForAllPageTypes"> <aura:attribute name="greeting" type="String" default="Hello" /> <aura:attribute name="subject" type="String" default="World" /> <div style="box"> <span class="greeting">{!v.greeting}</span>, {!v.subject}! </div> </aura:component>
2. デザインファイルを作成する
続いて、HelloWorld.design
ファイル。
App Builder から編集可能にしたいパラメータを <design:attribute>
タグで指定する。
<design:component> <design:attribute name="greeting" label="Greeting" datasource="Hello,Hola,Bienvenue,Shalom" /> <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" /> </design:component>
選択リストは Summer'15 から利用可能で、かつ type="picklist"
の指定は必要ない。
(開発者ガイドが間違っているので要注意) → 修正されてた。
3. (省略可能)SVG リソースを作成する
最後に、HelloWorld.svg
ファイル。
必須ではないが、カスタムコンポーネントを App Builder で表示した時のアイコンを作成することができる。
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" /> </svg>
これがどこに反映されるかというと、ここ。