Layout implementation for Dojo MVC

Question

I started the dojo project from scratch, trying to use good practice from the start. I am really new to dojo tools, so I look through a lot of documents and samples that leave me with a lot of interesting things, but not how to implement the architecture for future developers (or add-ons). I searched the Internet and found this dojo template project , which seems to be a good start to put it all together, but I wanted something more, I wanted to implement the MVC template (I have a lot of experience with JAVA and Ruby on rails dev) in my application and stumbled upon this very cool example . So, I created something like this, which seems like a pretty legitimate way to organize my project. Correct me if I am wrong .. or you have a better approach.

Now I am ready to start. I tried a couple of tutorials on the dojo toolkit website. Run wonderful when you have only one page. But right now I was wondering how to implement this tutorial layout in my own application. I want this kind of layout to be my main layout for my application (so I tried to use these code snippets in my index.html)

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"> <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'"> <div> <h4>Group 1 Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <h4>Group 2 Content</h4> </div> <div> <h4>Group 3 Content</h4> </div> </div> <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div> <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div> </div> 

but he does not get:

 require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/parser"]); 

So the result is basically a div and my text, but without a layout. What am I missing?

My solution: I would only create a div for my index (for example, “container”) and feed it from the loader (app / run.js) (which calls another script main), this main.js file uses the AMD concept (which I start get acquainted), and it handles the creation of any instance of my application. So, for example, I could create a specific view for my layout and specify it in this file ...

Answer 1

I am using a dojo template project for my applications, and this is my main.js :

 define([ 'dojo/has', 'require', 'dojo/_base/sniff' ], function (has, require) { var app = {}; if (has('host-browser') && isCompatible()) { require([ './EntryPoint', 'dojo/domReady!' ], function (EntryPoint) { app.entryPoint = new EntryPoint().placeAt(document.body); app.entryPoint.startup(); } else { window.location = "/admin/browser/"; } function isCompatible() { // browser compatibility check here } }); 

My EntryPoint module / class is a widget, i.e. EntryPoint.js as follows:

 define([ "dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/i18n!app/nls/main", "dojo/text!./ui/templates/EntryPoint.html", "dijit/layout/BorderContainer", "dijit/layout/StackContainer", "dijit/layout/ContentPane" ], function( declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, i18n, template ){ return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { templateString: template, i18n: i18n, postCreate: function() { //... } }); }); 

Finally, my EntryPoint.html :

 <div style="height:100%;"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'sidebar', gutters: false" data-dojo-attach-point="mainContainer" style="height:100%;" > <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'left', splitter: true, design: 'headline', gutters: false" data-dojo-attach-point="sidebarPane" class="sidebarPane" > <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'" > <div class="sidebarSection">${i18n.title.public_}</div> <div id="sidebar-posts" data-dojo-type="app.widget.SidebarItem" data-dojo-props="iconClass: 'sidebarIconPosts', value:'posts', name: 'sidebar'"> ${i18n.title.posts} </div> <div id="sidebar-pages" data-dojo-type="app.widget.SidebarItem" data-dojo-props="iconClass: 'sidebarIconPages', value:'pages', name: 'sidebar'"> ${i18n.title.pages} </div> [...] 

The advantage of using Widget as the main layout:

• html template works out of the box using dojo build system
• you can use data-dojo-attach-point and data-dojo-attach-event in the layout template
• you can use ${i18n.title.members} to string substitution in html