An event domain example

Let's go back to our MVVM album example we created earlier. Our view had handler and listener configurations that tied view events to event handlers that we put in our view controller. However, event domains allow us to remove this tie and give all of the control to the view component. In view/album/Album.js in our previous example, we can remove the listener config on the grid and the handler on the button and then add the following code to view/album/AlbumController.js:

init: function() {
    this.listen({
        component: {
            'app-album grid': {
               'rowdblclick': 'onAlbumDblClick'
            },
            'app-album button': {
               'click': 'onShowSummary'
            }
        }
    });
},

This is slightly more verbose, so look at what exactly is happening here. We pass an object to this.listen, which contains a component property; this indicates we are configuring the Component Event Domain. Inside here, we use two selectors, one for the grid itself and one for the summary button, and inside these definitions we specify the event we are binding to and the event handlers.

This gives us the ability to remove anything clever from the view and put it all in the view controller. The view deals purely with presentation and the view controller deals with the logic.

Using custom events

We've shown how event domains can be used to separate our code concerns even further, but now, you'll see how they can help orchestrate interactions at a higher level. For this, let's take a look at a theoretical situation in which our application has grown to incorporate multiple views and view controllers:

// view/search/SearchController.js
Ext.define('EventDomain1.view.search.SearchController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.search',
    
    init: function() {
        this.listen({
            component: {
                'app-search button': {
                   'click': 'onSearchSubmit'
                }
            }
        });
    },

    onSearchSubmit: function() {
        var val = this.lookupReference('searchfield').getValue();
        this.fireEvent('search', val);
    }
});

We've created a new SearchController, which is the view controller for a new Search view. We use this.listen to listen for events on the component event domain and filter them using the selector 'app-search button' (a button within our new Search view). When the button is clicked on, we trigger an event handler method called onSearchSubmit.

We extract the search term that the user entered and then fire a second event, passing the search term as the event data. The event we fire is called 'search' and rather than being tied to a button or other UI component, it can be subscribed to by other parts of the application as a pure application event. Let's take a look at how it could be consumed:

// partial /view/album/AlbumController.js
init: function() {
    this.listen({
        controller: {
            '*': {
                'search': 'onSearch'
            }
        }
    });
}

This is a snippet of the AlbumController we've seen before with some extra goodness. With this.listen, we use the '*' selector to allow all controllers on the event domain. Then, we specify that we want to handle the search event with the onSearch handler method. This should all be feeling pretty familiar by now! The handler method could be as simple as the following code:

onSearch: function(searchTerm) {
    var list = this.lookupReference('list'),
    list.getViewModel().search('searchTerm'),
}

Assume that we created a search method on the view model. With just a small amount of code, we allowed two distinct parts of our application to communicate using information about our application rather than information about themselves. This is key to keeping the search part of this code unaware about the albums part and allows very clear-cut divisions between them. This provides easier testing through separation of concerns, better maintainability, and easier comprehension of how the application is structured.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset