└── src
    ├── aura
        ├── VFWrapper
        │   ├── VFWrapper.css
        │   ├── VFWrapper.cmp-meta.xml
        │   ├── VFWrapper.cmp
        │   └── VFWrapperController.js
        └── GoogleMapWrapper
        │   ├── GoogleMapWrapper.css
        │   ├── GoogleMapWrapper.cmp-meta.xml
        │   ├── GoogleMapWrapperController.js
        │   └── GoogleMapWrapper.cmp
    ├── package.xml
    └── pages
        ├── GoogleMap.page-meta.xml
        ├── WrappedVF.page-meta.xml
        ├── GoogleMap.page
        └── WrappedVF.page


/src/aura/VFWrapper/VFWrapper.css:
--------------------------------------------------------------------------------
1 | .THIS {
2 |     margin-top: 12px;
3 | }


--------------------------------------------------------------------------------
/src/aura/GoogleMapWrapper/GoogleMapWrapper.css:
--------------------------------------------------------------------------------
1 | .THIS {
2 |     margin-top: 12px;
3 | }


--------------------------------------------------------------------------------
/src/aura/VFWrapper/VFWrapper.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/GoogleMapWrapper/GoogleMapWrapper.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/package.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 2 | <Package xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <types>
 4 |         <members>VFWrapper</members>
 5 |         <members>GoogleMapWrapper</members>
 6 |         <name>AuraDefinitionBundle</name>
 7 |     </types>
 8 |     <types>
 9 |         <members>WrappedVF</members>
10 |         <members>GoogleMap</members>
11 |         <name>ApexPage</name>
12 |     </types>
13 |     <version>37.0</version>
14 | </Package>
15 | 


--------------------------------------------------------------------------------
/src/pages/GoogleMap.page-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <apiVersion>38.0</apiVersion>
 4 |     <availableInTouch>false</availableInTouch>
 5 |     <confirmationTokenRequired>false</confirmationTokenRequired>
 6 |     <label>GoogleMap</label>
 7 |     <packageVersions>
 8 |         <majorNumber>1</majorNumber>
 9 |         <minorNumber>11</minorNumber>
10 |         <namespace>sf_chttr_apps</namespace>
11 |     </packageVersions>
12 | </ApexPage>
13 | 


--------------------------------------------------------------------------------
/src/pages/WrappedVF.page-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <apiVersion>38.0</apiVersion>
 4 |     <availableInTouch>false</availableInTouch>
 5 |     <confirmationTokenRequired>false</confirmationTokenRequired>
 6 |     <label>WrappedVF</label>
 7 |     <packageVersions>
 8 |         <majorNumber>1</majorNumber>
 9 |         <minorNumber>11</minorNumber>
10 |         <namespace>sf_chttr_apps</namespace>
11 |     </packageVersions>
12 | </ApexPage>
13 | 


--------------------------------------------------------------------------------
/src/aura/GoogleMapWrapper/GoogleMapWrapperController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |   	recordChangeHandler : function(component, event) {
 3 | 		var id = event.getParam("recordId");
 4 | 		component.set("v.recordId", id);
 5 | 		var service = component.find("service");
 6 | 		service.reloadRecord();
 7 | 	},
 8 |     
 9 |   	propertyChangeHandler : function(component, event) {
10 | 		var property = component.get("v.property");
11 |         var vfOrigin = "https://" + component.get("v.vfHost");
12 | 		var vfWindow = component.find("vfFrame").getElement().contentWindow;
13 | 		vfWindow.postMessage(property, vfOrigin);
14 | 	}
15 | })


--------------------------------------------------------------------------------
/src/aura/VFWrapper/VFWrapper.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component implements="flexipage:availableForAllPageTypes" access="global">
 2 | 
 3 |     <aura:attribute name="vfHost" type="String" default="cc200-dev-ed--c.na35.visual.force.com"/>
 4 |     <aura:attribute name="message" type="String" default=""/>
 5 |     <aura:attribute name="vfMessages" type="String" default=""/>
 6 |     
 7 |     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 8 | 
 9 |     <div>
10 |         <lightning:input type="text" label="Message:" value="{!v.message}"/>
11 |         <lightning:button label="Send to VF" onclick="{!c.sendToVF}"/>
12 |         <lightning:textArea label="Messages Received from VF:" value="{!v.vfMessages}"/>
13 |         <iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/WrappedVF'}" frameborder="0" width="100%" height="200"/>
14 |     </div>
15 |     
16 | </aura:component>


--------------------------------------------------------------------------------
/src/aura/VFWrapper/VFWrapperController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     doInit : function(component, event, helper) {
 3 |         var vfOrigin = "https://" + component.get("v.vfHost");
 4 | 		window.addEventListener("message", function(event) {
 5 | 			if (event.origin !== vfOrigin) {
 6 | 				// Not the expected origin: reject message
 7 | 				return;
 8 | 			}
 9 | 			// Only handle messages we are interested in
10 | 			if (event.data.name === "com.mycompany.chatmessage") {
11 | 				var vfMessages = component.get("v.vfMessages");
12 | 				vfMessages = vfMessages + event.data.payload + "\n";
13 | 				component.set("v.vfMessages", vfMessages);
14 | 			}
15 | 		}, false);
16 | 	},
17 | 
18 | 	sendToVF : function(component, event, helper) {
19 |         var vfOrigin = "https://" + component.get("v.vfHost");
20 | 		var vfWindow = component.find("vfFrame").getElement().contentWindow;
21 | 		var message = {
22 | 			name: "com.mycompany.chatmessage",
23 | 			payload: component.get("v.message")
24 | 		};
25 |         vfWindow.postMessage(message, vfOrigin);
26 | 	}
27 | })


