Pick A Region

Eastern

Western

Northern

Southern

The markup has now changed in the following ways:

■

A function has been created that injects all desired component behaviors into our document.

■

An onload handler has been added to the body element that calls this function.

Licensed to jonathan zheng

354

CHAPTER 9

Dynamic double combo

Note that nothing within the body section of the page has been modified. As stated earlier, this is a good thing. We’ve already satisfied our first requirement. But, looking at our injectComponentBehaviors() function, it’s apparent that we have some more work to do. Namely, we need to create a JavaScript object named DoubleCombo that, when constructed, provides all the behaviors we need to support double-combo functionality. DoubleCombo component logic

Let’s start by looking more closely at the semantics of our component creation. Our injectComponentBehaviors() function creates a DoubleCombo object by calling its constructor. The constructor is defined in listing 9.12. Listing 9.12 DoubleCombo constructor

function DoubleCombo( masterId, slaveId, url, options ) {

this.master = document.getElementById(masterId);

Initialize

this.slave = document.getElementById(slaveId);

state

this.options = options;

this.ajaxHelper = new net.ContentLoader( this, url, "POST", options.requestParameters || [] );

this.initializeBehavior();

Initialize behavior

}

This should be a familiar construct at this point; our constructor function initializes the state of our DoubleCombo. A description of the arguments that should be passed to the constructor is shown in table 9.2.

Table 9.2 Description of arguments

Argument

Description

masterId

The ID of the element in the markup corresponding to the master select element. The selection made in this element determines the values displayed by a second select element.

slaveId

The ID of the element in the markup corresponding to the slave select element. This is the element whose values will be changed when the user makes a choice from the master select.

options

A generic object that provides other data required by the double combo. Consider the nature of the state maintained by the DoubleCombo object—particularly the URL and options. These two pieces of state satisfy the second functional Licensed to jonathan zheng

Refactoring

355

requirement mentioned earlier. That is, our component can accommodate any URL for data retrieval and is customizable via the options parameter. Currently the only thing we assume we’ll find within the options object is a requestParameters property. But, because the options parameter is just a general object, we could set any property on it needed to facilitate further customizations down the road. The most obvious kinds of properties we could place in our options object are such things as CSS class stylings and the like. However, the style and function of the double combo are fairly independent concepts, so we’ll leave the styling to the page designer.

To many of you, we’re sure, the more interesting part of the constructor comes in the last two lines. Let’s look at each in turn:

this.ajaxHelper = new net.ContentLoader( this, url, "POST", options.requestParameters || [] );

Obviously, we know that our component requires Ajax capabilities. As fortune and a little planning would have it, we already have an object to perform the lion’s share of our Ajax-related work—that is, the net.ContentLoader we cleverly refactored earlier. The DoubleCombo simply passes itself (via this) as the component parameter to the ContentLoader helper. The url parameter is also passed through to the helper as the target URL of

Return Main Page Previous Page Next Page

®Online Book Reader