Back
 

Making a basic wizard/expert with Delphi
By Tracey Sandbrook


In your own applications you may like to have wizards, or experts. Wizards and Experts are the same thing.
Wizards are step-by-step procedures which ask for the needed information, and should be easy to use and should make things easy to do and understand for the user.
If you are not sure about what a wizard is, go to Database | Form Wizard (we have a tutorial on using this wizard on the Database Wizard web page).

Here we will explain how to make a basic wizard.
This may look like a long tutorial, but it is really very simple, quick, and easy.

Note: For this tutorial you will need the RXLibrary.
This is free for all versions of Delphi, and can be downloaded here.



 
 
1.  Setting up the Form

Create a new application.

Go to the Win3.1 tab on your Component Palette. Click on the TNotebook component then click on your Form.
With Notebook1 selected, go to the Object Inspector and change the Align property to alTop and the Height property to 270.

Press your ESC key on your keyboard so that Form1 is selected in the Object Inspector.
Set these Form1 properties:

Height = 330
Caption = 'Business Card Wizard'.
Font.Name = Arial

Now go to the Additional tab in your Component Palette and drop three TSpeedButton components onto your form. Make sure you do not drop these SpeedButtons onto Notebook1, drop them underneath the TNotebook onto the Form.
From left to right, the SpeedButtons should be in the order of SpeedButton1, SpeedButton2, and the last button should be SpeedButton3.

Click on SpeedButton1, hold down your Shift key, and click on SpeedButton2 and SpeedButton3.
This selects all three components at the same time.
Another way to do this is to click your left mouse cursor above and to the right of SpeedButton1. Hold down the left mouse button and drag a selection around the three buttons. Let go of the left mouse button, and they are all selected.
Now you can edit the properties for all three components at the same time in the Object Inspector.

First, set the Flat property to True and the Width property to 70.

Click on the Form or Notebook1 to take the selection off the three SpeedButtons, then drag SpeedButton1 to the left of SpeedButton2 and SpeedButton3 to the right of SpeedButton2.

Re-select all three SpeedButtons together.
Now go to View | Alignment Palette.
Move your mouse cursor over the buttons until you come to one with a hint saying: "Space equally, horizontally".
If you cannot see any hints, then try right-clicking in the Alignment Palette and make sure Show Hints is checked.
Now that the buttons are equally spaced horizontally, we want to click on Align Bottoms.

Set these properties in the Object Inspector for these SpeedButtons:

SpeedButton1
Caption = '< Back'
Left = 178

SpeedButton2
Caption = 'Next >'
Left = 250

SpeedButton3
Caption = 'Close'
Left = 352
 
 
2.  Adding TPageManager

Now go to the RXTools tab on your Component Palette, and drop the TPageManager component onto your form.

Set up these properties:

NextBtn = SpeedButton2
PageOwner = Notebook1
PriorBtn = SpeedButton1

NextBtn is the button that will move to the next page in the TNotebook component (we will add the pages to Notebook1 soon).
PriorBtn is the button that will move back a page in Notebook1.
PageOwner is what PageManager1 will be managing.
 
 
3.  TNotebook

Now we will add some pages to Notebook1.
Click on Notebook1, in the Object Inspector go to the Pages property and double-click in the right column.
The Notebook Editor dialog will appear.
Click on the Edit button to edit the Default page. In the Edit dialog box, change the Page Name to say 'Introduction'.
Click OK.

Now click on the Add button and add Page One, Page Two, Page Three and Page Four.
Click Close in the Notebook Editor dialog.

Go to the ActivePage property and using the drop-down list for this property choose the 'Introduction' page.
 
 
4.  The Introduction Page

Drop a TPanel onto Notebook1. Set Panel1's Align property to alClient, and make the Caption property blank.
Drop a TLabel onto Panel1, and set Label1's Align property to alTop.
Set the Caption to say 'Welcome to the Business Card wizard'.
Set the Font size to 10, Bold, and Underline.
Set the Color property to clWhite.
Drop a TMemo onto underneath Label1, and set these properties:

Align = alClient
Color = clBtnFace
ReadOnly = True
ScrollBars = ssVertical

Double-click in the Value column in the Object Inspector next to the Lines property.
When the String List Editor dialog pops up, Copy and Paste this text into it (Leave the first line blank to bring the text in the memo down from Label1):
------

This will create a basic Business card for you.

Simply follow the instructions on the next few pages and fill out the
required information and you will be presented with a Business card
that will be saved onto your hard drive.

To navigate through the wizard use the Back and Next buttons at
the bottom of this window.
If at any time you wish to exit, simply click on the Close button.
 

Thank you for using a DPSC product,

From all of us here at the Delphi Programming Source Code web site.
------

Click OK in the Strings List editor.

Click on Memo1, then press ESC twice so that Notebook1 is selected in the Object Inspector.
Change the ActivePage using the drop down list, set it to: Page One
 
 
5.  Company Details

