Difference between revisions of "Howdy World (Hello World on steroids)"

From Lazarus wiki
Jump to navigationJump to search
Line 62: Line 62:
  
 
Make the following changes to the properties of Edit1.
 
Make the following changes to the properties of Edit1.
* change Name to ''edDisplay'' (@@: Hungarian).
+
* change Name to ''edDisplay''.
 
* change Align to ''alTop'' (change Align, not Alignment!).
 
* change Align to ''alTop'' (change Align, not Alignment!).
 
* change Alignment to ''alRightJustify'' (change Alignment, not Align).
 
* change Alignment to ''alRightJustify'' (change Alignment, not Align).

Revision as of 20:56, 8 June 2011

Template:newpage This Wiki chapter is a tutorial for Lazarus. It explains the first steps to get a working piece of software and explains some of the best practices along the way. The end result is twofold (hopefully): the reader understands the basic concepts to build software with Lazarus and she has an actual piece of working software that can be embedded in other programs: a calculator. A calculator is fairly easy to implement and everyone understands it’s concepts. So no need to describe a lengthy business case beforehand. The calculator is limited to integer calculations, but can easily be extended. This tutorial does not describe the installation process of Lazarus. It is assumed that Lazarus is installed and ready for use (preferably the latest, stable version which at the moment of writing is Lazarus 0.9.30 with Freepascal v2.4.2). This tutorial is more or less platform independent (but targeted at thick clients). All screenshots were made on a Windows XP PC; hence the blue/red/grayish color scheme.

Let’s get started

It’s best to create a separate directory for every new project. So before getting our feet wet, let’s create a directory to save our Calculator project in (do this with your OS application of choice). This directory will be the root for all files created for the project.

  • Create a new directory for the demo project (let’s call it $HOME/CalculatorDemo).

(Text that describes actions that must be executed is bulleted like the previous line.)

With this out of the way it’s time to start a new Lazarus project.

  • Start Lazarus.
  • From the menu choose Project/New Project…
  • In the dialog that is presented select Application and press OK (if the IDE complains about unsaved changes, press No).

To make sure that all files of our new project end up in the right directory the project must be saved first.

  • From the menu choose File/Save All.
  • Select the directory that was created previously ($HOME/CalculatorDemo).
  • Enter a new project name: CalculatorDemo
  • Press Save (or whatever is the Save button in your own language)
  • The IDE wants to save the main form as well: enter ’’ufrmMain’’ as the forms unit name.
  • The IDE asks if the filename should be changed to a lowercase name. Confirm this by pressing the button ‘Rename to lowercase’.

In theory the program that is thus created is a piece of valid software that can be executed. Before compiling it for the first time, two changes are recommended: assigning new locations (directories) for the compiled units and target filename.

  • From the menu choose Project/Project Options…
  • Select Compiler Options/Paths (click on the node in the treeview)
  • Put the text ‘‘bin\’‘ before the target filename (or ‘‘bin/’‘ for a *nix environment)
  • Also note the ‘‘lib’‘ prefix for the ‘unit output directory’ (don’t change it).
  • Press OK

The image below is how this would look like on a Windows machine. tutcal project options.png

By doing this the project folder will not be cluttered with output that is generated by the compiler. The files in the project folder are required to (re-) build the program. Everything in the ’’lib’’ and ’’bin’’ directories can be deleted when archiving the project.

Now as a first test the project can be compiled and run.

  • Press F9 (the shortcut for compile, build and run the program)

If all went well a blank window is displayed. Now we know that a solid basis is created on which we can start building the program.

  • End the running program by clicking on the Close icon (this depends on the OS).

The first component

Lazarus has a so called ‘component palette’:

tutcal component palette.png

All components that are available to build a user interface are logically grouped on the component tabs. The actual number of tabs depends on the installed packages. But the basic palette looks something like the above image. The first tab is Standard, followed by Additional, Common Controls etc. To retrieve the type name of a component, hover with the mouse pointer above the component icon and a hint is displayed that gives the type name (to be more precise: the class type of the component is displayed). For an explanation of all controls look at this Lazarus introduction

The first thing that needs to be done for the Calculator program is to create a display area where the entered numbers are, well, displayed. For this a TEdit control is used.

# Note: the visual components are referred to as Controls. For now the difference between a 'component' and a 'control' is not that relevant. 

To place a control on the form, the form must have the focus. Pressing F12 on the keyboard changes the focus from the form editor to the source code editor and vice versa.

  • Press F12 once or twice to get the form window on top (see image below).

tutcal form on top.png

  • Select the Standard tab on the component palette. This is the tab that is selected by default.
  • Click on the TEdit component (hover above the component icons to get the class type names).
  • Click somewhere in the middle of the form. This places a TEdit control on the form that has a name that is the same as the control’s type without the capital 'T' and with a number at the end (e.g. Edit1). When a second TEdit control were to be placed on the form it would be named Edit2. And so forth. This applies to all components.

