Adding the components using the Form Designer (IDE Tutorial)
Now that you have set up the main form, you can proceed with arranging the necessary components to create your text editor application. First, you need to add a menu bar providing the basic options for file manipulation, editing, and other options like changing the font or toggling word wrap.
Adding an action manager
Add an action manager to the form to automatically provide the basic functionality of your application. To do so, make sure the Design tab is selected, go to the Tool Palette and type "action" in the search box. This results in displaying only components with the string "action" in their name, including the TActionManager component. The Tool Palette should look like the following image.
Figure 3-7. Using the
action filter in the Tool Palette to select TActionManager
Double-click the TActionManager button to add it to the form. Now you should change the name of the ActionManager to suit your application. To do this, make sure Object Inspector is visible (if not, press
F11 to display it) and click the Action Manager icon to
activate it. In the Object Inspector, click the Name property and change its value to
To add a main menu bar to the form, locate the TActionMainMenuBar component in the Tool Palette. Double-click TActionMainMenuBar to add it to the form.
Adding a Status Bar
Next, place a status bar on the form. To do this, type "status" in the search box of the Tool Palette to easily locate the TStatusBar component. Using this filter, the Tool Palette looks like the following screenshot.
Figure 3-8. Using the status filter in the Tool Palette to select TStatusBar
As with the previous components, double-click TStatusBar to add it to the form.
Adding a text box
The only component left to add is a text box, giving your application its main functionality—that of a text editor. Type "memo" in the search box and locate the TMemo component. The Tool Palette should now display the components whose names include the text "memo", as in the following image.
Figure 3-9. Using the memo filter in the Tool Palette to select TMemo
Double-click TMemo to add it to the form. The main form should now display the action manager, the action main menu bar, the status bar, and the memo we have previously added to the form, similar to the following image.
Figure 3-10. Basic text editor form
To finish designing the form, you must add the items in the main menu. Start by double-clicking the action manager component on the form to open the Actions editor. The Action Manager dialog should be displayed.
Figure 3-11. The main elements of the Actions page in the Action Manager
You are now ready to create the items in the main menu. Press
CTRL+Insert to add
new standard actions or click the down-arrow of the New Action icon and choose
New Standard Action... from the menu. The image below shows this menu.
Figure 3-12. Adding a New Standard Action
CTRL, select all items in the Edit category and also TFileOpen, TFileSaveAs, and TFileExit from the File category, then click OK.
The following image shows how the Standard Action Classes list should display, with the items in the File category selected.
Figure 3-13. Selecting the Standard Actions that implement the basic file and text operations
After clicking OK, wait until the menu items are automatically generated. You may notice that the object inspector displays the properties of each menu item as it is created.
Defining Action Properties
The text editor needs a few capabilities other than the standard actions, so you must define your own custom actions. To do this, from the Actions Editor, select File from the Categories list and click the New Action button twice to create two new, non-standard actions under the File menu.
You can now customize the newly created actions. Click Action1 in the Actions list
and use the Object Inspector to change its Name property to New, change its Caption property to New, and its ShortCut to
CTRL+N. Click Action2 and change its Name to Save and its ShortCut property to
Now, use the Move Up and Move Down arrows to put the actions in the right order, as in the following image.
Figure 3-14. Arranging the actions in the File menu and finishing adding the Standard Actions
Adding word wrap and font selection capabilities
To give your text additional features—word-wrapping and the ability to change the
font—you need to add a menu to the main menubar. Click (No Category) from the
Categories list and press
CTRL+Insert on the keyboard to create a new standard action. The Standard Actions Classes list is displayed.
Select TFontEdit from the Dialog category and click OK. In the Actions list, click Dialog, then click Select Font and use the Object Inspector to change its Category property to
this by selecting Category and type the word
Format. Also, enter
Font as its Caption property.
With the Format category selected in the Categories list, press the New Action button to define a new action. Change its Name to
WordWrap and its Caption to
Word Wrap, using the Object Inspector.
Now drag each item from the Categories list to the menu bar at the top of the main form, in this order: File, Edit, Format.
The following image shows how the File menu should now look.
Figure 3-15. The final look of the File menu
Finally, close the Actions Editor to continue customizing the application.