AJAX Components - Part 2 | Page 2
AJAX Components - Part 2
<input> element. In this case, much like a dynamic
<select> element, it adds the ability to allow users to dynamically choose words from a database as they type in the
<input> control. For our DataGrid component, adding some grid-like behavior to the standard HTML might entail enabling the end user to edit or sort data in the grid.
Defining behavioral components is often done declaratively by extending the default HTML markup and setting some metadata on a standard HTML element. For the most part, this metadata consists of a CSS class name that generally does not have any actual style information associated with it. To instantiate a behavioral component, the bootstrapper scours the DOM to find elements with recognizable metadata—be it a CSS class name or otherwise. When an element with known metadata is discovered, the standard component instantiation commences. Markup for a sortable HTML table can have an additional class, such as
sortable, which would look like this:
The code to actually attach the sorting behavior to the HTML element uses the popular
getElementsByClassName() function for which there are several different custom implementations or approaches. Because it is such a popular function, we shortened the name to
$$. We can use the
$$ function in our bootstrapper along with the
makeSortable() function to add the sorting behavior to our HTML table.
For a sortable HTML table, we require the
makeSortable() function to do a few things. Each table that we want to have made sortable needs to have an additional class added to each header cell and an event handler function attached to the click event of the table header. To indicate to the end user that they can click on the column header to sort the table by that column, we add the
button class that changes the users' mouse cursors to a hand icons; when they click, it causes the global
sort() function to be executed in the context of the HTML
<table> element. (You remember from Chapter 2 that running the event handler in the context of the HTML element means the
this keyword refers to the HTML element that makes writing the sort function a bit easier.)
sort() function is shown here:
sort() function is executed in the context of the HTML table element, we can access the collection of table rows using the native table
rows property and similarly access the collection of cells in each row using the
cells property. To get the value that is rendered in each cell of the table, rather than using something such as
innerHTML that returns the rendered value of the cell, we instead get the custom
VALUE attribute that we created ourselves (this might be an instance where you want to use a custom namespaced attribute) and which contains the raw, unformatted data. This is an important consideration when we deal with things such as prices that might be prepended with a "
$" character for rendering but sorted as numbers. Having said that, after we dynamically connect our table to a datasource, this will no longer be necessary. Finally, we use some more native DOM manipulation methods such as
element.insert Before(newNode, refNode). The
insertBefore() method makes sorting the rows quite simple in that we can use that method with DOM nodes that are already rendered—in this case, the table rows—and it actually moves those nodes and re-renders them.
That is all there is to building a small behavioral AJAX component that can be layered on top of an existing web application. The entire idea behind behavioral components is gaining popularity from the world of semantic markup and other technologies such as Microformats. Strictly speaking, a Microformat is not a new technology but instead a set of simple data formatting standards to provide more richly annotated content in web pages. Microformats use the same CSS class extension approach to give general XHTML content more semantic information. Microformats and other burgeoning standards such as the W3C endorsed RDFa are great places to watch to get an idea of where web technologies are heading and finding the best way to create declarative AJAX components.
At any rate, behavioral AJAX using HTML declarations sprinkled with some additional metadata can be a great approach for AJAX development because it can be achieved in an incremental manner, thus avoiding any large up-front investment in training or technology. It can be a great way to test the AJAX waters before a more large scale deployment. Of course, there are still other ways to use your existing architecture when moving toward AJAXifying your applications.