How To Write Reusable Controllers Code For Dojox.mobile Views

I'm writing an application based on dojox.mobile framework. I'm using dojo 1.9. Some views of the application are really similar and have a lot of things in common so I would like

Solution 1:

Like @tik27 said, dojox/app might be your solution. However, we found that the documentation of the dojox/app section was lacking good examples so to lower the learning curve for other people, we made our own small framework (for dojox/mobile with IBM Worklight) which improves reusability.

We actually made a "base controller" module, extending dojox/mobile/View using a template like this:

define([
    "dojo/_base/declare",
    "dojox/mobile/View",
    "dijit/_TemplatedMixin"
], function(declare, View, TemplatedMixin) {
    returndeclare([View, TemplatedMixin], {
        templateString: "<header>My header</header> ${!content} <footer>footer</footer>", 
        content: null// Default content
    });
});

As you can see we have a standard template with a header and a footer, but we also use a placeholder called content. The general part of the template (in this case that header/footer) can you put here.

The view/controller modules extending this base controller look like this:

define([
    "dojo/_base/declare",
    "./ControllerMixin"
], function(declare, ControllerMixin) {
    returndeclare([ControllerMixin], {
        content: "This is the content"
    });
});

Because we enter the content property here, it will be placed at the position of the ${!content} we earlier defined.

If you need ot use widgets in your template you can also choose dijit/_WidgetsInTemplateMixin

Solution 2:

It turns out that the best solution for me is to use dojox/app, as suggested by @tik27.

I was trying to extend the controller module associated to the view (see AppControllers/View1.js in the config below) but that module is simply mixed to the View. If I want to get a classy handling of the Views I can leverage the type property (see again the config json excerpt below).

config.json:

{//..."views":{//..."View1":{"template":"AppTemplates/View1.html","controller":"AppControllers/View1.js""type":"my/SpecializedView.js"},//...}//...}

To do this I have to simply extend dojox/app/View in my my/GenericView which will contain custom properties and methods. Then I can write SpecializedViews extending my/GenericView:

my/GenericView.js

define([
    "dojo/_base/declare",
    "dojox/app/View"
], function(declare, View) {
    returndeclare("my/GenericView",[View], {
        customProp: "example", // Default content
        customMethod:function(){
            //do something
        }
    });
});

my/SpecializedView.js

define([
    "dojo/_base/declare",
    "my/GenericView"
], function(declare, GenericView) {
    returndeclare(GenericView, {
        init:function(){
            console.log(this.customProp);//will print "example"
        }
        customMethod:function(){
            this.inherited(arguments);//recall parent class' method//extend parent class' method
        }
    });
});

Anyway, the title of this question refers to dojox/mobile so you can find a fully dojox/mobile example il this jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/ by @Dimitri M