Drag and Drop a TPanel onto Notebook1, set its Align property to alClient and remove any text in the Caption property.
Put a TLabel onto Panel2, and set it's Align property to alTop, and Font Size to 10 and make it Bold. Make the Caption 'Company Details'.
Then set the Label's Color to clWhite.

Go to the Additional tab on your Component Palette and drop a TImage component on Panel2 under Label2.
Double-click on Image1, so that the Picture dialog appears. Click on the Load button.
Load this file in: ..\Images\Splash\256color\Factory.bmp
You will find the Images directory\folder off your main Delphi folder (eg: c:\Delphi 3\Images\Splash\256color\Factory.bmp).
Click on the OK button.
Set these properties for Image1:
Left = 3
Stretch = True
Top = 19

Hold down the Shift key on your keyboard and click on the TLabel component in the Component Palette.
Drop three TLabels onto Panel2 next to Image1.

Set Label3's properties:
Caption = Company Name:
Left = 117
Top = 22

Set Label4's properties:
Caption = Your Title:
Left = 173
Top = 58

Set Label5's properties:
Caption = Motto:
Left = 169
Top = 81

Put a fourth label underneath Image1, and give it a caption of 'Graphic:'.
Add one more label at the bottom of Panel2.
Put this caption in it: 'For best results, please make your image less than 105 x 105.'

Drop three TEdit components next to Company Name, Your Title, and Motto. Align them next to the labels so that they are presentable.
Make each TEdit Width property = 225 and the Text property empty.
Change the names of each TEdit, so that they are:

Edit1 = CompName
Edit2 = Title
Edit3 = Motto

Put another TEdit underneath the 'Graphic:' label. Name this TEdit 'Graphic'.
Set the Width the 388 and the Text property to blank.
Drop a TSpeedButton next to the Graphic TEdit.
Set these properties for SpeedButton4:
Caption = '...'
Flat = True
Height = 22
Line up SpeedButton4 next to the Graphic TEdit again.

Drop a TOpenPictureDialog component onto your form.
Double-click on SpeedButton4, so that you can edit it's OnClick event.
Put in this code:

procedure TForm1.SpeedButton4Click(Sender: TObject);
begin
  if OpenPictureDialog1.Execute then
    begin
      Graphic.Text := OpenPictureDialog1.FileName;
    end;
end;

Press ESC until Notebook1 is selected in the Object Inspector. Using the drop-down list in the ActivePage property, choose Page Two.
And on to the next step...
 
6.  More Details

Drop on the usual TPanel, set it's Align property to alClient, and remove any text in the Caption property.
Put a TLabel onto Panel3, and set it's Align property to alTop, and Font Size to 10 and make it Bold. Make the Caption 'More Details'.
Then set the Label's Color to clWhite.

Hold down Shift, then click on the TLabel component on the Component Palette.
Drop eight labels onto Panel3.
Name them:

Label9 = Full Name
Label10 = Address
Label11 = Town/City
Label12 = Country
Label13 = Phone
Label14 = Fax
Label15 = Email
Label16 = Web Site

Using the Alignment Palette, 'Align right edges' and 'Space equally, vertically'.
Now add a TEdit next to each label. Give each TEdit a new name, make the name the Label's caption, but remove any spaces or characters other than letters.
Remove the Text for each TEdit, make the Height = 20 and the Width = 300.

Make sure each TLabel lines up with its TEdit.

Press ESC until you have Notebook1 selected. Set it's ActivePage to 'Page Three'.
 
 
7.  Thank You

Drop on another TPanel, set it's Align property to alClient, and remove any text in the Caption property.
Put a TLabel onto Panel3, and set it's Align property to alTop, and Font Size to 10 and make it Bold. Make the Caption 'Thank You'.
Then set the Label's Color to clWhite.

Drop a TMemo onto Panel4. Set these properties:

Align = alTop
Color = clBtnFace
Height = 220
ReadOnly = True
ScrollBars = ssVertical

Put this in the Lines property:
------

Thank you for filling out these details.

Our next step is to compile all the information you have given us into a
basic business card.
Please note that it may take a short while for this to be done on slower
computers.

Click Back to change any of your information, or click on Compile to see your
business card.

If you like the look of your card, then press F9. Your card will be saved to the
folder of this application.
If you would like to change some of the information, close the card and
press the Back button in this wizard.

When you have finished viewing your card, Close the viewing dialog and click
Next in this wizard to continue.

------

Drop a TSpeedButton underneath the memo.
Set its properties:

Caption = Compile
Flat = True
Width = 75
 
 
8.  Compiling the card

Go to File | New Form.
A new blank form will appear, called Form2.
Change these properties for Form2:

Font = Arial, Size 10
Height =  330
Caption = 'Your completed Business Card'.

