aspect Basics

The idea and value of aspect is that it allows you to be notified of function calls without needing to modify the original function’s contents. You also don’t need to implement pub/sub to know when methods are called. The basic setup looks like:

// Load the dojo/aspect dependency
require(["dojo/aspect"], function(aspect) {
	
	// Create an object and method to spy on
	var original = {
		someMethod: function(arg1, arg2) {
			console.warn("original.someMethod called: ", arg1, arg2);
			return "Hello " + arg1 + " " + arg2;
		}
	};
	
	// Use aspect.after ("before" also available)
	aspect.after(original, "someMethod", function(arg1, arg2) {
		console.warn("After method called with arguments: ", arg1, arg2);
	}, true);
	
	// ...and a while later, call the original method
	original.someMethod("David", "Walsh");
	
});

The first argument is the origin object, the second argument is the method to listen in on, and the third is the function to fire before or after, depending on which aspect method you call.

aspect.before

The before method will fire before the originally called method fires:

// Fire a function before the original
aspect.before(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.before: ", arg1, arg2);
});

// "aspect.before: ", David, Walsh
// "original.someMethod called:", David, Walsh

Since this method is fired before the original function call, the arguments passed to the original method are automatically received by the aspect method.

aspect.after

The after method fires after the original method fires, and accepts an extra parameter called receiveArguments, where you may direct the second method to receive the original method’s arguments, or the return value of the original method.

receiveArguments = true

Passing the receiveArguments as true will pass the two arguments from the original function call to the aspect method:

// First scenario:  aspect.after that accepts the same arguments as the origin function
// because the fourth argument is passed as "true"
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("After method called with arguments: ", arg1, arg2);
}, true);

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original.someMethod called:", David, Walsh
// "aspect.after: ", David, Walsh

Removing the last argument instead allows the aspect method to receive the return value of the original function call:

// Second scenario: aspect.after that accepts the result of the original function call
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.after: ", arg1, arg2);
	
	// "arg2" will be "undefined" since only the return value is provided 
	
}); // No "true"

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original someMethod: David Walsh"
// "aspect.after: ", David Walsh

In most cases, aspect.after is what you will want to use. An object with a remove method will be returned, allowing you to remove the connection whenever you’d like.

aspect.around

What if you want to execute code both before and after the original method? Simple: use aspect.around. The around method allows you to call the original function when you want, within your listener:

// Call the around method, which gets one argument, the original method
aspect.around(original, "someMethod", function(originalMethod) {
	// Return a new method, which receives the same arguments as the original, just like "aspect.after"
	return function(arg1, arg2) {
		// Execute "before" functionality
		console.warn("before!", arg1, arg2);
		
		// Execute the original method as desired
		originalMethod.apply(this, arguments);
		
		// Execute "after" functioanlity
		console.warn("after!");
	};
});

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "before!", David, Walsh
// "original someMethod: David Walsh"
// "after! David Walsh"

The idea behind aspect.around is very much like using this.inherited(arguments) within Dojo classes; you can make that call any time you’d like, so other code may run before or after.

Real Use of aspect

One realistic use of aspect relates to extending Dijit widgets, or building a Dijit layout that uses multiple widgets. Often you’ll see something like:

// When the onChange event fires
aspect.after(this.dropdown, "onChange", function(value) {
	// ...fire an xhr request to get information about it
	dojo.xhrGet({
		url: "/data.php?value=" + value
	}).then(function(data) { 
		// Do something with it.
	});
}, true);

When the dropdown’s value changes, an XHR request is fired to get information about that value.

Explaining aspect and the value of function-to-function connections can be difficult. I usually try a parent-to-child analogy that just further confuses people. Think of it this way: aspect allows you to know when other functions are called, without needing to modify the other function. This happens all over the Dijit UI framework, Brilliant!

Using dojo/aspect is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

After doing some research, I found this blog post, which explained:

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is C:\fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

That made sense; essentially the browser is feeding that lame C:\fakepath\ text in. Luckily all I needed to do was fix the issue by doing a simple string replace call:

