This is the third post in a series on reuseable javascript objects. If you have not read them yet, start with the first and second posts.

Now, lets discuss how we get dojo to load our new class from an NSF. Normally you would do this by including a dojo module through the XPage's resources tab, or you would use the javascript code:

dojo.require('com.ZetaOne.widget.listControl');

Here's where we have to perform a little "magic" to make dojo aware of our javascript repository that exists in an nsf.  You see, all dojo javascript is located in the domino\js\ folder of your data directory, and this folder is mapped to /domjs on the webserver.  If we were to ask dojo to load our class "com.ZetaOne.widget.listControl" it would look for the file called "listControl.js" in the /domjs/dojo-1.3.2/com/ZetaOne/widget folder of our webserver. Which it won't find.

So, I've made a slight modification to the dojo.require function, and named it dojo.requireFromNsf so we can easily require javascript objects located in any nsf.  You'll need to download this file, and place it in the folder:

[DOMINO DATA]/domino/js/dojo-1.3.2/dojo/_base/_loader

name the file loader_nsf.js

The file you are placing is called loader_nsf.js. This file is NOT obfuscated or compressed at this point, so you can review it. I'd recommend compressing it before rolling out into production.

The dojo.requireFromNsf() function takes an extra parameter that dojo.require does not. It's the base path to our reusable javascript library NSF. So, to load our listControl widget, we'd include the following line in a client side javascript library.

dojo.requireFromNsf('com.ZetaOne.widget.listControl', '/zojs.nsf/');

The '/zojs.nsf/' is the path the re-usable javascript component database you created from post #2. Make sure to include the full path, including the beginning and ending '/'. For more details about the dojo.requireFromNsf function, review the source code.

Now, we can load our javascript code from our repository. To do so, let's open the database where we are implementing the sample listControl widget, and create a client side javascript library.  Let's practice our namespacing here so create the library with a name that represents your reverse domain and put it in the app namespace, along with listControlSample.js as the actual class name. For example, my fully qualified javascript library name would be com/ZetaOne/app/listControlSample.js .

Let's include our basic class construct:

dojo.provide("com.ZetaOne.app.listControlSample");

(function(){
   
        dojo.declare("com.ZetaOne.app.listControlSample", null, {
            constructor: function() {

            },
            destroy: function() {

            }
        })
})();

Then, lets add the code to requireFromNsf our listControl widget, and a line to alert us that our class has been created so we can see it in action:

dojo.provide("com.ZetaOne.app.listControlSample");

dojo.require("dojo._base._loader.loader_nsf");
dojo.requireFromNsf('com.ZetaOne.widget.listControl', '/zojs.nsf/');

(function(){
   
        dojo.declare("com.ZetaOne.app.listControlSample", null, {
            constructor: function() {
                alert('com.ZetaOne.app.listControlSample Created!');
            },
            destroy: function() {

            }
        })
})();

And for now, lets add a line to end of this library to actually create an instance of our new class. Normally, we would seperate this out into a different controller script rather than in the class script itself, but we'll review that later.  So for now, and the following line to the end of the script:

window.listControlSample = new com.ZetaOne.app.listControlSample();

Now, save and include this client side javascript library in the xpage you created in Part II.  You should be able now preview your XPage in the browser, and watch it load the com.ZetaOne.widget.listControl object from your NSF javascript repository, AND you should be able to select different nodes in the list. In my next post I'll post a live sample of this in play and have a set of downloadable sample databases, as well as explain how to further this functionality to your individual XPages and custom controls to create a TRUE Model-View-Controller implementation of your XPage apps, with your own re-usable javascript component library.

Happ Coding!