Dojox/app: how to toggle between views correctly?

Question

I am building a web application using dojox/app, and my config.json file looks like this:

{
    "id": "app",
    "name": "app",
    "description": "Example dojox/app based Worklight app",
    "dependencies": [
        "commonapp/app",
        "commonapp/BaseViewController",
        "dojo/store/Memory",
        "dojox/app/utils/mvcModel",
        "dojox/mvc/EditStoreRefListController",
        "dojo/store/Observable",
        "dojox/mobile/Button"
    ],
    "controllers": [
    "dojox/app/controllers/Load",
    "dojox/app/controllers/Transition",
    "dojox/app/controllers/Layout",
    "dojox/app/controllers/HistoryHash"],

    "stores": {

    },
    "models": {

    },

    "defaultView": "MainTemplate",
    "defaultTransition": "slide",
    "views": {
        "MainTemplate": {
            "template": "commonapp/templates/MainTemplate.html",
            "controller": "commonapp/templates/MainTemplate.js",
            "nls": "commonapp/templates/nls/MainTemplate",
            "defaultView": "SampleView+HiddenMenu",
            "views": {
                "SampleView": {
                    "template": "commonapp/sample/SampleView.html",
                    "controller": "commonapp/sample/SampleView.js",
                    "nls": "commonapp/sample/nls/SampleView",
                    "constraint" : "center",
                },
                "HiddenMenu": {
                    "template": "commonapp/MenuItems/HiddenMenu.html",
                    "controller": "commonapp/MenuItems/HiddenMenu.js",
                    "nls": "commonapp/MenuItems/nls/HiddenMenu",
                    "constraint" : "bottom"
                },
                "ExpandedMenu": {
                    "template": "commonapp/MenuItems/ExpandedMenu.html",
                    "controller": "commonapp/MenuItems/ExpandedMenu.js",
                    "nls": "commonapp/MenuItems/nls/ExpandedMenu",
                    "constraint": "bottom"
                }
            }
        }
    }
}

The HiddenMenu and ExtendedMenu views only contain a button, that is used to toggle between each of these views. For example, HiddenMenu.html looks like:

<div class="mblView">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div style="text-align: right">
        <button data-dojo-type="dojox.mobile.Button" data-dojo-attach-point="dapMenuButton">Label</button>
</div>
</div>

and HiddenMenu.js controller has the following code on the init method:

on(this.view.dapMenuButton, "click", lang.hitch(this, function(e) {
    var transOpts = {
        target : "MainTemplate,ExpandedMenu",
        url : "#MainTemplate,ExpandedMenu" // this is optional if not set it will be created from target
    };
    this.view.app.transitionToView(e.target,transOpts,e);
}));

The other one has similar code. The app loads correctly, but I am having a strange behavior when toggling between these two views. Even though the toggle is happening correctly, the two views are not showing in the same space as expected, which would be at the bottom of the page. One of them is showing on above the other. My purpose here is that the second button ("Hide Label") occupies the space left by the first button ("Label"). Does any one know how to achieve this?

Thank you

Answer 1

I am not sure, because I have not setup an app exactly like this, but think the problem is that you are using nested views and multiple default children.

Is MainTemplate,SampleView still visible after the transition? You may want to try the transition with:

target : "MainTemplate,SampleView+MainTemplate,ExpandedMenu",

Would it make sense to have have the HiddenMenu and the ExpandedMenu under a single parent with "constraint": "bottom", without also having SampleView under the same parent view? That might help as well.

Let me know if you continue to have a problem, and we can try to figure out a way for me to help debug it.

Regards, Ed