Show: Delphi C++
Display Preferences

Adding the components using the Form Designer (IDE Tutorial)

From RAD Studio XE2
Jump to: navigation, search

Go Up to Starting your first RAD Studio application Index (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.

Contents

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.


TutorialIDEFig3-7.png

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 ActionManagerIcon.png to activate it. In the Object Inspector, click the Name property and change its value to ActionMgr.

Adding the main menu

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.


TutorialIDEFig3-8.png

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.


TutorialIDEFig3-9.png

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.


TutorialIDEFig3-10.png

Figure 3-10. Basic text editor form

Adding the main menu commands

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.


TutorialIDEFig3-11.png

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.


TutorialIDEFig3-12.png

Figure 3-12. Adding a New Standard Action


While pressing 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.


TutorialIDEFig3-13.png

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 CTRL+S.

Now, use the Move Up and Move Down arrows to put the actions in the right order, as in the following image.


TutorialIDEFig3-14.png

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 Format. Do 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.


TutorialIDEFig3-15.png

Figure 3-15. The final look of the File menu


Finally, close the Actions Editor to continue customizing the application.

Next

Customizing the components

Personal tools
Previous Versions
In other languages