Documents

Archives

Search

Blogical Thoughts

Rapid Application Development in Linux Using Lazarus Part 1

by Michael Burton
http://blogicalthoughs.com/
A Talk Delivered at Northwest Linuxfest 2011
Updated 12 April 2015

Introduction

What is Lazarus?

The Lazarus Integrated Development Environment (IDE) is an open source implementation of the Borland (now Embarcadero) Delphi IDE for Windows. Lazarus uses the Free Pascal compiler for all its compiling and linking chores. Lazarus is easy to use and the programs it creates are easy to deploy.

Free Pascal is an Open Source implementation of Borland's Object Oriented Pascal. Lazarus implements an event-driven scheme to create programs, exactly like Delphi does. The languages and environments are close enough to one another that projects written in Delphi may be imported into Lazarus with minimal changes.

Object oriented Pascal is a high order language that looks somewhat like Java or C#. some of the operators are different, but learning new operators is one of things one always does when learning a new language. Pascal has the same basic constructs as Jave or C#: if, case and while statements as well as the requirement to define variables before using them.

Where to get Lazarus

  1. Lazarus can be obtained from the Linux Mint/Ubuntu/Debian repositories. Search for Lazarus. Free Pascal will be included when Lazarus is selected and installed.
  2. Lazarus and Free Pascal can be obtained directly from the web site http://lazarus.freepascal.org/ Both Lazarus and Free Pascal must be downloaded and they are not easy to install.

Parts of Lazarus IDE


The Lazarus IDE

Object Inspector


The Object Inspector

Unit Files


Unit File in Source Editor

Form Files


Form File

Component Palette


Component Palette

Message Window

Creating a Text Editor Program

To demonstrate the power and ease with which we can create a program for Linux, we will create a text editor with menus, a toolbar and a status bar. The editing area will have optional line numbering and text highlighting. The nice thing about this editor is if it doesn't have a particular operation that you wish it did have, you can easily add the operation.

To begin creating the editor, the first thing you must do is to create a directory where you can save the program files. We have called the directory 'my_editor'.

Next we must start up the Lazarus IDE. If an old project is displayed in Lazarus, close the old project, then select a New project - Application from the Project menu.

Naming/Caption

When Lazarus adds a Pascal object to a project, it gives the object a name. That name is unique and is not descriptive enough. That is fine for very small projects, but most projects will have many objects and you need to name them so you always know what they are, just from the name.

The new project we have just opened has a form whose name is Form1. We will rename that so we know what it really is. An object name should tell you two things: what kind of object it is, and what it is used for.

  1. Click on the Form1 window. The Object Inspector will display the information about Form1.
  2. Scroll down the Object Inspector to the Caption item and change it to be MyEditor. This is what we will call the editor and the caption will appear on the top of the editor window.
  3. Scroll down to the Name item. Change it from Form1 to frmMain. This name indicates that this is a form and it is the main project form.

Naming the Form

While we are in the Object Inspector for the form, we can change the default form size. Set Constraints | MinWidth to 600 and Constraints | MinHeight to 400.

Add SynEdit

We need to add a control to the project that will hold the text and allow a user to edit the text. In Windows, we might choose one called RichEdit. We don't have that choice in Linux, so we will use a much more capable control called SynEdit.

Select the SynEdit tab in the Components bar. If you hover over the very first item in that tab, you will see it is called TsynEdit. Click on that control, Then move down to the form and click in the middle of the form.


Adding the SynEdit Control

To rename the control, click on it in the form and scroll down to the Name item in the Object Inspector. Change the name from SynEdit1 to sedtText. To get rid of the text inside the control, click on the Lines item, then on the button with the three dots. Remove the text and click OK.

Finally, to align the editing control so it will always be at its maximum size, change the Align item to be alClient.

Saving units/project

We should save our work now. To do that, you must be aware of a couple of things:

  1. The project name will end up being the program name.
  2. The name you save the unit as should not be the same as the we gave our form.

Click on the File | Save All item in the Lazarus menu. When asked for a Project name, enter MyEditor, then click on Save. Be sure to change to your project directory before clicking on the Save button.

When asked for a unit name, change the name to dlgMain. Be sure to save your work as you add more components and make changes to the project.

Adding a Main Menu

In order for the program to perform useful actions, it needs a menu and a toolbar. Since the same commands will be in both the menu and the toolbar, you can centralize the code by using an action list.

Here is a list of the commands we will be adding to the menu. Note that this is only a starting point - more commands can be added at any time.

Menu Items
Command Menu Category Toolbar Description
New File X Start a new text file
Open File X Open an existing file
Save File X Save the current text in a file
Save As File   Save the current text and ask for a file name.
Exit File X
Undo Edit X Undo the last editing action
Cut Edit X Delete the selected text and copy it to the clipboard
Copy Edit X Copy the selected text to the clipboard
Paste Edit X Paste the clipboard text into the editor
Line Numbers View   Toggle the line numbering on/off
Help Hints View X Toggle toolbar button help hints

