Lazarus - a simple hello world GUI example

I used to love Delphi back in the day, there was even a Linux version at one point, but that got dropped and when they moved everything to ActiveX I kinda lost the faith (yes it was that long ago!). I'd always kept my eye on Lazarus though - but at the time the database components were somewhat lacking and the IDE itself had various issues (alas there still seems to be some issues depending on platform - but they at least don't seem to be total showstoppers)

Issues notwithstanding once you get to grips with a RAD tool, especially for creating business software the increase in productivity and general ease compared to other types of IDE's, makes for a useful and powerful tool.

Before I launch into examples (in the future) to demonstrate things like simple database driven applications, I'll show you a simple GUI version of a "Hello world" app, just to show that creating a GUI can be quick and intuitive...

Having installed Lazarus on your chosen platform (the same code you write for your platform will compile without changes on other platforms....) You will presented with what looks like at first glance somewhat daunting array of window, however (especially if you've used Delphi before) the interface quickly becomes second nature.

Click the image to see it full size, I've numbered the important features, so let's run through them

With just these five areas you have the core functionality of the IDE and these are the parts you'll use most often. Clicking a component in the palette, will allow you to create a new widget in the form editor (forms are just another way of saying window) either clicking or drag clicking will create a new instance of a component. If you click and drag for a component that can be an arbitrary size the new component will be sized by the length of the drag (so you need to drag down and right)

Once a component is in the form designer, you can drag and resize it - which is fine but with anchors (more later) you can create responsive windows that will layout their components when a window is resized. When a component is selected you get access to a comprehensive set of properties and events for each component in the properties window, this in effect gives the component its initial state (you can change properties programmatically of course)

Looking in the standard tab of the palette, there is a TButton click to add one of these and the click on the form designer, you now have a button on your window in the form designer.

Do the same with a TLabel, additionally in the properties window change the Caption property, just change it to something like ... While you're at it change the buttons caption to something like Click Me

That buttons crying out for some code, you can either double click the button (to create the default event) or in the events properties find OnClick and press the ellipsis (...) in the code window you should see an empty event procedure

procedure TForm1.Button1Click(Sender: TObject);
begin
  Label1.Caption:='Hello World!';
end;      

Go ahead and add the extra line of code above. When you run your application you should see almost exactly what you had in form designer, when you click the button the caption of the label should change.

Okay a good start, but we can very quickly and simply add some refinements, first off is the anchor properties its worth a look at an overview in the Lazarus wiki By using top and left anchors to the form you can centre a component or offset it from another widget. For our purposes you can simply anchor the button to the top of the form and centre it horizontally, doing the same with the label but anchoring it to the bottom (both with an offset so its not hard against the edge)

There is a caveat here (at the time of writing), depending on platform (possibly) if you have difficulty using the speed buttons to change the type of alignment just try clicking slightly above them - I can see people not realising there's a bug and discarding Lazarus in frustration, but you should bare in mind that designing a GUI to edit a GUI is hard enough as it is, then consider that it works with multiple widget libraries depending what platform its on and its no surprise there are corner cases !

For extra credit lets do something that should be hard but is really quite easy

In the system tab add a TTimer to your form (it doesn't matter where its a non visual component) make sure its enabled property is set to false.

Double click the timer component or click the ellipsis in its OnTimer event property

Change your two event procedures to look like this

procedure TForm1.Button1Click(Sender: TObject);
begin
  Timer1.Enabled:=True;
  Label1.Caption:='Hello World!';
end;

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  Timer1.Enabled:=False;
  Label1.Caption:='';
end;    

When you click the button it sets the label caption as before but it also starts the timer, when the timer fires it switches off (enabled property set back to false) and clears the caption. Each time you press the button you will see hello world for 1 second before it disappears again.

While this has been quick and easy to implement, doing something like this from C (or if you really like pain C++) using just system libraries can be a torturous experience.

While this is a somewhat trivial example at whirlwind speed, you should be able to see the utility and power of Lazarus...