Dave Johnson

Those that have developed or used Ajax components to build an application will be familiar with the idea of using some sort of declarative structure to define or configure a component. This is commonly achieved through either HTML or JSON.

For example, a simple dynamic table or grid JavaScript object may take a parameter that sets the height of each row in the table. Through JavaScript it might look like this:

var myTable = new Table({”id”:”myTable”, “rowHeight”:”20px”,”data”:[”dog”,”cat”,”bird”]});

This could in theory instantiate a dynamic table with rows of height 20px and contents as defined by the data array.

Everything is right in the world.

Class it up

However, there are some out there - I won’t name any names - that might prefer to set something a table row height through CSS instead. So rather than setting the rowHeight in the configuration directly they may instead just specify a rowClass that is the class that will be applied to each TR element in the table. Defining the table would then look something like this:

var myTable = new Table({”id”:”myTable”, “rowClass”:”tableRow”,”data”:[”dog”,”cat”,”bird”]});

and the corresponding CSS would look like this:

.tableRow {height:20px;}

Now the only problem here is that there are situations where we may want to know what the height of the rows in the table are through the objects API. For example:

alert(myGrid.getRowHeight());

So the question is, how can we support using CSS as the declaration for a component (too bad you can’t just put any name/value pairs in CSS in Firefox

Bridging the API Divide

Luckily for us we have the DOM. In the Nitobi Toolkit it is pretty easy to find a class in a stylesheet and read properties from it. In our Grid control we do something like this for rowHeight such that it can be defined through an HMTL declaration or CSS and still be accessible through the API. We end up with some code like this:

var ntbRow = nitobi.html.getClass(”ntbrow”);
if (ntbRow != null && ntbRow.height != null)
  this.rowHeight = parseInt(ntbRow.height);

The getClass function essentially scours all the included stylesheets for rules that contain the class in question.

This solution makes the components more skinnable and easier to work with in general while at the same time preserving the JavaScript API.

Del.icio.us

This entry was posted on Thursday, September 20th, 2007 at 8:12 pm and is filed under AJAX, JavaScript, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.