Introduction to Interface Design

Selecting a Control

While you are designing an application, it is important to always know what particular control is selected. Whenever you make changes, they are applied to the control that has focus.

A control that is selected or highlighted is described as having focus.

There are various techniques used to give focus to a control:

• You can click the desired control
• In the combo box on the upper section of the Object Inspector, you can select the desired control
   
  

• You can select a control by clicking its name in the tree list of the Structure window
   
  
• On the form, you can click one control, then press the up, the down, the right, and/or the left arrow keys to select a different control

To select a form, click an unoccupied area on the form. If the form is hidden, you can press F12 to toggle between the form and the code. If your application has more than one form, to display one of them, on the main menu, you can click View -> Forms and select the desired form from the list.

1. Launch Embarcadero RAD Studio
2. To start a new project, on the main menu, click File -> New -> VCL Forms Application - Delphi
3. On the Tool Palette, expand the Standard section
4. Click the TEdit control
5. Click the center-top section of the form (it is not important how it is positioned):
6. On the Tool Palette, click the TEdit control again
7. This time, click the middle left section of the form (again, the position is not important)
8. Once again, on the Standard section, click the TEdit control
9. This time, click in the middle-left section of the form (no need for precision)
10. Once again, on the Standard section, click the TEdit control
11. Click in the bottom-left section of the form (no need for precision)
12. In the Standard section again, click the TMemo control
13. Click and drag on the form from the lower-right section to the upper-center section of the form and release the mouse
14. To add another control, in the Standard section, click the TActionList control
15. Click the top-left section of the form (no need for precision)
16. To add another form, on the main menu, click File -> New -> Form - C++Builder
17. While Form2 has focus, in the Standard section of the Tool Palette, double-click the TEdit control to place it on Form2
18. In the Standard section, click the TPanel control
19. On the form, click in the lower right section of the form and drag to the upper-center section of the form to draw a rectangle that partially covers the edit box (no need for precision). Release the mouse
20. While the panel is still selected on the form, from the Standard section, double-click the TEdit control 
21. From the Standard section of the Tool Palette, click the TEdit control
22. On the form, click in the panel above the Edit2 edit box (no need for precision)
23. To select one of the controls, click the Memo1 box. Also notice the Name field in the Object Inspector:
     
    
24. To select another control, in the Structure window, click Edit3
25. Notice that, on the form, the Edit3 control receives focus
     
    
26. To select another control, click the arrow on the upper section of the Object Inspector and click Edit2
     
    
27. Notice the new selected name in the Object Inspector
28. On the form, click Edit1 to select it
29. While one of the controls, namely Edit1 is still selected, press the down, left, up, right arrow, and up keys on the keyboard to select other controls on the form
30. Click anywhere on the form and not on a control. Notice that the form is selected. You can verify this by checking the name on the top section of the Object Inspector
31. On the form, click Memo1 to select it
32. To dismiss the selected control, press Esc. Notice that the form is now selected
33. To select two controls, on the form, click Edit2
34. Press and hold Shift
35. While you are still holding Shift, click Edit3 and click ActionList1
36. Release Shift. Notice that the controls have handles on their corners, indicating that they are selected. The Object Inspector displays properties that are common to the selected controls
37. To make another selection, just under the lowest edit box on the form, click and drag up and right as to draw a rectangle that would touch Edit2, Edit3, and Memo1:
     
    
38. Then release the mouse. Notice that the touched controls are selected
39. On top of the Code Editor, click Unit2.cpp

Any control on a form can be moved to a desired location either to accommodate other controls or based on new demands:

• To move a control, click and hold your mouse on it; then drag your mouse to the desired location, and release the mouse
• To move a group of controls, first select them; then click one of the selected controls and drag to the desired location, and release the mouse.
  If the controls are hosted by another control, you can move all of them when moving the container
• To move a control or a group of controls by one pixel, first make the selection. Press and hold Ctrl. Then press one of the arrow keys. Once you are satisfied with the location, release the Ctrl key.
• To move a control or a group of controls by one grid unit, first make the selection. Press and hold Shift + Ctrl. Then press one of the arrow keys. Once you are satisfied with the location, release the Ctrl key.

