There are indeed ways of doing so, but while Dijit strives to provide extensible modules that can serve as a basis for your own custom modules, templates are a tricky thing to deal with.

A brief review of some of the best practices for maintenance & longevity when building applications with Dojo:

• Use a separate namespace for your custom modules rather than dojo, dijit, or dojox – this makes it very clear which modules come from the Dojo distribution and which modules were created for your application or organization
• Never edit Dojo modules directly – Dojo provides dojo/_base/declare for inheritance and provides many modules that were designed to be extended or used as mixins

With a clear separation in your codebase between Dojo modules and custom modules created for your application you have a much greater chance of a simple & successful upgrade to a new release of Dojo.

No, Dijit does not provide pre-configured dialogs, like alert, confirm, or prompt.

Why? As simple as these may seem on the surface, each organization or application often needs something subtly different in terms of layout, appearance, behavior, events, and internationalization. Dojo and Dijit provide all the elements you need to make a variety of dialogs, including dijit/Dialog, dijit/form/Button, dojo/on, dojo/Deferred and dojo/i18n.

The time spent creating a dialog that suits your needs perfectly will be small compared to the overall time spent developing an application, and you will have a reusable module tailored to your specific needs that you can use throughout your application, or even across applications throughout your organization. Creating a custom dialog also ensures that teams of developers don’t have to struggle to get a generic confirmation dialog to respond and look like other dialogs in the application.

That being said, Dojo is an open-source, community-driven project, and you are encouraged to share general-purpose components with the community:

• Dojo Foundation Packages
• Dojo Foundation Packages and Phasing out DojoX

One of the most common questions we get asked is why a BorderContainer may not be displaying. There are two very common gotchas that we typically see when it comes to BorderContainer use.

Width/height issues

The most common culprit when your dijit/layout/BorderContainer doesn’t display at all is forgetting to set the width and height of the html and body elements. Somewhat counter-intuitively, these elements default to a width and height of 0, only expanding to fill content.

A BorderContainer is often configured to expand to fill its container node like so:

#borderContainer {
    width: 100%;
    height: 100%;
}

In a typical scenario, if all you have on a page is a BorderContainer directly under the body element, the body will have height and width of 0, so the BorderContainer will calculate the space it has to work in and will fill 100% of… no space! That is, unless you set width and height explicitly, like so:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

With the html and body elements configured to use the full viewport, your BorderContainer will be able to expand as you would expect.

Did your widget start?

As with all Dijit widgets, if you are using BorderContainer programmatically, you need to ensure that you explicitly call startup after creating it and putting it into the document:

require([
    'dijit/layout/BorderContainer'
], function(BorderContainer){
    var mainContainer = new BorderContainer({
        id: 'mainContainer',
        design: 'headline'
    });
    mainContainer.placeAt(document.body);
    mainContainer.startup();
});

In Closing

If your BorderContainer fails to display, check two things:

• The size of the BorderContainer's containing element – if it’s the body element, make sure both the html and body elements are sized appropriately.
• If using BorderContainer programmatically, ensure that you have called its startup method after creating and placing it.

If it still isn’t showing up, check your console and make sure there are no errors — a parsing error will often cause subsequent content to not display correctly.

The dojo/on module not only provides a simple, consistent interface for registering event handlers, it also ensures that the event object passed to your handler implements the W3C event model (W3C recommendation, MDN reference).

While most web browsers provide DOM events in a manner compliant with the W3C model, prior to version 9 Internet Explorer implemented its own model with the attachEvent method and some different properties on the event object.

Using dojo/on allows you to interact with event objects using the W3C event model regardless of the web browser. Specifically, the following properties and methods are added to event objects in IE8 and below (see the MDN reference for details – keep in mind some properties only apply to certain event types, like KeyboardEvent and MouseEvent):

• target
• currentTarget
• relatedTarget
• charCode
• keyChar
• charOrCode
• stopPropagation()
• stopImmediatePropagation()
• preventDefault()

Non-standard MouseEvent Properties

The properties pageX, pageY, offsetX, offsetY, layerX, and layerY are not normalized as it is expensive and often not needed, but the dojo/dom-geometry module provides a convenient method for doing so: normalizeEvent.

require([
    'dojo/on',
    'dojo/dom-geometry'
], function(on, domGeom){
    on('button', 'click', function(event){
        domGeom.normalizeEvent(event);
        console.log(event.pageX, event.offsetY, event.layerX);
    });
});

In Closing

Using Dojo provides an easy, consistent API across web browsers, smoothing out incompatibilities and inconsistencies, with a focus on adhering to open standards. Even if you’re not ready to update existing code that depends on certain properties (like layerX, layerY), you can still start using Dojo and take advantage of normalization methods to ensure your existing code works as expected.

We answer many, many, many questions on a daily basis through our Dojo training workshops, JavaScript support plans and during our customers’ development projects.

We have bucket-loads of answered questions. What to do with them all…
Oh? Provide you with the answers? Ok.

Here it is! Each week we’ll answer a commonly asked question about Dojo and then we’ll give it to you. Here we go!