Recipe 11.16 Making a Multipage Form

11.16.1 Problem

You want to create a form that spans multiple "pages" rather than being all on one screen.

11.16.2 Solution

Create a custom MultiPageForm class.

11.16.3 Discussion

You can create multipage forms in Flash without having to create a custom class. However, there are several drawbacks to this approach:

• The most convenient way to do it is to create a form that spans multiple frames. Flash does not automatically remember the values the user selected for form elements across frames. Therefore, you have to programmatically store and repopulate the user's selections for the form pages when they click back and forth.

• The process requires a lot of custom coding each time you want to create a new multipage form rather than relying on an existing infrastructure. Basically, it means a lot of duplicated effort and code.

• It is possible, but not very easy, to leverage the functionality of the Form class.

For these reasons, it is far superior to create a class that handles all the details of working with a multipage form. By creating a MultiPageForm class, you can use and reuse the functionality easily.

The MultiPageForm class has the following characteristics:

• The class has an array property that contains Form objects. A multipage form is composed, therefore, of multiple forms that are stored in an array property.

• The class has methods that set the current visible page of the form by making the other pages invisible. All forms are created on the same frame.

Here is the next enhancement to the Form class, a setVisible( ) method, which should be added to our Form.as file:

// setVisible(  ) accepts a Boolean value--true or false--and uses it to set the 
// _visible property of each element. Thus, it hides or shows an entire form page.
Form.prototype.setVisible = function (visible) {
  for (var i = 0; i < this.formElements.length; i++) {
    
    // If the element is a radio button group (or a checkbox group, which inherits
    // from the same class), set the visibility of each item in the group.
    if (this.formElements[i] instanceof FRadioButtonGroupClass) {
      for (var j = 0; j < this.formElements[i].radioInstances.length; j++) {
        this.formElements[i].radioInstances[j]._visible = visible;
      }
    } else {
     // Otherwise, set the _visible property of the individual element.
      this.formElements[i]._visible = visible;
    }
  }
};

And here is our MultiPageForm class, which should also be added to our Form.as file:

// Create the MultiPageForm class constructor.
_global.MultiPageForm = function (  ) {
  // Initialize currentPage to display the first page of the form.
  this.currentPage = 1;

  // Create an array to hold all the form "pages".
  this.forms = new Array(  );

  // If the caller passed in any parameters, assume they are references to existing
  // Form objects to add to this multipage form. Therefore, loop through the
  // arguments array and invoke the addForm(  ) method for each argument.
  for (var i = 0; i < arguments.length; i++) {
    this.addForm(arguments[i]);
  }
};

// Add a Form object to the MultiPageForm object.
MultiPageForm.prototype.addForm = function (frm) {
  this.forms.push(frm);
};

// setPage(  ) sets the current page. The first page of the form is 1.
MultiPageForm.prototype.setPage = function (page) {

  // Show the current page and hide all the other pages.
  for (var i = 0; i < this.forms.length; i++) {
    if (page == (i + 1)) {
      this.forms[i].setVisible(true);
    } else {
      this.forms[i].setVisible(false);
    }
  }

  // Remember the current page.
  this.currentPage = page;
};

// nextPage(  ) goes to the next page (or to the first page if this is the last page). 
MultiPageForm.prototype.nextPage = function (  ) {

  // Increment the current page.
  this.currentPage++;

  // If we're past the last page, go to the first page instead.
  if (this.currentPage > this.forms.length) {
    this.currentPage = 1;
  }

  // Display the new current page and hide the other pages.
  this.setPage(this.currentPage);
};

// prevPage(  ) goes to the previous page (or the last page if this is the first one).
MultiPageForm.prototype.prevPage = function (  ) {

  // Decrement the current page.
  this.currentPage--;

  // If we're before the first page, go to the last page instead.
  if (this.currentPage < 1) {
    this.currentPage = this.forms.length;
  }

  // Display the new current page and hide the other pages.
  this.setPage(this.currentPage);
};

Here is an example that implements a multipage form:

#include "Form.as"

// Create two input text fields.
_root.createTextField("name_txt",  1, 100, 100, 100, 20);
_root.createTextField("email_txt", 2, 100, 130, 100, 20);
name_txt.border  = true;
name_txt.type    = "input";
email_txt.border = true;
email_txt.type   = "input";

// Create a Form object and add the text fields to it. This is the first page.
myForm0 = new Form(  );
myForm0.addElement(name_txt);
myForm0.addElement(email_txt);

// Create two radio buttons and add them to a group.
_root.attachMovie("FRadioButtonSymbol", "myRadioButton0_rb", 3);
_root.attachMovie("FRadioButtonSymbol", "myRadioButton1_rb", 4);
myRadioButton0_rb.setGroupName("myRadioButtonGroup");
myRadioButton1_rb.setGroupName("myRadioButtonGroup");
myRadioButton0_rb.setLabel("item 1");
myRadioButton1_rb.setLabel("item 2");
myRadioButton0_rb.setData("label 1");
myRadioButton1_rb.setData("label 2");
myRadioButtonGroup.setPositions(100, 100);

// Create a Form object and add the radio button group (not the individual radio
// buttons) to it. This is the second page of the form.
myForm1 = new Form(  );
myForm1.addElement(myRadioButtonGroup);

// Create a combo box and a Submit button.
_root.attachMovie("FComboBoxSymbol",   "myComboBox_cb", 5, {_x: 100, _y: 100});
_root.attachMovie("FPushButtonSymbol", "submitBtn_pb",  6, {_x: 100, _y: 130});
myComboBox_cb.setDataProvider(["a", "b", "c"]);

// Create a Form object and add the combo box and Submit button to it. This is the
// third page. The Submit button should be visible on the last page only.
myForm2 = new Form(  );
myForm2.addElement(myComboBox_cb);
myForm2.addElement(submitBtn_pb);

// Create a MultiPageForm object and pass it the three Form pages.
myMultiForm = new MultiPageForm(myForm0, myForm1, myForm2);

// Display the first page of the form.
myMultiForm.setPage(1);

// Implement the Submit button as shown in Recipe 11.17.
submitBtn_pb.setLabel("submit");
submitBtn_pb.onRelease = function (  ) {
  // Submit form
};

// Create previous and next buttons to navigate the pages of the form.
_root.attachMovie("FPushButtonSymbol", "prevBtn_pb", 7, {_x: 100, _y: 160});
_root.attachMovie("FPushButtonSymbol", "nextBtn_pb", 8, {_x: 210, _y: 160});

prevBtn_pb.setLabel("previous page");
prevBtn_pb.onRelease = function (  ) {
  _root.myMultiForm.prevPage(  );
};
nextBtn_pb.setLabel("next page");
nextBtn_pb.onRelease = function (  ) {
  _root.myMultiForm.nextPage(  );
};

When you create a multipage form in this manner, you must ensure that all objects have unique depths. All the forms are really on the same frame but are hidden at different times. Therefore, if you create form elements with the same depths, the latter one will overwrite the former.

11.16.4 See Also

Recipe 11.17