dGrowl Redux – Using a Dojo Module Path Resource to Include the Library

In light of recently figuring out how to use a Dojo Module Path Resource to make a Dojo library available in an XPages application, I wanted to revisit the way I’ve been including dGrowl. In this post, I’ll show how to include it in a cleaner way.

dGrowl in XPages

dGrowl is a third party Dojo plugin that provides growl-style messages that are much nicer than Dojo Toaster.

This episode of NotesIn9 explains how to implement dGrowl in XPages and this post shows how to add two more notification styles.

Module Inclusion – Take 1

To use dGrowl (after adding the files to the application’s WebContent folder), you need to include a stylesheet and include the module in the application.

The original method I used (based on a trick found in Mastering XPages) was to add a script resource and build out the path to the main.js file, relative to the current application.

<xp:this.resources>
  <xp:script clientSide="true">
    <xp:this.contents><![CDATA[
      var pathParts = location.pathname.split('/');
      pathParts.pop();
      dojo.registerModulePath("dGrowl", pathParts.join('/') + "/dGrowl/main");			
    ]]></xp:this.contents>
  </xp:script>

  <xp:dojoModule name="dGrowl"></xp:dojoModule>
  <xp:styleSheet href="/dGrowl/dGrowl.css"></xp:styleSheet>
</xp:this.resources>

Lines 4-6 build the path to the script file and register it via dojo.registerModulePath().

Line 10 includes the module on the page.

Module Inclusion – Take 2

Now that I’ve seen how to use a Dojo Module Path Resource, this can be simplified. This resource executes the same Dojo method to register a module path.

Using this, I can dramatically simplify the page resources as follows:

<xp:this.resources>
  <xp:dojoModulePath url="/dGrowl/main" prefix="dGrowl"></xp:dojoModulePath>
  <xp:styleSheet href="/dGrowl/dGrowl.css"></xp:styleSheet>
</xp:this.resources>

The Dojo Module Path Resource just needs a URL relative to the WebContent folder of the current application. The prefix defines how to refer to the resource.

Using AMD loading, I can now initialize the dGrowl object like this:

<script type="text/javascript">
var dg;
 	
require([
  "dGrowl",
  "dojo/domReady!"
], function(dGrowl) {
 	
  dg = new dGrowl({'channels':[
    {'name':'error', 'pos':1},
    {'name':'info', 'pos':2}
  ]})
});
</script>

Line 2 declares a global variable that I can use anywhere on the page to load a dGrowl message.

Line 5 includes the module (using the name I gave it in the module resource path prefix) and line 7 makes it available to the following function under the name dGrowl.

Now, I can display dGrowl messages from anywhere on the page the same way I did in the other examples. Here’s an example that will display an informational message:

dg.addNotification('Here is an informational message',{'channel':'info', 'duration': 3000});

That’s it. This is definitely a much cleaner way to make the code available on the page.