Text editor information

Question

Hi  

I am new developer,

I started with text editor component template

so I am able to get the string from the text editor .

Question: I want to mask that typing and instead print # on every character type

Can you please advice me the steps

Answer 1

Hello Mike,

I suppose, your application is the password input. If this is the case, I would not use the Text Editor component. It implements a lot of functionality, which is useless when the text is not visible. For example, the navigation in the text and the automatic line wrap will possibly irritate the user when the text is not visible.

Instead I would:

1. implement a simple GUI component with Text view and the Key Handler inside it.

2. Configure the Key Handler to react to alphanummeric keys (the setting AlphaOrDigitKeys).

3. Connect a new Slot method to the handler's OnPress property.

4. Add a new variable to the component where the entered string will be stored. Configure the variable with type string.

5. Implement the slot method (from step 3) with following or similar code:

// Collect the just pressed key code in the variable
Variable = Variable + KeyHandler.CharCode;

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

6. If you additionally want the user to be able to delete the last entered character you can add a further Key Handler to the component.

7. Configure the handler to react to the Backspace key.

8. Connect a new Slot method to the handler's OnPress property.

9. Implement the method (from step 8) as shown below:

// Truncate the string
Variable = Variable.left( Variable.length - 1 );

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

10. When the user finalized the input operation, the entered string (Password?) is found in the variable.

Is this the right approach for your application case?

Best regards

Paul Banach

 

Comments

Yes the feature is like password but I will need caret , delete , clear feature also so that is why I thought to text editor template

---

Hello Mike,

ok, understood. I will elaborate a list with necessary adaptation steps for your application case. Please have some patience.

Best regards

Paul Banach

---

Hello Mike,

following are the necessary modifications in the component created from the Text Editor template to display the # sign instead of the real text. Normally, the entered text is stored in the Text view existing within the component. The modification stores now the text in a new variable. The Text view itself will store and display only the corresponding count of # signs.

I hope it helps you further. Please follow the steps precisely to avoid errors.

Best regards

Paul Banach 

Step 1: Per default, the Text Editor displays the readable string Text. Select the Text view and adapt its property String to be initialized with the string "####\n" (incl. the both quote signs) as shown below:

Step 2: Add a new variable to the Text Editor component. Name it e.g. content. The variable will be used to store the real text.

Step 3: Ensure the variable is declared with type string.

Step 4: Per default, the Text Editor displays the string Text. Ensure the variable's default value is "Text\n" too (incl. the quote signs). Following is the resulting variable with its type and initialization expression from the above steps 2-4:

Step 5: Select and delete the both members NewlineKeyHandler, onNewlineKey. These members take care of the line break. This will not work with the here described approach. Following are the members to delete:

Step 6: Open the method OnSetString and modify following code:

/* OLD CODE */

Text.String = str + "\n";

/* NEW CODE */

content     = str + "\n";
Text.String = string( '#', content.length - 1 ) + '\n';

Step 7: Open the method OnGetString and modify following code:

/* OLD CODE */

var string str = Text.String;

/* NEW CODE */

var string str = content;

Step 8: Open the method onCharacterKey and modify following code:

/* OLD CODE */

Text.String = Text.String.insert( str, caretIndex );

/* NEW CODE */

content     = content.insert( str, caretIndex );
Text.String = string( '#', content.length - 1 ) + '\n';

Step 9: Open the method onDeleteKey and modify following code:

/* OLD CODE 1 */

if ( caretIndex >= ( Text.String.length - 1 ))

/* NEW CODE 1 */

if ( caretIndex >= ( content.length - 1 ))


/* OLD CODE 2 */

var char  ch    = Text.String[ caretIndex ];

/* NEW CODE 2 */

var char  ch    = content[ caretIndex ];


/* OLD CODE 3 */

Text.String = Text.String.remove( caretIndex, count );

/* NEW CODE 3 */

content     = content.remove( caretIndex, count );
Text.String = string( '#', content.length - 1 ) + '\n';

Step 10: Open the method onBackspaceKey and modify following code:

/* OLD CODE 1 */

var char  ch    = Text.String[ caretIndex - 1 ];

/* NEW CODE 1 */

var char  ch    = content[ caretIndex - 1 ];


/* OLD CODE 2 */

