mozilla

Revision 88681 of Extending the MozMill element hierarchy

  • Revision slug: Mozmill/Mozmill_Element_Object/Extending_the_MozMill_element_hierarchy
  • Revision title: Extending the MozMill element hierarchy
  • Revision id: 88681
  • Created:
  • Creator: ahal
  • Is current revision? No
  • Comment 29 words added, 14 words removed

Revision Content

Mozmill uses an element hierarchy for wrapping and manipulating DOM elements.  The base class is called MozMillElement.  All element types inherit from this class.  Mozmill provides some basic subclasses that implement additional functionality.  For example, the MozMillRadio class adds some methods for dealing specifically with radio buttons.  The MozMillDropList class adds methods for dealing with drop lists (such as selects and menulists).  While these provided subclasses provide the basic functionality needed to interact with the most common DOM elements, it may not be enough for your needs.  When this is the case you need to extend the default hierarchy.

 

Creating a new Element Subclass

The first thing you need to do is actually create the subclass.  In this example we will create a new subclass for a 'link' element.

Prototypal Inheritance

The first step is to create a class that inherits from the MozMillElement base class.  Mozmill uses Javascript's built in prototypal inheritance model.  For more on this see this page.  For now though, lets just demonstrate by example:

// This makes the Link class inherit from the MozMillElement base class
MozMillLink.prototype = new MozMillElement();
// This is a convenience shortcut that allows to use 'this.parent' to refer to the MozMillElement properties
MozMillLink.prototype.parent = MozMillElement.prototype;
// When we did the first line above, MozMillLink's constructor got overwritten by the parent's, change it back
MozMillLink.prototype.constructor = MozMillLink;
// This is the new subclasses constructor
function MozMillLink (locatorType, locator, args){
  this.parent.call(this, locatorType, locator, args);
  /* do subclass specific constructor things here */
}

Revision Source

<p>Mozmill uses an element hierarchy for wrapping and manipulating DOM elements.  The base class is called MozMillElement.  All element types inherit from this class.  Mozmill provides some basic subclasses that implement additional functionality.  For example, the MozMillRadio class adds some methods for dealing specifically with radio buttons.  The MozMillDropList class adds methods for dealing with drop lists (such as selects and menulists).  While these provided subclasses provide the basic functionality needed to interact with the most common DOM elements, it may not be enough for your needs.  When this is the case you need to extend the default hierarchy.</p>
<p> </p>
<h3>Creating a new Element Subclass</h3>
<p>The first thing you need to do is actually create the subclass.  In this example we will create a new subclass for a 'link' element.</p>
<h4>Prototypal Inheritance</h4>
<p>The first step is to create a class that inherits from the MozMillElement base class.  Mozmill uses Javascript's built in prototypal inheritance model.  For more on this see <a href="/en/JavaScript/Guide/Inheritance_constructor_prototype" title="JavaScript/Guide/Inheritance constructor prototype">this page.</a>  For now though, lets just demonstrate by example:</p>
<pre class="brush: js">// This makes the Link class inherit from the MozMillElement base class
MozMillLink.prototype = new MozMillElement();
// This is a convenience shortcut that allows to use 'this.parent' to refer to the MozMillElement properties
MozMillLink.prototype.parent = MozMillElement.prototype;
// When we did the first line above, MozMillLink's constructor got overwritten by the parent's, change it back
MozMillLink.prototype.constructor = MozMillLink;
// This is the new subclasses constructor
function MozMillLink (locatorType, locator, args){
  this.parent.call(this, locatorType, locator, args);
  /* do subclass specific constructor things here */
}
</pre>
Revert to this revision