There are two valuable dialog boxes available to move controls. To solve alignment issues, access the Align dialog box:

• On the main menu, click Edit -> Align...
• Right-click one of the selected controls, position the mouse on Position, and click Align...

To better control the relative alignment of controls, you can use the Alignment toolbar. To access it, on the main menu, you can click View -> Toolbars -> Align:

Because it may be equipped with buttons you are not familiar with, to know what a button is for, you can position the mouse on it and wait for the tool tip.

When dealing with relative dimensions, call the Size dialog box. To get it:

• On the main menu, click Edit -> Size...
• Right-click one of the selected controls, position the mouse on Position, and click Size...

Most controls, including the form, can be resized using guiding mouse cursors. To resize a control, first select it. Except for the form, whenever a control is selected, there are eight handles around it. To resize the control, position your mouse on one of the handles. The mouse pointer will change, indicating in what direction you can move to resize the control

Cursor	Role
	Moves the seized border in the North-West <-> South-East direction
	Shrinks or heightens the control
	Moves the seized border in the North-East <-> South-West direction
	Narrows or enlarges the control

• To resize the control by one grid unit, click one of the handles and drag in the desired location. Once satisfied, release the mouse.
• To resize a control by the small possible unit, select the control. Press and hold Alt. Then click the desired handle and drag in the desired direction. Once satisfied, release the mouse and Alt.

1. To resize the form, position your mouse on its right border until the mouse turns into double horizontal arrow
2. Click and drag right a little bit
3. Release the mouse
4. Position the mouse on the lower right corner 
5. Click and drag in the upper right direction, a little bit
6. Release the mouse
7. Click Unit1
8. To resize a control, on the form, click ActionList1
9. Position the mouse on its lower left corner until the mouse turns into a double arrow
10. Click and drag in the lower right direction and release the mouse
11. Click Memo1
12. Position your mouse on its left border until the pointer turns into a double horizontal line
13. Click and drag to the left to enlarge it. Then release the mouse
14. Click anywhere on the form to select it

The TComponent class provides a valuable property named Tag:

property Tag: Integer read FTag write FTag;

The role of the TComponent::Tag is not defined by anything other than its being available. This means that you can use the Tag property anyway you want. The only thing you have to know is that it can be assigned an integer value that you can then use however you see fit.

Because a control's location can be identified with two values, it can also be illustrated as a geometric point on the coordinate system of the screen. A point is a pixel on the monitor screen, on a form, or on any object of your application. A point is represented by its coordinates with regard to the object that "owns" the point:

As seen so far, a control is a rectangular object that can be located, and whose dimensions are visible, on the screen. We saw already that each object of your application, including a form, is visually defined by its location and its dimensions on the screen for a form or on the object that owns it. These two aspects are controlled by a geometric rectangle that defines the location and the dimensions of the object.

In the Win32, to get the location and dimension of a control, you can call the GetWindowRect() function from Microsoft Windows (Win32). This function returns a rectangle that holds the location and the dimensions of the control as, lpRect.

In the VCL, a control is included in a rectangle known as the BoundsRect property. BoundsRect is a property of the TControl class and is declared as follows:

property BoundsRect: TRect read GetBoundsRect write SetBoundsRect;

Therefore, at any time, to get the location and the dimensions of a control, call its BoundsRect property, which produces a TRect value.

A control is referred to as visible if it can be visually located on the screen. A user can use a control only if he or she can see it. As a programmer, you have the role of deciding whether a control must be seen or not and when. At design time, when you add a control to a parent, it is visible by default.

In Microsoft Windows, the visibility of a control is specified by a style named WS_VISIBLE. If you are creating a control using either the CreateWindow() or the CreateWindowEx() functions, to indicate that it must be visible, add the WS_VISIBLE style to its dwStyle argument. Here is an example:

