Widget Initialization Using JSON, HTML Custom Tags and XML files

Component reuse is a must in development. Reuse reduces development time, avoids coding errors, visual components will look identical, and so on... Code once, use anywhere! DHTML (Dynamic HTML) components or widgets are common nowadays; existing all over the Internet, from simple components such as calendars, toolbars, menus, etc., to more sophisticated frameworks like the Yahoo! UI Library. These components will behave in a different way according to some parameters or properties passed to them. This article will explain some ways to configure DHTML widgets, exposing its pros and cons, as well as programming techniques to avoid errors and speed up development time.

Properties declaration

Imagine a “List widget,” a common widget used to display, for example, tabular customer data. This kind of widget is also called a table or grid widget and will be used along the examples. To place a widget in a page, this example will retrieve widget properties, construct a widget object, then place it where the

reference is located. Properties give shape to our widget (height, weight, number of rows, etc.) including its behavior (such as the onclick event, onmouseover event, etc). Throughout this article, various ways to perform this task will be detailed:

a) Old style declarations with global variables

Global variables are defined and used as widget property values. This kind of declaration should not be used in order to avoid global scope issues.

var rows = 3; var columns = new Array(); // Then all or some properties are used in the list widget constructor

b) Parameters to the constructor object

The properties of the widget are defined as passing parameters to the list widget constructor. This approach solves the global scope issue but the number of properties to pass is fixed. If we want to add a new property to the widget, the method signature must be changed, and thus, if we have a lot of properties in our widget, the method signature will become unreadable. This option is not recommended if we want to have an extensible widget Framework.

// The properties are defined with various parameters // that are passed to the list constructor var list = new List('customer', 3, rowsArray);

c) JSON (JavaScript Object Notation) as a properties object.

This option uses JSON notation as a method to pass parameters, avoiding global scope issues, reducing the number of parameters and increasing code readability. This alternative is 100% pure JavaScript programming, as opposed to the use of Custom Tags and XML files (explained in following sections), which denotes simpler and easier notation.

By Nicolas Erlijman
source: http://www.webreference.com/programming/javascript/widgets/index.html