Adding the components using the Form Designer (IDE Tutorial)

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 toggling word wrap.

Adding an action list

Add an action list 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 TActionList component. The Tool Palette should look as follows:

Using the action filter in the Tool Palette to select TActionList

Double-click the TActionList button to add it to the form. Now you should change the name of the TActionList to suit your application. Click the TActionList icon to activate it. In the Object Inspector, click the Name property and change its value to ActionList.

Tip: Naming your components properly is very important because your code may need to access them using their name. It is useful to set a name you can easily remember.

Adding the main menu

Next, place a main menu bar on the form. To do this, type "menu" in the search box of the Tool Palette to easily locate the TMainMenu component. When using this filter, the Tool Palette looks as follows:

Using the status filter in the Tool Palette to select TMainMenu

Double-click TMainMenu to add it to the form, and use the Object Inspector to change its Name to MainMenu.

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. When using this filter, the Tool Palette looks as follows:

Using the menu filter in the Tool Palette to select TStatusBar

As with the previous components, double-click TStatusBar to add it to the form, and use the Object Inspector to change its Name to StatusBar.

Adding a text box

The most important component to add is a text box that gives your application its main functionality—that of a text editor. Type "memo" in the search box of the Tool Palette to easily locate the TMemo component. When using this filter, the Tool Palette looks as follows:

Using the memo filter in the Tool Palette to select TMemo

Double-click TMemo to add it to the form, and use the Object Inspector to change its Name to Editor.

Adding dialogs to open and save files

The only remaining components to add are nonvisual components that provide dialog boxes to open and save files, which you need in order to implement basic open and save functionality in your editor. Click the Dialogs category in the Tool Palette.

Double-click both TOpenDialog and TSaveDialog to add one instance of each of these components to your form. Then, use the Object Inspector to change their Name property to OpenFileDialog and SaveFileDialog respectively.

The main form should now display the action list component, the main menu bar component, the status bar, the memo and the dialog box components you have added to the form:

Basic text editor form

Defining your actions

To finish designing the form, you must add the items in the main menu. Start by double-clicking the action list component on the form to open the Action List editor:

You are now ready to create the items to the main menu.

The text editor needs a few file capabilities, so you must define some actions. Click the New Action button to create a new custom action.

With your new action selected, on the Object Inspector change its Category to File. RAD Studio displays this new category in the Categories list on the Action List editor, and displays your new action inside this new category. With your new action still selected, change its Name to NewAction, its Text to New and its ShortCut property to CTRL+N:

Now that the File category is available in the Action List editor, select this category from the Categories list and click the New Action button four times to create four additional actions under the File menu. You can now customize your newly created actions:

• Click Action1 and change its Name to OpenAction, its Text to Open... and its ShortCut property to CTRL+O.
• Click Action2 and change its Name to SaveAction, its Text to Save and its ShortCut property to CTRL+S.
• Click Action3 and change its Name to SaveAsAction and its Text to Save As....
• Click Action4 and change its Name to ExitAction and its Text to Exit.

Your Action List editor should look as follows:

Defining the actions in the File menu

The text editor needs a few edit capabilities as well.

Click (No Category) from the Categories list and press the New Action button to create a new custom action. With your new action selected, on the Object Inspector change its Category to Edit, its Name to CutAction, its Text to Cut and its ShortCut property to CTRL+X.

With the Edit category still selected in the Categories list, press the New Action button five times to create five additional actions under the Edit menu. You can now customize your newly created actions:

• Click Action1 and change its Name to CopyAction, its Text to Copy and its ShortCut property to CTRL+C.
• Click Action2 and change its Name to PasteAction, its Text to Paste and its ShortCut property to CTRL+V.
• Click Action3 and change its Name to SelectAllAction, its Text to Select All and its ShortCut property to CTRL+A.
• Click Action4 and change its Name to UndoAction, its Text to Undo and its ShortCut property to CTRL+Z.
• Click Action5 and change its Name to DeleteAction, its Text to Delete and its ShortCut property to Del.

You need an additional action to give your text editor a word-wrapping feature. Click (No Category) from the Categories list and press the New Action button to create a new custom action. With your new action selected, on the Object Inspector change its Category to Format, its Name to WordWrapAction and its Text to Word Wrap.

Your actions are now defined. Close the Action List editor to continue.

Adding your actions to the main menu

On the Form Designer, double-click your main menu component to open the Items Designer:

On the Items Designer, you must define the visual items that represent those actions you have defined. Press the Add Item button three times to add instances of TMenuItem for the File, Edit and Format menu entries. Then select each added TMenuItem from the list, and press the Add Child Item button five times for the first menu item, six times for the second menu item and once for the third menu item:

To associate these visual menu items with their actions:

1. Select each of the three main items, and on the Object Inspector:
   1. Change its Name to FileMenu, EditMenu and FormatMenu respectively.
   2. Change its Text to File, Edit and Format respectively.
2. Select each one of the submenu items, and on the Object Inspector give it a proper name and change its Action property to its corresponding action. For example, select the first submenu item under File in the Items Designer list, and on the Object Inspector change its Name to NewMenu and its Action property to NewAction.

The following image shows how the list in the Items Designer should now look.

Final content on the Items Designer

Close the Items Designer.

Next

Customizing the components