Advice request on creating UI FormField control (Label + EditBox)

[OrionSteel]

Hi, I am in the process of learning Cocos2d-x v3.17.
I am looking for advice and suggestions on implementing a Form Field control; that is, a text label and an input field combined to look something like this, and perhaps draw box around edit to make it obvious it is a field user can “click and edit”.

Gunpowder (lb): [1.2345]

I plan to combine a Label with an EditBox in a FormField class derived from (perhaps) ProtectedNode
EDIT or perhaps Widget? Apparently I was looking at older docs with EditBox derived from ProtectedNode, but now (V3.17) is from Widget.

ASCII UML
      +---------------+
      | ProtectedNode | Or Widget?
      +-------+-------+
              ^
              |             Code to handle sizing of Label and EditBox
        +-----+-----+       Presents Label and EditBox side by side
    +-<>+ FormField +<>-+
    |   +-----------+   |
    |                   |
    |                   |
+---+---+          +----+----+
| Label |          | EditBox |
+-------+          +---------+

1. What is difference between Node and ProtectedNode? I assume I should use protected since most UI elements like buttons seem to use protected.

2. Is there a better approach, or existing controls I should be using?

3. I modified the Win32 EditBox control to handle decimals and negatives i.e. -1.234.
   Because of Windows limitation, DECIMAL input mode only allowed plain numbers 01234…9, not “.” and “-”.

• Modified input filter for WM_CHAR event to allow “.” and “-”
• Since Windows allow cut and paste with other characters, and since “12-3…4” is invalid I included GetValidText() function which would return GetText, but made as valid as possible or empty:
  “-1-…23.4-5” -> “-1.2345”
• Added get/set CaretIndex(), which lets me work on text in delegate as user types, while maintaining their caret position.
• Will I have problems since I did not modify other implementations (IOS, Android)?
• The code is still a bit rough, but once I clean it up I might share it.
  Is this something of interest to community, and if so, how to share?

[slackmoehrle]

You want to create a Textbox and a Label? cpp-tests has examples of this.

[OrionSteel]

You want to create a Textbox and a Label ?
@slackmoehrle

Perhaps.

I was under impression the Textbox was depreciated and EditBox was recommended.

I do want to create a control that combines a text label with an editable text or edit box.
Specifically option for entry of a decimal number.

Something like this (using ASCII art)

                           +-------+
Enter pounds of gunpowder: | 1.234 |
                           +-------+

[OrionSteel]

In case anyone reads this and are curios; this is what I did, which seems to work fine:

1. Derive a class FormField from Widget.

2. Have a Label and EditBox members, added as widget node children.

3. Have a resize function that sizes FormField to be height of Label + 2*5 (editbox padding) and width of 5 + Label size + EditBox size, and places label on FormField’s mid left boundary, and EditBox on mid right (needed to compensate for FormField’s anchor point)

4. Have a create function that takes the Label text, system font, font size, and number of characters for edit box. I use a temporary label for “WWW…W|” number of characters to get the unpadded size for EditBox, then add 2*5 to the size. This makes edit box size nice and fit Label both when displaying text and when editing

5. If I have special needs for Label and EditBox (sprites, size, font, etc.) I have a create function that takes already created Label and EditBox, and places in FormField, then Resize FormField to fit.

6. Possible improvement: Add box around EditBox when not editing to make “edit field” more obvious.

7. Possible improvement: have horizontal and vertical mode, i.e.

                     +----------+
MyFormFieldLabelText | EditText |
                     +----------+

                    
MyFormFieldLabelText
+------------------+
| EditText         |
+------------------+