// Change the node's value by removing the fake path
inputNode.value = fileInput.value.replace("C:\\fakepath\\", "");

Whew — dodged a bullet there. Just wanted to post this for everyone in case you run into it in the future.

File Uploads and C:\fakepath\ is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

One case recently came up where I was working on a widget that extended dijit.form.FilteringSelect. My custom widget displayed messages under the widget’s INPUT instead of the default tooltip behavior. The problem that introduced was that the widget’s dropdown displayed a full 20 pixels under the INPUT node, so the two elements looked “detached.” My assumption was that this was happening because the domNode grew in height because of my template change.

This is where it became difficult to know exactly where to look to fix the issue. I attempted a hack of adding margin-top: -20px to the FilteringSelect's dropdown node, which worked, but if the error text went down to two lines, the dropdown would still be detached — obviously not the reliable solution. Where to look next?

I knew that dijit.popup manages the position of a popup, so that was my next stop. dijit.popup accepts one argument (an object) about the popup, with information about the widget, the node to pop up, an around property telling the method where to fit the popup by, and more. Seeing that, I needed to figure out where FilteringSelect's around setting was coming from. I also knew there is no property named around on the FilteringSelect widget, so more investigation was needed.

Within the creation signature for FilteringSelect, I saw that dijit._HasDropDown is a mixin. Looking at the _HasDropDown resource, I saw a method called openDropdown and right at the top of that method I found exactly what I needed:

openDropDown: function(){
	// summary:
	//		Opens the dropdown for this widget.   To be called only when this.dropDown
	//		has been created and is ready to display (ie, it's data is loaded).
	// returns:
	//		return value of dijit.popup.open()
	// tags:
	//		protected

	var dropDown = this.dropDown,
		ddNode = dropDown.domNode,
		aroundNode = this._aroundNode || this.domNode,
		self = this;
		
	// more...
	

The _aroundNode that was being passed to dijit.popup is the domNode unless a special _aroundNode property is explicitly set. Now I could set the _aroundNode property to my widget’s focusNode (the INPUT):

this._aroundNode = this.focusNode;

This small addition fixes the detachment issue, directing dijit.popup to open the dropdown around the INPUT element and not the entire domNode.

These type of exercises are very helpful in both learning a framework and improving your debugging skills. Undocumented properties and features are present in any set of code, so the ability to trace through and find what you need is hugely important. It definitely was in this case!

Dojo, Dijit, Dropdowns, and _aroundNode is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve spent the last two weeks in London, eating fish’n'chips, drinking cup’o'tea, and being a hooligan at the Arsenal. Oh yeah, there was a MooTools hackathon too. The MooTools hackathon was hugely successful and I’ll be providing more detail about what was accomplished and where MooTools is going over the coming weeks. It was also great to meet some of the development team in person instead of simple IRC. MooTools FTW!

Another exciting part of my time in London was presenting at London Ajax. My presentation was called “JavaScript Coding with Class”, preaching the values of class-based JavaScript frameworks like MooTools and Dojo. I kept the talk high-level but I’m confident I got my point across, showing the value of class structures.

This was my first time presenting this deck, so let me know if you see room for improvement (outside of the billion “um’s” I used.)

Due to popular request, my slides have been embedded above.

JavaScript Coding with Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

dojo.xhr and handleAs

Making AJAX requests is done with Dojo’s dojo.xhr methods.  Sending a basic GET request would look like:

dojo.xhrGet({
	url: "/ajax.php",
	load: function(result) {
		// Do something with the result here
	}
});

The request above assumes that the response should be handled as plain text, as you would expect.  Dojo’s dojo.xhr methods all accept an object with properties for handling the request, and one property you can add is handleAs.  The handleAs property should be a string representing the type of parsing that should be done to the result before its passed to the load method or deferred callback.  Values for the handleAs property could be json, javascript, xml, or other variants of json.  If I want my request to be handled as JSON, I’d code:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "json",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

The resulting object provided to the load handler is text parsed into JavaScript object.  Likewise, if I want the result to be handled as XML, I’d code:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "xml",
	load: function(result) { // result is a XMLDocument object
		// Do something with the result here
	}
});

