Questionnaire command and control

Nearly all of the pieces are in place. Note that I used a lot of binding expressions in the Wizard component so far, but I haven't shown either the top-level view model or how the wizard deals with user interactions. I always like to keep controllers slim and the view controller here is no exception:

// packages/wizard/src/view/WizardController.js
Ext.define('Wizard.view.wizard.WizardController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.wizard',
    listen: {
        component: {
            '#next': { click: 'onNextClick' },
            '#prev': { click: 'onPrevClick' },
            '#restart': { click: 'onRestartClick' },
            '#finish': { click: 'onFinishClick' },
            'wizard-progress button': { click: 'onStepClick' }
        }
    },

    onNextClick: function() {
        var current = this.getViewModel().get('currentPosition'),
        this.getViewModel().set('currentPosition', current + 1);
    },

    onPrevClick: function() {
        var current = this.getViewModel().get('currentPosition'),
        this.getViewModel().set('currentPosition', current - 1);
    },

    onRestartClick: function() {
        this.getViewModel().set('currentPosition', 0);
    },

    onFinishClick: function() {
        var q = this.getViewModel().get('questionnaire'),
        this.fireEvent('wizardcomplete', q);
    },

    onStepClick: function(btn) {
        this.getViewModel().set('currentPosition', btn.stepIndex);
    }
}); 

The view controller listens for clicks on the navigation buttons and any enabled buttons on the progress bar, and in every case apart from onFinishClick, it manipulates the value of currentStepIndex on the view model. It doesn't have to speak to any other components, just this one value. I really like the elegance of this solution. We'll see how currentStepIndex influences the application when we review the wizard's view model.

The onFinishClick method is called when the user clicks on the finish button and raises a controller-level event called wizardcomplete with the completed questionnaire as its only argument. The host application can handle this event and retrieve the completed question data and dispose of the wizard component as it sees fit.

This is another good example of decoupling this component from its host; the wizard needs to know nothing about the application it's embedded inside. It just fires the event and forgets about it.

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

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