Widget Initialization Using JSON, HTML Custom Tags and XML Files | WebReference

Widget Initialization Using JSON, HTML Custom Tags and XML Files

By Nicolas Erlijman


[next]

Digg This Add to del.icio.us

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 HyperText Markup Language) 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. To place a widget in a page, this example will retrieve the widget properties, construct a widget object, then place it where the <div> reference is located. Properties (height, weight, number of rows, etc.) give shape to our widget, including its behavior (such as the onclick event, onmouseover event, etc). Throughout this article, various ways to perform this task will be detailed.

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.

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.

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.

JSON objects are passed to the list widget constructor and a list object is returned:


[next]