Lesson 2: EuroCC: forms, edits, buttons

  In this lesson we'll create a simplified version of EuroCC, the application that was introduced in lesson 1. For now, the accent will not be on what the program does, but rather on how to start a project, how to save the files, add components, and so on. In lessson 3, we'll continue in a higher gear.

Preparation

  1. If you haven't done so yet, download euroen01.zip to \DelphiLa.
    Hold your horses! Don't unzip it now: every project will get it's own directory, and it is best to keep all the original files in \DelphiLa.

  2. Create a new directory: \DelphiLa\EuroEN01. Of course, you can choose other names for your directories and projects. But if you use the structure that I propose here, it will be a lot easier to understand each other.

  3. Copy euroen01.zip to \DelphiLa\EuroEN01 and "unzip" the file in this directory. Check if you've got the files eurenl01.dpr, euroform.dfm and euroform.pas.

Starting at the end

As usual, we'll start with the end: how should or simplified EuroCC look like and what should it do?

  1. Start Delphi and open the project euroen01.dpr through the File menu and Open Project...

  2. Compile the application. If you have forgotten how to do that, have a look at lesson 1.

  3. After a succesful compilation, Delphi starts the application in the "environment" of the debugger.

    EuroEn01 starts after the compilation

  4. Just play around with the program. Notice that Delphi gives an error message and that it pauses the program, if you enter an invalid value and then click a button. To continue, click Run in the Run menu, or press F9. In the message-box that appears, click OK. Afterwards you do not get a second error message, because in this simple version of EuroCC we are not checking for a valid input (compare this behaviour with lesson 1).

    you entered 200 and you clicked the second button

  5. Stop the application.
    In the File menu, click Close All. Delete all files from \DelphiLa\EuroEN01, using your favorite file manager (Windows Explorer,...).

Your Turn !

  1. Open the File menu and click New Application. Delphi will start a new project:

    • Delphi's title bar shows the name of the new project: Project1. This means that Delphi created a dpr-file (project file) called Project1.dpr.
      Note: if you start several new projects one after the other during the same session, the second project gets the name Project2.dpr, the next one will be Project3,... Delphi consequently gives names along these lines to new files and new components.

    • Notice the window with the title Form1. That window (form) is the basis for your project. Delphi-applications are based on Forms. Every application has one or more Forms.
      A Form is a component in the shape of a window. That's why Bill called it "Windows"...
      On the form you put other components, such as buttons, Edit-boxes, Radiobuttons, ListBoxes, ComboBoxes and other well known Windows-creatures.

    • Behind the window "Form1" you'll find the Editor window. That's where the source code can be viewed and edited. The source code is the result of the cooperation between Delphi and yourself: for every unit, Delphi creates a template that you can complete.
      For now, you'll probably see nothing but the bottom of the Editor window (its status bar).

  2. Click the Editor window, e.g. its status bar (the strip with the indication 1: 1 Modified Insert). The entire Editor window comes into view:

    Unit1 is the name of the Unit that goes with Form1. Delphi created the file Unit1.pas, containing the source code for Form1, the main form of the application.

    For the moment, all these files only exist in the RAM of your computer. You have to save them to disk files.

  3. Open the File menu and click Save All.
    In the dialog Save Unit1 as, select directory \DelphiLa\EuroEN01. Enter euroform as the file name. Delphi saves the text of the unit in file euroform.pas. The other data for Form1 are saved automatically in euroform.dfm.

  4. In the next dialog, Save Project1 As, the right directory is already selected. Enter euroen01 as file name. Delphi saves the composition-data of the project as euroen01.dpr (this file contains the names of the units and the forms that you created, the names of other units used by the project, and so on).

Notice that the title bar of the Editor window has changed to euroform.pas. But where is the project file, the dpr-file? It isn't visible at this moment, but that isn't important anyhow. Don't change anything in dpr-files if you do not know exactly what you are doing, better leave the management of the project to Delphi.

Files and file naming

It is best to save all files of a new project as soon as possible. That way, you won't experience nasty surprises as lost projects (what was that name again?), or an existing project being overwritten by a new one (and that's a lot worse...)

Quick Analysis

een korte analyseAnalysing before you start is half of the game.

We know that 1 Euro equeals 40.3399 BEF (Belgian frank). BTW: the same is true for the Luxemburg frank).

Clicking a button should convert the value in the edit-box to another currency. Also the name of that currency should be shown.

Components for this application: 1 edit-box for data entry, 2 buttons (one for the conversion Euro - Belgian franks, one for the reverse), 6 labels (1 for the name of the starting currency, 1 for the text "equals", 2 for the results, 2 for the currency names).

Adding the Components