procedure TForm1.FormCreate(Sender: TObject);
begin
	CreateWindow('Button',
		     'Submit',
		     WS_CHILD Or WS_VISIBLE,
		     10, 10, 124, 25,
		     Handle,
		     0,
		     HInstance,
		     0);
end;

After the control has been created, if it is hidden and you want to show it, you can call the ShowWindow() function. Here is an example:

procedure TForm1.SomethingMustHappen(Sender: TObject);
begin
  ShowWindow(SomeControl.Handle, SW_NORMAL);
end;

In the VCL, for controls to support the visibility, the TControl class is equipped with a Boolean property named Visible:

__property bool Visible = {read=FVisible,write=SetVisible};

If you are visually creating a control, in the Object Inspector, access its Visible field and set the desired value. In the same way, if you programmatically create a control, by default, it is made visible once you specify its owner and parent as the (main) form. Besides setting the Visible property to True to show a control, the TControl class is equipped with a procedure named Show() that supports this operation. Its syntax is:

procedure Show

When calling this method, if the control is visible, nothing would happen. If it were hidden, then it would be revealed. Here is an example:

procedure TForm1.SomethingMustHappen(Sender: TObject);
begin
  SomeControl.Show
end;

The Show procedure internally sets the Visible property to true.

At run time, to hide a control, assign a False value to either its Visible property or its parent's Visible property. Remember that, as stated already, when a parent gets hidden, it also hides its children. On the other hand, a parent can be made visible but hide one or some of its children. Besides the Visible property used to hide a control, the TControl class is equipped with a procedure named Hide that performes the same operation. Its syntax is:

procedure Hide

If you don't want a control to primarily appear when the form comes up, you can either set its Visible property to False or set its parent's visible property to False. Here is an example:

procedure TForm1.Toggle(Sender: TObject);
begin
  SomeControl.Visible := not SomeControl.Visible
end;

Another property that supports the visibility of a control is named Showing but it is defined in the TWinControl class:

property Showing: Boolean read FShowing;

While the Visible property can be read or changed, Showing is a read-only property. This means that you can assign a True or False value to Visible but you can only check the state of Showing: you cannot change it. Keep in mind that hiding a control does not close or destroy it.

When designing an application, you are allowed to position controls on top of others. When a control that has a strong (non-transparent) background is positioned on top of an existing control, the control at the botton gets hidden, either partially or completely. Here is an example:

If you have a control that is behind a control that is not its parent, you can bring it to the front, either visually or programmatically. To visually control the coordinate arrangement of a control, on the form, right-click it, position the mouse on Control, and click Bring to Front:

To support this operation, the TControl class is equiped with a procedure named BringToFront. Its syntax is:

procedure BringToFront

Call this method on the control you want to bring to the top of all the other controls.

As opposed to a control being positioned behind the others, you may have a control above the others and you rather have it behind the other controls. To visually send it, right-click the control, position the mouse on Control and click Send to Back. To programmatically support this operation, the TControl class is equipped with the SendToBack procedure. Its syntax is:

procedure SendToBack

Call this method to change order of controls on the Z coordinates of the axes.

For the user to use a control, it must allow it. For example, if a control is supposed to receive text, the user can enter characters in it only if this is made possible. To make a control available to the user, the object must be enabled.

By default, a newly created control using the CreateWindow() or the CreateWindowEx() functions is enabled. If you want to disable it, add the WS_DISABLED style to its dwStyle argument. To support the availability of a control, the TControl class is equipped with a Boolean property named Enabled:

property Enabled: Boolean read GetEnabled write SetEnabled;

By default, after adding a control to a form, it is enabled and its Enabled property in the Object Inspector is set to true. An enabled control displays its text or other characteristics in their normal settings. If you want to disable a control, set its Enabled property to false. In the following picture, the two top controls (the edit box and the button) are disabled:

To find out whether a control is enabled or not, check its Enabled property value.

The focus is a visual aspect that indicates that a control is ready to receive input from the user. Various controls have different ways of expressing that they have received focus. A button indicates that it has focus by showing thick borders. Here is an example:

A button can also show that it has focus by drawing a dotted rectangle around its caption.

A text-based control indicates that it has focus by displaying a blinking cursor:

A list-based control indicates that it has focus when one of its items has a surrounding dotted rectangle:

To give focus to a control, the user can click it or press a key. To programmatically give focus to a control, call the TWinControl.SetFocus() procedure. Its syntax is:

procedure SetFocus virtual;

1. To start another project, on the main menu, click File -> New -> Other...
2. From the New Items dialog, in the right list, click VCL Forms Application
    
   
3. Click OK
4. When asked whether you want to save the current project, click No
5. From the Standard section of the Tool Palette, click TEdit and click the form
6. Add other edit controls as Edit2, Edit3, and Edit4
7. From the Standard section of the Tool Palette, click TButton and click the form to add a button control to the form
8. Add one more button
9. Add two more TEdit controls
10. Move and resize your controls on the form as follows:
     
    
11. To test the form, press F9
12. Notice that Edit1 is highlighted, meaning it has focus
13. Press Tab and notice that when the second edit box receives focus, its content is highlighted:
     
    
14. Press Tab a few times until the left button receives focus:
     
    
15. Close the form

A user can navigate through controls using the Tab key. When that key has been pressed, the focus moves from one control to the next. By their designs, not all controls can receive focus and not all controls can participate in tab navigation. Even controls that can receive focus must be explicitly included in the tab sequence.

The TabOrder property is defined in the TWinControl class as follows:

property TabOrder: TTabOrder read GetTabOrder write SetTabOrder;

If you are creating the control using either the CreateWindow() or the CreateWindowEx() functions, to include it in a tab sequence, add the WS_TABSTOP style. Tab stopping is represented in the TWinControl class by the TabStop property:

property TabStop: Boolean read FTabStop write SetTabStop;

At design time, the participation to tab sequencing is controlled by the TabStop property in the Object Inspector. Fortunately, every VCL control that can receive focus is already configured to have this Boolean property set to true. If you want to remove a control from this sequence, set its TabStop value to false.

If a control has the TabOrder property set to true, to arrange the navigation order of controls, you can use the Edit Tab Order dialog box. To display it, on the main menu, click Edit -> Tab Order... This would display the Edit Tab Order dialog box:

To change the sequence, click a control in the Controls Listed in Tab Order. Then click one of the buttons on the right side.

Alternatively, at design time, you can click a control on the form. Then, in the object Inspector, change the value of its TabOrder field. The value must be a positive short integer.

1. To adjust the navigation sequence, right-click an empty area on the form and flick Tab Order...
2. On the Edit Tab Order dialog, click Button1: TButton
3. Click the down pointing button twice
4. Click Edit6: TEdit
5. Click the up pointing button
6. Rearrange the list on the Edit Tab Order dialog as follows:
    
   
7. Click OK
8. To test the form, press F9
9. On the form, Press Tab a few times and notice the new sequence of navigation
10. Close the form

A tool tip is a small yellowish box that displays on a control when the user rests the mouse on such an object for a few seconds. A tool tip is a form of help that allows the user to get a quick and brief characteristic about the control. In VCL applications, a tool tip is called a Hint.

Hints in VCL applications can be applied on different levels, on all controls or on just some of them. A hint can be made of just the text that displays when the user rests the mouse on a control. A hint can also be made of two parts: the text that displays as a tool tip on the control and a little longer text on the status bar.

Every visual control that displays when a form is running has a property called Hint. The Hint property is a member of the TControl class and is defined as follows:

property Hint: string read FHint write FHint;

This property can hold text that would display as the control's tool tip. To display a hint on a control, the first thing you should do is to set the ShowHint property. This property is a member of the TControl class and is declared as follows:

_property ShowHint: Boolean read FShowHint write SetShowHint;

To set a hint, set the control's ShowHint property to True. The ShowHint property controls whether its control would display a hint or not. Once the ShowHint property has a true value, you can specify the necessary text on the Hint property.

Here is an example:

