As an example, consider a CGI or other web utility designed to allow users to edit a product page. It will consist of various components. One of those components might be a utility to pick colors from the web safe palette. Another would be a means of displaying in real-time, the changes effected by decisions on that color picker. Another might be detailed help about the utility. These play secondary roles to the product editing utility. These components can be architected to be modular and to support functionality in conjunction with, or in isolation from the primary utility.

Taking this approach permits reuse of components and also allows maintenance and evolving development to continue without putting at risk the primary utilities modules and code. This example is constructed to illustrate the secondary roles in a simulated context. You need a current browser. (IE5+ at the time of implementation)

What's on parade?

Color Gadget - This is realized as a small popup* utility which displays the available colors, allows a visual selection in a systematic approach and some data persistence for return visits.

Reflow Gadget - Take advantage of browsers with the ability to re-draw content after a page has been rendered. This is a great way to save your users time by allowing them to make edits without intermediate server trips to redraw the page one new property at a time.

Help Gadget - When real estate concerns outweigh the need to display detailed instruction, the help gadget is the perfect solution. Clicking the help icons toggles contextual floating sections opened and closed which can be used to provide details without requiring compromises in your site design to permit the presentation of additional content. Also, they can be architected to be search engine friendly.

On to the example...