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

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

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.

<?xml version="1.0"??><list id="customerXML" rows="3"><columns><column id="id" title="id" width="10" hidden="N" type="CHAR" align="RIGHT"/><column id="name" title="name" width="20" hidden="N" type="CHAR"/><column id="birthday" title="birthday" width="20" hidden="N" type="CHAR"/><column id="age" title="age" width="50" hidden="N" type="CHAR" align="LEFT"/></columns></list>

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:

1. 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.
2. 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.

/* This function checks for column consistency. This method is meant to show defensive programming techniques more clearly. Faster solution would be having this check while parsing list columns and not later. */ function proccessListFunctions(list){ var w=0; for (var i=0;i<list.columns.length;i++) { var col=list.columns[i]; if (!col.hidden) { w+=parseInt(col.width, 10); } } // If the widget properties are not correct, raise an error. if (w!=100) { alert('The sum of the width of the columns in the list \''+list+'\' must be 100!'); } }

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

1. 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.
2. 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.

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 https://www.tcs.com.

Original: January 17, 2007

Digg This Add to del.icio.us

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both