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

The init() Function

Most Macromedia Flash applications should start up with a single function, typically called init() (short for "initialize"). Our address book is no exception. The init() function starts the address book by setting the initial state of the user interface. The init() function is invoked once--and only once--when the movie is finished loading. After init() has been called, the application continues to run strictly in response to events (in our case, user interaction).

The init() function performs the following tasks:

	Creates an instance of the ContactManager class. As we've seen, this class handles data storage and retrieval.
	Fills the contactListBox_lb with contacts from the ContactManager instance.
	Formats the user interface.
	Creates a list of all the text fields in the application.
	Assigns focus handlers to all text fields. These change the color of each field when it is focused.
	Disables the phoneComboBox_cb in the "contact details" pane.

The complete listing for init() is shown below. As you study it, notice that init() itself calls functions to perform tasks. For example, init() fills the contactListBox_lb component via populateListBox(). When a task is repeated in several places, its code should be centralized in a function or object method.

However, it doesn't pay to needlessly partition code. For example, in the current version of init(), we work directly with the address book's text fields. But if we later expanded the address book, we may find that we'd have to initialize the text fields differently, perhaps by introducing "addressPaneInit()" and "editPaneInit()" functions . We may even create objects to represent each pane. As the program's requirements evolve, so should the code.

/*
 * Function: init()
 *   Desc: Performs first-time set up tasks to start the application.
 *   Parameters: None.
 */
function init () 
{
  // Make sure the init only ever runs once.
  if (!inited) {
    // Note that we've initialized the app.
    inited = true;

    // Create the address book data repository
    contactMgr = new ContactManager();

    // Put the contents of our shared object in the address book listbox.
    populateListBox(0);

    // Specify the colors for our components (list box and buttons).
    setGlobalStyles();

    // Create a list of the text fields in the 
    // edit panel. We'll use it to manipulate the
    // fields as a group.
    editFields = [firstNameField, lastNameField, emailField,
                  phoneField, companyField, commentsField];

    // Set focus callback functions for text fields. These cause
    // the textfields to highlight when focused.
    for (var i = 0; i < editFields.length; i++) {
      editFields[i].onSetFocus = handleFieldFocus;
    }

    // Set killfocus callback functions for text fields. 
    // These remove textfield highlight when a field loses focus.
    for (var i = 0; i < editFields.length; i++) {
      editFields[i].onKillFocus = handleFieldBlur;
    }

    // Disable the phone combo box. We only use it for display
    // purposes unless the user is in edit mode.
    phoneComboBox_cb.setEnabled(false);
  }
}

Let's consider the code in init() that's new to Flash MX.

First, text fields are now objects, and we may control them entirely via ActionScript. For example, the following line assigns a callback function, handleFieldFocus, to the onSetFocus handler of a text field (the handleFieldFocus function is defined later).

editFields[i].onSetFocus = handleFieldFocus;

The TextField object supports both onSetFocus and onKillFocus handlers, allowing us to execute a function when the cursor enters or leaves a text field, respectively. To set a callback function for an individual text field's onSetFocus handler, we can use the following syntax:

anyTextField.onSetFocus = function () {
  // Code here executes when the field is focussed.
  trace("The text field was focussed!");
}

Now let's look at another new feature of Flash MX: a component method call. The last line in init() calls the setEnabled() method of the phoneComboBox_cb component (where we display the contact phone type). This disables the component so that the user can not interact with it. All components may be enabled or disabled via the setEnabled() method.

We'll learn much more about manipulating components in the next few functions.