What we are going to do is get all the information gathered in the wizard and put it on Form2. Then we are going to take a picture of the form (without border or title bar) and save it as BCard.bmp in the folder of this project.

Remember that for the present time, we are working with Form2 and not Form1.

Drop a TImage onto the form in the top left corner, and set its Stretch property to True.
Put four labels onto Form2 next to Image1. Use the Alignment Palette to align their left edges and to space them equally, vertically. After you have straightened them up, you may like to move Label3 and Label4 a little further down from the top two labels, but do not move these labels below Image1.
These are what the labels will hold:
Label1 = Company Name
Label2 = Company Motto
Label3 = The users name
Label4 = The users title

You may like to change the label's captions to show what they will hold so that it will make working at design-time with these labels less confusing.

Make Label1's Font Bold, and Label2's Font dark blue and Italic.

Drop a TMemo on the form.
This memo will hold seven lines of text, and we do not want the user to have to scroll down the box or it will cut some of the information out of the picture.
Set these properties for Memo1 on Form2:

Height = 118
Width = 374
Top = 108
Left = 27
Color = clBtnFace

Later, we will remove the BorderStyle from our Memo, but for now, because we want to see where the memo is while we are working with this form, we will leave it on.

Drop two labels underneath Memo1.
Align them using the Alignment Palette.
Make both Label5 and Label6 have a Blue font and Underline.

Now you can set Memo1's BorderStyle to bsNone.

Set the Color property to clWhite for both Memo1 and Form2.

Go back to Form1.

Double-click on SpeedButton5 (our Compile button) so that we can edit the OnClick event for this button.

Put in this code:

procedure TForm1.SpeedButton5Click(Sender: TObject);
begin
  Form2.Image1.Picture.LoadFromFile(Graphic.Text);
  Form2.Label1.Caption := CompName.Text;
  Form2.Label2.Caption := Motto.Text;
  Form2.Label3.Caption := FullName.Text;
  Form2.Label4.Caption := Title.Text;
  Form2.Memo1.Lines[0] := Address.Text;
  Form2.Memo1.Lines.Add(TownCity.Text);
  Form2.Memo1.Lines.Add(Country.Text);
  Form2.Memo1.Lines.Add(Phone.Text);
  Form2.Memo1.Lines.Add(Fax.Text);
  Form2.Memo1.Enabled := False;
  Form2.Label5.Caption := Email.Text;
  Form2.Label6.Caption := WebSite.Text;
  Form2.ShowModal;
end;

Press Shift + F12 so that the View Forms dialog comes up. Double-click on Form2.
Go to the Object Inspector, Form2 should be selected in the drop-down list.
Go into the Events tab, and double-click in the value column next to the OnKeyDown event.

procedure TForm2.FormShow(Sender: TObject);
begin
  Path := ExtractFilePath(Application.ExeName);
  if Key = VK_F9 then
    GetFormImage.SaveToFile(Path + 'BCard.bmp');
end;

Scroll up in the Code Editor until you come to the Private Declarations, and declare:

  private
    { Private declarations }
    Path : String;
  public
    { Public declarations }
  end;

Go back to Form1.
Press ESC until you have Notebook1 selected in the Object Inspector.
Set the ActivePage property to 'Page Four'.
 
 
9.  The last page

Drop a TPanel onto Notebook1. Set Panel5's Align property to alClient, and make the Caption property blank.
Drop a TLabel onto Panel5, and set Label18's Align property to alTop.
Set the Caption to say 'You have completed your Business Card'.
Set the Font size to 10, and Bold.
Set the Color property to clWhite.
Drop a TMemo onto underneath Label18, and set these properties:

Align = alClient
Color = clBtnFace
ReadOnly = True
ScrollBars = ssVertical

Double-click in the Value column in the Object Inspector next to the Lines property.
When the String List Editor dialog pops up, Copy and Paste this text into it:
------
 

Your Business Card has been compiled and saved to a file in the folder that
this executable is in and is called "BCard.bmp".
This can be opened with Microsoft Paint and most other graphics programs.

To finish this wizard, click on the Close button.
 

Thank you!
------

Double-click on the 'Close' button at the bottom of Form1.
Add this code:

procedure TForm1.SpeedButton3Click(Sender: TObject);
begin
  Close;
end;
 
 
10.  Run your program

Make sure Notebook1's ActivePage property is set to 'Introduction'.

Run your program.
A dialog will appear saying:
Form 'Form1' references 'Form2' declared in unit 'Unit2' which is not in your USES list. Do you wish to
add it?
Click Yes, then run your program again.

Try out your wizard, then see how the bitmap looks.
 



There are many different types of wizards. Some may prefer the buttons to be vertical down the left or right side, others may prefer them horizontal at the top or bottom. Some may want explanations at the bottom of each step, some may want more images.
This was just a very basic wizard that did something simple. You can easily use the RXLibrary's  TPageManager component for making many different types of wizards quickly and easily.


Back