IBDOM <3 DWR

See Also

• Using IBDOM
• Interactive Demo
• More Comprehensive Demo

Data Objects and Documents

By proxying Java Method calls over an XmlHttpRequest/Servlet-Container/Service layer, DWR enables developers to easily retrieve Java Beans as JavaScript Objects.

Injecting a Document with data contained in these objects has in our experience been a somewhat tedious process, especially when juggling many data fields. A common practice was to riddle scripts with long strings made of HTML and data fragments, used to set the ".innerHTML" of an Element.

Despite a handful of useful utilities provided by the DWR framework, this approach however leads to front-end code that is harder to maintain and re-factor.

As a result, we sought to facilitate the process of injecting JavaScript Data Objects and Arrays of Data Objects into any portion of a Document, with a narrowly-scoped library focused on "wielding the Document Object Model with ease and standards-compliance", enabling developers to keep all Markup in their (X)(HT)ML Document.

To further increase fun and productivity of working with DWR, IBDOM was born.

Getting IBDOM

Get the latest release from the main IBDOM Site.

Using IBDOM with DWR

IBDOM defines the function $e("someID"), which returns an "augmented" version of a DOM Element, based on the passed ID string. This Element possesses "extra" methods defined in the API.

In IBDOM 0.2, $e() also accepts a node as an argument, and returns an augmented version of that node.

The method most pertinent to working with DWR is Element.populate(arguments). Arguments can be either of:

• A Data Object
• An Array of Data Objects, and an optional "Processor Function".
• See Using IBDOM for more details

What follows is a simple example of injecting an HTML Table with an Array of VehicleListing Objects retrieved over a DWR call to UsedCarSearchManager.getAllListings().

Script Includes

<script type="text/javascript" src="/used_cars/dwr/interface/UsedCarSearchManager.js"></script>
<script type="text/javascript" src="/used_cars/dwr/engine.js"></script>	
<script type="text/javascript" src="/used_cars/js/ibdom.js"></script>
	

Sample HTML where Data is to be injected

<table>
	<thead>
		<tr>
			<th>Year</th>
			<th>Make</th>
			<th>Model</th>
			<th>Price</th>
			<th>Info</th>
		</tr>
	</thead>
	<tbody id="someCollection" class="IB_POPULATE">
		<tr class="template:repeat">
			<td>data:year</td>
			<td>data:make</td>
			<td>data:model</td>
			<td>$<span>data:price:type:number</span> or best offer</td>
			<td>
				<a href="about:data:vehicleUrl">Click here for more info on this
				<span>data:year</span> <span>data:make</span> <span>data:model</span>
				</a>
			</td>
		</tr>
		<tr class="template:empty_collection">
			<td colspan="5">nothing was found</td>
		</tr>
	</tbody>
</table>
	

DWR Processing

<script type="text/javascript">
//This is the call-back function!
//Note the absence of HTML in your JavaScript! :)
function showListings(arrayOfListings) {
	$e("someCollection").populate(arrayOfListings);
}//showListings

UsedCarSearchManager.getAllListings(showListings);
</script>
	

Beyond Clean Separation: Hybrid Documents that are Dynamic *and* Accessible

The "Wielding Templates" section of "Using IBDOM" shows the possibility of creating documents that can load in an initial state with useful information accessible and pertinent to a wide variety of user-agents including search engine crawlers, while providing richer DWR-powered dynamic hooks to fancier user agents after the initial load.

DWR and IBDOM in Production

Internet Brands, Inc. uses DWR and IBDOM for a newly-remodeled "Used Cars Search" application.