Creating Wizard Pages

Introduction

A wizard page is a dialog box that is part of a suite usually used to create or configure something. If you have installed a printer using the Add Printer from the Printers folder, or if you have used applications such as Microsoft Access to create objects automatically, then you are quite familiar with wizard pages.

A wizard (usually) starts by displaying a dialog that has at least a Next button. After performing an action and clicking Next, you are presented with another dialog or area displaying buttons such as Next and Back. These two buttons allow the user to navigate back and forth while performing a specific task. A more advanced wizard can display many other buttons than that. Such wizards display Back, Next, Finish, Close (or Cancel), and sometimes Help on the same dialog box.

Property pages and wizard are easy to create in Borland Delphi. In MSVC, you <<must>> involve a class called CPropertySheet, then create dialog boxes based on the CPropertyPage class. Because Borland Delphi ships with so many controls, it provides various options to create wizards. The technique we are going to use here uses a simple logic. By dragging and dropping controls on a form, all you have to do is decide what control is visible when.

 

Dragging And Dropping Controls

Borland Celphi ships with so many container controls we are going to use panels to carry controls relative to each page of our wizard. When other controls are placed on a panel, the panel acts as their parent. This means when the panel is not Enabled or Visible, the controls it hosts abide by the same property.

  1. Start Borland Delphi with the startup form.

  2. From the Standard page of the Component Palette, double-click the Panel control.

  3. Set the following properties for the panel (leave the other properties intact): BevelOuter = bvNone; Caption = empty; Height = 265; Left = 0; Name = pnlFirstPage; Top = 0; Width = 430;

  4. From the Component Palette, click the Edit control and click anywhere on the panel. This is a simple control that will serve as an indication when we are in the first page.

  5. Click the panel on the form to make sure it is selected.

  6. On the main menu, click Edit -> Copy.

  7. Click an empty area on the form to deselect the panel and select the form.

  8. On the main menu, click Edit -> Paste.

  9. With the new pasted panel still selected, change its properties as follows:  Left = 0; Name = pnlSecondPage; Top = 0

  10. From the Component Palette, click the ScrollBox control and click on the panel.

  11. Click an empty area on the form to select the form.

  12. From the main menu, click Edit -> Paste.

  13. For the newly pasted panel, change the properties as follows: Left = 0; Name = pnlThirdPage; Top = 0

  14. On the Component Palette, click the GroupBox control and click on the current panel.

  15. On the Component Palette, click the Additional tab.

  16. Click the Bevel control.

  17. Click an unoccupied area in the lower section of the form.

  18. Change the properties of the Bevel control as follows: Height = 25; Left = 0; Shape = bsTopLine; Top = 272; Width = 430.

  19. On the Component Palette, click the Standard tab.

  20. Click the Button control.

  21. Click in the lower section of the form

  22. Change the properties of the button as follows: Caption = &Back; Left = 112; Name = btnBack; Top = 280

  23. Add another button on the right side of the Back button and change its name to btnNext

  24. Add another button of the right side of the Next button and change its name to btnFinish

  25. Add one more button on the right side of the finish button. Set its Cancel property to True and its name to btnCancel

 

Configuring the Wizard Pages

The design of the form with its control was quite straightforward. To configure the pages, we will use the container ability of a panel. This will allow us to decide what panel to show and which one to hide, and when

  1. Double-click the Cancel button to access its OnClick() event.

  2. Implement the event as follows: 
    procedure TForm1.btnCancelClick(Sender: TObject);
begin
    Close
end;

  3. To bring back the form, press F12.

  4. Double-click an empty area on the form to access the form's OnCreate event.

  5. Implement the FormCreate event as follows: 
    procedure TForm1.FormCreate(Sender: TObject);
begin
    // We are in the first page now
    pnlFirstPage.Visible  := True;
    pnlSecondPage.Visible := False;
    pnlThirdPage.Visible  := False;
    btnBack.Enabled       := False;
end;

  6. Press F12 to display the form.

  7. Double-click the Back button to access its OnClick event.

  8. Implement it as follows: 
    procedure TForm1.btnBackClick(Sender: TObject);
begin
    if pnlSecondPage.Visible = True Then
    begin
        pnlFirstPage.Visible  := True;
        pnlSecondPage.Visible := False;
        pnlThirdPage.Visible  := False;
        btnBack.Enabled       := False;
        btnNext.Enabled       := True;
        Caption := 'First Page';
    end
    else if pnlThirdPage.Visible = True Then
    begin
        pnlFirstPage.Visible  := False;
        pnlSecondPage.Visible := True;
        pnlThirdPage.Visible  := False;
        btnBack.Enabled       := True;
        btnNext.Enabled       := True;
        Caption := 'Second Page';
    end;
end;

  9. Press F12 to bring back the form.

  10. Double-click the Next button and implement its OnClick event as follows: 
    procedure TForm1.btnNextClick(Sender: TObject);
begin
    if pnlFirstPage.Visible = True Then
    begin
        pnlFirstPage.Visible  := False;
        pnlSecondPage.Visible := True;
        pnlThirdPage.Visible  := False;
        btnBack.Enabled       := True;
        btnNext.Enabled       := True;
        Caption := 'Second Page';
    end
    else if pnlSecondPage.Visible = True Then
    begin
        pnlFirstPage.Visible  := False;
        pnlSecondPage.Visible := False;
        pnlThirdPage.Visible  := True;
        btnBack.Enabled       := True;
        btnNext.Enabled       := False;
        Caption := 'Third Page';
    end;
end;

  11. Press F12 to bring back the form.

  12. Double-click the Finish button and implement its OnClick() event as follows:
      
    procedure TForm1.btnFinishClick(Sender: TObject);
begin
    ShowMessage('That is the end of the Wizard');
    Close
end;

  13. To test the application, press F9.