Question

Basically, it goes like this. I have a very structured dojo application using the dojo boilerplate project/template (from Github). I have almost completed all my different module to make my application what it is (it’s kind of a cms). So, it’s a single page application which render content dynamically on some area.

My EntryPoint.html looks like this:

<div style="height:100%;">
    <div
            data-dojo-type="dijit.layout.BorderContainer"
            data-dojo-attach-point = "appLayout"
            data-dojo-props="design: 'headline'"
            style="height:100%;">

        <div
                class="centerPanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'center'">

                <button data-dojo-attach-point ="testButton" type="button" disabled="disabled">Click Me!</button>
            <div id="placeholder"></div>
        </div>
        <div
                class="edgePanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'top'">Header content (top)
                <span class="test"></span>
            </div>
        <div
            id="leftCol" class="edgePanel"
            data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'left', splitter: true">

            <div id="administrationMenu" class="administrationMenu">
                <div class="administrationTitle"> Administration </div>
                <ul>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/user.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Users </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/email.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Emails </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/tools.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Settings </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/graph.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Logs </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/faq.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Help </a></li>
                </ul>
            </div>

            <div id="toolsMenu" class="toolsMenu">
                <div class="toolsTitle"> Managing tools </div>
                <ul>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/donwload.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Resources </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/play.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Playlists </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/clock.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Agenda </a></li>
                    <li><img border="0" src="file:///C:/Users/Dev 2/Desktop/mpact-dojo-boilerplate/src/app/resources/img/silver-gray/monitor.png" alt="Pulpit rock" width="24" height="24"/><a href="#"> Stations </a></li>
                </ul>
            </div>

        </div>
    </div>
</div>  

*I know, I know my image should be in the css, but I’m not really a designer and I don’t really have fun creating/tweaking interface.

My EntryPoint.js:

define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

    "./ui/layout/GridLayout",

    "dojo/text!./ui/templates/EntryPoint.html",

    "dijit/layout/BorderContainer",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane"
], function(
    declare,
    _Widget,
    _TemplatedMixin, 
    _WidgetsInTemplateMixin,

    GridLayout,
    template
){
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: template,

        constructor: function() {

        },

        postCreate: function() {
            //var gridLayout = new GridLayout({}, "placeholder");
            //gridLayout.placeAt("placeholder");
        }

    });
});

Allright, so I want to basically be able to click on my various list (administrationMenu and toolsMenu). So, that my content load/render within the centerPanel. Plus, I would like to have my click items in the url.

Use case scenario: When I load for the first time my application, it loads the home page. Then if I click my menu item (e.g settings), it loads my settings page. And the url would change to something like this: http://www.myapp.com/settings .

Thank you.

Possible solution: For each menu, use data-dojo-attach-point and specified a name. use dojo.query(“”).connect for each and create an instance from my custom code (e.g new SettingsPage ) and render it on my centerPanel…

Answer 1

I have a similar setup, one ‘list’, loading various widgets into a contentpane. The code which is linked at the bottom is a bit complex as it has functionality for a loading spinner, checking isdirty on unload and does a lot of requiring / garbage collecting..

The simplest scenario would be to have a dijit.Tree listing your entries, for instance with a json structure like this:

adminJson = { identifier:'url', items: [
     { url: 'admin/user', label: 'user' },
     { url: 'admin/email', label: 'email' }
];

In your Tree, ‘link’ this with a specific contentpane – for instance centerPanel.

tree.on("click", function (item) { // refer to paneRequested
   dijit.byId('centerPanel').set("href", this.model.store.getValue(item, 'url'));
});

With a tree as opposed to <li> items you would get options such as creating sprite-sheet with all your icons and then setting the correct icon with an iconClass, example:

<style>
.administrationListTree .dijitTreeNode .iconNode {
  background: url(.....app/resources/img/silver-gray/adminsprites.png) top left no-repeat transparent;
}
.administrationListTree .dijitTreeRow .iconNode.user { background-position: 0 0; }
.administrationListTree .dijitTreeRow .iconNode.email { background-position: -20px 0; }
</style>
<script>
new dijit.Tree({
   getIconClass: function(item, opened) {
      return item.label;
   }
});
</script>

Have a look at https://github.com/mschr/oocms/blob/master/admin/include/application.js for a few extra tricks, just skip over the dtopic.publish(“notify/progress/?”) and module = [?] parts.
I have a feeling though, that since youre carrying ‘administrationMenu’ name, the action prior to unloadPane would be of interest. Each switch will either 1) call AbstractController.isDirty or 2) implement a custom check – and then only unload if user allows or no changes are pending.