Evolution of your engineering skill is also a vital trait in this world, which means that as a developer increases his knowledge of good practices and proper methods, sometimes he must shirk his previous assertions about the world as he previously knew it. And today I’m shirking a staple of the front end as all web users know it: The Grid (DataTable) Component.

Of course, I’ve written a few articles in the past about the YUI DataTable, during my long love affair with Yahoo’s User Interface library. Another popular one is jQuery’s TableSorter. Then there’s the Dojo Grid, a component inherited from TurboAjax. ExtJS has a variety of nice examples as well for their Ext 2.0 Grid.

And after using these Grids and DataTables, I certainly respect the programming that went into developing these components. But let’s take a step back for a second. Why do the users need the bells and whistles in these components? Are they worth the extra load time and complexity they add to the interface?

All we’re doing here is putting a nice coat of paint on a <table> tag. Sure, it might have some nice ancillary features like Ajax Data Loading, but those don’t really matter – they are things that can be easily performed with some good Ajax and DOM insert utility functions. In fact, most of the core features included in these components could be described as feature creep, and not beneficial to the end user at all. Feature creep contributes to code bloat, which means the user is downloading bytes to their web browser that they don’t need, which can hamper performance. Libraries usually have online examples of their components, and the include sizes are seen below. (Gzip compression not considered)

The JavaScript include sizes listed above are directly proportional to the feature set that the components provide, and should give you an idea of the overhead involved with using them. Do we need 545.5 KB of features coming down the pipe to give our users an extra bell, or an extra whistle? Let’s analyze the features to rationalize their usage, and remove items from the feature set.

• Sorting
• Modifying column order and display
• Resizing columns
• Editing of row data directly on the grid itself
• Scrolling
• Pagination

Sorting

Data should be used in the context of its usefulness. You have a list of messages in your e-mail inbox. What’s the most useful context for this list? In order of date received. The default sort order provided by the application, to facilitate proper use of the application. Is comparing the rows in the grid by any other method as useful? Does the user need to see the list of messages ordered alphabetically by subject? In these cases where the user is in need of a specific message, searching and filtering is more useful than sorting. The default sort is useful, but allowing the user to resort on the client, in most cases, is not as useful as other methods of finding a row.

Modifying column order and display

The same argument can be made for any of the other methods of customization provided to the end user. Does the user need to reorder or hide columns? The context provided by the application should be sufficient to use the applications data in the way it was intended. Don’t overcomplicate your user interface with needless features or a deluge of useless data. Provide succinct, appropriate data, and the user needn’t reorder or change the interface.

Resizing columns

The default HTML <table> tag expands to fit the data inside of its cells. Even when you set the width of the table explicitly, the cells adjust themselves accordingly to fit the data. This should be the behavior of your table. You needn’t monkey around with widths, the browser is smart enough to do it for you. You can even customize a cell to wrap its text to multiple lines with CSS, if need be.

Editing of row data directly on the grid itself

If you’re providing an Excel spreadsheet interface for the end user to customize your data, you haven’t designed your interface correctly. Rethink how the user needs to interact with the data you’ve provided, and give them a better, simpler way to edit the data.

Scrolling

Everyone knows that internal scrollbars on a page are evil. I don’t even like scrollbars on textareas, to be honest. Previously, I had worked and reworked the YUI DataTable to handle horizontal scrolling. Looking back on this, it was a mistake. There are better ways to handle lots of data in a table, without the heavy mouse interaction and scanning that scrolling require. Which brings me to my next point.

Pagination

This is the one exception to the feature set cutting board. This is the one feature that’s is a requirement, when the data set has too many records to fit on a single page.

Keep these in mind, and look at the feature set provided by a few sites using tabular data centric interfaces that know a thing or two about interface design:

So, what should we include?

A simple CSS class to style your table is sufficient, with links to paginate the table (properly) and/or a hover for row selection if needed. You’re looking at 10-20 lines of jQuery code, maximum, and a few CSS declarations. In lieu of sorting, of course, you’ll need to program in a mechanism for searching and filtering as well. But really, the difficulty with programming this component is knowing what to leave out.

Here we are again. I just love those CSS Selectors. If you haven’t read Part One of the series linked above, I would encourage it to get a little background on why we’re attempting this approach.

Download the appropriate files:

Get the easy ALL-IN-ONE file: Y2.js (31 KB original source) OR Y2-p.js (11 KB minimized)

Get the files separately (if you want to use a custom selector library, or have already included DomQuery or jQuery): Y2-solo.js (9 KB original source) OR Y2-solo-p.js (4 KB minimized)

Also, first you’ll need to get Jack’s nice DomQuery class.

Download: Jack Slocum’s DomQuery Standalone File (24 KB) 1.0 Alpha 3 – Rev 4
Download: Jack Slocum’s DomQuery Standalone File Packed (7 KB) 1.0 Alpha 3 – Rev 4

