Our first iteration involved using to list the directories, loop over all directories, and determine if there are files within each directory. If a directory is empty, we place a placeholder.txt empty file in the directory. Here is what the code looked like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<cffunction name="_addPlaceholderFileToEmptyDirs" access="private" returntype="void">
	<cfargument name="file" required="false" default="#variables.pathToCourse#\ClassFiles">
	<cfset var dir = ''>
	<cfset var subdir = ''>
	<cfdirectory action="list" directory="#pathToClassFilesDir#" name="dir" recurse="true" type="dir">
	<ol>
		<cfloop query="dir">
			<cfif not ListFindNoCase('props,prop-base,text-base,.svn', dir.name)>
				<cfdirectory action="list" directory="#dir.directory#" name="subdir">
				<cfif not subdir.recordcount>
					<cffile action="copy" source="#variables.dirWCWC#\placeHolder.txt" destination="#dir.Directory#\placeholder.txt">
					<cfoutput><li>#Directory#\placeHolder.txt.</li></cfoutput>
				</cfif>
			</cfif>
		</cfloop>
	</ol>
</cffunction>

After (not so) quickly realizing that is ignoring empty directories we moved to a second iteration. This time, we used Java to get the list of directories, and recursively copy the placeholder file into empty directories. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<cffunction name="_addPlaceholderFileToEmptyDirs" access="private" returntype="void">
	<cfargument name="dirpath" required="false" type="string" default="#variables.pathToCourse#\ClassFiles">
	<cfset var directory = CreateObject("java", "java.io.File").init(dirpath)>
	<cfset var files = directory.listFiles()>
	<cfset var i = 0>
	<cfloop from="1" to="#ArrayLen(files)#" index="i">
		<cfif files[i].isDirectory() AND ArrayLen(files[i].listFiles())>
			<cfset _addPlaceholderFileToEmptyDirs(files[i].getAbsolutePath())>
		<cfelseif files[i].isDirectory()>
			<cffile action="copy" source="#variables.dirWCWC#\placeHolder.txt" destination="#files[i].getAbsolutePath()#\placeholder.txt">
			<cfoutput><li>Placeholder added to: #files[i].getName()#</li></cfoutput>
		</cfif>
	</cfloop>
	</ol>
</cffunction>

The Dom sucks

In this next installment of the series, we are going to learn about YUI and the Dom.  Generally speaking, scripting the DOM sucks.  That might even be an understatement.  Thankfully, we have innerHTML and a variety of tools provided by the YAHOO.util.Dom singleton class as well as the YAHOO.util.Element class.

As a side note, for those of us out there that prefer the innerHTML route (not sure why you wouldn’t…) there is a good post by Steven Levithan on speeding up innerHTML by using his replaceHTML method — be sure to check this out of if you are continually using the innerHTML to inject returned HTML code from an Ajax call.

The YUI solution

The YAHOO.util.Dom class is a singleton (meaning, no need to instantiate it via new) that provides the following functionality:

• Accessing elements
• Positioning of elements (and easy access to document positioning information)
• Styling an element
• Inserting elements

Accessing elements

There are several approaches to finding and accessing elements in the Dom.  First, the YAHOO.util.Dom.get method is a convenience shortcut to the document.getElementById() function.  I like to create a shortcut function for this, coming from the Prototype world, the $() will do:

1
2
3
4
5
6
7
8

var $;
var myObj = {
	//This function is called from the onSuccess method of my YUI loader
	init: function(){
		//create helper shortcuts
		$ = YAHOO.util.Dom.get;
	}
};

In the code above, we are using our sample myObj object that has an init() method.  This method is called from our onSuccess() handler for the YUI loader from the getting started with YUI post.  Its important that the init() method is called after I have loaded the ‘dom’  module.  When specifying the components you want to load, be sure to reference the module names for the YUI loader.

You can also access elements using the YAHOO.util.Dom.getElementsByClassName() function to retrieve an array of elements based on their class name. You can also specify the type of tag (i.e. ‘div’ or ‘form’) as the second argument, and a root element as the third argument to be more explicit about the elements that are returned.  Let’s look an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var $;
var myObj = {
	//This function is called from the onSuccess method of my YUI loader
	init: function(){
		//create helper shortcuts
		$ = YAHOO.util.Dom.get;
		this.attachEvents();
	},
	attachEvents: function(){
		var Dom = YAHOO.util.Dom;
		var elements = Dom.getElementsByClassName('clickbutton');
		YAHOO.util.Event.addListener(elements, 'click', function(){
			this.activate();
		}, this, true);
	},
	activate: function(){
		window.alert('You clicked me');
	}
};

