Lightning コンポーネント開発者ガイド
jLightning Realty アプリケーション
Lightning Realty アプリケーションのメッセージングフレームワークは、Lightning コンポーネントのコード、コンポーネントのハンドラ、および lightning:container で参照する静的リソースに依存します。Lightning コンテナコンポーネントは、Lightning コンポーネントの JavaScript コントローラーのメッセージ処理関数を参照します。メッセージ処理関数は参照元 JavaScript から送信されたメッセージを受け入れ、lightning-container NPM モジュールにより提供されるメソッドを使用します。
開発組織にこの例をインストールする手順については、「サンプルの Lightning Realty アプリケーションをインストールする」を参照してください。
まずは、Lightning コンポーネントを見てみましょう。Realty コンポーネントを定義するこのコードは単純ですが、これを使用して不動産アプリケーションの JavaScript で Salesforce と通信し、サンプルデータを読み込むことができます。
1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2
3 <aura:attribute access="global" name="mainTitle" type="String" required="true" default="My Properties"/>
4
5 <aura:attribute access="private" name="messageReceived" type="String" default=""/>
6 <aura:attribute access="private" name="error" type="String" default=""/>
7
8 <div>
9 <aura:if isTrue="{! !empty(v.messageReceived)}">
10 <lightning:textarea name="messageReceivedTextArea" value="{!v.messageReceived}" label=" "/>
11 </aura:if>
12
13 <aura:if isTrue="{! !empty(v.error)}">
14 <lightning:textarea name="errorTextArea" value="{!v.error}" label="Error: "/>
15 </aura:if>
16
17 <lightning:container aura:id="ReactApp"
18 src="{!$Resource.Realty + '/index.html?mainTitle=' + v.mainTitle}"
19 onmessage="{!c.handleMessage}"
20 onerror="{!c.handleError}"/>
21 </div>
22
23</aura:component>このコードは、「Lightning コンテナコンポーネントからのメッセージの送信」および「コンテナのエラーの処理」のコード例に似ています。
また、Lightning コンポーネントのコントローラおよび参照元 JavaScript にあるコードを使用して iframe アプリケーションで Salesforce と通信することもできます。参照元に含まれる PropertyHome.js 内で、Realty アプリケーションは LCC.sendMessage をコールします。このコードセグメントは、物件のリストを絞り込んだ後、選択された物件の住所、価格、市区町村、都道府県、郵便番号、および説明を含むメッセージを作成してコンテナに返します。
1saveHandler(property) {
2 let filteredProperty = propertyService.filterProperty(property);
3 propertyService.createItem(filteredProperty).then(() => {
4 propertyService.findAll(this.state.sort).then(properties => {
5 let filteredProperties = propertyService.filterFoundProperties(properties);
6 this.setState({addingProperty: false, properties:filteredProperties});
7 });
8 let message = {};
9 message.address = property.address;
10 message.price = property.price;
11 message.city = property.city;
12 message.state = property.state;
13 message.zip = property.zip;
14 message.description = property.description;
15 LCC.sendMessage({name: "PropertyCreated", value: message});
16 });
17},次に、JavaScript は名前-値のペアを使用して LCC.sendMessage をコールします。このコードは sendMessage メソッドを使用します。これは、lightning-container NPM モジュールにより提供されるメッセージング API の一部です。詳細は、「Lightning コンテナコンポーネントへのメッセージの送信」 を参照してください。
アクションの最後の部分がコンポーネントのコントローラで handleMessage() 関数内で実行されます。
1handleMessage: function(component, message, helper) {
2 var payload = message.getParams().payload;
3 var name = payload.name;
4 if (name === "PropertyCreated") {
5 var value = payload.value;
6 var messageToUser;
7 if (value.price > 1000000) {
8 messageToUser = "Big Real Estate Opportunity in " + value.city + ", " + value.state + " : $" + value.price;
9 }
10 else {
11 messageToUser = "Small Real Estate Opportunity in " + value.city + ", " + value.state + " : $" + value.price;
12 }
13 var log = component.get("v.log");
14 log.push(messageToUser);
15 component.set("v.log", log);
16 }
17 },この関数はメッセージを引数として取り、名前が "PropertyCreated"であることを確認します。これは、アプリケーションの JavaScript 内で LCC.sendMessage により設定された name と同じです。
この関数はメッセージペイロード (この場合は、物件を記述する JSON 配列) を取り、物件の価値を確認します。価値が 100 万ドルを超える場合、ユーザにメッセージを送信し、大規模な不動産商談が存在することを知らせます。それ以外の場合、ユーザにメッセージを返し、小規模の不動産商談が存在することを知らせます。