You can use the jDomQuery standalone, or any jQuery version, (instead of DomQuery) linked in the previous article, but there is an unresolved bug with the getRegion method since jQuery doesn’t return actual Array’s. But if you’re not using that method, have at it.

What can I do with it?

I have not included ALL functions in this class, only the ones that take nodes in as arguments. If you use these functions, you are encouraged to use the unmodified versions contained in YAHOO.util.Dom. Functions not included here: getClientHeight, getClientWidth, getDocumentHeight, getDocumentScrollLeft, getDocumentScrollTop, getDocumentWidth, getViewportHeight, getViewportWidth.

Let’s see some documentation on this mother (if you’re wondering what the original functions do, see the original documentation).

// this is the test context node we're going to pass in
var context = YAHOO.util.Dom.get('context');

addClass

Adds a CSS class to first matching node.

// returns void
Y2.util.Dom.addClass( 'div div:last', 'myClass');
Y2.util.Dom.addClass('div div:last', context, 'myClassContext');

addClassAll

Adds a CSS class to all matching nodes.

// returns void
Y2.util.Dom.addClassAll( 'div div:last', 'myClass');
Y2.util.Dom.addClassAll('div div:last', context, 'myClassContext');

hasClass

Tests the first result node returned to see if it has a CSS class.

// returns Booleans.
Y2.util.Dom.hasClass('div div:last', 'myClass');
Y2.util.Dom.hasClass('div div:last', context, 'myClassContext');

hasClassAll

Tests all matching nodes to see if they have a CSS class.

// returns Array of Booleans.
Y2.util.Dom.hasClassAll('div div:last', 'myClass');
Y2.util.Dom.hasClassAll('div div:last', context, 'myClassContext');

removeClass

Removes a CSS class from first matched node.

// returns Boolean (misdocumented on the YAHOO.util.Dom page)
Y2.util.Dom.removeClass('div.third','third');
Y2.util.Dom.removeClass('div.third', context,'third');

removeClassAll

Removes a CSS class from all matched nodes.

// returns Array of Booleans (misdocumented on the YAHOO.util.Dom page)
Y2.util.Dom.removeClassAll('div.third','third');
Y2.util.Dom.removeClassAll('div.third', context,'third');

replaceClass

Replaces a CSS class on first matched node with a new CSS class, or adds it if the old CSS class doesn’t exist.

// returns Boolean (misdocumented on the YAHOO.util.Dom page)
Y2.util.Dom.replaceClass('div.fourth','fourth','third');
Y2.util.Dom.replaceClass('div.fourth', context,'fourth','third');

replaceClassAll

Replaces a CSS class on all matched nodes with a new CSS class, or adds it if the old CSS class doesn’t exist.

// returns Array of Booleans (misdocumented on the YAHOO.util.Dom page)
Y2.util.Dom.replaceClassAll('div.fourth','fourth','third');
Y2.util.Dom.replaceClassAll('div.fourth', context,'fourth','third');

get

Get first matched node.

// returns HTMLElement
Y2.util.Dom.get('div b');
Y2.util.Dom.get('div b', context);

getAll

Get all matched nodes.

// returns Array of HTMLElement
Y2.util.Dom.getAll('div b');
Y2.util.Dom.getAll('div b', context);

batch

Executes a function against first matched node.

// returns single return value from the function
Y2.util.Dom.batch('div.second b', function(el){return el;});
Y2.util.Dom.batch('div b', context, function(el){return el;});

batchAll

Executes a function against all matched nodes.

// returns Array of return values from the function
Y2.util.Dom.batchAll('div.second b', function(el){return el;});
Y2.util.Dom.batchAll('div b', context, function(el){return el;});

generateId

Generates and assigns a unique ID attribute if not present on first matched element.

// returns String (new ID attribute)
Y2.util.Dom.generateId('div.first');
Y2.util.Dom.generateId('div.third', context);

generateIdAll

Generates and assigns a unique ID attribute if not present on matched elements.

// returns Array of String (new ID attributes)
Y2.util.Dom.generateIdAll('div.first');
Y2.util.Dom.generateIdAll('div.third', context);

getChildren

Gets all HTMLElement children of the first matched node (does not include text nodes or whitespace)

// returns Array of HTMLElement
Y2.util.Dom.getChildren('div.second');
Y2.util.Dom.getChildren('div.second', context);

getChildrenBy

Returns all HTMLElement children of the first matched node that pass a Boolean function test. (does not include text nodes or whitespace)

// returns Array of HTMLElement
Y2.util.Dom.getChildrenBy('div.second', function(el){return el.getAttribute('id')=='theMiddleB';});
Y2.util.Dom.getChildrenBy('div.second', context, function(el){return el.getAttribute('id')=='theMiddleB';});

