Change the keyboard layout button image when the button is pressed

Question

Hello, I am making a keyboard layout. 

I tried to change image.framenumber=3 or image.bitmap= Application::BtnGray to display it when the button is pressed by putting an image after text to indicate button press, but it didn't work. 

After analyzing the code, it seems that the text gets its position as Text.GetExtent() and changes the color of the text with that value. 

What is the best way to use an image?

Answer 1

Hello sukyeong,

you want enhance the Keyboard template by frame images behind the keys. In such case it is important to understand the implementation of UpdateViewState() implemented in this template. There are two variables keyView and isKeyView. The first refer the view representing the recently pressed key (now the released key). The second refers the view representing the just pressed key.

With this information you can implement code to find the frame view lying behind the just pressed or released key. Following could be the implementation:

if ( keyView )
{
  // Get the view behind 'keyView' according to the Z-Order
  var Core::View   prevView  = FindPrevView( keyView, Core::ViewState[]);
  var Views::Frame frameView = (Views::Frame)prevView;

  // Is the view a Frame? Then update the view to the appearance of a released button
  if ( frameView )
    frameView.FrameNumber = 0;
}

if ( isKeyView )
{
  // Get the view behind 'isKeyView' according to the Z-Order
  var Core::View   prevView  = FindPrevView( isKeyView, Core::ViewState[]);
  var Views::Frame frameView = (Views::Frame)prevView;

  // Is the view a Frame? Then update the view to the appearance of a pressed button
  if ( frameView )
    frameView.FrameNumber = 1;
}

See also the section Enumerate and search views existing within the component for more details concerning the used FindNextView() method.

Important: This approach expects the new added frame views are arranged directly behind the corresponding key views. This means the  Z-Order of the Frame view has to be 1 less than the Z-Order of the corresponding Text view. For example, I have added a Frame view and arranged it behind the key 16. This frame view will be found in the above implementation and highlighted when the user touches the Text view 16:

I hope it helps you further.

Best regards

Paul Banach

Comments

Thank you, thanks I solved it well