Now that the control is placed on the form it can be customized to our needs. This customization takes place in the Object Inspector. That is the window at the left side of the screen with the list of properties for the TEdit control that are customizable. tutcal object inspector.png

Properties determine the look and feel and behavior of a control. It’s easy to change a property: just click on one of them, enter a new value and press Enter. The effects on the control are instantly visible. The properties in the Object Inspector are all the properties for one control. In particular the control that has the focus/is selected. The control that is selected can be recognized by the small black squares that surround the control. So the way to change properties of a control is by first selecting it and then make the changes in the Object Inspector. If no control is selected, the form properties are displayed.

Make the following changes to the properties of Edit1.

  • change Name to edDisplay.
  • change Align to alTop (change Align, not Alignment!).
  • change Alignment to alRightJustify (change Alignment, not Align).
  • change BorderSpacing.Around to 6.
  • change Text to 0 (the number zero, not the letter oh).

These properties are pretty self-explanatory. Especially when the above changes are made and the effect is monitored on the form.

As a finishing touch the Font that is used to display texts on all controls will be changed. The font can be changed in two places: the font property of edDisplay or the form’s font property. Changing the font for the form itself has the benefit that all newly placed controls on the form will 'inherit' the new font. So that is where we are going to make the change.

  • Click somewhere in the middle of the form. This deselects the edDisplay control and selects the form itself. The form’s properties are now displayed in the Object Inspector.
  • In the Object Inspector click on the Font property. The Font line is now highlighted and a button with three dots is displayed.
  • Click on the button with the three dots. This opens the Font dialog.
  • Select Verdana, Bold, Size 10.
  • Press OK.

The Form’s title is not very meaningful. The default text 'Form1' is displayed.

  • In the Object Inspector click on the Caption property.
  • Change the caption text to Calculator Demo.

The result of all these actions is a form that looks something like this: tutcal form with tedit.png

Now is a good time to save the form.

  • Select from the menu File/Save or press the key combination Ctrl-S.

Remember to save and save often!

Buttons

What use is a calculator if numbers cannot be entered? So the next step is adding buttons for the digits 0..9. Before placing the buttons for the digits, a so called container is placed on the form. A container defines an area on a form where controls can be grouped together. The form is a container. A TPanel is another container that can be placed on a form. Containers can be placed inside other containers, but that’s for another tutorial.

  • On the component palette, select the TPanel control.
  • Click on the form to place the panel.

A new panel is now visible on the form with a default width, height and caption. Note that the font for the panel caption is inherited from the form. This panel will be used to group all buttons, so a number of properties must be changed.

  • Remove the text Panel1 from the caption property.
  • Change Align to alClient.
  • change Borderspacing.Around to 6.
  • increase the form’s Width to 300 (first click on Form1 in the Object Inspector treeview).
  • increase the form’s Height to 350.

(Increasing the size of the form gives us some space to move controls around.)

Now the digit buttons will be added.

  • On the component palette, select the TButton control.
  • Click on the form, somewhere in the middle, to place the button. The button is placed on the panel. this is visible in the Object Inspector treeview: Button1 is a so called child of Panel1. This effectively means that when Panel1 is moved, all child controls move with it. And when Panel1 is deleted, all child controls are deleted as well.
  • In the Object Inspector change Caption to 0
  • Change Width to 32.
  • Change Height to 30 .
  • Change Name to btnDigit0.

This must be repeated for the digits 1..9. The quickest way to do this is by copy/pasting the 0-button.

  • Right click on the button created above and select Copy from the pop up menu.
  • Right click somewhere else on Panel1 and select Paste; a second button is added to the panel. The only difference with the first button is the name btnDigit1.
  • change the Caption property in the Object Inspector to 1
  • repeat the Paste action 8 more times for the remaining buttons.
  • Move the buttons around on the form to get a lay out that looks like a calculator:

tutcal calculator digits.png

Next are the four buttons for the mathematical functions (add, subtract etc.).

  • Drop a new TButton on the panel.
  • Change Width to 32.
  • Change Height to 30 .
  • Change Caption to +
  • Change Name to btnFunction.
  • Copy/paste this button 3 more times, changing the caption to -, * and /.
  • Align the buttons vertically, right next to the digit buttons

And the 'special' buttons:

  • Copy/Paste the + button.
  • Change Caption to +/-.
  • Change Name to btnPlusMinus .
  • Position the button just below button 3.
  • Copy/Paste the + button.
  • Change Caption to C.
  • Change Name to btnClear.
  • Position the button to the right of button +.
  • Copy/Paste the + button.
  • Change Caption to =.
  • Change Name to btnCalculate .
  • Position the button to the right of button /

Not what all buttons are placed, resize the form to fit the buttons tightly.

It should look something like this:

tutcal calculator gui ready.png

Remember to save and save often!