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.
This tutorial has been online since 2011. It was given a "polish" in 2015. In 2020, I reviewed it again.. and found that what was true in 2015 still works fine in 2020. Not because Lazarus is stagnant, but because it was already a good product in 2015. The illustrations here come from version 0.9.30, but are so close to what we still see today, 5/2020, version 2.0.0 on my machine, is still just fine. Hurrah for stable products!
I was working on a Windows 10 machine. (Vers 1909)
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. I've left some elements you will want to know soon for another time, for fear that there's already quite enough here for an early session.
Here's what I want you to notice 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?)
A shocking request! It won't remain in force for long! (Almost) always, the rule is "Save, save, save. But, for the moment, don'ttry to save your work(!)
In the component palette, counting the one that is an arrow, a pointer, as the first, count across to the third or forth (different in different versions of Lazarus) 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.) (Please always assume that I mean "... and release" if I say "click on...".)
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...
Be sure to include the semi-colon! That will make 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
Compile Project, Target: C:\Users\Tom\AppData\Local\Temp\project1.exe: Success
... 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 off 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 your 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. (If the Lazarus "run" button (triangle) is green, not gray, then you have it stopped.)
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.
(That's "ell", "dee", "zero","zero","one","eff","one"...(I'll explain in a moment. If you get a nasty noise and a message saying "Component name... is not a valid identifier, look again at the first part of this paragraph. I bet you tried to use a name that began with a digit. Must be a letter.)
(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".))
In Lazarus programming, a great deal of it is about "objects". The Form is an object. Every object has a name. And all the names follow the same rules: Must start with a letter. No spaces.
As soon as you leave the "Name" edit box, you may find that the two line "tree" 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 symbol 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".
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". The folder name is entirely up to you. Lazarus won't care.
"LD001": Lazarus Demo, number 001.
(If you call it LD1, you will curse yourself later... trust me)
If you want to use lower case, for this, it is okay. You can call the folder "ld001".
You can have a second one called "LD001-second attempt". Or any others, called anything. Whatever you do, though, stay organized.
Once your LD001 folder is made, go into it. Save your project- not with the suggested "project1.lpi", but rather, with "LD001.lpi". (If you are using this tutorial to learn Delphi programming, the equivalent extension for that environment is .dpr). "Save as type" at the bottom of the dialog says *.lpi now, not what you may see in the illustration, if I haven't updated it.
As soon as you've done that, you'll be seeing....
Save the unit as "ld001u1", letting the system supply the appropriate ".pas" extension. Use lowercase letters. I think using capitals here can lead to tears. Not sure, but why risk it? Name must start with a letter.
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. Or use ctrl-S to save.
I'm not going to tell you again: Save your work from time to time as you develop applications.
Not quite so often, but if you've got to a good point, without shutting your Lazarus work down, go "out" to your operating system's normal file management. Take a copy of the whole project folder (Windows: right click on folder name, select ""copy"), and paste the copy someplace sensible, with a sensible name. (ctrl-v, name "LD001BU-200518" for a Back Up made on 18 May, 2020")
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 buGiveTime 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 "buGiveTime" 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 buGiveTime, 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.)
Little bonus factoids:
It is easy to lose windows from time to time...
buGiveTime is supposed to give us the time. Double click on the button on the form, and the following will appear in the Source Editor...
procedure Tld001f1.buGiveTimeClick(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. (Yes, I'm being a little manic here about not just using the default names. It is a good habit to develop. Note the method in the naming madness, by the way... Button names start "bu" and then a capital letter; label names start "la", and then a capital letter. As long as the name starts with a letter and then has only letters and digits, Lazarus won't care what names you use. But the convention just given will be helpful. Try it. When you know the "rules" you can decide if you care to keep them.)
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 buGiveTime 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 buGiveTime, and what you see should change to 'hello world'
We're getting closer to our declared goal. This process of starting with something simple, and building it up in bits is not, by the way, just for tutorials. When I write a program, I take a similar approach. The art is in seeing what simple program has the elements that make it a useful basis fro what you have in mind. And in going there in stages, with effective testing of each intermediate stage. Easy enough when you are at this level. Try doing it with a big project.
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... which you don't need to know much about happily, because....
DateTimeToStr() converts things from the "strange form" of Now to the form useful to humans, and in a data type that is what a "caption" property needs.
... 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!
Yes, but how do you know there's the "Now" function, let alone the other one?
Lots of time in the Lazarus documentation and forum. Generally: If you've seen something in someone else's application, there's a way to do it in Lazarus.
When you've mastered the above, you will know a significant portion 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 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 buGiveTime. 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?)
Search across all of my sites with a Google search button. There's one on another of my pages. (It's at the top of the page the link will take you to.)
Use this to search THIS site.... (Go to my other sites, below, and use their search buttons if you want to search them.)
|search engine by freefind|
The search engine merely looks for the words you type, so....
* Spell them properly.
* Don't bother with "How do I get rich?" That will merely return pages with "how", "do", "I"....
Please also note that I have two other sites, and that this search will not include them. They have their own search buttons.
My SheepdogSoftware.co.uk site.
My site at Arunet.
Page has been tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. Mostly passes.
If this page causes a script to run, why? Because of things like Google panels, and the code for the search button. Why do I mention scripts? Be sure you know all you need to about spyware.
....... P a g e . . . E n d s .....