Using an Invisible Tab Control to Create a Multi-Page Look

How to simulate a wizard by using an invisible tab control on a page.

About this technique	Details
Category	HTML Client Techniques> Miscellaneous
Description	You'll learn about: Setting up the page Adding code to the Back button Adding code to the Next button
Related reading	See the chapter on programming pages in the Programmer's Guide

When you use multiple pages to display sequential screens in an application, you must handle page state. This requires extra coding. In addition, it can be expensive to load data on each page. An alternative approach is to use an invisible tab control on a page. For example, you could use an invisible tab control to simulate a wizard. In this case, you could add Next and Back buttons outside of the tab control to switch between the panes of the tab control.

Setting up the page   

Suppose your page has a tab control that has 3 panes that act like a wizard. The page has Next and Back buttons to allow the user to navigate between the panes.

To make the tab control invisible at runtime, you need to uncheck the Show tabs at runtime checkbox in the Property Inspector for the tab control. This makes the tabs disappear, so you need to provide a way to navigate between the panes. You can do this programmatically. First you need to make the control programmable. To make the control programmable:

1. Name the tab control.

2. Mark it as Programmable.

The page has a member variable called m_currentPane that keeps track of the current pane. This variable is an integer with an initial value of 0:

  int m_currentPane = 0; 

The pageLoaded event for the page makes the first pane the one that is selected initially. In addition, it sets the text on the Next button to "Next >". (When the user displays the third pane, the text on the button is "Finish"):

  tabControl.setCurrentPane(0); 
  btnNext.setLabel("Next >"); 

To specify the current pane in a tab control, you need to call the setCurrentPane() method on the control, passing an integer value that indicates which pane should be displayed. The pane numbers are zero-based. Therefore, to access the first pane, you need to specify 0 as the integer value.

Adding code to the Back button   

The Back button decrements the m_currentPane variable and sets the current pane in the tab control to the value of m_currentPane. It also sets the text of the Next button. If the value of m_currentPane is 0, it simply returns:

  if (m_currentPane == 0) return; 
  tabControl.setCurrentPane(--m_currentPane); 
  btnNext.setLabel("Next >"); 

Adding code to the Next button   

The code behind the Next button uses a switch statement to determine which pane is current and perform appropriate processing. In addition, it increments the m_currentPane variable and sets the current pane to the value of m_currentPane:

  switch (m_currentPane) { 
     case 0: 
        btnNext.setLabel("Next >"); 
        break; 
     case 1: 
        btnNext.setLabel("Finish"); 
        break; 
     case 2: 
        //The user has clicked the Finish button. 
        //Perform validation and update the database. 
  } 
  tabControl.setCurrentPane(++m_currentPane);