| layout |
|---|
default |
#Events#
**Create and Handle a Component Event. Create and Handle an Application Event. force:something events **
At the highest level, you will deal with three kinds of events. System events, such as "init" which we covered earlier, component events and application events. Component events operate within a specific component context and application events operate across components.
The anatomy of an event is pretty simple. You need three basic ingredients:
- An event definition.
- Something that fires the event.
- Something that handles the event when fired.
The whole goal of events is to keep your application loosely coupled and event driven.
##Step 1: Create a Component Event##
Create the simplest possible event. In the developer console, click on File > New > Lightning Event. Replace the placeholder code with the following.
{% highlight html %} <aura:event type="COMPONENT" description="Simplest Possible Event" > <aura:attribute name="message" type="String" /> </aura:event> {% endhighlight %}
Next, create a component to interact with this event.
{% highlight html %}
<aura:component >
<aura:registerEvent name="simpleEvent" type="Reid002:SampleLightningEvent1" />
<aura:handler name="simpleEvent" action="{!c.handleSampleEvent}"/>
<aura:attribute name="setMeOnEventFiring" type="String" default="**nothing fired yet" />
Create an event and then handle it.
<ui:button label="Click me to fire the event" press="{!c.handleClick}"/>
Was the event fired? {!v.setMeOnEventFiring}
</aura:component> {% endhighlight %}Notice a few things about this event.
- The <aura:registerEvent > tag associates a name simpleEvent with a fully qualified event name Reid002:SampleLightningEvent1.
- The <aura:handler > associates the simple name with a Javascript function to handle it.
- The attribute setMeOnEventFiring will be updated when the event is fired.
Finally, add the controller code to fire the event as well as handle it.
{% highlight javascript %}
({
handleClick : function(component, event) {
console.log('Controller handle click');
var compEvent = component.getEvent("simpleEvent");
compEvent.setParams({ 'message': 'Clicked! ' +
(new Date().toGMTString()) });
compEvent.fire();
},
handleSampleEvent : function(component, event, helper) {
console.log('Controller handle sample event');
component.set("v.setMeOnEventFiring", "OK I Set It " +
event.getParam( 'message'));
}
})
{% endhighlight %}
Notice how the functions "handleClick" and "handleSampleEvent" are completely disconnected.
Go ahead and update your master component, preview your app and click the button. It should look something like this.
##Step 2: Create an Application Event##
Application events communicate across components.
Let's start by creating a new Lightning Event called "SampleApplicationEvent", and replacing the default definition with this:
{% highlight html %} <aura:event type="APPLICATION" description="Sample Application Event" > <aura:attribute name="message" type="String" /> </aura:event> {% endhighlight %}
Now create the component that fires the event. Note that there's nothing required around registering the event.
{% highlight html %} <aura:component >
Create an event for other components to handle.
<ui:button label="Click me to fire the event" press="{!c.handleClick}"/>
</aura:component> {% endhighlight %}In the Javascript controller, you'll see that we query $A ("Aura") to find the event. Once found we set the parameters and fire, just like before.
{% highlight javascript %}
({
handleClick : function(component, event) {
var appEvent = $A.get("e.Reid002:SampleApplicationEvent");
appEvent.setParams({ 'message': 'Clicked! ' + (new Date().toGMTString()) });
appEvent.fire();
}
})
{% endhighlight %}
Now let's create the handling component. We do need to specify that it's handling a specific event, so notice the handler tag with the fully qualified event name mapping the event to a Javascript method.
{% highlight html %} <aura:component > <aura:handler event="Reid002:SampleApplicationEvent" action="{!c.handleSampleEvent}"/> <aura:attribute name="setMeOnEventFiring" type="String" default="**nothing fired yet" />
Anything? {!v.setMeOnEventFiring}
</aura:component> {% endhighlight %}Finally let's add the Javascript to the controller element.
{% highlight javascript %}
({
handleSampleEvent : function(component, event, helper) {
component.set("v.setMeOnEventFiring",
"OK I handled it " + event.getParam( 'message'));
}
})
{% endhighlight %}
Add both the components you just created to your master component, and, when you preview the page and click the button, your screen should look something like this.
##force:something Namespaced Events##
The Lightning Component Developer Guide includes reference to a number of force: namespaced events (11 of them at this writing). These only work in the Salesforce1 app container, and as of Feb 23, 2015, don't work outside of it.
For example, the component:
{% highlight html %} <aura:component implements="force:appHostable"> <ui:button label="Test Me" press="{!c.executeTest}" /> </aura:component> {% endhighlight %}
with the controller:
{% highlight javascript %}
executeTest : function (component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": "001j000000HWkyg",
"slideDevName": "related"
});
navEvt.fire();
}
{% endhighlight %}
...works great when you include it on a Lightning Tab and place it in Salesforce1.
However, this app definition fails silently.
{% highlight html %} <aura:application >
<ReidFeb23:DemoComp /> </aura:application> {% endhighlight %}This isn't entirely surprising, but grokking it quickly depends on where you intuit the Magic Line to lie. In this case, the Magic Line divides where the event is handled from where it is not. Salesforce1 handles the event. My little demo app did not.
##Next: Notes##