Dijit Button: Accessibility

Where does a dijit/form/Button get its accessibility features from ?
By accessibily ( hereafter referred to as a11y), I mean you can press the button using the mouse, touch or keyboard( Space and Enter ) keys.
Link to demo code: http://dojo-sandbox.net/public/8225a/1
The answer is quite simple really. 

Open up the Button's template file:
https://github.com/dojo/dijit/blob/master/form/templates/Button.html
Notice the dojo-attach-events:
data-dojo-attach-event="ondijitclick:__onClick"
This "event" - ondijitclick magically gives this behaviour to the node on which its present. But as you can safely assume, 'ondijitclick' is not a native event. 

So, what is ondijitclick ?
To understand this, we need to revisit some of the basics.
The _TemplatedMixin processes the HTML template, for attach-points and attach-events, among other things. Well, this is half the truth. This part of the work is done by its base-class the _AttachMixin's _processTemplateNode method. This methods internally uses the _attach method. This is the interesting bit:
This method looks for the phrase "dijitclick" after parsing out the "on" 
If it finds one, it pulls in the allyclick module via a require
And in the final step, it attaches an event handler using on.
i.e, in case of the button, it fires the internal _onClick whenever a button is clicked/touched/keyboard pressed via- Space/Enter. So the declarative code in the Button  -"ondijitclick" basically converts to
on(node, "a11yclick", _onClick);
This helped me understand that the above line of code was another option instead of using "ondijitclick" in my template file.
I hope that helped demystify some of Dojo's magic.

In a future post I want to explore the internals of the a11yclick module

Unravelling the Dojo Widget(Dijit)

The Widget framework in Dojo solves 2 problems and both of them, elegantly.

