Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Flexible Keyboard Control for Mobile Applications

31 Oct 2008 1  
Resco CustomKeyboard for .NET CF is a Visual Studio control which serves as a fully functional and customizable keyboard. The developer can design as many keyboard layouts as he needs and then switch among them during run-time. Custom bitmap images can also be used for the layout design.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Flexible Keyboard Control for Mobile Applications

Typing the data into a pocket pc application is important but often very uncomfortable. Using the soft input panel is awkward. Hardware keyboard can help, but it is not always present and because of its generality it doesn't fit the purpose of the application. Creating a useful and good looking keyboard layout is a piece of art. With Resco CustomKeyboard for .NET CF it is simple to create a keyboard layout that looks even like this:
CustomKeyboard layout

What is Resco CustomKeyboard for .NET CF?

Resco CustomKeyboard for .NET CF is a .NET Compact Framework control which serves as a fully functional and customizable keyboard. Customization can be done using Visual Studio's designer. The most important and absolutely unique feature of CustomKeyboard is that developer can design as many keyboard layouts as he needs and then switch among them during run-time. It is also possible to save the created layouts into an XML file and then load the layouts anytime into it during run-time. The developer can change the whole set of keyboard layouts if particular action takes place (such as the user changes the language of the application).

How does it work?

CustomKeyboard maintains a collection of Layout objects. Each Layout object represents a keyboard layout. A keyboard layout consists of KeyDescriptor objects. There are two different approaches when designing a keyboard layout.

Approach I

The developer can create a keyboard layout and add it to the collection. He can assign a unique name for each layout. He can also specify the width and height of the layout. The layout contains a collection of keys. Each key contains Bounds property which defines its position within the layout. Such layout:
QWERTY layout
can easily be created just using Visual Studio's designer. It automatically generates code which describes the created layout. This is how the layout looks like in Visual Studio's designer:
QWERTY layout in Visual Studio
The color of the pressed key can also be defined. The key is painted that color as long as it is being pressed.

The KeyDescriptor object contains many properties which define the way the key is painted. The layout designer can therefore easily achieve the following layout in which particular keys are highlighted:
Highlighted QWERTY layout in VS
For example the developer can highlight those keys which are most likely to be pressed while the user is typing.

CustomKeyboard also supports function keys (for example shift key). Creating a function key is as simple as adding a key to the collection and setting its IsFunctionKey property to true.

To create a shift key functionality developer needs two different keyboard layouts. One which will be used when the shift key is pressed and one when it is not. In the KeyboardKeyUp event handler, he just needs to activate the other layout by setting CustomKeyboard's ActiveLayoutIndex property to appropriate value.

Approach II

The second approach of keyboard's layout design is to use a bitmap coating or a so-called "skin". CustomKeyboard then displays the skin atop of its client area. This approach provides the developer unlimited possibilities of customization, because he can use any kind of graphics in the skin.

The layout consists of two bitmap images - one that is used when the button is pressed and one when it is not. Let's say that you are creating an application which serves as an electronic survey where the user has to enter the kind of transportation he likes the most. The developer can use the CustomKeyboard and create these 2 skins for it:
Skin1 Skin1
The second one will be used when a button is pressed. Of course, for the CustomKeyboard to work properly, the user has to define the regions of the skin which represent the buttons. For this purpose, CustomKeyboard can be switched into DebugMode as shown on the following image:
CustomKeyboard in Debug mode

Now while a button is being pressed, the region of that button will be painted using the darker skin:
Skin with pressed button

Conclusion

Resco CustomKeyboard for .NET CF is a very flexible and customizable keyboard control for .NET Compact Framework developers. It can be used in various types of mobile business applications. Field service applications, where the user has to type in specific information such as values obtained by measuring. Even in conditions where users are forced to wear gloves the keyboard can be still easily operated, if the layout was designed carefully enough.

Together with its unique capability which allows the developer to change the layout anytime during run-time, it provides a useful and customizable user interface for purpose of all kinds of mobile business applications.

Availability

Resco CustomKeyboard for .NET CF is part of Resco MobileForms Toolkit, which is a suite of Visual Studio controls designed specifically for mobile devices. More information about this popular toolset can be found here.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here