The next steps explain how to add the components to the form:

  1. Click the form window: it comes to the front. Tip: you also can press F 12, which switches between the "unit" in the editor and the "form".
    Probably you will see a raster on the form, facilitating the alignment of the components. For reasons of clarity I omitted this raster in the pictures. On my PC, I switched off the form-raster: about everything can be personalized in Delphi. But don't change too much if you only just started with Delphi, because otherwise it would be quite difficuly to restore the original settings. In the worst case scenario, you would have to reinstall Delphi :-(((

  2. In the component palette, click the icon of the Edit component. It is on the standard page of the palette:

  3. Click somewhere in the form. An Edit-box appears on the form, with the text Edit1 (this is the name of the component).

  4. Drag component Edit1 to the upper left-hand corner of Form1, right below the title bar.

  5. Select the Label component from the component palette.

    Move the cursor somewhere right of Edit1 and click: Label1 is placed on the form.

  6. Once again, select the Label from the component palette. Then, click to the right of Label1. Label 2 is born.

  7. Select the Button component from the component palette (also on the standard page). add it to the form, somewhere below the Edit-box. A button with the name Button1 appears.

  8. Below Button1, add a second button to the form.

  9. Add two Labels to the right of Button1 (Label3 and Label4). Add two more labels to the right of Button2 (Label5 and Label6). By now, your form should look similar to this:

  10. Drag the components until Form1 more or less matches the picture shown above.

    Probably your form is a lot bigger than the one that I show here. Size the form by dragging the bottom left corner of the window's frame, just as you would do with any other window.

  11. Time to save your work: in the File menu, select Save All.

  12. Let's test. In the Run menu, select Run. Or press key F9.

    Delphi will compile and run your program.
    The program doesn't seem to do anything, but make no mistake: this is a full blown Windows application! You can size and move the window, enter text in the Edit, click the buttons,...

  13. Stop the application.

The Object Inspector: Properties and Events

Time to bring some life to the project.

  1. In the Object Inspector you change the properties of the components: their caption, color, size, font, and so on.
    If you don't see the Object Inspector, open it thru' the command in the View menu, or press key F11.

    Object Inspector

  2. Make sure that Form1 is selected in the Object Inpector, as shown in the picture above (select Form1 in the Inspector's listbox). Then, click on the Caption property and type: Euro Currency Convertor. The text in the form window's title bar changes as you type.

  3. Click on Label2 in the form in order to select it. In the Object Inspector, change the label's Caption to equals (you can also select component Label2 in the Inspector's listbox). Then, change the Caption of Label4 to Euro and change the Caption of Label5 to BEF.
    Change the Caption of Button1 to Euro -- BEF.
    Change the Caption of Button2 to BEF -- Euro.

  4. The names of our components are not very descriptive. Let's change the names of the components that probably will be mentioned in the source code (that is, the components whose properties will by changed dynamically when the program is running). Select Edit1 and change it's Name property to InputEdit.
    Likewise, change the names of some other components as follows:
    Label1 : CurrLabel
    Label3 : EuroLabel
    Label5 : BEFLabel
    Button1 : EuroButton
    Button2 : BEFButton

  5. Change InputEdit's Text property to 100. This assures that InputEdit contains a starting value when the programs starts.

  6. In the Object Inspector, you also indicate the events to which a component should respond. Select the EuroButton and in the Inspector select the Events tab: you'll see the events OnClick, OnDoubleClick,...

  7. Double-click in the white field to the right of the OnClick event. This causes Delphi to write EuroButtonClick into the field. This will be the name of the Event Handler, the routine that is executed each time EuroButton is clicked.

    event OnClick

  8. In the Editor, Delphi has created a template for this Event Handler:
    procedure TForm1.EuroButtonClick(Sender: TObject);
    begin
    
    end;

  9. Let's experiment for a moment with some (temporary) source code. Between the words begin and end of the Event Handler, you type the code that should be executed when EuroButton is clicked:
    CurrLabel.Caption := 'Euro';
    EuroLabel.Caption := InputEdit.Text;

    The entire Event Handler should read as follows:

    procedure TForm1.EuroButtonClick(Sender: TObject);
    begin
      CurrLabel.Caption := 'Euro';
      EuroLabel.Caption := InputEdit.Text;
    end;

    Attention! The word Euro is between single quotes, not double qoutes!

  10. Compile the program. Type something in the Edit-box and click on the EuroButton: the text 'Euro' appears in CurrLabel and the text of the Edit appears in EuroLabel. In Delphi-language:
    • the string 'Euro' is assigned to the property Caption of MuntLabel;
    • the property text of InputEdit is assigned to the property Caption of EuroLabel.

  11. Stop the programma and save the project (Save All).

See you next time for lesson 3!

[ TOP ]

Every application contains one or more Forms...
But to every rule there is an exception... ;-)
Delphi also allows the creation of applications without forms. I won't treat this in the lessons, as they are about RAD for Windows.

© Copyright 1999 
Studiebureau Festraets