As seen on this picture, the background color of hint appears yellow. If you want a different color, assign a TColor value of your choice to the global TApplication::HintColor variable. When doing this, remember to select a color that would still make the text readable. Here is an example:

procedure TForm1.FormCreate(Sender: TObject);
begin
  Application.HintColor := clAqua
end;

The hint displays its word or sentence using a default global font set by the operating system. If you want to choose the font that should be used when displaying the hints, call the TScreen.HintFont property and define the font of your choice. Like a TApplication object, a TScreen variable is already available when you create a form. Here is an example:

procedure TForm1.CustomizeHints(Sender: TObject);
begin
    Screen.HintFont.Name := 'Times New Roman';
    Screen.HintFont.Size := 14;
end;

The Hint can also hold two strings: one that would display both as a tool tip and one that would display on the status bar. You can create text on the Hint property using the following syntax:

The Hint | Status Bar Text

This string is made of two actual strings separated by a bar. The string on the left side of the bar is the text that would display on the control when the mouse rests on it for a few seconds. The bar and the second string are optional. If you omit the bar and the right string, the unique string would be used as the hint and the status bar text.

The ShowHint property of each control is used to manage hints for that control only. If you use this approach, you would have to set the ShowHint of each control, whose hint you want to provide, to true. If you plan to use hints on many, most, or all controls of a form, the parent form provides a property. If you set the ShowHint property of the form to true, the ShowHint property of all controls on the form would be automatically set to true. In that case, you would not have to set the ShowHint property for each control. In fact, if you plan to use hints for various controls of your form, set the ShowHint of the form to true, unless you have a good reason why you do not need to.

The hints of a VCL application are globally controlled by the Hint member variable of the TApplication class. Whenever you create an application, a variable called Application is declared and can take care of such assignments that pertain to the application as a whole. To actually show hints on your controls, you must define a global function that is passed a TObject argument. The name of the function is not important. In the body of the function, assign the Hint member of the global Application variable to the desired panel of your status bar. After defining this function, in the OnCreate event of the form, assign the name of the previously defined function to the OnHint member variable of the global Application variable.

A cursor is a small picture that represents the position of the mouse on a Windows screen. Because Microsoft Windows is a graphic-oriented operating system, when it installs, it creates a set of standard or regularly used cursors. These can be seen by opening the Control Panel window and double-clicking the Mouse icon. This opens the Mouse Properties dialog box where you can click the Pointers tab to see a list of standard cursors installed by Windows:

Microsoft Windows installs a series of cursors for various occasions. Besides the cursors provided by Windows, Embarcadero RAD Studio installs additional cursors that can accommodate even more scenarios. All applications and all controls use a default cursor specified by the operating system. If you want, you can use a different cursor for a control in your application.

To support cursors, the TControl class is equipped with a property named Cursor:

property Cursor: TCursor read FCursor write SetCursor;

A cursor is an object of type TCursor. TCursor is an enumerator. To visually assign a ready-made cursor for a control, and to see the names of the members of the TCursor enumerator, click the control on the form to select it. In the Object Inspector, click Cursor and click the arrow of its box to display the list:

You can select one of those cursors to apply to a control. If these are still not enough, you can create your own cursors. Using your own, custom cursors involves more steps than using bitmaps and icons.

To create your own cursor, you can either use one designed by someone else or design your own. A cursor is a picture file with the .cur extension.

Essentially, most cursors use only two colors, black or white. This is because a cursor is only used as an indicator of the presence or position of the mouse pointer on the screen. Based on this (limitation), you ought to be creative. The minimum you can give a cursor is a shape. This can be a square, a rectangle, a circle, an ellipse, a triangle, or any shape of your choice. You can make the cursor fully black by painting it with that color. If you decide to make the cursor completely white, make sure you draw the borders of the cursor. By playing with the frequency of pixels and varying the frequencies of black and white, you can create variances of gray.

Between the black and white colors, two gray degrees are provided to you. In reality these two colors are used to give a transparency to the cursor so the background can be seen when the mouse passes over a section of the document.