Click here to Skip to main content
Click here to Skip to main content
Go to top

A basic single page application using custom dojo templated widgets

, 31 Jul 2014
Rate this:
Please Sign up or sign in to vote.
This article can be used to know more about how dojo templated widgets can be created and used inside a portlet programmatically

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 usefule namespace) 
  • Custom widgets 
    • Register ( templated widget, passing variables, standby widget, Dialog widget, defrred objects etc)
    • Profile ( templated widget)

Background

To use this article the user should have basic knowledge in javascript and dojo widgets. Also the zipped file conatins 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. Smile | :)

Using the code

Once the zipped files are added to a website to a website. To test this a url (ex: http://localhost/DojoTemplatedWidgets/index.html)  should be used. The localhost might chnage based upon you 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 associted 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 widgtes).

       <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 instancewhich constains 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")

});

Screen shots

1) Shows the 1st screen. Once the button is clicked it loads a custom widget as shown in th 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 recevies the values from the previous widget.

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

srikantsahu
Software Developer (Senior)
India India
I am a software engineer working in an MNC. I have 4 years of experience in various web technologies.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 31 Jul 2014
Article Copyright 2014 by srikantsahu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid