Including dojo/dom library to Spring Roo

Question

How is it possible to include and use the dojo/dom library in Spring roo.

This:

 <script type="text/javascript">
                      dojo.require('dojo/dom');
                      dojo.ready(function remAttr(){
                          dojo.removeAttr('theId', 'value');
                        }
                     );
</script>

results in:

"NetworkError: 404 Introuvable - http://localhost:8131/suivitrc/resources/dojo/dom.js"
dom.js
Could not load 'dojo/dom'; last tried '../dojo/dom.js'

Can anyone please help?

Answer 1

I think the version of dojo in roo is currently less than 1.7. This means you can remove the following line from your code because the remoteAttr function is part of dojo.js:

dojo.require('dojo/dom');

see here: http://dojotoolkit.org/reference-guide/1.7/dojo/removeAttr.html

Answer 2

The namespace => to module path is retreived by replacing periods (.), in short - you need to replace the slash with a dot. Your require should be

  dojo.require('dojo.dom'); // blocking call? djConfig.async must be false

Since the error is in regards to the dojo.require specified path, this means your dojo.js is found and loaded (dojo.require is not undefined) - and baseUrl is not of concern to dojo modules.

The thing is, youre using the legacy loader to pull in an AMD module, in 1.7+ the require statement has a different look to it.

  // AMD loader form is
  function callbackFunctionOnComplete(dojoDom) { }
  require([ "dojo/dom" ], callbackFunctionOnComplete); // non-blocking

So, how dojo.require works is following, assume that the parameter we pass as string is called 'module;

dojo.require = function(module) {
   var parts = module.split('.');

1 - get toplevel namespace (global)

   var packageName = parts.shift(); // first part is the package name

2 - get the filename (minus .js)

   var id = parts.pop(); // the last bit

3 - translate everything in between to a path (relative to packagelocation)

   var mid = parts.join("/");

4 - lookup package (from toplevel) location

   var fullpath = // in pseudo
       foreach dojoconfig.packages 
         iff obj.name == packageName 
            set to obj.location

5 append the rest and start downloading module

   fullpath += mid + id + '.js'
   transport.get(..... fullpath .....)

Answer 3

You need to configure dojo with dojo config. I prefer the form explained here:

http://dojotoolkit.org/reference-guide/1.7/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-core .

And you need to tell dojo where to find its stuff. An example:

 var dojoConfig =
  {
     baseUrl : "/yourApp/js",  // defines the js folder in your webapp
     tlmSiblingOfDojo: false,
     async: true,
     parseOnLoad:true,
     packages: [
        { name: "app", location: "app"}, // where it is in the js folder

        { name: "dojo", location: "lib/dojo" }, // where it is in the js folder
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
     ]
  };

Also the require form you are using is deprecated. See http://livedocs.dojotoolkit.org/dojo/require