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

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

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.

      | 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?

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

You want to create a Textbox and a Label ?


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 |

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 |

| EditText         |

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.