--------------------------------------------------------------------------------
/src/aura/GoogleMapWrapper/GoogleMapWrapper.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
 2 |                 access="global">
 3 | 
 4 |     <aura:attribute name="recordId" type="Id" />
 5 |     <aura:attribute name="property" type="Property__c" />
 6 |     
 7 |     <!-- Change host with your own host for VF pages. In a real life app, you should obtain this value
 8 | 		 dynamically instead of hardcoding it. -->
 9 |     <aura:attribute name="vfHost" type="String" default="cc200-dev-ed--c.na35.visual.force.com"/>
10 |     
11 |     <force:recordPreview aura:id="service" recordId="{!v.recordId}" targetRecord="{!v.property}" 
12 |                          fields="['Id', 'Address__c', 'City__c', 'Location__Latitude__s', 'Location__Longitude__s']" />
13 |     
14 |     <aura:handler event="ltng:selectSObject" action="{!c.recordChangeHandler}"/>
15 |     <aura:handler name="change" value="{!v.property}" action="{!c.propertyChangeHandler}"/>
16 | 
17 |     <div>
18 |         <iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/GoogleMap'}" frameborder="0" width="100%" height="376"/>
19 |     </div>
20 |     
21 | </aura:component>


--------------------------------------------------------------------------------
/src/pages/GoogleMap.page:
--------------------------------------------------------------------------------
 1 | <apex:page >
 2 | <head>
 3 | <style>
 4 |   html { height: 100% }
 5 |   body { height: 100%; margin: 0; padding: 0 }
 6 |   #map { height: 100% }
 7 | </style>
 8 | </head>
 9 | <body>
10 | 	<div id="map"/>
11 |   	<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async="true" defer="true"></script>  
12 | 	<script>
13 | 		var map;
14 | 		var marker;
15 | 		var lexOrigin = "https://cc200-dev-ed.lightning.force.com";
16 | 
17 | 		function initMap() {
18 | 			map = new google.maps.Map(document.getElementById("map"), {
19 | 				center: new google.maps.LatLng(42.356020, -71.085651),
20 | 				zoom: 13
21 | 			});
22 | 		}
23 | 
24 | 		function setMarker(property) {
25 | 			var latLng = new google.maps.LatLng(property.Location__Latitude__s, property.Location__Longitude__s);
26 | 			map.panTo(latLng);
27 | 			if (marker) {
28 | 				marker.setPosition(latLng);
29 | 			} else {
30 | 				marker = new google.maps.Marker({position: latLng, map: map});
31 | 			}
32 | 		}
33 | 
34 | 		window.addEventListener("message", function(event) {
35 | 			if (event.origin !== lexOrigin) {
36 | 				return;
37 | 			}
38 | 			setMarker(event.data);
39 | 		}, false);
40 | 
41 | 	</script>
42 | 
43 | </body>
44 | </apex:page>


--------------------------------------------------------------------------------
/src/pages/WrappedVF.page:
--------------------------------------------------------------------------------
 1 | <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
 2 | <html>
 3 | <head>
 4 |   <apex:stylesheet value="{!URLFOR($Resource.SLDS212, 'assets/styles/salesforce-lightning-design-system.min.css')}" />
 5 | </head>
 6 | <body style="background-color: #F0F2F5">
 7 | 	<strong>This gray area is Visualforce page embedded in the Lightning Component with an iframe:</strong>
 8 | 
 9 | 	<div class="slds-form-element">
10 | 		<label class="slds-form-element__label" for="message">Message:</label>
11 | 		<div class="slds-form-element__control">
12 | 			<input id="message" class="slds-input" type="text" />
13 | 		</div>
14 | 	</div>
15 | 	<button class="slds-button slds-button--neutral slds-m-vertical--xx-small" onclick="sendToLC()">Send to LC</button>
16 | 	<div class="slds-form-element">
17 | 		<label class="slds-form-element__label" for="lcMessages">Messages Received from Lightning Component:</label>
18 | 		<div class="slds-form-element__control">
19 | 			<textarea class="slds-textarea" id="lcMessages"></textarea>
20 | 		</div>
21 | 	</div>
22 | 
23 |     <script>
24 | 
25 | 		var lexOrigin = "https://cc200-dev-ed.lightning.force.com";
26 | 
27 | 		var lcMessagesEl = document.getElementById("lcMessages");
28 | 
29 | 		window.addEventListener("message", function(event) {
30 | 			if (event.origin !== lexOrigin) {
31 | 				// Not the expected origin: reject message
32 | 				return;
33 | 			}
34 | 			// Only handle messages we are interested in            
35 | 			if (event.data.name === "com.mycompany.chatmessage") {
36 | 				var messages = lcMessagesEl.value;
37 | 				messages = messages + event.data.payload + "\n";
38 | 				lcMessages.value = messages;
39 | 			}
40 | 		}, false);
41 | 
42 | 		function sendToLC() {
43 | 			var payload = document.getElementById("message").value;
44 | 			var message = {
45 | 				name: "com.mycompany.chatmessage",
46 | 				payload: payload
47 | 			};
48 | 			parent.postMessage(message, lexOrigin);
49 | 		}
50 | 
51 |     </script>
52 |         
53 | </body>
54 | </html>    
55 | </apex:page>


--------------------------------------------------------------------------------