Lightning Application Events Demo

AppEventLifecycleComponentInner.cmp

<aura:component>
    <aura:attribute name="globalId" type="String"/>
    <aura:registerEvent name="appEvent" type="c:LightningSimpleEvent"></aura:registerEvent>
    <aura:handler event="c:LightningSimpleEvent" action="{!c.handleEvent}" phase="capture"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Component: {!v.globalId}
        </lightning:layoutItem>
    	<lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" onclick="{!c.sendEvent}" label="Send Event"></lightning:button>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

AppEventLifecycleComponentInner.css

.THIS {
    background-color: #999
}

AppEventLifecycleComponentInnerController.js

({
    doInit: function (component, event, helper) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = $A.get('e.c:LightningSimpleEvent');
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event received by inner controller: ' + component.getGlobalId());
    }
})

AppEventLifecycleComponentOuter.cmp

<aura:component>
    <aura:attribute name="globalId" type="String"/>
    <aura:registerEvent name="appEvent" type="c:LightningSimpleEvent"></aura:registerEvent>
    <aura:handler event="c:LightningSimpleEvent" action="{!c.handleEvent}" phase="capture"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Component: {!v.globalId}
        </lightning:layoutItem>
    	<lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" label="Send Event" onclick="{!c.sendEvent}"></lightning:button>
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
        	<c:AppEventLifecycleComponentInner></c:AppEventLifecycleComponentInner>
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
        	<c:AppEventLifecycleComponentInner></c:AppEventLifecycleComponentInner>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

AppEventLifecycleComponentOuter.css

.THIS {
    background-color: #bbb
}

AppEventLifecycleComponentOuterController.js

({
    doInit: function (component) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = $A.get('e.c:LightningSimpleEvent');
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event received by outer controller: ' + component.getGlobalId());
    }
})

AppEventLifecycleTest.app

<aura:application extends="force:slds">
    <aura:attribute name="globalId" type="String" />
    <aura:registerEvent name="appEvent" type="c:LightningSimpleEvent"></aura:registerEvent>
    <aura:handler event="c:LightningSimpleEvent" action="{!c.handleEvent}" phase="capture"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Application: {!v.globalId} 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" onclick="{!c.sendEvent}" label="Send Event"></lightning:button>
        </lightning:layoutItem>
    	<lightning:layoutItem padding="around-small" size="6">
            <c:AppEventLifecycleComponentOuter></c:AppEventLifecycleComponentOuter>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="6">
            <c:AppEventLifecycleComponentOuter></c:AppEventLifecycleComponentOuter>
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>

AppEventLifecycleTest.css

.THIS {
    background-color: #eee
}

AppEventLifecycleTestController.js

({
    doInit: function (component) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = $A.get('e.c:LightningSimpleEvent');
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event received by application: ' + component.getGlobalId());
    }
})

LightningSimpleEvent.evt

<aura:event type="APPLICATION" description="Event template">
 <aura:attribute name="message" type="String" />
</aura:event>