For a UI application developer, widgets are essential. Before I continue, It would be useful to define what a widget's purpose is, to better understand its usefulness. A UI application will consist of well-defined visual controls that a user interacts with, to view/input information. For example: Dropdown lists, Text-fields, Buttons etc. It would be extremely beneficial if these were readily available rather than having to build something application-specific. Dojo addresses this problem with its rich set of widgets - Dijit Theme-tester link.
[I wont get into a lengthy discussion of why the native HTML controls are just not enough or compare Dojo's widgets with an other framework.. Did I hear someone say jQuery UI or ExtJS :) ]

Second, and the one which I think has been solved by Dojo really well is the Widget authoring framework. It is the same architecture that's used to build the widget set seen earlier. Developing new widgets\Customizing existing widgets is a streamlined software engineering process because of this architecture. 
From here, we will dive into the internal workings of this system. It is not going to be a 101 course in building Dojo widgets. It assumes that the reader if familiar with developing widgets.There are excellent articles for those:
Understanding _WidgetBase - Tutorial
Writing your own widget - Reference Guide
dijit._WidgetBase - Reference Guide
Creating Template-based Widgets - Tutorial

By the end of this post, I hope to have explained some of the magic hidden in these framework classes: _WidgetBase and _TemplatedMixin will be the focus of this deep-dive. 
Every Dojo widget that is readily available or any new widget that you would develop would utlimately subclass _WidgetBase. This is the basic contract of building a Dojo Widget - a Dijit. Hereafter, when I use the term widget, it means that I am referring to a Dojo widget.
The _TemplatedMixin allows widget developers to specify the UI of the widget in a seperate file which will be processed during the widget construction.
Github links to these classes:

• _WidgetBase Source code 
• _TemplatedMixin Source Code

Here is a dojo-sandbox link to a very minimal widget built using these classes:
http://jsfiddle.net/deepakanand/hxxx220q/
We will copy-paste a code snippet from that link for the purposes of our discussion here:

1 2 3 4 5 6 7 8

var MyWidget = declare([_WidgetBase, _TemplatedMixin], { baseClass: "myWidgetBaseClass", templateString: "<div></div>" }); var widgetInstance = new MyWidget({}, "widgetcontainer"); widgetInstance.startup();

MyWidget is the new widget which has its own baseClass and a simple template which consists of a single div element and no attach-points or attach-events.

widgetInstance is an instance of the MyWidget class.
The startup() method is the last of the lifecycle methods that needs be explicitly called(but oft forgotten) after instantiating a widget and placing it in the page.

A class diagram showing the architecture:

TODO:  Detailed description of code-path

My experience with Dojo

I have been working on UI for a few years now. About 1.5 years ago, I started developing JavaScript using the Dojo framework. I wish I had been warned before I started, that its not yet another JS framework. It is/has eveything that an organization needs to build single page applications.
I felt it important to write about my experience with JS and all of the jQuery goodness before Dojo.
JavaScript is a still a new language despite the countless blogs and tutorials to help understand its good, great and not so-great parts. As a web developer who worked on different web-sites at school I naturally picked up jQuery. With it's expressiveness(chaining etc) and cross-browser support, it was easy to get addicted to it. The introduction of the jQuery UI framework was everything a web dev could ever ask for. Both(jQuery Core and jQuery UI) these frameworks together helped reduced tons of boiler-plate, provided great APIs and a rich widget set. Note that I never mentioned code organization so far. I still used to modularize my JS into functions and some name spacing. I would split code into short script files and include all of these on my page. Code organization was a problem I pretended did not exist. 

With the influx of all the jQuery plugins, I jumped head-first noodling with them and eventually using them in my projects without understanding that some of them do not have full-time support or are not maintained by their owners reliably. 

It was then that I realized that it takes a much more disciplined approach to build large web applications.

Forward to today, it has been a rich learning experience developing JS code using the Dojo framework. The require, define and declare functions, underpin the code organization. I learn of different ways every day to utilize one of dojo/_base super useful modules. It's refreshing to see the toolkit's approach to providing enhanced functionality but deferring to the browser default if native support is available, without polluting the global objects. The widget system known as Dijit, is fantastic. It not only has a rich set of widgets, but has a set of rules governing how widgets must be built. It's supports template-based widgets which is so much easier to maintain than widgets coded completely in JS. 
I look foward to sharing more of my dojo experiences as code samples in future posts.

jQuery Plugin for a navigation menu

There are probably a million other ways to make yourself a navigation menu. This is my $0.02. Importantly, thanks to the Open source community, John Resig, the JQuery team and the JQuery UI team.
Now, I do not know if there was a need to use javascript to create a navigation menu. It can be done with CSS, I know, but JQuery UI is all about using JQuery to manipulate CSS. So, I gave it a shot. Besides JQuery is plain fun !

Motivation: I wanted to achieve the tabbed view like the one in JQuery UI tabs across multiple web pages for a web-site that I was working on.
Solution:

The core JQuery and Jquery UI and JQuery UI CSS files. They can be downloaded from the JQuery UI site.
The navbar (thats the name I gave it!) plugin file can be downloaded from here.Required Skills: Intermediate JQuery, HTML, CSSUsage
HTML:


<div id="navbar-container">
<ul id ="navbar">
<li id="page1_link"><a href="mockup_1.jsp">Home</a></li>
<li id="page2_link"><a href="mockup_2.jsp">About</a></li>
<li id="page3_link"><a href="mockup_3.jsp">Contact</a></li>
<li id="page4_link"><a href="mockup_4.jsp">More</a></li>
</ul>
</div> 

JQuery/JavaScript:

$("#navbar-container").navbar("navbar,page1_link,page2_link,page3_link,page4_link, 1");

You will need to add the above jquery/javascript to every page. All the arguments in the call remain the same except the last one, the number. This number indicates the item (li element) on the navigation bar that should be selected. Here,
<li id="page1_link"><a href="mockup_1.jsp">Home</a></li>
will be selected. It should look like this:

  



(I have used the new JQuery UI buttons for the sidebar. More about that later.)
So, for an other webpage, you will need to call navbar() with an appropriate number as its last argument.

i.e. if it is about.jsp, the call will be $("#navbar-container").navbar("navbar,page1_link,page2_link,page3_link,page4_link, 2");

Hope this was useful.

Useful Resources:

JQuery Plugin Authoring

Great ways to learn JQuery - Marc Grabanski