Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


DHTML Interfaces: Taking The Next Step : Page 3

A new kind of DHTML toolkit can provide developers with a better approach to code and widget reuse.

Exploring the components.js File
The first include in the sample page is a file named components.js. This script contains the core of the framework you can build upon to create components and widgets. The ComponentClass() function defines the superclass that buttonWidget eventually inherits from.

Author Note: If you're unfamiliar with the object-based nature of JavaScript or of prototype-based inheritance, declaring a class as a function may seem odd, but the use of the keyword this should tip you off that the code is a class definition and not a regular function.

// class constructor for the component superclass function ComponentClass(){ // data members // the DOM node for the component this.compNode = null; // default, override in subclass this.autoGenerate = false; // -1 signifies that no ID has been set this.IDNum = -1; // class methods this.setID = function(){ /*implementation not important here*/ } this.getID = function(){ /*implementation not important here*/ } // subclasses _must_ redefine generate() this.generate = function(){return true;} // constructor code // optional DOM node as constructor arg if(arguments.length > 0){ this.compNode = arguments[0]; } if(this.autoGenerate){this.generate(); } // register this component compReg.register(this); }

The ComponentClass acts as a skeleton for a real widget to fill in, but contains several important methods and properties. The compNode property links the visible DOM node to the JavaScript object that controls its behavior and models the data it presents. I'll explain this relationship further when you examine the component registry. The setID property gives the component a way to request a globally unique ID number from the framework. The getID property provides an access method which is a shortcut to the property IDNum. The final line of the object definition tells a globally available object, compReg, to register the object being created with the system. The compReg object is a singleton object (only one instance can exist within a page) that "keeps track" of the components you create and use, thereby freeing you from the tedium of manually tying DOM nodes to logical objects and assuring uniqueness.

The ComponentClass class forms the base object type that creates and tracks components in the framework. The class ensures that every framework object has some properties that you can rely upon to provide services to the end developer. The most important of these services is lookup. The compReg object that handles lookup and registration is a single instance of the class ComponentRegistryClass. The framework creates the compReg object and makes it globally available immediately after defining a ComponentRegistryClass in the console.js file.

After that, the framework automatically registers every newly instantiated object that subclasses ComponentClass with the compReg object. The compReg object serves to associate the visible component (DOM node) and its logical (invisible) counterpart—a ComponentClass object. The result frees end developers from the burden of "keeping track" of an arbitrary number of dynamically generated widgets.

Here's a quick rundown of the compReg object's methods that enable generic lookup:

compReg.getByNode()—takes single DOM node as only argument. Returns a corresponding logical component object if the passed node is the descendant of a component node in the DOM tree. The method returns null if no ancestor node of the argument corresponds to a component.

compReg.getByID()—takes a component ID string as the only argument. If a component with the given ID is currently registered with the system, the method returns a reference to that component; otherwise, it returns null.

compReg.unregister()—takes a component ID string as the only argument. If a component with the given ID is currently registered with the system, the registered object is deleted. The method does not return a value.

compReg.unregisterByComponent()—takes a single argument—a component object reference. The method deletes the passed component reference from the registry. The method does not return a value.

compReg.register()—takes a single argument—a component object reference—and registers the passed component object as only argument. The method registers the component object with the framework. The method does not return a value.

The getByNode and getByID functions are the most useful, because you can use them to look up the parent object of a component without knowing anything about how and when the component was created. All the functions that accept a component object as argument or return value, assume that the component is either an instance of ComponentClass or an instance of one of its subclasses.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date