This page is "browser friendly". Make your browser window as wide as you want it. The text will flow nicely for you. It is easier to read in a narrow window. With most browsers, pressing plus, minus or zero while the control key (ctrl) is held down will change the texts size. (Enlarge, reduce, restore to default, respectively.) (This is more fully explained, and there's another tip, at my Power Browsing page.)
Please concentrate so that you absorb everything in this tutorial. There will be a test on Friday. It may be a long slog... but worth it, I promise.
Your reward? I will try to refrain in my other tutorials from endlessly repeating various things which are explained here.
I would suggest working through this tutorial in several sessions. Trying to absorb it all in a single sitting may be overly ambitious, unless you have a good deal of relevant prior knowledge. Do, please, try to master what is here before attempting my other Lazarus tutorials... there are some fundamental issues, and some are not general Lazarus issues.
For almost everything in this tutorial (the main exception has an explanatory note at the relevant spot), what you would do in Delphi would be no different. At this level, the tutorial is as good for Delphi learners as it is for Lazarus learners. (I actually did the tutorial, but using Delphi (version 4), to test that assertion!)
Start up your Lazarus. Do "File | New | New Application". When I'd done that, and rearranged things on the screen a bit, I had....
In this tutorial we will create an application with two buttons...
One button to close down the application
One button to display the current time on the form
Yes... if I wanted a application to display time on the screen, I wouldn't require users to click a button to see what the time is! Please understand: this is just a little demo. It has enough in it to be useful for getting you started with Lazarus programming, without having so much in it that you will be overwhelmed.
Here's what you see in the illustration above. Across the top: the main Lazarus window, with the menu, which gives you ponderous access to everything (No more ponderous than with any large application.)
Also in the main window, the buttons which give you quick ways to do various things...
We'll introduce them as they are needed. You can always use the menus, anyway, if you can't find the button you want.
Lastly in the main window, we have the components palette....
This is a tabbed object. In the illustration, we are looking at the components in the "Standard" group.
At the bottom right of the screen, we have a wide window titled "Messages". This is where we get messages from the system when we try to do things. (If only everything were so mundane! Just thought I'd get that one out of the way!)
That leaves three windows, across (more or less) the middle part of the vertical dimension of the screen.
On the left, we have the Object Inspector. This is terribly important to your happiness while doing Lazarus programming, and we will come back to it.
Next is the Source Editor. It already has a bunch of stuff in it! This is the Lazarus- provided skeleton for our application. You will "write your program" here.
And lastly, on the right, a Window titled... for the moment... "Form1". This is the form design window. Here you will create the "face" of your application; here you will create what your users see.
Take a deep breath... Here we go...
(You might want to skim quickly through the material above one last time. Make sure it has "sunk in" before you proceed?)
Don't, by the way, for the moment worry about saving your work as you go along.
In the component palette, counting the one that is an arrow, a pointer, as the first, count across to the third icon... the one that says "OK". That's the button component. Click on it. Release your mouse button, move the mouse pointer to over the middle of the form, in the form designer, and click again. Ta da! You've put a button component on your form!! (It doesn't matter if it isn't quite in the right place on the form, etc, etc.)
I'll talk about what a "component" is in a moment. I'll explain why when you hovered over the icon on the component palette, the pop-up said TButton. But let's have a little "fun", first? (A very little, I fear, but some.) Bear with me?
Double-click on the button on the form. The screen may seem to slightly flicker. What you might not notice, unless you are alert, is that after you have double-clicked on the button on the form, some new material has appeared in the code in the Source Editor window. It is....
procedure TForm1.Button1Click(Sender: TObject); begin end;
... (Just in case you spot it: Some other new stuff appeared too, but we aren't going to talk about it today.)
Click on the empty line between the begin and the end just below the procedure TForm1.Button1Click(Sender: TObject);
That will put the insertion point there. Now type in...
... making the whole thing say...
procedure TForm1.Button1Click(Sender: TObject); begin close; end;
We've created an application! (Though it might not seem like it yet, and you haven't yet seen it in action, and it doesn't do much! but, hey! We have created an application!)
In the Lazarus main window buttons is a green "arrow", made of a right-pointing triangle. If you hover over the button I mean, you get a pop-up saying "Run".
Click the "Run" button, and be a little patient. Watch the messages window while you wait, and keep your other eye on the "Form1" window.
If you've not made any typos, the messages will eventually resolve to....
Project "project1" successfully built
... and the background of Form1 will clear, the dots will go away. (They are a grid for placing things neatly.)
Your application is running! Click the button called "Button1", and your stop application's running. It will be "closed", because that's what you programmed the application to do when that button is clicked!
(You'll get a message from Lazarus saying "Execution stopped." Your mother will be proud of you if you say "Thank you" as you click "OK". I'm not sure why the Lazarus developers thought we need the message... but knowing so little at this moment, I'm not going to click the "Do not show this message again" option just yet.)
Pretty cool, really... even if we haven't done very much yet. You wouldn't believe all of the things going on in the background. Just think about what your application does when it runs... and there's an awful lot in the background of which you may not be aware, let alone all of the things that had to be provided for by Lazarus to allow you to build this application, be it ever so humble!
Run it again by clicking the green arrow button. And shut your application down with "Button1". Not very exciting... but it is all the application can do, so far. Well... almost all. You already have a window which can be moved, maximized, re-sized, etc... That's no small deal in itself.
Okay... we've put of saving our work too long. But before we save what we have, just a few more bits and pieces.
Stop your application again, if it isn't already stopped at the moment....
Ah! A kind reader wrote on behalf of all those to come in the future, and pointed out a Newbie Gotcha....
You mustn't miss or skip the bit above that says "stop you application".
You can tell you've stopped it because the green "Run" "arrow" (triangle) in the main Lazarus bar will be green again, instead of the gray it turned while your little app was running. (It turns gray to stop you from starting up something that is already running.)
If for some reason your button won't stop your application, you can "kill" (stop) it the way you stop any application: In Windows with the little "x" in the upper right hand corner of the window. (Sorry, Linux folks... you have something similar, I believe, but I don't recall if it is also an "x".
Can't stop your app? Possibly because you can't find it? It may be "under" some other window. Even if you can't find it, there should be a button on the taskbar. Right-click that, click "Close window".
As I was saying... Stop your application. (It is stopped if the Lazarus "run" button (triangle) is green, not gray.)
Click somewhere in the field of gray which is covered with dots on the "Form1" window. Then look at what you see in the Object Inspector's window. It is something you will use extensively while building applications. In the pane at the top, you should see....
If "Button1: TButton" is highlighted instead of "Form1...", you can fix that simply by clicking on the "Form1..." line.
You should have the "Properties" tag selected. not "Events", "Favorites", etc.
Scroll down the properties until you get to "Name".
For the next few minutes, just press ahead, doing as I say (please), and using the case I use with letters. I.e. if I say type "fish", don't type "Fish" or "FISH".
I'm going to go quickly through some stuff, and then go back through it more carefully, explaining things that might not make immediate sense....
In the edit box next to "Name" enter....
, and, to make the change "take effect", press enter. (I'll explain that "ld001f1" in a moment. All letters by the way, except the two zeros, and a "one" after them and after the f... "Ell Dee zero zero one Eff one".)
Alternatively, you can make the change take effect by leaving the Name property's edit box. (To do this, either press your "down arrow" cursor control, or click, say, on "ParentBiDiMode" which is below and to the left. Don't click on ParentBiDiMode's edit box, which is saying "True".)
As soon as you leave the "Name" edit box, you will see the stuff in the pane at the top of the Object inspector change.
For no reason that I can imagine, the tree structure collapses. Button1 is still there... click the little + in front of ld001f1.Tld001f1, and Button1:TButton will reappear.
Look at the title bar of what used to be "Form1". You should now see "ld001f1".
Now, using the Lazarus main window menu, click "File | Save"
You should get a normal "Save As" dialog. Move around your disk to someplace sensible, e.g. your "My Documents" folder. Make a folder for your Lazarus programming work. Mine's called "Lazarus". And within that, make a folder called "LD001".
"LD001": Lazarus Demo, number 001.
(If you call it LD1, you will curse yourself later... trust me)
And go into your LD001 folder, and save your project as LD001.lpi. (If you are using this tutorial to learn Delphi programming, the equivalent extension for that environment is .dpr) The default name supplied by the system will probably be "project1.lpi". You only need enter the LD001, without a period after it, as long as you leave the default "Save as type" at the bottom of the dialog alone.
As soon as you've done that, you'll be facing....
Save the unit as "ld001u1", letting the system supply the appropriate ".pas" extension.
That's it! We should now have our work saved.
Here's a recap of what we've done, and why....
We created a folder, once and for all, where our Lazarus work will go. We won't need to do this again, unless of course you want to subdivide your Lazarus work.
Within that, we created a folder for this Lazarus project... LD001: Lazarus Demo, number 001.
Each Lazarus project is made up of several parts. The project's form, by my convention, not by a Lazarus requirement, is given the name of the project, with "f1" (for form 1) tacked onto it. We don't explicitly save the form's specification, by the way. It is saved for us along the way.
The first thing we saved, the one we called LD001.lpi (Lazarus Project Information) saves an overview of the parts of our project. Our little project was quite simple. You'll see why we need an "overview" later on. (It is a text file, if you want to look at it with Notepad, or Textpad, or something similar.)
The second thing we saved was the code for our application. Most of it was created for us by Lazarus, but we contributed....
procedure TForm1.Button1Click(Sender: TObject); begin close; end;
The code (and, behind the scenes, the form it relates to) was saved in ld001u1.pas. (The "u1" being for "unit 1". The name of the file with the code in it should only use digits and lower case letters. No spaces. No other punctuation marks... if you want to be "safe". (There may be a few things you could use, but if you stick to these restrictions you won't have problems. I'm a little nervous about using upper case letters elsewhere... that may have been a mistake... but I think I'm going to be able to use the upper case letters, except in the .pas file's name, and they help me perceive what the name is trying to say.
Now we have done our first save of the various bits of the project, we can just click on the "Save" button (looks like a diskette) from time to time, and say "yes" if asked whether we want to save changes when we are shutting Lazarus down.
I'm not going to tell you again: Save your work from time to time as you develop applications.
We have come a VERY long way. The most tedious "crawling" stuff is behind us.
Now we're going to make a more interesting button. We're going to make the one that tells us the time when we click it.
Just as you did before, click on the button icon in the component palette, and then click on the form.
You should now have two buttons on your form, "Button1" and "Button2".
Use the Object Inspector to change the names of those components to buQuit and buTellTime respectively.
You can either click on the object on the form to select it for the Object Inspector, or click on the object's name in the pane at the top of the Object Inspector.
You should see "buQuit" and "buTellTime" on the faces of the buttons. While the names I've given them are good for what we need the names for, the buttons look silly with those geeky names. No problem.
Change the caption properties of the buttons to "&Quit" and "&Give Time". Include the ampersands and the space. (Do not include the quotation marks.)
(The ampersand means that if you press "Q" while the application is running, it is as good as clicking on buQuit. Already pressing "G" will also be as good as clicking on buTellTime, but as that button doesn't do anything yet, you can't tell that. In Delphi, the ampersand would lead to the Q and the G being underlined on the button. They are in the Object Inspector, if you look, but not on the screen. I was using Lazarus 0.9.30 at the time I encountered this, and it seems that it may be something that Lazarus wasn't doing "right" quite recently, so I'll hold off fighting with it. If anyone knows how to make the underline appear, when the environment is Lazarus 0.9.30 and Windows XP, I'd be delighted to hear from you.)
buTellTime is supposed to tell us the time. Double click on the button on the form, and the following will appear in the Source Editor...
procedure Tld001f1.buTellTimeClick(Sender: TObject); begin end;
Insert the following between the begin and the end...
... and run the application, and click the "Give Time" button.
Hey, presto! A "Hello World" message! (Well, you couldn't do your first program without an "Hello World"! It would have been prodigiously unlucky.)
Yes, I know... it was supposed to give the time, not "Hello World". Patience! We're getting there!
The showmessage() procedure has its uses... but this is not a good application to use it in. You don't want to continually be saying "OK", do you?
No. So do this...
The fifth item on the Component Palette has "Abc" for its icon, and the pop-up says "TLabel". Click that, then click on your form.
Use the Object Inspector to change the name of that object from Label1 to laAnswer
Go back to where you put...
... and replace it with...
Run the application again. Click the Give Time button. Cool! We are changing the value of a property of an object while the application is running!
I'll say that again....
We are changing the value of a property (the caption property) of an object (the laAnswer component, which, as is every other component, is also an object) while the application is running!
Not only that... but it only happens when we want it to... when the buTellTime button is clicked.
Back to work. Sorry.
Note that we use ":=" as if those two characters were a single symbol to say "Change what's in laAnswer.caption to 'hello world'". The colon wasn't a typo by me. We use ":=" for assignment. Later we will see things like if bTmp=5 then..., in which case, with the equals sign on its own we will be asking if a condition of equality exists.
Also be careful about semicolons. For now, just be sure to put them in when, and only when, you are told to. You'll learn the rules, so you can decide for yourself, soon... but not in this essay... it is long enough already. Isn't it?
Run the program again. Look at what's in laAnswer initially. Click on buTellTime, and what you see should change to 'hello world'
We're getting closer to our declared goal.
Go back to where you put...
... and replace it with...
.. and run the application.
We did it!!! (With a lot of help from Lazarus....)
The built in function Now "returns", i.e. gives us, the present date and time... but in a strange form... but you don't need to know much about the strangeness, because....
DateTimeToStr() converts things from the "strange form" of Now to the form needed by the caption property of any label.
... is executed in two steps, from "inside" to "outside". First Now provides the date and time, in the "strange form", and then that is converted, by DateTimeToStr to what laAnswer.caption:= needs.
Hard to explain. Hard to grasp, on first acquaintance... but you'll soon be using what is going on there without even thinking about it!
When you've mastered the above, you will know an awful lot of the basic skills you need for working with Lazarus. It may not feel like it at the moment, but you've made tremendous progress. You'll need to learn about some of the other the objects available from the Component Palette... but not nothing like all of them. You'll need to learn about many of their properties, but again, not all of them. You'll need to learn more of the built in functions and procedures, like Now and DateTimeToStr()....
But you have already heard about many of the basic skills and concepts that you will need.
Just to whet your appetite, and to be sure you didn't miss an important thing implicit in what you've done...
One big area we've hardly touched on: Events and their handlers. You have actually used one, the OnClick event of the buttons. And you created two handlers: One to handle the clicking of buQuit, one to handle the clicking of buTellTime. But I will forgive you if you don't yet fully understand events and event handling. You'll get lots of help with that later.
The great thing is that you are now ready to work through more tutorials, and now you have the skills to be developing applications while you do those tutorials. They will be a lot more fun than this one was! (Hardly likely to be less fun?)
If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org
....... P a g e . . . E n d s .....