Text.String = Text.String.remove( caretIndex - count, count );

/* NEW CODE 2 */

content     = content.remove( caretIndex - count, count );
Text.String = string( '#', content.length - 1 ) + '\n';

Thats all ... I hope.

---

Yes thank you for the support

---

Hi

 

If I have to access the caps lock when user press the F9 then do I need to convert lowercase to upper case in oncharacterkey slot

---

Hi ,

 

I think I got it used the string.upper and it changes to upper case

---

Hi ,

 

I have one query , I removed all the touch and slide handler and it respective slot method

In widget I can see the Caret visible

But when it is used in another component

Caret is not visible, before when touch and slide handler was present at that time when the editor is clicked it was showing caret

I used the approach I drag the editor in the gui component . So in editor updateviewstate method  
 

if (astate.contain(core::viewstate[focused]) is not true and that is why blinkeffect is disabled

So am I missing some steps that need to folow

---

Hello Mike,

I answered your question in the thread Character typing.

Best regards

Paul Banach

---

Hi Paul,

I have implemented the password approach using text editor. If I have input a password as "Admin^1", the variable content is updated as "Admin^1" but in the text editor it is showing as "********". i.e one extra ' * '. Is there anyway to omit that extra ' * ' within the text editor view.? Because passwords have character limitation. so adding extra ' * ' for those special characters will confuse users.

Regards,

Sazna.

---

Hello Sazna,

please add following steps to the above described steps 1..10:

Step 11: Open the method onCharacterKey and remove following code lines:

// Precede all special control signs with the '%' escape sign. Otherwise
// the user can't input nor see them
if (( ch == '^' ) || ( ch == '~' ) || ( ch == '\xAD' ) || ( ch == '%' ))
  str = "%" + ch;

 Step 12: Open the method OnSetString and remove following code lines:

var int32  inx = str.find( '%', 0 );

// The special '%' escape sign is not visible until there is other
// '%' sign in front of it. Convert all '%' signs into '%%' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '%', inx + 2 );
}

inx = str.find( '^', 0 );

// The special '^' control sign is not visible until there is a '%'
// sign in front of it. Convert all '^' signs into '%^' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '^', inx + 2 );
}

inx = str.find( '~', 0 );

// The special '~' control sign is not visible until there is a '%'
// sign in front of it. Convert all '~' signs into '%~' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '~', inx + 2 );
}

inx = str.find( '\xAD', 0 );

// The special '\xAD' hyphen sign is not visible until there is a '%'
// sign in front of it. Convert all '\xAD' hyphen signs into '%\xAD'
// sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '\xAD', inx + 2 );
}

 Step 13: Open the method OnGetString and remove following code lines:

// In the following steps remove any special text view control signs
// which are usually used to control the text flow. The resulting string
// should contain the 'pure' text only.
var int32 inx = str.find( '%', 0 );

// The special control/escape signs are not visible until there is a
// '%' sign in front of them. Remove all superfluous '%' signs
while ( inx >= 0 )
{
  str = str.remove( inx, 1 );
  inx = str.find( '%', inx + 1 );
}

 Step 14: Open the method onDeleteKey and remove following code lines:

// The sign was a special control sign? In this case the sign comes
// together with the preceding '%' escape sign - otherwise the user
// couldn't see the sign
if ( ch == '%' )
  count = 2;

  Step 15: Open the method onBackspaceKey and remove following code lines:

// The sign was a special control sign? In this case the sign comes
// together with the preceding '%' escape sign - otherwise the user
// couldn't see the sign
if (( ch == '^' ) || ( ch == '~' ) || ( ch == '%' ))
  count = 2;

The above code sections exist to handle the characters ^ ~ and % which are handled exceptionally by the Text view. However, in your application the Text view will display only * characters. The special handling is not necessary and interfering with the steps 1..10.

I hope it provides the desired behavior.

Best regards

Paul Banach

---

Hi Paul,

I have adapted above changes but we have a toggle button to view the actually typed password. i.e content. when we try to view the content it comes with a empty space.

For Example:

input: Admin^1

Text.String = *******

content = Admin 1

How to achieve both scenarios correctly?

Regards,

Sazna.

---

Hi Paul,

Achieved the required implementation without removing the above mentioned steps.  Thank you for the assistance.

Regards,

Sazna.