We should have also have a list of the images to use with the menu and toolbar.

To do all this, we will need three components - a TMainMenu, a TActionList and a TImageList. The first two components are on the Standard tab of the component pallette. Click on that pallette, then click on the main menu component (the first component). Then click on the form. A small square icon will be added to the form. This is what a non-visual component looks like. Now click on the last component, which is the action list. Click on the form to add that component.

Click on the Common Controls tab and then click on the image list, which is the next to last component. Click on the form to add the component. Once the components are added, select each one and rename it - the main menu will be mnuMain, the action list will be lstActions and the image list will be lstImages.


Non-visual Controls

Adding Images

To add images to the image list component, right-click on the image list component on your form, then click on the ImageList Editor entry of the pop-up menu. Use the editor to add images to the image list component. On an Ubuntu system, the images we are using are in /usr/share/icons/gnome/16x16/.


Adding Images

Now that we have the images in the image list, we will hook that list up to the main menu and the action list. Click on the action list, then click on the Images item in the Object Inspector. You will be presented with a pulldown. Select lstImages from the pulldown. Now click on the main menu, then do the same thing there. The images will then be available in both places.

Adding Standard Actions

The actions we will hook up to the menu and toolbar are of two different types: standard actions and custom actions. We will add the standard actions first, as they are the easiest to do.

Right-click on the action list and click on the ActionList Editor menu item. The Action List Editor will be displayed. There is a Plus icon in the toolbar with a pulldown icon right next to it. Click the pulldown item and select the New Standard Action item. This will pop up a dialog with all the pre-written actions in it. You can click on an item and click OK to add it to the Action List Editor. Here is a list of items we want to add:

Standard Actions
Action Class Command Image Number
TFileOpen Open 1
TFileSaveAs Save As 3
TFileExit Exit 4
TEditUndo Undo 5
TEditCut Cut 6
TEditCopy Copy 7
TEditPaste Paste 8

As you add each one, it will be highlighted and its properties will be displayed. Change the ImageIndex of each item you add to the proper image number.


Action List Editor

Add Custom Actions

We need to add four custom actions, since there is no standard action for these items. Here are the particulars:

Custom Actions
Caption ImageIndex Name ShortCut Category Checked Hint
&New 0 FileNew1 Ctrl+N File False New File
&Save 2 FileSave1 Ctrl+S File False Save File
&Line Numbers -1 ViewLine1 None View True Toggle Numbering
&Help Hints -1 ViewHints1 None View True Toggle Hints


All Actions

We will hook these actions up after we create the toolbar and status bar.

Creating Toolbar

A toolbar will provide the user with a quick method to perform some useful actions. To add a toolbar click on the Component tab called Common Controls. The toolbar component is in the middle. If you hover over it, the hint will say TToolBar. Click on it, then click on the form. The toolbar will be added to the top of the form. Click on the Images item in the Object Inspector and set it to lstImages. Set the Indent property to 4 and set the ShowHints property to True.

Next, we will add buttons and dividers to the toolbar. Right-click on the toolbar and click on New Button. Do this two more times to add three total buttons for New, Open and Save.

Now add a divider. Right-click on the toolbar and click on New Divider. Then add another button (Exit) and another divider. Finally, add four more buttons.


Buttons Added to Toolbar

Creating Status Bar

The final visual component we will add is the status bar. The status bar component is just to the left of the toolbar component in the Common Controls tab of the Component pallette. Click on it then click on the form.

We want to have three separate sections on the status bar. We will use one for the file name, one for the row position and one for the column position. Right-click on the status bar and click on the Panels Editor. Add three status panel items. Set the Width of the last two to 20, then close the Panels Editor.

Hooking up Editor Actions

To hook the action list up to the main menu, we need to actually create the menu. We can then add an action to each menu item. Here are the items we need to create:

Custom Actions
Menu Item Action Name
File None N/C
   New FileNew1 mnuNew
   Open FileOpen1 mnuOpen
   Save FileSave1 mnuSave
   Save As FileSaveAs1 mnuSaveAs
   - None N/C
   Exit FileExit1 mnuExit
Edit None N/C
   Undo EditUndo1 mnuUndo
   - None N/C
   Cut EditCut1 mnuCut
   Copy EditCopy1 mnuCopy
   Paste EditPaste1 mnuPaste
View None N/C
   Line Numbers ViewLine1 mnuLine
   Help Hints ViewHints1 mnuHints

Right-click on the mnuMain Component and click on Menu Editor. The Menu Editor already has a new item which we will rename. Click on the menu item, then on the Caption item in the Object Inspector. Change the caption to &File. The ampersand causes an underline to be drawn under the next letter. That means if you are running the editor and hit Alt+F, the File menu will be activated.