In the example code above, I have the same object with an attachEvents() method.  This is an improved version from the last post in this series.  We are now using the YAHOO.util.Dom.getElementsByClassName() function to get the array of elements on the page that have the class ‘clickbutton’.  I can then pass this array of elements into the YAHOO.util.Event.addListener() function.  Here we simply call the activate() method to alert the user that they have clicked the button.

Positioning elements

The YUI library also enables us to get and set (regardless of the position CSS attribute set on the element) the positioning of elements.  These are simple get and set functions that require the element object or element’s id string as the first argument.  These functions include: getX(), getY(), getXY(), setX(), setY(), and setXY().

Styling elements

YUI offers a quick and easy solution for adding and removing classes on elements.   This can be accomplished using either the Element class, or the DOM singleton.  Using the DOM singleton is more efficient, unless you have already have an instance of the Element.  To add a class to an element using YUI, simply:

1

YAHOO.util.Dom.addClass('elementid', 'myclass');

You can remove a class from an element using:

1

YAHOO.util.Dom.removeClass('elementid', 'myclass');

And, you can also test if the element already has a class applied to it:

1
2
3

if (!YAHOO.util.Dom.hasClass('elementid', 'myclass')){
	YAHOO.util.Dom.addClass('elementid', 'myclass');
}

In conclusion, the YUI library give you a simply and intuitive interface to programming in the land of the DOM; and makes it a lot less painful. In the next post, we’ll show how the Selector class enables you to access elements in the DOM via a XPath syntax.

• Encapsulate what varies.
• Program to the interface, not the implementation.
• Favor composition over inheritance.
• Strive for loosely coupled designs between objects that interact.

We also learned about the Open-Closed Principle; and how following these guidelines can make for better code that is more adaptable to change.

The examples used are politely borrowed from Head First Design Patterns.  I had intended to create my own examples, but ran out of time and figured that their examples are great for showing the concepts.

To begin with, we talked about how we can use the Strategy Pattern to encapsulate the “HAS-A” behaviors via composition.  Following that, the Decorator Pattern was shown to highlight the Open-Closed Principle and how we can program to an interface (or super-class) instead of the implementation (or concrete class).  Lastly, we touched on the factory “pattern” (or programming idiom, you decide) and how we can further encapsulate our dependencies into a Simple Factory.

The next part in our CF OOP series is Inversion of Control, or in other words, using ColdSpring.

Here are the links to the slides and resources used in the presentation:

• Introduction to Design Patterns Presentation
• Example files: http://github.com/blove/cf-design-patterns/tree/master
• Argo UML

1
2
3
4
5
6

<cfset urlToShorten = 'http://blog.brianflove.com/articles/2009/01/23/getting-started-with-yui/'>
 
<cfhttp url="http://www.tinyurl.com/api-create.php?url=#urlencodedformat(urlToShorten)#" method="GET" result="response">
<cfif ucase(trim(response.StatusCode)) eq '200 OK'>
	<cfset tinyUrl = response.FileContent>
</cfif>

And that’s all there is to it

Now, let me provide a little background with what I believe are the Pros and Cons of the YUI library.

Pros

• Fully documented, with a great API browser
• Very consistent and reliable
• Ease of widget interoperability
• Supported in several “A-Grade” browsers
• Unit testing framework

Cons

• Heavy page weight
• Verbose code (lengthy)
• Very few utility or helper functions/methods

Overall, I think that if you evaluate the yui library in the context of other libraries that I have used such as Prototype, jQuery, and Ext the 2.x generation of yui is lacking the coolness that the other libraries bring to the table.  For example, implementing a sortable list in Prototype is super simple — a one liner.  The equivalent code in YUI is several lines long (~100) to get similar behavior.  Yui also lacks the use of chaining methods together like jQuery provides.  Please don’t think I am bashing the yui library, its a fantastic javascript library that is very powerful, and the 3.x generation is looking like a nice improvement.

So, why use YUI?  Because you can easily create a great looking web application that works seamlessly without needing additional JS libraries and plugins.  Almost all the functionality you are looking to include in your next generation web application is right there.  No need to go looking on Google for a Grid plugin, or a calendar widget — everything is included, and works together beautifully.

Lets see some code

OK, lets get started with the YUI library now that we have a little background.

This post will get you started with the YUI loader (to get the necessary JS files to the client) and the YAHOO.util.Event class.

YUI Loader

If you plan on creating an application that will depend on several of the YUI components, then the loader will simplify your life.  The YUI loader handles dependencies, rolling-up the JS into a single file, and compression.  Here is an exammple of the YUI loader:

1
2
3
4
5
6
7
8
9
10
11
12
13

