Below are the steps for creating lightning custom events and handling methods. I have explained custom event creation and handler with a very simple example. But there very complex usages of custom events and handlers.
I will explain more complex example in another post.
1) Define Custom Event.
From Developer Console -> Open File Menu - > New -> Lightning Event
Mention the name of the event for example : AccountEvent
There are two kinds of events
1) Application 2) Component
Use Component event, when we want an ancestor component to catch and handle the event. An ancestor is a component “above” this one in the component hierarchy. If we wanted a “general broadcast” kind of event, where any component could receive it, we’d use an application event instead.
Below is the sample code in the AccountEvent.evt
<aura:event type="COMPONENT" description="Event template">
<aura:attribute name="AccountName" type="String" />
</aura:event>
In the above code, attribute is used for handling data from the event. This is called as event attribute.
Use event.getParam(<attributeName>) to get the details of the attribute. Attribute can be of any type including sObject.
2) Register Event
Register the event we have created in step1 in the component. Below is the markup code for registering the event.
<aura:registerEvent name="AccountRegister" type="c:AccountEvent" />
In the markup, please note the type. the value for type is name of the custom event given in step 1.
3) Event Handler
Mention event handler markup in the component. Below is the markup code for providing event handler
<aura:handler name="AccountRegister" event="c:AccountEvent" action="{!c.displayAccount}" />
In the above markup, Please note the name of the register event and name of the handler is same.
Event has been assigned custom event name
Action is assigned the actual handler in the js controller.
Below is the code snippet for sample AccountDisplayComponent.cmp
<aura:component>
<aura:attribute name="myAccountName" type="string" />
<aura:registerEvent name="AccountRegister" type="c:AccountEvent" />
<aura:handler name="AccountRegister" event="c:AccountEvent" action="{!c.displayAccount}" />
<ui:button press="{!c.accountDisplay}" label="Click Me!!!!" />
<p> "{!v.myAccountName}" </p>
</aura:component>
4) Fire Event
From the code snippet mentioned in Step 3. there are two handler methods 1) accountDisplay 2) displayAccount
accountDisplay handler method is called when button is clicked. This method is called through standard click event.
Custom event is actually fired from the standard click event as mentioned in the code snippet below.
component.getEvent("AccountRegister") will actually fetch the instance for the registered event in the component.
accevent.setParams({ "AccountName" : "Donald Trump"}) is used to set the parameters for the event.
accevent.fire(); is used to fire the event
Once the event is fired. the event handler markup mentioned in the component will get triggered and the action method associated to the event handler markup will get invoked. which is in our example displayAccount
Below is the AccountDisplayComponentController.js code snippet
({
accountDisplay : function(component, event, helper) {
var accevent = component.getEvent("AccountRegister");
accevent.setParams({
"AccountName" : "Donald Trump"
});
accevent.fire();
},
displayAccount : function(component, event, helper) {
var maccount = event.getParam("AccountName");
component.set("v.myAccountName",maccount);
}
})
Component Events
A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.
Component Event Propagation
The framework supports capture and bubble phases for the propagation of component events. These phases are similar to DOM handling patterns and provide an opportunity for interested components to interact with an event and potentially control the behavior for subsequent handlers.
The component that fires an event is known as the source component. The framework allows you to handle the event in different phases. These phases give you flexibility for how to best process the event for your application.
The phases are:
Capture
The event is captured and trickles down from the application root to the source component. The event can be handled by a component in the containment hierarchy that receives the captured event.
Event handlers are invoked in order from the application root down to the source component that fired the event.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase or the bubble phase.
Bubble
The component that fired the event can handle it. The event then bubbles up from the source component to the application root. The event can be handled by a component in the containment hierarchy that receives the bubbled event.
Event handlers are invoked in order from the source component that fired the event up to the application root.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase.
Here’s the sequence of component event propagation.
1. Event fired—A component event is fired.
2. Capture phase—The framework executes the capture phase from the application root to the source component until all components
are traversed. Any handling event can stop propagation by calling stopPropagation() on the event.
3. Bubble phase—The framework executes the bubble phase from the source component to the application root until all components are traversed or stopPropagation() is called.
A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.
Component Event Propagation
The framework supports capture and bubble phases for the propagation of component events. These phases are similar to DOM handling patterns and provide an opportunity for interested components to interact with an event and potentially control the behavior for subsequent handlers.
The component that fires an event is known as the source component. The framework allows you to handle the event in different phases. These phases give you flexibility for how to best process the event for your application.
The phases are:
Capture
The event is captured and trickles down from the application root to the source component. The event can be handled by a component in the containment hierarchy that receives the captured event.
Event handlers are invoked in order from the application root down to the source component that fired the event.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase or the bubble phase.
Bubble
The component that fired the event can handle it. The event then bubbles up from the source component to the application root. The event can be handled by a component in the containment hierarchy that receives the bubbled event.
Event handlers are invoked in order from the source component that fired the event up to the application root.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase.
Here’s the sequence of component event propagation.
1. Event fired—A component event is fired.
2. Capture phase—The framework executes the capture phase from the application root to the source component until all components
are traversed. Any handling event can stop propagation by calling stopPropagation() on the event.
3. Bubble phase—The framework executes the bubble phase from the source component to the application root until all components are traversed or stopPropagation() is called.
Application events have a separate default phase. There’s no separate default phase for component events. The default phase for component event is the bubble phase.
Handling Bubbled or Captured Component Events
Event propagation rules determine which components in the containment hierarchy can handle events by default in the bubble or capture phases. Learn about the rules and how to handle events in the bubble or capture phases.
The framework supports capture and bubble phases for the propagation of component events. These phases are similar to DOM handling patterns and provide an opportunity for interested components to interact with an event and potentially control the behavior for subsequent handlers. The capture phase executes before the bubble phase.
Default Event Propagation Rules
By default, every parent in the containment hierarchy can’t handle an event during the capture and bubble phases. Instead, the event propagates to every owner in the containment hierarchy.
A component’s owner is the component that is responsible for its creation. For declaratively created components, the owner is the outermost component containing the markup that references the component firing the event. For programmatically created components, the owner component is the component that invoked $A.createComponent to create it.
Bubble Event Propagation Example:
1) Create bubbleEvent
***bubbleEvent*****
<aura:event type="COMPONENT" description="Event template" />
2) Create bubbleEmitter Component
***bubbleEmitter****
<aura:component >
<aura:registerEvent name="bubbleEventReg" type="c.bubbleEvent" />
<ui:button label="Bubble Emitter" press="{!c.bubbleEmitter}" />
</aura:component>
****bubbleEmitterController.js****
({
bubbleEmitter : function(component, event, helper) {
var myEvt = component.getEvent("bubbleEventReg");
myEvt.fire();
}
})
3) Create bubbleChild component
****bubbleChild ******
<aura:component >
<aura:handler name="bubbleEventReg" event="c.bubbleEvent" action="{!c.bubbleChildHandler}" />
<c:bubbleEmitter />
</aura:component>
***bubbleChildController.js****
({
bubbleChildHandler : function(component, event, helper) {
console.log("From Bubble Child Handler");
}
})
4) Create bubbleParent component
****bubbleParent ******
<aura:component>
<aura:handler name="bubbleEventReg" event="c.bubbleEvent" action="{!c.bubbleParentHandler}" />
<c:bubbleChild />
</aura:component>
*****bubbleParentController.js*****
({
bubbleParentHandler : function(component, event, helper) {
console.log('From Bubble Parent Handler');
}
})
5) Create bubbleApp
****bubbleApp****
<aura:application >
<c:bubbleParent />
</aura:application>
Please note in the above example the event handler and event registration name attribute is name. It should be same to bind the event registration with event handler.
Please note capture event handler is fired first before bubble event handler. if event.stopPropagation is called from capture event handler then all other event handler including all bubble event handler are cancelled and not executed.
Application Events
Default Event Propagation Rules
By default, every parent in the containment hierarchy can’t handle an event during the capture and bubble phases. Instead, the event propagates to every owner in the containment hierarchy.
A component’s owner is the component that is responsible for its creation. For declaratively created components, the owner is the outermost component containing the markup that references the component firing the event. For programmatically created components, the owner component is the component that invoked $A.createComponent to create it.
Propagation to All Container Components\
The default behavior doesn’t allow an event to be handled by every parent in the containment hierarchy. Some components contain other components but aren’t the owner of those components. These components are known as container components. In the example, c:container is a container component because it’s not the owner for c:eventSource. By default, c:container can’t handle events fired by c:eventSource.
Propagation to All Container Components
The default behavior doesn’t allow an event to be handled by every parent in the containment hierarchy. Some components contain other components but aren’t the owner of those components. These components are known as container components. In the example,
c:container is a container component because it’s not the owner for c:eventSource. By default, c:container can’t handle events fired by c:eventSource.
A container component has a facet attribute whose type is Aura.Component[], such as the default body attribute. The container component includes those components in its definition using an expression, such as {!v.body}. The container component isn’t the owner of the components rendered with that expression.
To allow a container component to handle the event, add includeFacets="true" to the <aura:handler> tag of thecontainer component. For example, adding includeFacets="true" to the handler in the container component, c:container,enables it to handle the component event bubbled from c:eventSource.
Please note by default the container component will not be able to handle events in order provide that ability to container components use includeFacets="true" in the aura:handler.
<aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"
includeFacets="true" />
Handle Bubbled Event
To add a handler for the bubble phase, set phase="bubble".
<aura:handler event="c:appEvent" action="{!c.handleBubbledEvent}"
phase="bubble" />
The event attribute specifies the event being handled. The format is namespace:eventName.
The action attribute of <aura:handler> sets the client-side controller action to handle the event.
Handle Captured Event
To add a handler for the capture phase, set phase="capture".
<aura:handler event="c:appEvent" action="{!c.handleCapturedEvent}"
phase="capture" />
Pausing Event Propagation for Asynchronous Code Execution
Use event.pause() to pause event handling and propagation until event.resume() is called. This flow-control mechanism is useful for any decision that depends on the response from the execution of asynchronous code. For example, you might make a decision about event propagation based on the response from an asynchronous call to native mobile code.
You can call pause() or resume() in the capture or bubble phases.
Event propagation rules determine which components in the containment hierarchy can handle events by default in the bubble or capture phases. Learn about the rules and how to handle events in the bubble or capture phases.
The framework supports capture and bubble phases for the propagation of component events. These phases are similar to DOM handling patterns and provide an opportunity for interested components to interact with an event and potentially control the behavior for subsequent handlers. The capture phase executes before the bubble phase.
Default Event Propagation Rules
By default, every parent in the containment hierarchy can’t handle an event during the capture and bubble phases. Instead, the event propagates to every owner in the containment hierarchy.
A component’s owner is the component that is responsible for its creation. For declaratively created components, the owner is the outermost component containing the markup that references the component firing the event. For programmatically created components, the owner component is the component that invoked $A.createComponent to create it.
Bubble Event Propagation Example:
1) Create bubbleEvent
***bubbleEvent*****
<aura:event type="COMPONENT" description="Event template" />
2) Create bubbleEmitter Component
***bubbleEmitter****
<aura:component >
<aura:registerEvent name="bubbleEventReg" type="c.bubbleEvent" />
<ui:button label="Bubble Emitter" press="{!c.bubbleEmitter}" />
</aura:component>
****bubbleEmitterController.js****
({
bubbleEmitter : function(component, event, helper) {
var myEvt = component.getEvent("bubbleEventReg");
myEvt.fire();
}
})
3) Create bubbleChild component
****bubbleChild ******
<aura:component >
<aura:handler name="bubbleEventReg" event="c.bubbleEvent" action="{!c.bubbleChildHandler}" />
<c:bubbleEmitter />
</aura:component>
***bubbleChildController.js****
({
bubbleChildHandler : function(component, event, helper) {
console.log("From Bubble Child Handler");
}
})
4) Create bubbleParent component
****bubbleParent ******
<aura:component>
<aura:handler name="bubbleEventReg" event="c.bubbleEvent" action="{!c.bubbleParentHandler}" />
<c:bubbleChild />
</aura:component>
*****bubbleParentController.js*****
({
bubbleParentHandler : function(component, event, helper) {
console.log('From Bubble Parent Handler');
}
})
5) Create bubbleApp
****bubbleApp****
<aura:application >
<c:bubbleParent />
</aura:application>
Please note in the above example the event handler and event registration name attribute is name. It should be same to bind the event registration with event handler.
Please note capture event handler is fired first before bubble event handler. if event.stopPropagation is called from capture event handler then all other event handler including all bubble event handler are cancelled and not executed.
Application Events
Default Event Propagation Rules
By default, every parent in the containment hierarchy can’t handle an event during the capture and bubble phases. Instead, the event propagates to every owner in the containment hierarchy.
A component’s owner is the component that is responsible for its creation. For declaratively created components, the owner is the outermost component containing the markup that references the component firing the event. For programmatically created components, the owner component is the component that invoked $A.createComponent to create it.
Propagation to All Container Components\
The default behavior doesn’t allow an event to be handled by every parent in the containment hierarchy. Some components contain other components but aren’t the owner of those components. These components are known as container components. In the example, c:container is a container component because it’s not the owner for c:eventSource. By default, c:container can’t handle events fired by c:eventSource.
Propagation to All Container Components
The default behavior doesn’t allow an event to be handled by every parent in the containment hierarchy. Some components contain other components but aren’t the owner of those components. These components are known as container components. In the example,
c:container is a container component because it’s not the owner for c:eventSource. By default, c:container can’t handle events fired by c:eventSource.
A container component has a facet attribute whose type is Aura.Component[], such as the default body attribute. The container component includes those components in its definition using an expression, such as {!v.body}. The container component isn’t the owner of the components rendered with that expression.
To allow a container component to handle the event, add includeFacets="true" to the <aura:handler> tag of thecontainer component. For example, adding includeFacets="true" to the handler in the container component, c:container,enables it to handle the component event bubbled from c:eventSource.
Please note by default the container component will not be able to handle events in order provide that ability to container components use includeFacets="true" in the aura:handler.
<aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"
includeFacets="true" />
Handle Bubbled Event
To add a handler for the bubble phase, set phase="bubble".
<aura:handler event="c:appEvent" action="{!c.handleBubbledEvent}"
phase="bubble" />
The event attribute specifies the event being handled. The format is namespace:eventName.
The action attribute of <aura:handler> sets the client-side controller action to handle the event.
Handle Captured Event
To add a handler for the capture phase, set phase="capture".
<aura:handler event="c:appEvent" action="{!c.handleCapturedEvent}"
phase="capture" />
Pausing Event Propagation for Asynchronous Code Execution
Use event.pause() to pause event handling and propagation until event.resume() is called. This flow-control mechanism is useful for any decision that depends on the response from the execution of asynchronous code. For example, you might make a decision about event propagation based on the response from an asynchronous call to native mobile code.
You can call pause() or resume() in the capture or bubble phases.
No comments:
Post a Comment