#Introduction

In this lab, you'll use a component controller to hold the event handlers.

#Steps

??Define the event handler methods

Edit `MainContainerController.mjs` the add two instance methods: 
- `onTableSelect`
- `onMapMarkerClick` 

Each method takes a single `data` param and each method has 
one statement, which is the `console.log()` you already coded in the main container.

??You already knew this, but here's what the controller class looks like

<pre style="color:blue; padding: 8px; border: thin solid gray; font-size:80%;">
import ComponentController from '../../../node_modules/neo.mjs/src/controller/Component.mjs';

/**
* @class Earthquakes.view.MainContainerController
* @extends Neo.controller.Component
*/
class MainContainerController extends ComponentController {
    static config = {
        /**
        * @member {String} className='Earthquakes.view.MainContainerController'
        * @protected
        */
        className: 'Earthquakes.view.MainContainerController'
    }

    onMapSelect(data){
        console.log(data);
    }
    onTableSelect(data){
        console.log(data);
    }
}

Neo.setupClass(MainContainerController);

export default MainContainerController;
</pre>

??Have the table select event handler change the map selection

It would be nice for the map to reflect the table selection. We might
be able to do that using a binding, but since we're discussing controllers
and event handlers, we'll update the map's selection in the controller.

To do that, in `onTableSelect`, we need to 
- Get a reference to the map
- Assign the selected record to the map's `selection` property

Neo has a easy way to get a reference to some component in the view:
the `reference` config. 

To use that feature, first edit `MainContainer`, and add `reference: 'myMap` to the map config.
<pre style="color:lightgray; padding: 8px; border: thin solid gray; font-size:80%;">
{
    module: GoogleMapsComponent,
    <span style="color:blue;">reference: 'myMap',</span>
    flex: 1,
    center: {
        lat: 64.8014187,
        lng: -18.3096357
    },
    zoom: 6,
    bind: {
        markerStore: 'stores.earthquakes',
    },
    listeners: {
        select: 'onMapSelect'
    }
}
</pre>

Then edit `MainContainerController` and in the `onTableSelect` method add this statement.

    this.getReference('myMap').selection = data.record;

Save your changes, then click on a few table rows &mdash; you should see the corresponding
map marker become highlighted.

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/TableSyncsMap.png"></img>

??To reiterate: Neo.findFirst should not be used in your app logic

In the debugging labs you learned that `Neo.findFirst()` provides a handy debugging technique
for getting a component reference. *That should only be used for debugging, and should
never be used in your app logic.* 

If you need a reference, use `this.getReference()`.
