Lightning: Advanced Events Example

This example is built on the simpler component and application event examples. It uses one notifier component and one handler component that work with both component and application events.

	<!--c:compEvent-->
	<aura:event type="COMPONENT">
	<!-- pass context of where the event was fired to the handler. -->
	<aura:attribute name="context" type="String"/>
	</aura:event>
	<!--c:appEvent-->
	<aura:event type="APPLICATION">
	<!-- pass context of where the event was fired to the handler. -->
	<aura:attribute name="context" type="String"/>
	</aura:event>

view raw compEvent.evt hosted with ❤ by GitHub

	<!--c:eventsNotifier-->
	<aura:component>
	<aura:attribute name="parentName" type="String"/>
	<aura:registerEvent name="componentEventFired" type="c:compEvent"/>
	<aura:registerEvent name="appEvent" type="c:appEvent"/>
	<div>
	<h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
	<p>
	<lightning:button label="Click here to fire a component event" onclick="{!c.fireComponentEvent}" />
	</p>
	<p>
	<lightning:button label="Click here to fire an application event" onclick="{!c.fireApplicationEvent}" />
	</p>
	</div>
	</aura:component>
	/* eventsNotifierController.js */
	{
	fireComponentEvent : function(cmp, event) {
	var parentName = cmp.get("v.parentName");
	// Look up event by name, not by type
	var compEvents = cmp.getEvent("componentEventFired");
	compEvents.setParams({ "context" : parentName });
	compEvents.fire();
	},
	fireApplicationEvent : function(cmp, event) {
	var parentName = cmp.get("v.parentName");
	// note different syntax for getting application event
	var appEvent = $A.get("e.c:appEvent");
	appEvent.setParams({ "context" : parentName });
	appEvent.fire();
	}
	}
	/* eventsNotifier.css */
	.cEventsNotifier {
	display: block;
	margin: 10px;
	padding: 10px;
	border: 1px solid black;
	}

view raw eventsNotifier.cmp hosted with ❤ by GitHub

	<!--c:eventsHandler-->
	<aura:component>
	<aura:attribute name="name" type="String"/>
	<aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
	<aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
	<aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>
	<aura:handler event="c:appEvent" action="{!c.handleApplicationEventFired}"/>
	<aura:handler name="componentEventFired" event="c:compEvent" action="{!c.handleComponentEventFired}"/>
	<div>
	<h3>This is {!v.name}</h3>
	<p>{!v.mostRecentEvent}</p>
	<p># component events handled: {!v.numComponentEventsHandled}</p>
	<p># application events handled: {!v.numApplicationEventsHandled}</p>
	<c:eventsNotifier parentName="{#v.name}" />
	</div>
	</aura:component>
	/* eventsHandlerController.js */
	{
	handleComponentEventFired : function(cmp, event) {
	var context = event.getParam("context");
	cmp.set("v.mostRecentEvent",
	"Most recent event handled: COMPONENT event, from " + context);
	var numComponentEventsHandled =
	parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
	cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
	},
	handleApplicationEventFired : function(cmp, event) {
	var context = event.getParam("context");
	cmp.set("v.mostRecentEvent",
	"Most recent event handled: APPLICATION event, from " + context);
	var numApplicationEventsHandled =
	parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
	cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
	}
	}
	/* eventsHandler.css */
	.cEventsHandler {
	display: block;
	margin: 10px;
	padding: 10px;
	border: 1px solid black;
	}

view raw eventsHandler.cmp hosted with ❤ by GitHub

	<aura:application extends="force:slds">
	<c:eventsHandler name="eventsHandler1"/>
	<c:eventsHandler name="eventsHandler2"/>
	</aura:application>

view raw eventsContainer.app hosted with ❤ by GitHub

Reference: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_demo.htm

force:showToast and force:closeQuickAction events

	<!--quickAdd.cmp-->
	<aura:component implements="force:lightningQuickAction" >
	<lightning:input type="number" name="myNumber" aura:id="num1" label="Number 1"/>
	<lightning:input type="number" name="myNumber" aura:id="num2" label="Number 2"/>
	<br/>
	<lightning:button label="Add" onclick="{!c.clickAdd}"/>
	</aura:component>

view raw quickAdd.cmp hosted with ❤ by GitHub

	/*quickAddController.js*/
	({
	clickAdd: function(component, event, helper) {
	// Get the values from the form
	var n1 = component.find("num1").get("v.value");
	var n2 = component.find("num2").get("v.value");
	// Display the total in a "toast" status message
	var resultsToast = $A.get("e.force:showToast");
	resultsToast.setParams({
	"title": "Quick Add: " + n1 + " + " + n2,
	"message": "The total is: " + (n1 + n2) + "."
	});
	resultsToast.fire();
	// Close the action panel
	var dismissActionPanel = $A.get("e.force:closeQuickAction");
	dismissActionPanel.fire();
	}
	})

view raw quickAddController.js hosted with ❤ by GitHub

One more example: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_lex_s1_config_action_recordid.htm

Lightning Component Rendering LifeCycle

Rendering LifeCycle

1. The init event is fired by the component service that constructs the components to signal that initialization has completed.

2. For each component in the tree, the base implementation of render() or your custom renderer is called to start component rendering.

3. Once your components are rendered to the DOM, afterRender() is called to signal that rendering is completed for each of these component definitions.

4. To indicate that the client is done waiting for a response to the server request XHR, the aura:doneWaiting event is fired.

5. The framework fires a render event, enabling you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. Handling the render event is preferred to creating a custom renderer and overriding afterRender().

6. Finally, the aura:doneRendering event is fired at the end of the rendering lifecycle.

Salesforce doesn't recommend using the legacy aura:waiting, aura:doneWaiting, and aura:doneRendering application events except as a last resort. The aura:waiting and aura:doneWaiting application events are fired for every batched server request, even for requests from other components in your app.

References:
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-1.html
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html