Newsreel
  Products & Services
  Web Watch
  Software Update
  Events Diary
  Articles
  The Magazine
  Subscribe
  Contact Us

Load your listboxes at run time!

A: It populates the lists at run time, using the names returned by the strategy functions themselves!

DNJ Dilemma's game setup panel includes two <select> (drop-down list) controls, which allow you to choose game strategies for the right-hand player, and the left-hand player in self-play mode. I wanted to make it easy for developers to add new strategy functions to the game, and expecting them to hand-edit the <select> control's HTML tag sets in order to include their functions just didn't make the grade. As a result I had to think of something else.

The answer came in two parts - first, make it a rule that strategy functions must return their names when called in 'info' mode (click here for strategy function specifications), and second, use those names to load the <select> controls dynamically when the DNJ Dilemma page is loaded.

Making the functions identify themselves
Pointers to the currently available strategy functions are held in an array, stratfunctionpointers[]. It's easy to walk though the array, calling each function in 'info' mode and placing the returned text values (the strategy names) into another array. Adding these names to the two <select> controls lstratdropdown and rstratdropdown is slightly more complex, but I borrowed my code from Microsoft's original Internet Client SDK, and it works fine for me!

A single loop in the function loadstrategylists() gets the strategy names and loads the <select> controls. Here's the code:

/* Create new array to hold strategy names - note that these are string values, NOT function pointers /*
preinitstratnames = new Array()

for (i=0; i < stratfunctionpointers.length; i++) {

// Put string returned by strategy function (in 'info' call mode) into name array
preinitstratnames[i] = stratfunctionpointers[i](rplayer, 'info')

// Create a new HTML element, of type <OPTION> (i.e. <select> list option)
el = document.createElement("OPTION");

// Update new element's .text (displayed text) property with strategy name 
el.text=preinitstratnames[i] 
el.value=""+(i+2);

// add <OPTION> element to <select> control lstratdropdown
document.all.lstratdropdown.add(el);

/* Repeat the process for rstratdropdown. */
el = document.createElement("OPTION");
el.text=preinitstratnames[i] 
el.value=""+(i+2);
document.all.rstratdropdown.add(el);
}

Both <select> controls have their first option - Auto Selection - hard-coded in via an HTML <option> tag, so the new options become the second, third and so on.

Setting the new elements' .value properties is, strictly speaking, unnecessary in this application, as I don't actually reference them anywhere else. Instead, when hooking up a strategy function in response to a user selection, I use the <select> control's .selectedIndex property. This indicates the ordinal position, within the option list, of the user's choice. Because the options were created in the order of the stratfunctionpointers[] array, I can use the chosen option number (minus one, to accommodate the 'Auto-Selection' offset) as a subscript of stratfunctionpointers[]. Here's an example:

sysgame.rstrategy = x1.rstratdropdown.selectedIndex 
.... etc
rplay = stratfunctionpointers[sysgame.rstrategy -1]

Other uses for dynamically-populated <select> controls.
Dynamically-populated <select> controls have quite a few potential uses. You could save a user's site preferences in a cookie, then build a custom drop-down list of favourite sections on each visit. You could offer different page or feature options depending on browser type. Surprisingly, it's not possible to populate a <select> control directly from a server-based data source via IE4 data binding, but instead you could create a data-bound table in a hidden DIV, then copy its contents (myTable.rows[i].cells[0] etc) to the control. 

 

DNJ Dilemma The Inside Story

Inside DNJ Dilemma

Overview of the game's processes

Indirectly-called strategy functions

Graphical scoreboards

Animated buttons

Dynamically-loaded list boxes

Asynchronous left/right players

Where are the strategy functions?

Play DNJ Dilemma