A Basic Single Page Application Using Custom Dojo Templated Widgets

• Download updated code to support dojo 1.10 - 5.3 KB
• Download source code - 4.2 KB

Introduction

While developing any application in dojo, it requires certain configuration (CDN, modules) and runtime plug-in/out of widgets. A widget creation in dojo also needs certain steps starting from writing namespace till the time consuming the actual widget.

This arcticle has the following pages and related dojo concepts involved in it.

• Index.html (dojo CDN load, Registering modules, Portlet creation and some useful namespace)
• Custom widgets
  • Register (templated widget, passing variables, standby widget, Dialog widget, deferred objects, etc.)
  • Profile (templated widget)

Background

To use this tip, the user should have basic knowledge of JavaScript and dojo widgets. Also the zipped file contains the source code. So it can be put in any of the Web server's root folder like IIS or Tomcat. Moreover, it can be added to your other source code or projects as well.

As we are involved in dojo, we definitely need a local server to test this. :)

Using the Code

Once the zipped files are added to a website, to test this a URL (example: http://localhost/DojoTemplatedWidgets/index.html) should be used. The localhost might chnage based upon your website hosted directory and port number.

I had hosted this @ port 80 in an IIS 7 server so my URL does not have a port number associated with it.

Digging Into the Code

It files contain only one HTML file (index.html) which is actually the starting point to the application. It configures the dojo and the module (required for custom widgets).

<script>

 var dojoConfig = {
     async: true,
     parseOnLoad: true,
     baseUrl:'/DojoTemplatedWidgets/',
     modulePaths: {Widgets: 'Widgets'}
 };
 </script>
 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js">
 </script>

Explanation

The index.html actually has a dojox.widget.Portlet instance which contains a button. On click of the button, a custom widget (Widgets.Register) will be loaded in the same portlet without changing the actual URL.

When the new 'Widgets.Register' widget is loaded, it actually creates form with few fields. The code actually depicts how custom validation can be done along with dojo's inbuild validation.

Once the details are filled and submit button is clicked, I have simulated an Ajax call with the help of dojo.deferred object and window's timeout methods. At this point for 2 seconds, a busy indicator will be shown (stand by) widget. After this, a successful message is shown to the user.

Finally, when the success message is discarded by the user, he can see the username he enterted in a different widget (Widgets.Profile) and the Register widget is removed from the portlet.

I have added a custom method to the portlet which supports dynamic loading of widgets.

//Create a custom method for the portlet and pass the widgetInstance to it.
//The widget will be loaded in the Porlet's containerNode
portlet.loadWidget = function ( widgetInstance) {
    dojo.html.set(portlet.containerNode, '');
    widgetInstance.placeAt(portlet.containerNode);
}

The following code creates a custom templated widget:

dojo.provide('Widgets.Profile');
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');

dojo.declare('Widgets.Profile', [dijit._Widget,  dijit._Templated], {
    
    postCreate : function(){
        this.parent.set('title', 'User Profile');
        dojo.html.set(this.userName, this.username); //set the user name in the welcome message
    },
    
    //Provide the html template path
    templateString: dojo.cache("Widgets", "Templates/Profile.html")

});

Screenshots

1. Shows the 1^st screen. Once the button is clicked, it loads a custom widget as shown in the next screen.

   

2. This below screen is the widget with some input fields for account creation with some custom validation.

   

3. The notification message displayed to the user after the ajax call simulation.

   

4. Another custom widget is loaded which receives the values from the previous widget.