Now we will add the File items. Right-click on the File item in the Menu Editor, then click on Create Submenu. A pulldown is created with one item. Right-click on the new item and click Insert New Item (after). Keep doing this until we have six items in the pulldown.

We will now hook up the File action items. Click on the first pulldown item, then click on the Events tab in the Object Inspector. Pull down the Action item and click on FileNew1. Repeat this with the next three menu items, using the FileOpen1, FileSave1 and FileSaveAs1 actions. Now click on the very last menu item and hook up the FileExit1 action item. This will leave the next to the last item as undone. Click on that item, then click on the Properties tab in the Object Inspector. Change the Caption item to a single dash '-'. This will produce a separator bar when the programming is running.


File Menu

Next we will create the Edit menu pulldown. Right-click on the File menu item and then click on Insert New Item (after), then change that item's caption to &Edit. Create the pulldown like you did for the File menu item, then add menu items until there are five items under the Edit item. The second item will be a separator. The action items to be hooked up are (in order) EditUndo1, EditCut1, EditCopy1 and EditPaste1. Hook them up like you did for the File menu.


Edit Menu

The final menu is the View menu. Right-click on the Edit menu item and the click Insert new Item (after). The Caption for the item will be &View. Create a pulldown for that item and add two menu items to it. The two actions to hook up will be the final two: ViewLine1 and ViewHints1.

Hooking up Toolbar Actions

We will now connect the actions to each of the toolbar buttons. This is very straightforward, as all we have to do is click on a button and add the appropriate action to the action item.

Custom Actions
Button Action Name
1 FileNew1 tbtnNew
2 FileOpen1 tbtnOpen
3 FileSave1 tbtnSave
4 FileExit1 tbtnExit
5 EditUndo1 tbtnUndo
6 EditCut1 tbtnCut
7 EditCopy1 tbtnCopy
8 EditPaste1 tbtnPaste

To hook the actions up, click on the first button. Pull down the Action item in the Object Inspector and select FileNew1. Then click on the Name item in the Object Inspector and change the name to tbtnNew. Continue to do this for each button in the toolbar.


Toolbar Actions

Writing Code for Actions

Well, we couldn't put it off forever. We now have to write some code. Some of the standard actions we have hooked up work right out of the box, but some of them require an object to work on. And all of the other actions we added need code to get them to work. The following chart contains all the code for all the actions.

First, we need to add a global variable so we can store the name of the file the editor is working on. Go to the top of the code in the Source Editor, then scroll down until you see the public keyword. Just below that should be the section comment { public declarations }. Just below that comment, enter

Putting in that declaration allows all the other code we will enter to access the sFileName variable.

Code for Actions
Action Item Code Event Comment
FileNew1 sedtText.Lines.Clear;
sFileName := '';
OnExecute Could have a check and save current file.
FileOpen1 sFileName := FileOpen1.Dialog.FileName;
sedtText.Lines.LoadFromFile(sFileName);
StatusBar1.Panels[0].Text := ExtractFileName(SFileName);
OnAccept SFileName is a public variable of type String.
FileSaveAs1 sFileName := FileSaveAs1.Dialog.FileName;
sedtText.Lines.SaveToFile(sFileName);
StatusBar1.Panels[0].Text := ExtractFileName(SFileName);
OnAccept  
FileSave1 if Length(sFileName) = 0 then
  FileSaveAs1Accept(Sender)
else
  sedtText.Lines.SaveToFile(sFileName);
OnExecute  
EditUndo1 sedtText.Undo; OnExecute  
EditCut1 sedtText.CutToClipboard; OnExecute  
EditCopy1 sedtText.CopyToClipboard; OnExecute  
EditPaste1 sedtText.PasteFromClipboard; OnExecute  
ViewLine1 ViewLine1.Checked := not ViewLine1.Checked;
sedtText.Gutter.Visible := ViewLine1.Checked;
OnExecute  
ViewHints1 ViewHints1.Checked := not ViewHints1.Checked;
ToolBar1.ShowHint := ViewHints1.Checked;
OnExecute  

To add each of these code fragments, click on the object in the Object Inspector. Click on the Events tab, then click on the indicated Event and click on the dotted button. You can then write the code.

Adding text highlighter

There are lots more items we can add to the text editor, but the final item will add is a Pascal text highlighter. Click on the SynEdit tab of the Lazarus Components, then click on the TSynFreePascalSyn component and click on the form. Then click on the sedtText component and change it Highlighter item to SynFreePascalSyn1. Note that you could also add all the various highlighters and change the Highlighter item in the Open or Save As menu item, based on the file extension.

Conclusion

We now have a working text editor, but there are all kinds of things we can add to it. It needs a search capability, an About box and a help file, at the very least. Oh yes, we also need to hook up the statusbar.


The Finished Editor

We will continue with the development of the editor in Part 2 of this presentation.