198 views
in GUI Development by

Hello,

I wanto to show a keyboard when the user taps on text to edit it.

How ho i arrange a SimpleTouchHandler and The text editor to make them work like that?

in the example a siwtch is used.

The text editor area is on the "#" char and is large as the simple touch handler.

When i tap the touch handler it calls the method to show the keyboard, but when tap on the text editor it won't be called.

 

1 Answer

0 votes
by
 
Best answer

Hello Riccardo,

When i tap the touch handler it calls the method to show the keyboard, but when tap on the text editor it won't be called.

Does it mean you have already a working version, but it works unreliable when the user taps inside the Editor? If yes, the Editor component contains also a Touch Handler to allow the user the caret navigation. Possibly the handler interfers with the handler to activate the keyboard?

Therefore the simplest would be to use this existing handler. For this purpose, edit the method onPressTouch:

You could, for example, implement in the method following code to create the virtual keyboard dynamically and display it within the Application component (within the root object):

Later when you decide to hide the keyboard again, you could perform the following code:

For demonstration purpose I have created a small example demonstrating this application case (note, the example was created with EW version 12 so need version 12 or newer). In this example, when you tap within one of the three text editors, the virtual keyboard appears. By clicking on the Close Keyboard button, the keyboard disappears again:

Example Project

I hope it helps you further.

Best regards

Paul Banach

by

Thaks Paul, always a solution in your bucket. laughyes

I want to pass the modified string to an array element after the modification completed.

To get the final modified string, do I have to refer to the TextEditor.String property to get the final modified string? 

Second Question: If i want to implement a NumericKeyboard using the template, the way would be the same?

Thanks.

by

Hello Riccardo,

the property String contains the current text of the Text Editor component. You can evaluate this property or when you assign another string to it, the Text Editor will be updated to display this text. Note also the property OnChange, here you can assign a slot method to be notified every time the user edits the text. 

Second Question: If i want to implement a NumericKeyboard using the template, the way would be the same?

The way is the same. Just use the Numeric Keyboard component template

Please note: the component templates are templates. This means, they are explicitly intended to be modified, enhanced, etc. according to your needs. It is just a template. If you want other appearance, add or modify the existing views. If you want other keyboard layout, rearrange the existing views. If the component should behave in a different manner, modify the implementation of the component. Note the hints and inline comments of the component template.

Best regards

Paul Banach

by
If i want to limit the length of the string or, for example, or cut the ability to scroll down or insert a new line, do y evaluate this conditions on the onChange property realted slot method, or in the OnSetString method?
by

In case of the scroll/new line functionality I would recommend  to remove the affected functionality from the template - it just a starting point for your own Editor. For example, the new line is handled in the method onNewlineKey triggered by the corresponding Key Handler. You can remove both:

Concerning scrolling, I suppose you mean the scrolling caused by touch interactions. In such case edit or even remove the methods ending with Touch in their name. Note the inline comments found inside the methods:

The limitation for the length could be handled by the OnChange method or more generic in the Editor itself. Here you could modify the method onCharacterKey to ignore new characters if the string has already some predetermined length. For example:

Instead of using a constant value 4, you could also enhance the Editor by a new property named e.g. MaxLength and use this property in the if-condition. Then you can configure each editor instance with individual max-length value.

 

by

Super!

Thanks for the clarifications.

How do i tell the magnifing glass feature to stay within the bounds of the screen?

And, when i close the keyboard, the caret keeps flashing, i think meaning the text editor is still focused, how to avoid that?

thanks.

by

The position of the magnifying glass is updated in the method updateMagnifyingView. As explained in the implementation, the method calculates an offset to move the view between its actual and the new position according to the caret position. You can enhance the method by following code to adjust this offset to not exceed the boundary of the owner of the Text Editor component:

// Estimate the position where the magnifying view will appear
var rect r = magnifyingView.GetExtent() + ofs;

// Limit the offset to not exceed the boundary area of the Owner component
if ( r.x  < 0 ) ofs.x += -r.x;
if ( r.y  < 0 ) ofs.y += -r.y;
if ( r.x2 > Owner.Bounds.w ) ofs.x += Owner.Bounds.w - r.x2;
if ( r.y2 > Owner.Bounds.h ) ofs.y += Owner.Bounds.h - r.y2;

You add the code at the specified position within the method updateMagnifyingView:

I hope it helps you.

by
It helped,Thanks.

Referring to your example, whe i press the "Close Keyboard" button, the caret of the selected text editor keeps blinking.

How can i, closing the keyboard, "deselect" the text editor to stop it blinking? i think it has something to do with the Focus.

Thanks.
by

In the component containing the Editor, set the property Focus = null. See also the section Keyboard events and the focus path.

Best regards

Paul

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...