In this blog, I am going to explain lightning component interfaces. Other OOP programming like Java, Apex etc lightning component has Object-oriented support to define the interface that defines a set of signatures. Salesforce has the lot of marker interface to implement for the different purpose like app builder and quick action and ext. Similar you can define your own interfaces. An interface starts with the <aura:interface> tag. It can only contain these tags:
<aura:attribute> tags to define the interface’s attributes.
<aura:registerEvent> tags to define the events that it may fire.
<aura: method> tags to define the events that it may fire.
You can’t use markup, renderers, controllers, or anything else in an interface.
Define an interface panelType.intf the developer console with below code
<aura:interface >
<aura:attribute name="instanceId" type="Integer" default="-1"/>
<aura:attribute name="alias" type="String" default="panel2"/>
<aura:attribute name="title" type="String" default="Default Title"/>
<aura:attribute name="visible" type="Boolean" default="false"/>
<aura:attribute name="active" type="Boolean" default="false"/>
<aura:registerEvent name="notify" type="c:notify"/>
<aura:registerEvent name="load" type="c:load"/>
<aura:method name="show" description="makes the panel visible">
<aura:attribute name="callback" type="Object"/>
</aura:method>
<aura:method name="hide" description="makes the panel invisible">
<aura:attribute name="callback" type="Object"/>
</aura:method>
</aura:interface>
when a component implements an interface all attributes, methods, and events will be available by the compiler in the background, so the attributes will be available at runtime – say no need to really ‘implement’ the contract from the interface by yourself.If you can see the above interface which contains the methods and attributes and events which are going to implement from the component with below code.
<aura:component implements="c:panelType" description="Panel2">
<aura:registerEvent name="load" type="c:load" description="Event fired when the image is being loaded."/>
<aura:handler name="load" action="{!c.load}"/>
<div class="{!(v.visible ? 'visible' : '') + (v.active ? ' active' : '')}">
<p>{!v.title}</p>
{!v.body}
</div>
<br/>
<div >
<a aura:id="hideLink" alt="Hide" onclick="{!c.hide}">Hide</a> |
<a aura:id="showLink" alt="Show" onclick="{!c.show}">Show</a>
</div>
<br/>
<div>
<p> Click this button to load through salesforce events</p>
<ui:button aura:id="hideBtn"
buttonTitle="Hide" class="button" label="Hide" press="{!c.hideAction}"/>
<ui:button aura:id="showBtn"
buttonTitle="Show" class="button" label="Show" press="{!c.showAction}"/>
</div>
</aura:component>
controller
({
init: function (cmp, event, helper) {
helper.init(cmp, event);
},
show: function (cmp, event, helper) {
var callback = event.getParam && event.getParam('arguments').callback;
helper.show(cmp, callback);
},
hide: function (cmp, event, helper) {
var callback = event.getParam && event.getParam('arguments').callback;
helper.hide(cmp, callback);
},
showAction : function(cmp,event,helper){
var compEvent = cmp.getEvent("load");
compEvent.setParams({"visible" : true });
compEvent.fire()
},
hideAction : function(cmp,event,helper){
var compEvent = cmp.getEvent("load");
compEvent.setParams({"visible" : false });
compEvent.fire()
},
load : function(cmp, event, helper) {
var vis = event.getParam("visible");
cmp.set("v.visible", vis);
}
})
helper
({
hide: function (cmp, callback) {
cmp.set('v.visible', false);
},
show: function (cmp, callback) {
cmp.set('v.visible', true);
},
})
.THIS.visible {
display: block;
position: relative;
background: tomato;
width: 100%;
height: 50% ;
}
.THIS .close {
position: absolute;
top: 0;
right: 4px;
}
Now the component is having two show and hide action the first show and hide actions are coming from the methods of the interface and components has inherited those methods by implementing the paneltype.intf interface and Second show and hide actions are firing from the events which are again coming from the interface and component is inherited those events by implementing the paneltype.intf interface.
Beyond Cloud 