Introduction to the Touch Keyboard

Description

With the ever-increasing pace of touch screens, the VCL provides new features to support them. Besides, or instead of, using the physical keyboard to perform data entry, the VCL provides a keyboard that you position on an application like a Windows control. The keyboard can then act as a visual object on a touch screen so that, by pushing its keys, you get the same results as if you were physically typing using the keys. Fortunately, you can use both the physical keyboard and the keyboard on the screen.

To help you add a virtual keyboard to an application, the VCL provides a control named a touch keyboard. The touch keyboard is available through a class named TTouchKeyboard. The TTouchKeyboard class is derived from the TCustomTouchKeyboard class that provides its actual functionality. Both the TTouchKeyboard and the TCustomTouchKeyboard classes are defined in the Keyboard.hpp header file. The TCustomTouchKeyboard class is based on the TCustomControl class:

To visually add a virtual keyboard, in the Tool Palette, click Touch. In the Touch section, click TTouchKeyboard and click the form or the container that will host it. To programmatically get a virtual keyboard, create a pointer to TTouchKeyboard and initialize it using the class's constructor. Because this is a visual control, you mus specify its owner in the constructor and assign its parent.

The touch keyboard has automatic functionality built-in so that, after adding it to a form and if the form contains some controls, the virtual keyboard will recognize the controls and it is ready to be used. This means that, there is abolutely no configuration to do to make the virtual keyboard work: It is automatically and impressively ready. For example, if your form has a control, the user can point to that control with a finger (or give it focus using the mouse). As soon as the user starts touching the keyboard on the screen, the control that has focus receives the input. If the control is an edit box and if it has focus, when the user pushes a letter key, a digit key, or a symbol key on the keyboard on the screen, the corresponding character automatically displays in the control.

When it gets added to an application, the touch keyboard immediately refers to the Control Panel to find out what type of keyboard is attached to the computer and what language that keyboard is using (the language used by the keyboard is not necessarily the language of the operating system). For example, the following form shows a keyboard that uses a French Canadian keyboard (but the operating system uses US English as its language):

The size and appearance of the virtual keyboard can be affected by the circumtances in which it is used. For example, a user can use the virtual keyboard using either her fingers or a pen (any strong object works just fine). If you create a small form, the keys on the keyboard would be small, in which case the user can use a regular pen. If you cannot predict what the users would use or if you want to keep the option of using fingers, you should make the form and the keyboard as big as possible.

As a TWinControl-based control, the touch keyboard inherits the Align property. This allows you to easily "glue" it to the top or the bottom border of its host:

As a result, if the user resizes the form, the virtual keyboard would follow.

If you are developing for a small screen (for example, many department stores, supermarkets, and restaurants use 15" monitors), to make the form occupy the whole monitor, you can apply the wsMaximized value to its WindowState property. In this case, if the keyboard is using the alBottom value for its Align property, it would automatically occupy the whole bottom side of the screen.

As stated already, the compiler refers to the Control Panel to identify the default keyboard being used on the omputer. One of the options you have is to change the captions of the special keys on the virtual keyboard. To support this, the TCustomTouchKeyboard is equipped with a property named CaptionOverrides:

__property Keyboard::TKeyCaptions * CaptionOverrides = {read=FKeyCaptions};

This property is actually represented in the Object Inspector as KeyCaptions. To specify the custom captions, access the Object Inspector for the touch keyboard and expand the KeyCaptions field:

Click the value of each field and type what ever letter or string you want.

The touch keyboard is configured to show only either the letter keys, the digit keys, and the action keys (Esc, Backspace, Enter, Shift, Alt, Ctrl and the arrow keys) or the numeric keys (usually used in accounting). This characteristics is controlled by the Layout property of the TCustomTouchKeyboard property:

__property System::UnicodeString Layout = {read=FLayout,write=SetLayout};

Curiously, this property is a string. To specify the layout at design time, access the Object Inspector for the touch keyboard and click the Layout field. The default value is Standard. The other value is NumPad:

As stated already, the circumstances of using it can affect the appearance of the touch keyboard. To assist you with its appearance, the TWinControl provides such aspects as the background color of the form that hosts the keyboard. If you anticipate that the application will mostly be used in a dark room, such as a kitchen or the projection room of a movie theather, you can make the form dark or black. This is easily done using the Color property of the form. Here is an example:

Because the keys on the keyboard are white, they will easily appear to the user. To enhance the appearance of the keyboard, you can change its background color. To support this, the touch keyword also inherits the background Color property from the TWinControl class. Here is an example that uses clLime:

The VCL further allows you to paint the background of the keyboard with two transitional colors. To start, the TCustomTouchKeyboard class provides the DrawingStyle property:

__property Keyboard::TCustomTouchKeyboard::TDrawingStyle DrawingStyle =
{
	read=FDrawingStyle,
	write=SetDrawingStyle
};

The DrawingStyle property uses a value from the TDrawingStyle enumerator:

enum TDrawingStyle{
	dsNormal,
	dsGradient
};

Its default value is dsNormal. If you keep or set this property to dsNormal, you can either keep its default background color or change the color from the Color property. If you want to use two transitional colors for the background, set this property to dsGradient, which can be done in its field in the Object Inspector. After doing this, you can specify one of the colors using the GradientStart property:

__property Graphics::TColor GradientStart =
{
	read=FGradientStart,
	write=SetGradientStart
};

To let you specify the other color, the TCustomTouchKeyboard class provides the GradientEnd property:

__property Graphics::TColor GradientEnd =
{
	read=FGradientEnd,
	write=SetGradientEnd
};

One of the colors will be used on one side of the background and the other color will be used on the other side of the background of the touch keyboard. Between them, the compiler would apply a transitional mix of the colors from one to the other, creatind a gradient effect. Here is an example t hat uses clWhite for the GradientStart property and clAqua for the GradientEnd property:

Remember that the Object Inspector provides only a fixed number of colors. If you want to use colors that are not in the list of the property's field, you should prgrammatically specify the color(s). Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TouchKeyboard1->GradientStart = RGB(255, 255, 205);
	TouchKeyboard1->GradientEnd = RGB(205, 55, 5);
}
//---------------------------------------------------------------------------

This would produce: