Building an Address Book > Creating the Application Functions > The populateDetailsPane() Function

The populateDetailsPane() Function

The populateDetailsPane() function fills the "contact details" pane with information about the currently selected contact. It is called whenever the details pane needs to be updated with new information, such as when the contactListBox_lb selected index changes, or during doUpdateContact(). Most of the "contact details" pane is made up of text fields, so populateDetailsPane() spends most of its time setting strings to display in the text fields.

The populateDetailsPane() function performs the following tasks:

	Retrieves the contact corresponding to the currently selected item in contactListBox_lb.
	Displays information about the current contact in text fields and the phoneComboBox_cb.
	Clears the the "contact details" pane when no contact is selected.

The complete listing for populateDetailsPane() is shown below. Skim it first, then we'll study the code line by line.

/*
 * Function: populateDetailsPane()
 *   Desc: Places the selected contact's information in 
 *         the "contact details" pane.
 *   Parameters: None.
 */

function populateDetailsPane () 
{
  // Retrieve the data value of the selected listbox item.
  var selectedID = contactListBox_lb.getValue();

  // If getValue() didn't return undefined, then something is
  // selected.
  if (selectedID != undefined) {
    // Store a convenient reference to the corresponding contact record.
    var thisContact = contactMgr.so.data.contacts["record" + selectedID];

    // Display the contact details on screen.
    firstNameField.text = thisContact.firstName;
    lastNameField.text = thisContact.lastName;
    emailField.text = thisContact.email;
    phoneField.text = thisContact.phone;
    phoneComboBox_cb.setEnabled(true);
    phoneComboBox_cb.setSelectedIndex(Number(thisContact.phonetype));
    phoneComboBox_cb.setEnabled(false);
    companyField.text = thisContact.company;
    commentsField.text = thisContact.comments;
    addedField.text = thisContact.dateAdded;
    modifiedField.text = thisContact.dateModified;
  } else {
    // Nothing was selected. 
    // Clear the "contact details" pane.
    firstNameField.text = "";
    lastNameField.text = "";
    emailField.text = "";
    phoneField.text = "";
    phoneComboBox_cb.setEnabled(true);
    phoneComboBox_cb.setSelectedIndex(0);
    phoneComboBox_cb.setEnabled(false);
    companyField.text = "";
    commentsField.text = "";
    addedField.text = "";
    modifiedField.text = "";
  }
}

The first task of the function is to retrieve the data field associated with the currently selected item in the contactListBox_lb. That data field contains the id of the selected contact. To get the data of a ListBox's current item, we use the getValue() method:

  var selectedID = contactListBox_lb.getValue();

The selectedID variable now contains either the id number of the current contact or undefined, if nothing was selected in contactListBox_lb. When a valid contact id is found, we next retrieve the corresponding Contact object from the ContactMgr. We use the array access operator (brackets, "[" and "]") to access the desired property dynamically as a string:

  var thisContact = contactMgr.so.data.contacts["record" + selectedID];

With our contact object retrieved, we can now do the work of displaying its details on screen. A series of TextField.text property assignments does the trick. As we learned earlier, in Flash MX, text fields are reflected as objects. To assign a string to a text field for on-screen display, we set the text property, like this:

  anyTextField.text = "hello world";

The "contact details" panel also contains a combo box indicating the type of phone number listed. There are three types, home (0), work (1), or cell (2). To display the appropriate item in the phoneComboBox_cb, we use the ComboBox setSelectedIndex() method.

  phoneComboBox_cb.setSelectedIndex(Number(thisContact.phonetype));

However, the selected index of a component can not be set while it is disabled. Therefore, we temporarily enable the component before setting its selected index, and disable the component again when we're done:

  phoneComboBox_cb.setEnabled(true);
  phoneComboBox_cb.setSelectedIndex(Number(thisContact.phonetype));
  phoneComboBox_cb.setEnabled(false);

At the end of populateDetailsPane(), if nothing was selected in the contactListBox_lb, we clear the "contact details" pane.