The load callback is provided a XMLDocument object.  One simple parameter changes the way the request response is parsed.  So how is this possible, and how can you create custom handleAs methods?  Simple!

dojo.contentHandlers

The dojo.contentHandlers object acts as dictionary for ajax request parsing.  The handleAs parameter you  supply maps to the key within dojo.contentHandlers.  The dojo.contentHandlers object comes with the following content handlers:  javascript, json, json-comment-filtered, json-comment-optional, text, and xml.  Here’s a snippet containing those “parsers”:

var handlers = dojo._contentHandlers = dojo.contentHandlers = {

	text: function(xhr){ 
		// summary: A contentHandler which simply returns the plaintext response data
		return xhr.responseText; 
	},
	json: function(xhr){
		// summary: A contentHandler which returns a JavaScript object created from the response data
		return _d.fromJson(xhr.responseText || null);
	},
	"json-comment-filtered": function(xhr){ 

		if(!dojo.config.useCommentedJson){
			console.warn("Consider using the standard mimetype:application/json."
				+ " json-commenting can introduce security issues. To"
				+ " decrease the chances of hijacking, use the standard the 'json' handler and"
				+ " prefix your json with: {}&&\n"
				+ "Use djConfig.useCommentedJson=true to turn off this message.");
		}

		var value = xhr.responseText;
		var cStartIdx = value.indexOf("\/*");
		var cEndIdx = value.lastIndexOf("*\/");
		if(cStartIdx == -1 || cEndIdx == -1){
			throw new Error("JSON was not comment filtered");
		}
		return _d.fromJson(value.substring(cStartIdx+2, cEndIdx));
	},
	javascript: function(xhr){ 
		// summary: A contentHandler which evaluates the response data, expecting it to be valid JavaScript

		// FIXME: try Moz and IE specific eval variants?
		return _d.eval(xhr.responseText);
	},
	xml: function(xhr){
		// summary: A contentHandler returning an XML Document parsed from the response data
		var result = xhr.responseXML;
		//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
		if(_d.isIE && (!result || !result.documentElement)){
			//WARNING: this branch used by the xml handling in dojo.io.iframe,
			//so be sure to test dojo.io.iframe if making changes below.
			var ms = function(n){ return "MSXML" + n + ".DOMDocument"; }
			var dp = ["Microsoft.XMLDOM", ms(6), ms(4), ms(3), ms(2)];
			_d.some(dp, function(p){
				try{
					var dom = new ActiveXObject(p);
					dom.async = false;
					dom.loadXML(xhr.responseText);
					result = dom;
				}catch(e){ return false; }
				return true;
			});
		}
		//>>excludeEnd("webkitMobile");
		return result; // DOMDocument
	},
	"json-comment-optional": function(xhr){
		// summary: A contentHandler which checks the presence of comment-filtered JSON and 
		//		alternates between the `json` and `json-comment-filtered` contentHandlers.
		if(xhr.responseText && /^[^{\[]*\/\*/.test(xhr.responseText)){
			return handlers["json-comment-filtered"](xhr);
		}else{
			return handlers["json"](xhr);
		}
	}
};

What if we want to add our own content handler though?  All you need to do is add the key=>parser to the dojo.contentHandlers object!

// CSV parsing found at:  http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data

dojo.contentHandlers.csv = function(xhr) {
	
	// Set the data
	var responseText = xhr.responseText;
	var delimiter = ",";
	
	// Create a regular expression to parse the CSV values.
	var objPattern = new RegExp(
		 (
			  // Delimiters.
			  "(\\" + delimiter + "|\\r?\\n|\\r|^)" +

			  // Quoted fields.
			  "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

			  // Standard fields.
			  "([^\"\\" + delimiter + "\\r\\n]*))"
		 ), "gi");


	// Create an array to hold our data. Give the array
	// a default empty first row.
	var arrData = [[]];

	// Create an array to hold our individual pattern
	// matching groups.
	var arrMatches = null;


	// Keep looping over the regular expression matches
	// until we can no longer find a match.
	while (arrMatches = objPattern.exec(responseText)){

		 // Get the delimiter that was found.
		 var strMatchedDelimiter = arrMatches[1];

		 // Check to see if the given delimiter has a length
		 // (is not the start of string) and if it matches
		 // field delimiter. If id does not, then we know
		 // that this delimiter is a row delimiter.
		 if (strMatchedDelimiter.length && (strMatchedDelimiter != delimiter)){
			  // Since we have reached a new row of data,
			  // add an empty row to our data array.
			  arrData.push([]);
		 }
		
		 // Now that we have our delimiter out of the way,
		 // let's check to see which kind of value we
		 // captured (quoted or unquoted).
		 if (arrMatches[2]){

			  // We found a quoted value. When we capture
			  // this value, unescape any double quotes.
			  var strMatchedValue = arrMatches[2].replace(
				   new RegExp("\"\"", "g"),
				   "\""
				   );
		 } else {
			  // We found a non-quoted value.
			  var strMatchedValue = arrMatches[3];
		 }
		 // Now that we have our value string, let's add
		 // it to the data array.
		 arrData[arrData.length - 1].push(strMatchedValue);
	}

	// Return the parsed data.
	return(arrData);
}

The code snippet above allows you to have your XHR request’s result be parsed as CSV content;  the result becomes a JavaScript object representing the CSV data.  Here’s how you’d use it:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "csv",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

One key to flexibility within JavaScript framework is “dictionaries” or “property bags”, allowing for adding, removing, and modifying of existing properties.  Thanks to Dojo’s use of dojo.contentHandlers and dojo.xhr‘s handleAs property, you can handle the result of your AJAX requests before they are passed to a callback!

Custom AJAX Content Handling with the Dojo Toolkit is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

dojo.partial

Let’s say you have a function whose main purpose is to place content into a node:

// A sample function which could use partial
function placeContent(node, content) {
	node.innerHTML = content;
}

Note that the function expects two arguments: node and content.  This is a simple, general purpose function that could be used anywhere and by many different functions, right?  Now let’s say that I’m making a xhrGet call:

dojo.xhrGet({
	url: "content.html",
	load: function(content, ioArgs) {  }
});

The signature of the load method is (content, ioArgs).  To use my placeContent function with the load handler, you’d have to code:

dojo.xhrGet({
	url: "content.html",
	load: function(content, ioArgs) {
		placeContent("myNode", content);
	}
});

That’s not the worst thing in the world, but it’s a bit…meh.  Using dojo.partial, we could instead code:

dojo.xhrGet({
	url: "content.html",
	load: dojo.partial(placeContent, "myNode")
});

Even though the first argument of the load callback signature is the content, the dojo.partial call shifts the provided arguments to the front of the argument list, thus placing the node argument before the content argument when used with placeContent. dojo.partial allows us to avoid using “wrapping” functions to add an argument to the arguments array. dojo.partial allows you to add any number of arguments which may be pushed to the front of the signature, not just one.

Function.partial

I’ve taken a quick moment to duplicate the dojo.partial function for MooTools:

// The implementation
Function.implement("partial", function(/* all args */) {
	var self = this, args = Array.from(arguments);
	return function() {
		self.apply(this, args.append(arguments));
	};
});

An example usage would look like:

new Request({
	url: "partial.html",
	//onComplete: myFn.partial("myNode").bind(this)
	onComplete: placeContent.partial("myNode")
}).send();

Just as easy to use as Dojo’s method and just as useful.  I love that this method allows you to skip writing one-line callback wrappers and allow you to keep your utility function signatures the way they are.  dojo.partial and Function.partial are fully FTW!

Full Awesomeness with dojo.partial and MooTools’ Function.partial is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme much easier.  Let’s take a look at how Dojo leverages LESS to create Dijit themes and create our own theme.

LESS CSS

The idea behind LESS CSS is quite simple: extend CSS with dynamic behavior such as variables, mixins, operations and functions.  Simply put:  fix CSS’ inherit limitations. LESS can be used on the command line / server-side with NodeJS or with a JavaScript file on the client side.  For the purposes of building Dojo themes, we’ll be using the NodeJS solution.  To install LESS, and assuming you have npm, run the following command:

npm install less

The LESS package should now be installed on your machine, ready to use with NodeJs, which must also be installed on your machine.

Dijit’s Use of LESS

Navigate to the following directory within your Dojo 1.6+ checkout:

cd dijit/themes/claro/

You’ll see built {WidgetName}.css files but also a number of {WidgetName}.less files — the .css files were built using LESS!  Before popping into individual .less files, open variables.less.  The variables.less file contains the declared variables which are used throughout other CSS files;  consider variables.css a “defaults” file.  Take a look at a few snippets from variables.less:

/* General */
@text-color: #000000;				/* Text color for enabled widgets */

@border-color: #b5bcc7;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
@popup-border-color: #769dc0;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
@minor-border-color: #d3d3d3;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */

@disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
@disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
@disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */

/* ... */

/* Input widgets
@focused-border-color: #769dc0;				/* Focused textbox, editor, select, etc. */
@error-border-color: #d46464;				/* Border for textbox in error state */
@error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
@erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
@textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
@textbox-hovered-background-color: #e9f4fe;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;

/* mixins */
.border-radius (@radius) {
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.box-shadow (@value) {
	-webkit-box-shadow: @value;
	-moz-box-shadow: @value;
	box-shadow: @value;
}

You’ll notice how LESS CSS works:

• To define a variable, start with “@” symbol along with the variable name.
• To use a variable, define the property and provide the @-prefixed variable name as the value.
• To define a mixin, provide a selector name with arguments and define sub-properties of that property.

You can bring link definitions into other .less files by using the following directive which you’ll find in all of the theme .less files:

@import "variables";

Now open Calendar.less and look for instances of “@border-color”.  You’ll note that those instances reference the “@border-color” variable provided in variables.css file.  All other variables beginning with “@” will be replaced within the build process as well!

Creating Your Own Dijit Theme

The easiest way to get started with your own theme is to copy the most recently-created, officially supported them.  In this case, that theme would be claro.  The claro theme is a professional-looking blue theme which makes use of CSS gradients, transitions, and rounded corners when supported by the browser.

Run a quick cp to copy the claro folder to a folder which you’d like to call your theme:

cpmac claro davidwalsh

Before embarking on editing the existing code, it’s important to change the “.claro” declarations in every CSS file to “.{yournamespacename}”.  My theme will be called “davidwalsh” so I’ll use my text editor to find every instance of “.claro” and replace it with @theme, which we can map to “davidwalsh”.  With the copy of claro ready, jump into the variables.less file and make any color changes you see fit.  I’m more of a “green guy” myself so I’ll adjust the colors within variables.less to greenish counterparts:

/* General */
@text-color: #000000;				/* Text color for enabled widgets */

@border-color: #b7c7b5;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
@popup-border-color: #b7c7b5;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
@minor-border-color: #b7c7b5;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */

@disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
@disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
@disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */

/* ... */

/* Input widgets
@focused-border-color: #7bc076;				/* Focused textbox, editor, select, etc. */
@error-border-color: #d46464;				/* Border for textbox in error state */
@error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
@erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
@textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
@textbox-hovered-background-color: #e9fee9;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;

After editing my variables.less file to match my desired design, it’s time to look at each {WidgetName}.less file to make appropriate changes if I’d prefer the widget to look different than its claro look.  Once all of the {WidgetName}.less files are edited to your liking, it’s time to compile the .less files into working CSS files!

Compiling Your Less CSS Theme

Before compiling the theme, let’s take a look at another file within the theme directory:  compile.js.  compile.js was written to scan the current directory as well as the form and layout directories looking for .less files.  All less files are parsed and, using the variables.less directives, variable values are inject into their corresponding places and CSS file are created.

To use compile.js, navigate to your theme’s folder via the command line and run the following command:

node compile.js

Upon running this command, .css files will be generated with the same name as their .less counterparts.  A quick scan of these files will confirm that all variables have been placed in their proper spots!  Now your theme files are ready to go!

Implementing Your Custom Dijit Theme

Find the themeTester.html file (/dijit/themes/themeTester.html) and modify it to include your theme:

// Fill in menu/links to get to other themes.		
// availableThemes[] is just a list of 'official' dijit themes, you can use ?theme=String
// for 'un-supported' themes, too. (eg: yours)
var availableThemes = [
	{ theme:"davidwalsh", author:"David Walsh", baseUri:"../themes/" },
	{ theme:"claro", author:"Dojo", baseUri:"../themes/" },
	{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
	{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
	{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
];

I recommend this approach because you can compare your theme against every widget in the book.  You’ll also want to tweak your theme as your continually develop your web application.

Switching from hardcoded, static CSS files to LESS-powered stylesheets should make developing themes many times easier.  LESS saves developers from running numerous search/replace commands and allows for stylesheet creation to be more dynamic and organized.  Now that Dijit theme creation has been made exponentially easier, I look forward to seeing many more themes pop up!

Create Your Own Dijit CSS Theme with LESS CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The publish/subscribe strategy has many advantage over basic event connectivity:

• No reference to another object or element is required
• It’s not the concern of the publisher who subscribes
• As a result of not needing reference to another object or element, your code is instantly more portable

So let’s take a look at how pub/sub is used!

Publishing

The first part of pub/sub is publishing to a channel.  When publishing to a channel, you provide the channel name and arguments to be passed to any subscriber:

// dojo.publish("{channel}", [arg1, arg2, arg3]);
dojo.publish("/app/login", [username, userData]);

Arguments should be passed within an array and may be of any type.  Your channel can be any number of channels deep; the more specific the channel, the more specific your event can be.  While the slash is used as the standard channel specifier, you can use any string name you’d like.

Subscribing

dojo.publish broadcasts message but it’s dojo.subscribe that that must listen for and react to the message.  You must match the exact channel name when subscribing:

// Subscribe to the same channel, accepting each argument individually
var handle = dojo.subscribe("/app/login", function(username, userData) {
	// Now do something!
	
	
	// Unsubscribe if you want
	dojo.unsubscribe(handle);
});

Note how a handle is returned from dojo.subscribe. The Dojo Toolkit does not support wildcard channel subscription, so the following will not work:

// Wildcards don't work!
var handle = dojo.subscribe("/app/*", fn);

So how is pub/sub used internally within Dojo?  One prime example is the dojo.hash method.  dojo.hash notifies you of when the window hash changes.  You can catch the hash change event by subscribing as follows:

// This is how you respond to hash changes!
dojo.subscribe("/dojo/hashchange", function(currentHash){ 
	// Do something!
});

Now you can modify AJAX-ified portions of your application when the hash changes!

What’s great about pub/sub in any toolkit or platform is that it’s easy to both use and code the API for.  The code and idea are both very simply yet also very powerful.  If you’ve got a large application that you’d like to be flexible and decoupled from individual objects, try using pub/sub — it will relieve unnecessary complexity!

Using Pub Sub with The Dojo Toolkit is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Custom Dojo Class

dijit.form.ComboBox provides a dropDownClass parameter which allows you to customize which class should handle dropdown duties.  The default class is dijit.form._ComboBoxMenu.  We will extend dijit.form._ComboBoxMenu and for our custom duplicate-preventing class, then change the dropDownClass parameter for any instance of ComboBox where we don’t want duplicates.

The method that handles items before placing them into the dropdown is the createOptions method. createOptions cycles through the results and creates the HTML for them.  What we need to do is “intercept” the results before they can be added to the dropdown.  Let’s create our custom _UniqueComboBoxMenu class with intercept capabilities:

// Provide the class
dojo.provide("davidwalsh.form._UniqueComboBoxMenu");

// Get dependencies
dojo.require("dijit.form.ComboBox");

// Declare the class
dojo.declare("davidwalsh.form._UniqueComboBoxMenu", dijit.form._ComboBoxMenu, {
	
	createOptions: function(results, dataObject, labelFunc) {
		
		// Cycle through to find uniques
		var uniqueKeys = {}, uniqueItems = [];
		dojo.forEach(results,function(result,index) {
			var label = labelFunc(result);
			if(typeof label != "string") {
				label = label.label;
			}
			if(!uniqueKeys[label]) {
				uniqueKeys[label] = result;
				uniqueItems.push(result);
			}
		});
		
		// Update arguments arr
		arguments[0] = uniqueItems;
		
		// Call inheritance chain for this method, return result
		return this.inherited(arguments);
	}
});

Our custom createOptions method receives the options, dataObject, and labelFunc, a function which generates the item’s label text/HTML.  Before any other processing, we cycle through each item, create its label, and store the label in an object so that we know when it’s been used.  If the label hasn’t been used yet, we add the option to the uniqueItems array.

Once the uniques have been created, we push them into the original arguments array’s first position, then call this.inherited(arguments) to call the method’s original functionality.  In plain English, all we’re doing is stripping duplicates from the results array and carrying on as usual.  This technique is less evasive than directly editing the existing class and, as you can see, our custom class stays small.

Implementing the Class

Implementing the class is simple.  Since ComboBox provides the dropDownClass option, all you need to do is provide our custom class to each instance that should implement it:

var combo = new dijit.form.ComboBox({
	store: myDataStore
	dropDownClass: "davidwalsh.form._UniqueComboBoxMenu"
},"myNode");

The instance above will only return unique suggestions!

This post should highlight one aspect of Dojo that I love — extreme flexibility and the ability to create tiny classes thanks to the awesome inheritance pattern provided by dojo.declare().  Keep this class handy if you use Dijit forms and web services!

Display Unique Results within dijit.form.ComboBox is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Classy JavaScript with dojo.declare

The dojo.declare method is the foundation of class creation within the Dojo Toolkit. dojo.declare allows for multiple inheritance to allow developers to create flexible code and avoid writing the same code routines. Dojo, Dijit, and Dojox modules all use dojo.declare; in this tutorial, you’ll learn why you should too.

Dojo Charting

Presenting statistical data in a readable, eye-catching manner is important, but it can also be difficult. The dojox.chartingsystem was created to alleviate those pains by allowing developers to create dynamic, unique, and functional charts from varying sets of data. In addition, dojox.charting provides numerous themes and chart types to allow developers to display their data any way they’d like. This tutorial will show you how to create basic charts with varying data, plots, axes, and themes.

Advanced Charting with Dojo

While most developers only need basic charts, dojox.chartingis capable of highly advanced charts: charts with animations, charts that respond to changes in data, and charts that respond to events. In this tutorial, you will learn about using some these advanced capabilities within dojox.charting.

Dialogs & Tooltips

User interaction is extremely important in building responsive, interactive web applications. Web browsers provide basic methods for user interaction in the form of alerts and dialogs, but this functionality is not elegant or flexible. Dijit, the Dojo Toolkit’s UI framework, provides cross-browser, extendable, and themeable answers to what the browser’s basic functionality lack, in the form of dijit.Tooltip, dijit.Dialog, anddijit.TooltipDialog. In this tutorial, you’ll learn about each of these widgets, sample usages of each, and the ins and outs of creating them.

Dijit Editor

Dijit’s Editor widget is everything a developer looks for in aWYSIWYG editor: flexible, themeable, and above all, functional. In this tutorial, you’ll learn how to easily implement dijit.Editor (programatically and declaratively), customize its toolbars, and include Editor plugins from DojoX.

Ajax with Dojo

Ajax has become a fundamental technique for creating dynamic, usable web applications. In this tutorial, you’ll learn about the Dojo Toolkit’s Ajax communication methods, including basic XHR concepts, how to customize your Ajax calls, handling multiple types of data, and strategies for cross-domain JSON gathering (JSONP).

There are plenty more tutorials available, written by Dojo committers and contributors.  Expect more to come!

Dojo Tutorials is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.