Widget Initialization Using JSON, HTML Custom Tags and XML Files / Page 3

Widget Initialization Using JSON, HTML Custom Tags and XML Files [con't]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC)
Next Step Systems
US-NY-New York

Here, as in the previous example, the list definition contained in the XML file has to be parsed after the page has loaded, and an object representation of the list is obtained. After that it's shown by calling the showList function.

function init() {
    // Create XML List
    loadXMLFromURL("customer.xml", readXmlList);
  }

function loadXMLFromURL(url, loadHandler) {
    var httpRequest = null;
    if (typeof XMLHttpRequest != 'undefined') {
      httpRequest = new XMLHttpRequest();

} else if (typeof ActiveXObject != 'undefined') {
      httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    }

if (httpRequest != null) {
      httpRequest.open('GET', url, true);
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) {
          loadHandler(httpRequest.responseXML);
        }
      };
      httpRequest.send(null);
    }
  }

/**
   * Reads a customer.xml specification
   * @return customer object
   */
  function readXmlList(xmlDoc) {
    var o=xmlDoc.documentElement;

var id = readXMLAttribute(o, 'id');
    var rows =  (readXMLAttribute(o, 'rows')) ?readXMLAttribute(o, 'rows'):10;
    var cols = new Array();

var columns = getElementNodeByName(o, 'columns');
    var columnChilds = getElementChildNodes(columns, 'column');

for (j=0;j<columnchilds.length;j++) {
      var col="columnChilds[j];"
      var column="new" column(col.id,
        {
          title: readxmlattribute(col, 'title'), width: readxmlattribute(col, 'width'),
          hidden: readxmlattribute(col, 'hidden'), type: readxmlattribute(col, 'type'),
          align: readxmlattribute(col, 'align')
        });
      cols.push(column);
    }

// list object is created
    var list="new" list(id, {rows: rows}, cols);

// list widget is showed calling showlist function
    showlist(list);
  }

(See Example 3: XML files)

Defensive Programming

Defensive programming is a technique aimed at reducing errors, in spite of the application overhead. When declaring a widget, here are some things to check to assure a stable application:

Widget Properties: Since JavaScript (ECMA Script) is a loosely typed language, there's no way to know what values are inside the properties object. They will only be known at runtime. Mandatory properties are the first thing to check, as they're needed for correct widget functionality. You might also check the unrecognized properties, avoiding unnecessary code left behind.
Calculated Values: In our examples, the list widget is programmed to fit 100% of its container. Therefore, the sum of all columns must be 100. Checking this calculated value is recommended to avoid strange behaviors.

Defensive programming not only reduces errors, it also speeds up your development time, as inexperienced programmers will be told by the application framework what's missing in their code (See Example 4).

Considerations

Parsing XML/HTML Tags
HTML Custom Tags and XML tags aren't parsed the same way as you can observe in the examples. HTML is parsed using the HTML Parser and XML using the XML parser. IE data islands (<xml> tag that indicates that the content inside it is handled by MSXML XML parser instead of the HTML parser) weren't considered as in this article as a cross-browser approach was required.
Viewing Examples
When running examples, be sure you run them within the http: protocol as they might not work running on local files (file: protocol) due to your security policies.

NOTE: Some helper functions were not included in the article for clarity reasons. A complete working example is available for downloading.

Conclusion

This article showed various ways to configure DHTML widgets, from non-recommended ones to better solutions involving JSON and XML files. It also showed how inexperienced developers can easily configure widgets since the widget framework will warn them, via alert messages, what is missing. These techniques are focused to avoid errors and speed up development time, and what you decide to implement, will depend on the needs of your development team needs and their skill level.

About the Author

Nicolas Erlijman is a System Engineer specialized in web technologies working at Tata Consultancy Services, Asia's biggest IT Company. For more information, visit http://www.tcs.com.

Original: January 17, 2007

Digg This Add to del.icio.us