Brian Kotek:
Inversion of Control

As I mentioned in my previous post on using DeftJS, I've also adopted CoffeeScript. I've pushed a CoffeeScript version of the Car Store sample application to GitHub if you'd like to look through the source code.

Since the application looks exactly the same, there's no point in uploading a second running version. The main difference is the fact that the code is written in CoffeeScript and then compiled to JavaScript.

[More]

Comments (0) | del.icio.us | Digg It! | Linking Blogs | 3240 Views

It's been quiet here on Ye Olde Blogg lately. I've spent the last few months trying out various HTML component libraries and JavaScript frameworks, and have finally selected what I think is the most promising combination: ExtJS with DeftJS.

Anyone reading this is probably familiar with ExtJS, so I won't bore you with details on it. Suffice to say that its UI library rivals what is available in Flex, and indeed is better in many ways. (Data grids and trees, anyone?)

The main thing that initially bothered me about ExtJS was its MVC implementation. In my opinion it has a several flaws, one being the service locator approach. Another is that controllers use selectors that are relative to the application container to reference views, which isn't very flexible.

So I was pleased to see John Yanarella's contribution to the Sencha blog unveiling DeftJS. This is an extension to ExtJS which adds an inversion of control container and an improved controller tier through the use of ViewControllers.

I decided to try creating a DeftJS version of the car store example application that Sencha outlines in the documentation. What follows is a quick overview of the results.

Configuring the IoC portion of DeftJS is straightforward. Here, I'm specifying the two classes I want to add to the IoC container:

Ext.onReady( function () {
    Deft.Injector.configure({
        carChartJson: 'carStore.store.CarChartJson',
        carDataJson: 'carStore.store.CarDataJson'
    });
});
		

Next, I inject these into my view, and provide the ViewController class that I want to manage the view. This allows DeftJS to create the associated ViewController at the same time the view is created, and to destroy it when the view is destroyed.

Ext.define( 'carStore.view.CarListings', {
    extend: 'Ext.panel.Panel',
    mixins: [ 'Deft.mixin.Controllable', 'Deft.mixin.Injectable' ],
    inject: [ 'carChartJson', 'carDataJson' ],
    controller: 'carStore.controller.MyViewController',
...
		

Finally, my simple ViewController looks like this:

Ext.define( 'carStore.controller.MyViewController', {
    extend: 'Deft.mvc.ViewController',
    mixins: [ 'Deft.mixin.Injectable' ],
    inject: [ 'carChartJson', 'carDataJson' ],

    control: {
        carGrid: {
            selectionchange: 'onCarGridSelectionChange'
        },
        carDetail: true,
        carChartPanel: true
    },

    config: {
        carChartJson: null,
        carDataJson: null
    },

    onCarGridSelectionChange: function( selectionModel, selections ) {
        var carDataModel = selections[0];
        this.getCarDetail().update( carDataModel.getData() );
        this.getCarChartJson().loadData( carDataModel.getData().quality );
    }

});
		

I'm specifying the ID values (carGrid, carDetail, and carChartPanel) of the view elements I want to obtain references to. If necessary, a component query selector can also be used here. Note that unlike a standard ExtJS controller, these are relative to the view being managed rather than relative to the root application container. However, just like an ExtJS controller I can attach event listeners to the view instances. In this case, I'm handling the grid's selectionchange event to update the detail and chart views for their selected car. Essentially, this is an implementation of the Passive View design pattern.

That about covers the more interesting bits of this application. Since it's based on a very simple example, the rest of the code is pretty standard ExtJS. I've uploaded a running version of the app, and have pushed the source to GitHub for anyone who wants a deeper look.

DeftJS seems like a great extension to ExtJS. Not only that, but looking at the source also re-kindled my interest in Jasmine and CoffeeScript. The Jasmine specs for DeftJS are quite illuminating from a learning perspective, and the whole DeftJS framework is actually authored in CoffeeScript before being compiled out to JavaScript. I'll take a deeper look at both of these in upcoming blog entries.

Comments (6) | del.icio.us | Digg It! | Linking Blogs | 6603 Views