var loader = new YAHOO.util.YUILoader({
	base: 'http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/',
	require: ['yahoo','dom','event','logger','animation','autocomplete','button','container','datasource','datatable','element','json','selector','paginator','tabview'],
	combine: true,
	timeout:10000,
	loadOptional:true,
	onSuccess: function(){
		//create namespace
		YAHOO.namespace('webbiz');
		YAHOO.lang.augmentObject(YAHOO.webbiz,webBizObj);
		YAHOO.webbiz.init();
	}
});

Above, I am specifying the YUI components to load from the Google Ajax APIs service. You can see that the array of components is not order dependent, remember that the loader will handle all of that for us. The onSuccess handler is the function you want to call after the necessary component have been loaded.  Here, I create a custom namespace for my application, and then append (think of Objext.extend in Prototype) an existing object into this namespace.

YAHOO.util.Event

OK, so we have loaded YUI into the DOM, and we are ready to get started.  One of the first components that you need to understand is the Event class in YUI.  The event class abstracts the browser event implementations away, so you can rely on your events working across a majority of the browsers out there.  So, what does this event class do?  Here’s a quick rundown:

• Attaching events to one or more elements at one time
• Removing events from elements
• Scope correction
• Automatic cleanup
• Knowing when an element is available in the DOM
• Custom events

YAHOO.util.Event.addListener or YAHOO.util.on

The addListener method of the Event class allows us to append an event handler to an element, a critical component of keeping your javascript out of the presentation layer — unobtrusive JS.  Here is a quick example:

1
2
3

YAHOO.util.Event.addListener('myelement', 'click', function(){
	this.style.display = 'none'
});

The first argument is the element object, or the element ID. The second argument is the event type, which can include event types such as change, mouseover, mouseout, keyup, etc… The third argument is the function to call.

Scope declaration

The fourth argument is not used in this simple example above, but can be used to pass an object as the second argument to the callback function (the event object is the first argument). You can also use the fourth argument to specify the scope object, and set the fifth argument to true. Here is an example of ensuring the this scope within the callback function is set properly:

1
2
3
4
5
6

function(){
	this.name = 'Web Biz';
	YAHOO.util.Event.addListener('myelement', 'click', function(){
		window.alert(this.name);
	}, this, true);
}

Notice that the this scope in the example above no longer is the event’s currentTarget but the this scope of the outer function. When we click on the element ‘myelement’, we will get a JavaScript alert with the contents ‘Web Biz’.

Removing events
This one is quite simple, its just a matter of using YAHOO.util.Event.removeListener(), here is an example of removing all ‘click’ events from the element ‘myelement’:

1

YAHOO.util.Event.removeListener('myelement', 'click');

Handler attachment deferral

This a neat feature of the YUI library that I don’t think exists in very many other libraries. If you call YAHOO.util.Event.on(’myelement’, …) and the element with an ID of ‘myelement’ doesn’t yet exist in the DOM, then it will periodically check for its existence, and once found will add the event handler. Note, this will not work if you pass the first argument as an element object reference instead of the string of the element’s ID.

Knowing when an element exists

This section goes along with the last one. YUI is great at knowing the state of the DOM, and allows you to prep your events before the element exists (think of declaring your event handlers before the Ajax call has returned and injected the html into the DOM).

There are several method included in YUI, including YAHOO.util.Event.onDomReady() which fires before window.onload but after the DOM is loaded (images and other assets might still be loading).  YAHOO.util.Event.onContentReady() fires when an element and it’s nextSibling is also loaded.  The most useful one, IMHO, is the YAHOO.util.Event.onAvailable() method.  Here is a quick example of this method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var myObj = {
	getStuff: function(){
		this.attachEvents();
		YAHOO.util.Connect.asyncRequest('POST', 'test.cfm', {
			success: function(t){
				YAHOO.util.Dom.get('myelement').innerHTML = YAHOO.lang.trim(t.responseText);
			},
			failure: function(){
				window.alert('Oops, something went wrong. Give it another try.');
			},
			scope: this
		});
	},
 
	attachEvents: function(){
		YAHOO.util.Event.onAvailable('mybutton', function(){
			YAHOO.util.Event.addListener('mybutton', 'click', function(){
				this.activate();
			}, this, true);
		}, this, true);
	},
 
	activate: function(){
		window.alert('You clicked the button');
	}
};
myObj.getStuff();

Here, I have encapsulated some methods into an object myObj, and I am utilizing the scope correction features of the Event class to keep the this scope within my methods to the myObj object reference.  Notice that within the getStuff() method, I am calling the attachEvents() method before calling my test.cfm file via Ajax.  The ‘mybutton’ element doesn’t yet exist in the DOM, but I can be sure that once it does, it will have the event handler on the click event that calls the activate() method.

Hopefully this posting will give you a glimpse into the world of YUI, and encourage you to check it out and learn more about it.  I hope to continue this with a series of posting about using YUI.