Click here to Skip to main content
12,630,137 members (26,130 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8.6K views
253 downloads
4 bookmarked
Posted

A Basic Single Page Application Using Custom Dojo Templated Widgets

, 31 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
This tip 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 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>

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 1st 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.

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.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionGr8 effort Pin
qazi nauman21-Mar-15 23:20
memberqazi nauman21-Mar-15 23:20 
GeneralRe: Gr8 effort Pin
srikantsahu22-Mar-15 6:12
membersrikantsahu22-Mar-15 6:12 
GeneralDojo 1.10 migration for given example. Pin
Member 1123538821-Nov-14 19:44
memberMember 1123538821-Nov-14 19:44 
GeneralRe: Dojo 1.10 migration for given example. Pin
srikantsahu21-Nov-14 22:30
membersrikantsahu21-Nov-14 22:30 
GeneralRe: Dojo 1.10 migration for given example. Pin
Member 1123538821-Nov-14 23:03
memberMember 1123538821-Nov-14 23:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161205.3 | Last Updated 31 Jul 2014
Article Copyright 2014 by SrikantSahu
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid