How to do it...

  1. We are in the developer console, where we develop Lightning Components. Now, we are developing a Lightning application. Go to File | New | Lightning Application:

  1. We want to use it as a Lightning Out Dependence App, so click on the Submit button:

  1. Once you select it, this is extending ltng:outApp. Here, under dependency resource, put the resource you want to use as the namespace; we will use our default namespace, which is c:myFirstLightningComponent:
<aura: application extends="ltng:outApp">
<aura:dependency resource="c:myFirstLightningComponent"/>
</aura:application>
Please note, this namespace is case sensitive.
  1. Now, save it. So far, we have developed a Lightning dependency app. Let's look at the Visualforce page logic. Let's go to the Setup icon, Visualforce Pages, and try to create a new one:

  1. If we want to use it in Lightning Experience, we will select this option, and then add the logic:
<apex:page>
<apex:includeLightning/>
<div id="locatorOut"/>
<script>
$Lightning.use(
"c:demoDependencyApp", function(){
$Lightning.createComponent(
"c.myFirstLightningcomponent",
{},
"locatorOut",
function(){}
);
}
);
</script>
</apex.page>
  1. So, use Enter Name:

  1. The default attribute value is Enter Name; now, you can also provide the value here in the attributes, with Enter Contact Name, and save once again:
<apex:page>
<apex:includeLightning/>
<div id="locatorOut"/>
<script>
$Lightning.use(
"c:demoDependencyApp", function(){
$Lightning.createComponent(
"c.myFirstLightningcomponent",
{"enterName":"Enter contact Name"},
"locatorOut",
function(){}
);
}
);
</script>
</apex.page>
  1. Take a look at the preview and you will see that the Lightning styles are automatically taken here:

  1. You have developed this page in the Visualforce, but you've not developed any Visualforce logic or any Visualforce UI components. The Lightning Component has come through the Visualforce page.
  2. The LC4VF have the Lightning Components for Visualforce pages that are automatically given the Lightning styles. So, we have developed our DependencyApp, and then in the Visualforce page, we used the include:lightning Visualforce component, then a user function, such as $Lightning.use and $Lightning.createComponent().
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.106.233