Making a basic
wizard/expert
with Delphi
By Tracey Sandbrook
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.