Trendics Blog

We recently launched the Instant Website Speed Check and used the Yahoo User Interface (YUI) libraries extensively to build the client. Specifically, we used the following components from the YUI library…

• YUI DataTable - Used to display the latency test results.
• YUI Connection Manager - Used to execute the AJAX calls to the server to start testing and to poll for test results
• YUI Reset/Fonts/Base/Grids CSS - Used to provide a foundation to layout the page and elements on the page consistently across browsers.

This is my second project using YUI and I’m still climbing the learning curve. This blog entry reflects the point of view of someone still learning YUI versus an expert explaning the best way to use YUI.

The YUI DataTable is a relatively complex control with lots of options. While I would use the DataTable again on a project, I often find it frustrating finding out how to accomplish simple things. For example, I had trouble figuring out how to update a cell in the table — I ended up writing the following javascript method to update a table cell…

// Updates a cell in a YUI DataTable
//   record - The instance of YAHOO.util.Record that should be updated
//   fieldName - The key name of a column in the YUI DataTable
//   value - The new value for the cell
function updateCellValue(record, fieldName, value) {
  var column = _dataTable.getColumn(fieldName);
  var cellRef = {record:record, column:column};
  var cell = _dataTable.getTdEl(cellRef);
  _dataTable.getRecordSet().updateRecordValue(record, fieldName, value);
  _dataTable.formatCell(cell.firstChild, record, column);
}

I’m guessing I jumped through some unnecessary hoops to update a cell but I really couldn’t find a better way after 30 minutes of reviewing the YUI API Documentation. Overall, I found the YUI documentation and examples to be excellent although I struggled to find a better way to update a cell in this case.

The YUI Connection Manager was quite straightforward and easy enough to implement. With the Connection Manager, you simply make a call to YAHOO.util.Connect.asyncRequest passing in GET/POST, passing in the URL, passing in a callback object with success and failure handlers, and passing in the post data. Here is the javascript method that initiates the testing…

function createInstantDataSourceSet() {

  var url = '/speed-check/index.jsp'
  var callback = {
    success: function(o) {
      var instantDataSourceSetId = o.responseText.trim();
      pollForInstantMonitorTests(instantDataSourceSetId);

    },
    failure: function(o) {
      alert('Failed: ' + o.statusText);
    }

  };

  var instantDataSourcesJson = buildInstantDataSourcesJson();
  var postData = 'step=create-instant-data-source-set';
  postData += '&instantDataSources=' + escape(instantDataSourcesJson);
  YAHOO.util.Connect.asyncRequest('POST', url, callback, postData);
}

The Connection Manager was easy enough to understand and implement — no problems there.

Regarding using the Reset/Fonts/Base/Grids CSS, this worked out extremely well as it seemed to greatly reduce the work required to tweak the UI to look consistent across the major browsers (Firefox, IE, Safari, and Opera). The client was designed in Firefox initially and then tested under IE, Safari, and Opera — there was probably just 15 minutes spent tweaking the input bar area to layout consistently across all the browsers.

Overall, we plan to continue to use YUI on future projects.

This entry was posted on Thursday, July 3rd, 2008 at 10:52 am and is filed under development, yui.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.