getAncestorBy

Returns the first HTMLElement ancestor of the first matched node that passes a Boolean function test. (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getAncestorBy('div.third', function(el){return el.getAttribute('id')=='context';});
Y2.util.Dom.getAncestorBy('div.third', context, function(el){return el.getAttribute('id')=='context';});

getAncestorByClassName

Returns the first HTMLElement ancestor of the first matched node that has a CSS Class. (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getAncestorByClassName('div.third', 'contextClass');
Y2.util.Dom.getAncestorByClassName('div.third', context, 'contextClass');

getAncestorByClassName

Returns the first HTMLElement ancestor of the first matched node that is a certain tag (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getAncestorByTagName('div.third', 'div');
Y2.util.Dom.getAncestorByTagName('div.third', context, 'div');

getFirstChild

Returns the first HTMLElement child of the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getFirstChild('div.second');
Y2.util.Dom.getFirstChild('div.second', context);

getFirstChildBy

Returns the first HTMLElement child that passes a boolean function test from the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getFirstChildBy('div.second', function(el){ return el.getAttribute('id')=='theMiddleB';});
Y2.util.Dom.getFirstChildBy('div.second', context, function(el){ return el.getAttribute('id')=='theMiddleB';});

getLastChild

Returns the last HTMLElement child of the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getLastChild('div.second');
Y2.util.Dom.getLastChild('div.second', context);

getLastChildBy

Returns the last HTMLElement child that passes a boolean function test from the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getLastChildBy('div.second', function(el){ return el.getAttribute('id')=='theMiddleB';});
Y2.util.Dom.getLastChildBy('div.second', context, function(el){ return el.getAttribute('id')=='theMiddleB';});

getNextSibling

Returns the next HTMLElement sibling of the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getNextSibling('div.second');
Y2.util.Dom.getNextSibling('div.second', context);

getNextSiblingBy

Returns the next HTMLElement sibling that passes a boolean function test from the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getNextSiblingBy('div.second',function(el){ return el.getAttribute('class')=='third';});
Y2.util.Dom.getNextSiblingBy('div.second', context, function(el){ return YAHOO.util.Dom.hasClass(el,'third');});

getPreviousSibling

Returns the previous HTMLElement sibling of the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getPreviousSibling('div.second');
Y2.util.Dom.getPreviousSibling('div.second', context);

getPreviousSiblingBy

Returns the previous HTMLElement sibling that passes a boolean function test from the first matched node (does not include text nodes or whitespace)

// returns HTMLElement
Y2.util.Dom.getPreviousSiblingBy('div.second',function(el){ return el.getAttribute('class')=='third';});
Y2.util.Dom.getPreviousSiblingBy('div.second', context, function(el){ return YAHOO.util.Dom.hasClass(el,'third');});

getRegion

Gets the Region containing the first matched element.

// returns <a href="http://developer.yahoo.com/yui/docs/YAHOO.util.Region.html">YAHOO.util.Region</a>
Y2.util.Dom.getRegion('div.second');
Y2.util.Dom.getRegion('div.second', context);

getRegionAll

Gets all Regions containing all matched elements.

// returns Array of <a href="http://developer.yahoo.com/yui/docs/YAHOO.util.Region.html">YAHOO.util.Region</a>
Y2.util.Dom.getRegionAll('div.myClass');
Y2.util.Dom.getRegionAll('div.myClass', context);

setStyle

Sets the style for the first matched node

// returns void
Y2.util.Dom.setStyle('div', 'border', '1px');
Y2.util.Dom.setStyle('div', context, 'border', '10px');

setStyleAll

Sets style for all matched nodes

// returns void
Y2.util.Dom.setStyleAll('div', 'border', '1px');
Y2.util.Dom.setStyleAll('div', context, 'border', '10px');

getStyle

Gets a specific style property from the first matched node

// returns String of specific style property
Y2.util.Dom.getStyle('div', 'border');
Y2.util.Dom.getStyle('div', context, 'border');

getStyleAll

Gets a specific style property from all matched nodes

// returns Array of Strings of specific style property
Y2.util.Dom.getStyleAll('div', 'border');
Y2.util.Dom.getStyleAll('div', context, 'border');

setX, setY, setXY

Sets the horizontal placement (X), vertical placement (Y), or both (XY) of the first matched element

// returns void
Y2.util.Dom.setX('div.second', 60);
Y2.util.Dom.setX('div.second', context, 60);
 
Y2.util.Dom.setY('div.second', 60);
Y2.util.Dom.setY('div.second', context, 60);
 
Y2.util.Dom.setXY('div.second', [120,120]);
Y2.util.Dom.setXY('div.second', context, [120,120]);

setXAll, setYAll, setXYAll

Sets the horizontal placement (X), vertical placement (Y), or both (XY) of all matched elements

// returns void
Y2.util.Dom.setXAll('div.second', 60);
Y2.util.Dom.setXAll('div.second', context, 60);
 
Y2.util.Dom.setYAll('div.second', 60);
Y2.util.Dom.setYAll('div.second', context, 60);
 
Y2.util.Dom.setXYAll('div.second', [120,120]);
Y2.util.Dom.setXYAll('div.second', context, [120,120]);

getX, getY, getXY

Gets the horizontal placement (X), vertical placement (Y), or both (XY) of the first matched element

// returns Integer
Y2.util.Dom.getX('div.second');
Y2.util.Dom.getX('div.second', context);
 
Y2.util.Dom.getY('div.second');
Y2.util.Dom.getY('div.second', context);
 
Y2.util.Dom.getXY('div.second');
Y2.util.Dom.getXY('div.second', context);

getXAll, getYAll, getXYAll

Gets the horizontal placement (X), vertical placement (Y), or both (XY) of all matched elements

// returns Array of Integers
Y2.util.Dom.getXAll('div.second');
Y2.util.Dom.getXAll('div.second', context);
 
Y2.util.Dom.getYAll('div.second');
Y2.util.Dom.getYAll('div.second', context);
 
Y2.util.Dom.getXYAll('div.second');
Y2.util.Dom.getXYAll('div.second', context);

inDocument

Find out whether the first matched element is in the current document

// returns Boolean
Y2.util.Dom.inDocument('div.second');
Y2.util.Dom.inDocument('div.second', context);

insertAfter

Take the first matched node of the first selector and insert after the first matched node of the second selector

// Note that this function handles context nodes on the first or second selectors, both, or none.
// returns the moved HTMLElement
Y2.util.Dom.insertAfter('div.third','div.fourth');
Y2.util.Dom.insertAfter('div.third', context,'div.fourth');
Y2.util.Dom.insertAfter('div.third', 'div.fourth', context);
Y2.util.Dom.insertAfter('div.third', context,'div.fourth', context);

insertBefore

Take the first matched node of the first selector and insert before the first matched node of the second selector

// Note that this function handles context nodes on the first or second selectors, both, or none.
// returns the moved HTMLElement
Y2.util.Dom.insertBefore('div.third','div.fourth');
Y2.util.Dom.insertBefore('div.third', context,'div.fourth');
Y2.util.Dom.insertBefore('div.third','div.fourth', context);
Y2.util.Dom.insertBefore('div.third', context,'div.fourth', context);

isAncestor

Find out whether the first matched node of the first selector is an ancestor of the first matched node of the second selector.

// Note that this function handles context nodes on the first or second selectors, both, or none.
// return Boolean
Y2.util.Dom.isAncestor('div.second','b#theFirstB');
Y2.util.Dom.isAncestor('div.second', context,'b#theFirstB');
Y2.util.Dom.isAncestor('div.second','b#theFirstB', context);
Y2.util.Dom.isAncestor('div.second', context,'b#theFirstB', context);

(Documentation is a bitch!)

Additional Information

• Run the test document. (Might convert this to YUI Test framework if there is enough interest in this extension)

So, let’s plug one of them into YUI! Let’s get some of that power under the hood. And let’s make it work identically to how we write our code for YUI currently, instead of changing the coding style (a la Dustin Diaz’s great extension to YUI called DED|Chain).

How are we going to do this? Let’s dive into the shallow end of the pool.

The include order of our javascript files is going to be important. So, first we’ll do the YUI library core file (either yahoo-dom-event.js or utilities.js depending on your need for animation). Next, we need to include a CSS Selector DOM Querying class. For this proof of concept, I’ve provided examples for my two favorites, the jQuery engine and Jack Slocum’s DomQuery. These files are released under the MIT license, so make sure that complies with your project. It’s pretty liberal, so you shouldn’t have any problems. If you find these querying libraries useful, please donate to these projects!

For code simplicity, I’ve added a one liner to Jack’s DomQuery to make it work as a standalone file.

if( typeof Ext == 'undefined' ) var Ext = function(){};

If you want to read more about DomQuery, you can go to Jack’s site all about syntax and benchmarks.

Download: Jack Slocum’s DomQuery Standalone File (24 KB) 1.0 Alpha 3 – Rev 4
Download: Jack Slocum’s DomQuery Standalone File Packed (7 KB) 1.0 Alpha 3 – Rev 4

If you want to use jQuery’s selector engine, I’ve stripped out the functions unnecessary to the selector engine in the 1.1.3.1 release and packaged it up as jDomQuery. There are differences between these two package’s syntax, so make sure you keep that in mind, especially when looking at the pseudos, like :gt() and :lt() for example.

Download: jDomQuery Standalone File (23 KB) 1.1.3.1
Download: jDomQuery Standalone File Packed (10 KB) 1.1.3.1

If you want to read about jQuery syntax, go over to their documentation. My current preference is the jQuery syntax, given that it works with poorly implemented JSF ID attributes. But that’s a different argument.

If you want to use the full jQuery library, that should work too, but if you want to do that, you might just want to switch to using jQuery at that point (dare I say it).

Next, we’ll extend the YAHOO.util.Dom class into a new Y2 namespace. This will map all of the functions from YAHOO.util.Dom into a new CSS Selector extension.

Download: Y2.util.Dom (2 KB)

(pack at your own leisure, you can do it online at Dean Edward’s Packer)

Putting It All Together

<html>
	<body>
		<div>
			<div class="first">
				<span></span>
			</div>
			<div class="second">
				<b></b>
			</div>
		</div>
		<script type="text/javascript" src="/Lib/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="jdomquery-1.1.3.1-packer.js"></script>
		<!-- <script type="text/javascript" src="DomQuery-packer.js"> -->
		<script type="text/javascript" src="Dom.js"></script>
		<script type="text/javascript">
		Y2.util.Dom.addClass( 'div div:last', 'myClass' )
		Y2.util.Dom.hasClass( 'div div:last', 'myClass' ); // returns true
		var b = Y2.util.Dom.get( 'div div:last b' );
		Y2.util.Dom.addClass( b, 'myOtherClass' );
		</script>
	</body>
</html>

One important thing to note is that when using the CSS Selector syntax, when only one node is selected, functions will return a scalar instead of an array. So if you’re expecting to select multiple nodes in your selector query and only one node results, make sure your code handling the result is prepared for such an instance.

Have fun!

or maybe the same thing using Facelets:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<f:view>
<form jsfc="h:form" id="myForm">
<input type="text" jsfc="h:inputText" id="myText"/>
</form>
</f:view>
</body>
</html>


These will both output the following result:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<form id="myForm">
<input type="text" id="myForm:myText"/>
</form>
</body>
</html>


Notice how the resulting text field has an ID attribute with the parent id prepended on. Now the real question is, how do we select this result node using the various JavaScript frameworks that are available to us?

Works, but we don’t care: Raw JavaScript or any GetById Function

Obviously using document.getElementById( 'myForm:myText' ); will function correctly. As will any framework that has a similar “GetById” function (YAHOO.util.Dom.get, or $ in Prototype, etc) What is more interesting to us is the behavior using the various CSS selector packages included with each JavaScript library.

Does not work: DomQuery in Ext 1.1 Beta 2

Ext.query( '#myForm:myText' );
Ext.query( '#myForm\:myText' );

These two tests will throw the error Ext.DomQuery.pseudos[name] is not a function, which obviously means that myText is not a pseudo class like :first or :last.

Ext.query( '#myForm\\:myText' );

Throws the error: Error parsing selector, parsing failed at "\:myText"

Works: jQuery 1.1.3

jQuery( '#myForm\\:myText' );

As of version 1.1.3 (the latest of this writing), they have added support for the colon in ID selection when escaped with a double backslash. Versions older than 1.1.3 will not function properly. This is not yet in the documentation but can be viewed in the Escape selectors section of a blog post.

Does not Work: Prototype 1.5.1.1

$$( '#myForm:myText' );
$$( '#myForm\:myText' );

Returns the form instead of the input element and treats myText as a pseudo class.

$$( '#myForm\\:myText' );

Interprets as XPATH selectors (\\ means anywhere in the document), using myText as a pseudo selector now, so it returns ALL nodes in the document.

Does not Work: Dojo query 0.9.0 Beta

dojo.query( '#myForm:myText' );
dojo.query( '#myForm\:myText' );
dojo.query( '#myForm\\:myText' );

It’s becoming mind numbingly obvious that if the framework doesn’t specifically say that you can escape selectors, it’s not going to let you do so. In the first two tests, Dojo performs the same as Prototype. In the double backslash test however, Dojo returns no result nodes.

Does not Work: Mootools 1.11

$$( '#myForm:myText' );
$$( '#myForm\:myText' );
$$( '#myForm\\:myText' );

All throw the error The expression is not a legal expression." code: "51.

There you have it folks. jQuery is the JavaScript library of choice for the discerning JSF applications developer. Kudos to you if you’re already using it.

The DOM. Arch-nemesis of web developers attempting to support the ultimately tiny (I think it’s down to about 5 or 8% now?) sliver of browser market share that Internet Explorer currently entails. Let’s make it easier on ourselves and make a little package to do it for us. Run a function, pass in an argument with a description of the DOM node(s) we wish to create, and have the package auto-correct any bugs we would have encountered during manual creation, and maybe even have it inserted or appended for us.

But wait, why are we doing this when there are literally 80 billion other DOM element creation classes already out there? It’s all about syntax. The existing packages are incredibly verbose, focusing too much on a complex object structure to describe the nodes, in some cases even having separate objects for attributes inside a single node. Why not use the syntax we’ve already come to love in the various DOM query libraries that are available? Why not use DOMDom? Let’s see a few examples:

Single Node String

'div'

<div></div>

Single Node String with ID and Classes

'div#id1.class1.class2'

<div id="id1" class="class1 class2"></div>

Single Node String for a Form Element

'input[name="myTextBox",type="text",maxlength="5"]'

<input name="myTextBox" maxlength="5" type="text"/>

Single Node String with Style Syntax

'div{height=80px,color=#f90,border=1px solid #000}'

<div style="border: 1px solid #000; height: 80px; color: #f90"></div>

Complex Single Node String with ID, multiple classes, Style, and Namespaced Attribute)

'div#id1.class1.class2[style="width:60px;color:#f90",@class="class4",@att="true",@namespace:att="false"]'

<div id="id1" att="true" namespace:att="false" class="class1 class2 class4" style="width: 60px; color: #f90;"></div>

Multiple Node String: Linear (Parents with one Child)

'div span div'

<div>
     <span>
          <div></div>
     </span>
</div>

Multiple Node String: Non-Linear (Parent with more than one Child)

{ 'div': [ 'span', 'span' ] }

<div>
     <span></span>
     <span></span>
</div>

How Does It Work?

By default, it’s set up to do HTML Fragments (innerHTML) because they are much speedier than the manual DOM element creation (createElement). But if you desire, you can toggle a boolean in the code and it will switch back to DOM element creation. When in DOM element creation mode, it will account for the following browser bugs:

• (IE6) Standardized for attribute representation (pointer to htmlFor)
• (IE6) Standardized case for accesskey, usemap, maxlength, and frameborder attributes.
• (IE6) Standardized checked attribute for radio and checkboxes.
• (IE6) Special consideration for dynamic handling of name and type attributes (on form elements).
• (Firefox) Works with whitespace that is treated as a node.

Syntax

You should already be able to tell how to create a node from the examples above. Here are some more things you might not have guessed:

Creating a node with an id

'div#myId'

Creating a node with CSS classes

'div.class1.class2'

Creating two nodes at the same level

[ 'div', 'div' ]

Creating a node with two children

{ 'div': [ 'div', 'div' ] }

You can mix the {} and [] syntax wherever you like, but if you want a node to have non-linear children, you have to use the {} object notation.

Creating a text node (start the node declaration with a #, you can change this to another non-conflicting character in the code if you like)

'#Any Text Here'

Creating a node with attributes (the @ is optional)

'div[class="class3",style="width:60px;color:#f90",@att="true",@namespace:att="false"]'

Creating a node with a Style Shortcut (mixing with a style attribute is handled properly)

'div{color=#f90,border=1px solid #000}[style="height:80px;background:#fff"]'

A few notes on attributes. Quotes are required on attributes (single or double but be consistent), but are not required in the style shortcut declaration. Quotes are not allowed to be nested inside of attributes (a single quote cannot be inside of a double quote and vice versa).

And of course, all of the above can be mixed together

'div#myId.class1.class2{color=#f90}[customAttr="true",@customAttr2="false"] div#child1 div#child2'

Usage

Appending at the end of a parent’s children:

DOMDom.append( 'div', yourParentNode );

Replacing the children of a parent:

DOMDom.replace( 'div', yourParentNode );

Unshifting (inserting at the beginning of a parent’s children):

DOMDom.unshift( 'div', yourParentNode );

Inserting before a certain integer index of a parent’s children:

DOMDom.insert( 'div', yourParentNode, 2 ); // must have at least 3 children, the index is 0 based, if index is null with unshift by default

Templates

Use <$var> to indicate a variable, in this example <$test>


// "Compile" the template
var str = DOMDom.compile( { 'div.test span': '#Test <$test>' } );

// Use your template in some context, notice the test variable being set.
for( var j = 0; j < 1000; j++ )
{
// knows we're using a compiled template since we're passing in variables as a third argument.
DOMDom.append( str, d, { test: j } );
}


Benchmarks

(If you have Firebug open, make sure it's not on the HTML tab, this will slow down the benchmark significantly)

Most of my work here has been inspired by the DomQuery and DomHelper classes written by JavaScript rock star Jack Slocum (the guy's initials are J.S. for God's sake), so I modeled my benchmark after his benchmark hosted on his website to test the DomHelper class. I'm running the same nodes he's testing on his website, so the results should be comparable. You can test my benchmark for DOMDom here. Here are some results, reporting the average of 3 results with the format of an uncompiled element first and the compiled template in square brackets.

DOMDom Results

Internet Explorer 6: 666 ms [328 ms]
Firefox 2.0.0.4: 1880 ms [666 ms]
Safari 3.0.2 [Windows]: 546 ms [151 ms]
Opera 9.21: 343 ms [140 ms]

Comparative numbers from Jack Slocum's DomHelper

Internet Explorer 6: 2458 ms [677 ms]
Firefox 2.0.0.4: 672 ms [458 ms]
Safari 3.0.2 [Windows]: 291 ms [119 ms]
Opera 9.21: 370 ms [166 ms]

The thing to take away from this is the question of why Satan is haunting my benchmarks? Two 666 averages? Anyway, DOMDom is quite a bit faster in the most popular browser, Internet Explorer, although I haven't tested it on IE7 yet. In Firefox, the opposite is true, with DomHelper taking the lead. Opera is comparable and Safari is faster in DomHelper as well. You can run your own tests using the links above.

Dependencies

This library was built to work with Yahoo User Interface (YUI), but could be trivially ported to another library by changing the function dependencies listed in the ADAPTER variable in the code.

var ADAPTER = {
	setStyle: YAHOO.util.Dom.setStyle,
	addClass: YAHOO.util.Dom.addClass,
	isString: YAHOO.lang.isString,
	isArray: YAHOO.lang.isArray,
	isNumber: YAHOO.lang.isNumber,
	isObject: YAHOO.lang.isObject,
	get: YAHOO.util.Dom.get
}; // to port, change these references

If you're still reading this encyclopedia, here are some links:

• DOWNLOAD DOMDom
• DOWNLOAD DOMDom Minimized with JSMIN (10KB)
• DOWNLOAD DOMDom Minimized with Packer (6KB)
• See the benchmark
• See the test file with a bunch of examples of syntax

-dom suffix denoting condition or state, as in freedom, wisdom, or DOMDom

Update: changed the variable syntax to allow variables inside of nodes (not just text).

Did you take your contacts out last night and you can’t see the time on your alarm clock from all the way across the room?

I’m here to calm your fears. Enter ALARMD, the Internet Alarm Clock. Wake up to any Youtube video (that allows embedding), a last.fm user stream or tag, or any mp3 hosted online. There are a few defaults in there, but you can add and modify your own.

Features:

• Supports multiple alarms (ALT+R to add an alarm or use the Add Alarm button).
• Options for 24 Hour (Military) time and Seconds display
• Supports MP3 (hosted online), YouTube videos (that allow embedding), and last.fm user or tag streams.
• Key Mash Mode to kill the alarm (hit five random keys in one second)
• Time Font Size customization (automatically size to the width of the window using the Max option)
• Typical alarm clock colors: Red, Green, or Blue
• Alarm Toggle based on the Day of the Week
• Test button to make sure your speaker volume is set correctly.
• Sleep Mode button to get rid of the extra GUI while you don’t need it.
• Save all of your settings, URL’s, and alarms locally in a cookie (you don’t need yet another account to use this)

Things to think about:

• Power Settings – disable your screen saver, or any sort of automatic suspend or sleep setting. In my testing, having your monitor go into power save mode is acceptable, and the alarms will still sound (but you might want to test this yourself and leave a comment with your result).
• You might not want to use with a CRT, for fear of burn in.
• Personally, I like to use this in Opera, just because their default full screen mode (F11) doesn’t have toolbars or a status bar. But you can use the Fuller Screen Firefox plug-in to soup up your Firefox for similar functionality.
• Word of warning, the window must have focus to autoplay YouTube videos.
• Make sure your local time on your computer is correct, especially if you are traveling between time zones. It doesn’t do any server side validation on the time (yet?).

Possible Future Improvements:

• Countdown mode, displays amount of time until next alarm in place of the clock (good for timed presentations, where you want to see how much time is left before you have to quit).
• Google Gears integration for offline mode (if your internet goes out during the night)
• Support customizing source URL’s on a per alarm basis.
• Support days of the week toggle on a per alarm basis.
• Support user specified color customization.
• A crescendo alarm MP3 that increases in volume for a more peaceful wake up experience.
• An alarm MP3 with especially violent noises for heavy sleepers.
• An alarm MP3 of my mom’s voice to get that nice feeling of childhood back.

This internet application was built using the Yahoo UI Libraries (YUI) and Jack Slocum’s Ext DomQuery class. It is written entirely without using any server side programming languages, and therefore can be saved to your local machine. Not that anyone might want to use the Internet Alarm Clock, but if you do, I declare it officially released under the BSD license. Just don’t forget to cite the source when you redistribute.

Update: added a couple more things to think about.

Minimum Feature Set:

• Client-Side Sorting: I don’t want it to do an XMLHttpRequest to sort the data, I want it to be done all clientside.
• Simple inline editing: Edit a field in the table right there on the table. I hadn’t established what types of data I would need to edit yet.
• Data Sources: load from a native JavaScript array or a XMLHttpRequest returning XML or JSON.
• Data Type Sort Algorithms: at the very minimum different sorting algorithms for numeric columns and string columns.
• Hierarchical Columns: group column headers together under a parent header.
• Easily customizable: must be able to customize the look and feel of the grid easily using CSS and not by editing Javascript.
• Header Freeze: If I have overflow on my table vertically causing a scroll bar, I want the table headers to remain shown at the top of the table while I scroll from top to bottom.
• Custom Cell Rendering: I have the data I’m loading, but I want to change how it looks when it is rendered to the table. Common for date formatting.

Luxury Feature Set:

• Resizeable Columns: change the width of a column by dragging on the column header’s right border.
• Movable Columns: dragging a column will cause it to be moved on the table (TIBCO General Interface supports this).
• Custom Sort Algorithm: write my own algorithm to specify how data is sorted, or provide a way to do multi-column sorting (sort within one column, ties are sorted by another column, and so on).
• Dynamic Paging (don’t make me click numbered links, load the data automatically when I scroll) both on the client (dynamically insert only what I’m looking at and remove what I’ve scrolled past) and using the server (load more data through an XMLHttpRequest)
• Column Freeze: if the table is going to scroll horizontally, allow the developer to freeze a column or multiple columns so that they are shown when scrolling from left to right.

Evaluation of Options: How does the YUI DataTable stack up?

Basic Items: Client-Side Sorting, Simple inline editing, Data Sources, Data Type Sort Algorithms (stock types not yet implemented out of the box), Hierarchical Columns, Header Freeze (buggy), Custom Cell Rendering, and is easily customizable with CSS.

Luxury Items: Resizeable Columns, Movable Columns (not supported), Custom Sort Algorithms are supported (you can right your own Data Type Sort Algorithms with this feature), Dynamic Paging (manually, not dynamic), Column Freeze (not supported)

Problems:

• Any sort of fixed width table is going to be problematic. Putting a fixed width on the table causes the table headers to be misaligned with the associated table data. It’s a mess. The only viable option here is to let the table do it’s own width calculations. You can’t even set the column widths manually using the {width} variable as suggested when using a fixed width table.
• Data Type Sort Algorithms supposedly work from the column type, but this feature is documented in the code as being a TODO. All columns are sorted by a string datatype, meaning that if your column is numeric and you had the following rows: { 3, 7, 40 }, the sort result would be { 3, 40, 7 }.
• Header Freeze was problematic. Implementing the {scrollable=true} feature as recommended by the documentation causes the table headers to be misaligned with the data in a fixed width table.
• Paging uses the old school numbers method. This wasn’t a deal breaker, since I classified this feature as a luxury item.

Granted, the DataTable in it’s current form is a beta component, but that 0.5 MB ExtJS hit is looking pretty nice right now.

Minor Update: to do a fixed width table that will overflow horizontally, this is the method you can use:

div#dataTableId { /* change this to whatever id you're using to hold the dataTable */
	width:520px; /* put in your own fixed width */
	overflow-x:auto;
	overflow-y:hidden;
}
.yui-dt-headtext, .yui-dt-headcontainer {
	position: static; /* without this declaration, the headers weren't horizontally scrolling with the data in IE6 */
}

If you want to select attribute nodes with a namespace in your XHTML, DomQuery does not support namespaces as an option to do so. But by adding a small snippet of code to DomQuery, we can make it do so.

As a standalone snippet executed after DomQuery is loaded.

Ext.DomQuery.matchers.push( {
	re: /^(?:([\[\{])(?:@)?([\w-]+(?:\:[\w-]+))\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
	select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
} );

OR by adding an array entry into the DomQuery code matchers array (paste after line 479 of the 17 January 2007 2:26:32 PM version)

,{
	re: /^(?:([\[\{])(?:@)?([\w-]+(?:\:[\w-]+))\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
	select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
}

I did not modify the existing matcher for attribute selection because I didn’t want to modify the speed of the existing code for non-namespaced attributes. So by appending another entry to the end of the array, it’ll be used as a last resort if the other entries aren’t matched.

This approach relies on the assumption that when selecting an attribute with getAttribute, the browser interprets any namespace automatically: getAttribute(‘myNamespace:myAttributeName’), as documented by the peterned weblog. This was tested in Firefox 2 and IE 6.

Usage:

Ext.query( '#test-data span[myNameSpace:myAttribute=myValue]' );

on the following DOM

<div id="test-data">
<span myNameSpace:myAttribute="myValue"></span>
</div>

Other notes regarding DomQuery:

To select a node with a non-empty attribute value:

Ext.query( '#test-data span[myNameSpace:myAttribute]' );