Saumya

Working with BackboneJS, will make you work with RequireJS. And if you are working with BackboneJS for a little time, then you probably know what I am talking about. Sometimes, the modules we are loading through RequireJS throw errors saying

Error: Load timeout for modules

I will suggest to have a look at RequireJS documentation for detailed explanation.
The most common and which may hit you in the begining is the timeout for timeout itself. There are ways to fix this. The options are

• increase the timeout limit
• reload the page or the module on timeout error

The RequireJS configuration has an option called waitSeconds, which defaults to 7. Now if the module does not load in 7 seconds, it will giveup and throw the error. If waitSeconds is set to 0, it will wait for infinite. Well, along with that setting, set the enforceDefine to true for reliability in all browsers and scenarios. This setting will look as below.

requirejs.config({
    enforceDefine: true,
    waitSeconds: 0,

Thats a quickfix. But again, it may hit the performace of the application.
The otherway is Errbacks as per RequireJS. so what are they. They are simply callbacks but since it happens in errors, its called Errbacks. We can do stuff like reloading the whole application or the specified module or other error handling on these.

require(['modules/one','modules/two'],
           function(One,Two){
            //Application logic
        },
        function(error){
            console.log('Custom ERROR handler',error);
            //error.requireModules : is Array of all failed modules
            var failedId = error.requireModules && error.requireModules[0];
            console.log(failedId);
            console.log(error.message);
        });

Happy Coding.

While trying to upgrade, one of my previous Cordova Android application, to latest Cordova , noticed that Cordova now makes it very difficult to switch to a native development workflow. Its not the flow itself, which is difficult, but the information about the flow and to get started with a project which is the problem. If you have ever worked with the native development flow of Cordova , which I guess you must have, as that was the actual flow in the beginning. Then its exactly the same work flow, but the thing is, its not mentioned anywhere. And in between these, they had introduced a web development workflow and tried forcing to use it. Which itself is not clear and then combined the native workflow with it. Good that, that period is over. But its not clear at all from the docs. Well, first of all, Cordova is saying its released the version 4 of the toolkit. When you go to download section for native development workflow, you will not find a version 4 ! So, you have to go inside platforms, there also you will not find version 4. So, I ended up downloading 3.6.4 for android and will suggest everyone to do that for the time being. After downloading the zipped file, extract it to a folder. Navigate to the folder and fireup the cordova create command to create a project. Next is adding the plugins, because now Cordova does not include plugins by default. For that, one has to go back to Cordova CLI and that can be done with Node and NPM. But instead of running Cordova to add plugins, one has to run Plugman to install plugins.

The flow is

• download Cordova Native development package
• download Node and NPM
• install Cordova and Plugman through NPM
• create project from inside the dowloaded Cordova folder
• navigate to the project folder
• run the Plugman command to add plugins to the project

Happy Coding.

Dojo Toolkit has a component library named as Dijit. Each component in this library is known as a Widget. It is better to know the dijit framework vocabulary before going further inside it.

• Normally each .js file represents a Class.
• Each file, whose name starts with _ (underscore) is not a concrete class. That means, this class is supposed to be extended to be used, never directly used as is.
• Members inside a class, properties and methods, whose name starts with _ (underscore) are private
• A class is defined by declare()

Dojo now supports AMD modules. So the module definition is pretty straight forward as in standard module definition. If you have ever used any other framework such as BackboneJS, you already know, how to declare, extend, load and use a module and a class.

Now, lets see what Widget brings to the rules table. Each Widget has a life-cycle of its own. The lifecycle methods are as below in sequence.

• constructor()
• postMixInProperties()
• buildRendering()
• setters and getters, example is set(“myProperty”,value)
• postCreate()
• startup()
• destroy()

There are few methods which also be called in some widgets, such as

• resize()

Each Widget is supposed to Extend the _WidgetBase class defined in dijit/_WidgetBase package. Sometimes, it is necessary to use template strings or templates inside a Widget. In that case, the Widget extends _WidgetBase and _TemplatedMixin, defined in dijit/_WidgetBase and dijit/_TemplatedMixin package respectively.

After creation of each child Widget inside the parent Widget, its necessary to call the startup() method of the child Widget. Since startup() call goes through all the child widgets of a container Widget, its better to add all the child Widgets to the parent Widget and call parent’s startup(), which will call startup() of each child Widget. While writing a custom Widget, its necessary to override parent’s lifecycle methods. At the sametime, it is necessary to continue the lifecycle of the Widget. So a call to parent’s method is necessary. In most of all programming languages it is done with a super() call. In dijit framework its called as

• this.inherited(arguments);

So inside each of the above life-cycle methods, a call to this.inherited(arguments); is necessary, either in the beginning or as the last line of the method.

A custom Widget has either of the 2 properties below or sometimes both, to add child widgets to itself.

• this.domNode
• this.containerNode

Now to add child widgets to the parent widget there are methods like

• addChild()

Well, this post may seem a lot but the idea is to make you aware of the vocabulary and some background to dijit infrastructure. For a basic and complete example have a look at this widget.

Happy Coding.