Documents

Archives

Search

Blogical Thoughts

Rapid Application Development in Linux Using Lazarus Part 2

by Michael Burton
http://blogicalthoughs.com/
13 April, 2015

Where We Are So Far

In the first part of this presentation, we created a rudimentary text editor. It can do basic editing and save the text, but it lacks some of the bells and whistles that exist in most editors.

The purpose of this presentation is to enhance the basic editor, adding functions that will turn it into a valid tool for editing text.


The Editor So Far

Additions to MyEditor

The first part of this presentation presented a wish list of additions for the editor. Here is what we will implement in this part of the presentation.

Implementing The Status Bar

The status bar will be used to display information about the editing process. We currently have three status panels we are not using. We are going to need six status panels.

Status Panels
Panel Width Text
0 200 unnamed
1 35 INS
2 32 Row
3 40 (none)
4 26 Col
5 40 (none)

Panel 0 will display the file name. Panel 1 will display the edit mode (insert or overwrite). Panel 3 will display the current row and panel 5 will display the current column.


Status Bar Panels

Right-click on the status bar and click on the Panels Editor. Add three more status panel items. Set the Width and Text according to the chart above, then close the Panel Editor.

We need to create some code that will fill in the status panels. The easiest way to do this is to implement an OnIdle event for the entire program, which will run when nothing else is going on in the program.

First, though, we need to add a couple of lines to the FileNew1Execute procedure. Add these two lines at the end of the procedure:

    sedtText.Modified := False;
    StatusBar1.Panels[0].Text := 'unnamed';

Now click on the Additional tab of Lazarus' component palette. About 1/3 from the right end, there is a component called TApplicationProperties. Click on it, then click on our form window. This will drop an ApplicationProperties component on our form.

With the ApplicationProperties component selected, go to the Object Inspector and click on the component's Events tab. There will be an entry called OnIdle. double-click on the empty box to the right of OnIdle. This will create an OnIdle event handler.

Add the following code to the OnIdle handler:

    if Pos(ExtractFilename(sFileName), sFileName) <> 0 then
        StatusBar1.Panels[0].Text := ExtractFilename(sFileName); // set filename
    if (sedtText.Modified) and (Pos('*', StatusBar1.Panels[0].Text) = 0) then
        StatusBar1.Panels[0].Text := '*' + StatusBar1.Panels[0].Text; // set changed
    if sedtText.InsertMode then
        StatusBar1.Panels[1].Text := 'INS' // in insert mode
    else
        StatusBar1.Panels[1].Text := 'OVR'; // in overwrite mode
    StatusBar1.Panels[3].Text := IntToStr(sedtText.CaretY);
    StatusBar1.Panels[5].Text := IntToStr(sedtText.CaretX);

The status bar is now complete. At this point, you can save your project, compile and run it to test out the changes we have just made.

Add a Configuration File

Most programs use a configuration file to save information that should transition from execution session to session. We only have a couple of items we would like to save. we should at least save the following:

  1. Window height
  2. Window width
  3. Line Numbers toggle status (and SynEdit gutter visible)
  4. Help Hints toggle status
  5. Window location - top
  6. Window location - left

Implementing this is pretty trivial. Click on the Misc tab of the component palette. About 1/3 from the right end, there is a component called TXMLPropStorage. Click on it, then click on the form window. This will drop an XMLPropStorage component on the form.

The XMLPropStorage component has a property called FileName. If you put something in there, that will be the name of the configuration file. We will leave this blank, in which case the configuration file will be a hidden file called '.MyEditor'.

That's all we need to do with that component. Now, go to the Object Inspector and scroll up the components to the top. Highlight frmMain: TfrmMain.

Now scroll down the properties until you get to SessionProperties. Click on the empty box to the right and click on the button with the three dots. The Properties Editor will appear.


Session Properties Editor

The three components we are interested in are frmMain, mnuLine and mnuHints. You will find them in the left hand list. Highlight one of them, then search that component's properties for the properties to save. Highlight each and click on Add. You will end up with what you see above. Click on OK.

You can now save and run the program again. If you move/resize the editor window, the next time you run the program, it will be displayed at that location in that size.

Add an About Box

Most GUI programs have a main window, but they also present subsidiary windows (dialogs). Adding an About box to our editor will show how to add dialogs to a program.

In Lazarus' File menu, click on New Form. This will add a new form and unit to our MyEditor project. Make the following changes to the form properties:

Changed Form Properties
Property Value
BorderIcons biSystemMenu only True
BorderStyle bsDialog
Caption About MyEditor
Name frmAbout
Position poMainFormCenter

Make these changes to the properties, then click on File | Save All. Save the new unit with a name of 'dlgAbout.pas'.

From the Standard tab of the Component Palette, click and drop a TButton on the form. Center it towards the bottom of the form. Change the following properties:

Changed Button Properties
Property Value
Caption &OK
ModalResult mrOk

Drop some Tlabel components from the Standard tab onto the form and change their captions so you get The text you want to display on the dialog. If you want to align this text, an easy way is to click on the top label, hold the shift key down and click on the others. Then right click on them and select Align from the pop-up menu. Align Horizontal | Center in window.


About MyEditor Dialog

The basic About dialog is now complete. Be sure to save your work.

Hooking Up the About Box

In the Source Editor, click on the dlgMain tab. Go to the top of the source code, then down to the keyword 'implementation'. Add the following uses line:


Uses line

Now hit the F12 function key on the keyboard. You should now have the main form displayed. Right-click on the mnuMain component to get to the menu editor. Add two new items, as show below.


Help Menu

In our Form, click on the About item. This will create a click event. Add this line to the click event:

   frmAbout.ShowModal; 

Save your work and run the program. We now have a working About dialog.

Conclusion

Obviously, there is a lot more we can do to the text editor. We will do some code-intensive stuff in the next part of this presentation.

We have uploaded the source for the editor. Click on MyEditor.tar.gz to download it.