Reusing Sencha Code

Back to Wiki Home

One of the goals of the FlowMVC project was to maximize use of intellectual capital for projects that support both mobile and web. There are obvious limits to this maximization simply due to the form factors and screens of the different platforms. We think we've done well at reaching this goal. The only code that needs to be modified to support both platforms is within the Mediators and the Views. Controllers, Models, Services, and Stores are all re-usable.

Views are a place where there will be the most differences. Mobile devices support different user gestures than desktop. The smaller form factor of a mobile device means that screen management is different; the user doesn't always see the same objects on the screen in mobile that the desktop sees. The goal the developer can strive for here is to be consistent in naming of common elements. This will facilitate the greatest re-use in the Mediators where far less re-write needs to happen.

If you examine the LoginMediator in the CafeTownsend Project, you'll see that there is hardly any difference between the classes in:

sencha-cafe-townsend/app/mediator/extjs/LoginMediator.js

and

sencha-cafe-townsend/app/mediator/touch/LoginMediator.js

To show you just how minimal the difference is, let's look at them. First off is the control configuration section:

    // TOUCH
    control: {
        logInButton: {
            tap: "onLoginButtonTap"
        },
        usernameTextField:      true,
        passwordTextField:      true,
        signInFailedLabel:      true
    },

    // EXTJS
    control: {
        "logInButton": {
            click: "onLoginButtonClick"
        },
        usernameTextField:      true,
        passwordTextField:      true,
        signInFailedLabel:      true,
    },

Touch supports tap while ExtJS supports click. But, they can both be handled via the same named function although for clarity here, we name them appropriate to gesture type.

Throughout the code, we reference what is essentially a loader giving the user feedback about what's happening:

       // TOUCH
        view.setMasked({
            xtype: "loadmask",
            message: nineam.locale.LocaleManager.getProperty("login.signingIn")
        });

       //EXTJS
       view.setLoading(nineam.locale.LocaleManager.getProperty("login.signingIn"));

Control properties are not always the same across the two. For instance, here is the code to display a failure to sign in message. It's nearly identical.

    //TOUCH
    showSignInFailedMessage: function(message) {
        this.logger.debug("showSignInFailedMessage: " + message);

        var label = this.getSignInFailedLabel();
        label.setHtml(message);
        label.show();
    },

    //EXTJS
    showSignInFailedMessage: function(message) {
        this.logger.debug("showSignInFailedMessage: " + message);

        var label = this.getComponentById("signInFailedLabel", this.getView());
        label.setText(message);
        label.show();
    },

Other than these few minor examples, the code for the Mediators for both Touch and ExtJS are nearly identical!