Made a resettable UIText widget with a button for clearing text. #2543

arpan98 · 2016-10-14T14:25:27Z

Contains

Fixes #2507 using the second approach mentioned in the issue, making a new widget ResettableUIText based on the UIText widget. Also added the widget to the migTestScreen, so it can be seen in different states using the console command showSreen migTestScreen.

Outstanding before merging

On clicking the button, the text is cleared but focus is lost from the UIText box. Any suggestions for a workaround?

GooeyHub · 2016-10-14T14:25:28Z

Can one of the admins please verify this patch?

Cervator · 2016-10-15T02:03:21Z

@GooeyHub: add to whitelist

Thanks for this @arpan98 along with the other two PRs! :-)

Aiming to merge those now since they're easy, maybe @rzats can take a look at this one to provide some feedback

GooeyHub · 2016-10-15T02:12:43Z

Hooray Jenkins reported success with all tests good!

rzats

Needs some minor tweaks and a fairly major one, but you're definitely on the right track!

rzats · 2016-10-15T10:11:32Z

engine/src/main/java/org/terasology/rendering/nui/layers/mainMenu/SelectModulesScreen.java

-import org.terasology.rendering.nui.widgets.UILabel;
-import org.terasology.rendering.nui.widgets.UIList;
-import org.terasology.rendering.nui.widgets.UIText;
+import org.terasology.rendering.nui.widgets.*;


No star imports, please. (Go to Settings → Editor → Code Style → Java → Imports and set "Class count to use import with '*'" along with "Names count to use static import with '*'" to 999)

rzats · 2016-10-15T10:43:58Z

engine/src/main/java/org/terasology/rendering/nui/widgets/ResettableUIText.java

+import org.terasology.rendering.nui.UIWidget;
+
+public class ResettableUIText extends UIText {
+    private UIButton clearButton = new UIButton("clearButton", "X");


This is a working approach, but IMO Terasology's default button doesn't look great when used as a small control element.

UIDropdown handles control elements slightly differently - it uses a texture (dropdown.png) the right part of which masquerades as a button. I would use this idea for ResettableUIText as well:

Create a modified version of box.png (the texture that UIText uses as a background) similar to dropdown.png. The left 80% of it should be the same as box.png, but the right 20% will contain a reset button. (Different percentage values are also fine - use what works best!)

In ResettableUIText.onDraw() separate the canvas region into two parts:

The left (80%) will display the current text and place the cursor at a specified position when clicked on (same as the default UIText).

The right (20%) will reset the text field when clicked on. (This should also fix the issue mentioned in the PR as the "button" won't make the text field lose focus!)

Nice idea! I'm having some trouble finding where these textures are set to the corresponding UI elements. Any pointers?

default.skin 🙂

You'll need to add a new entry looking something like this:

"ResettableUIText": { "background": "engine:yourTexture" }

rzats · 2016-10-15T10:46:26Z

engine/src/main/java/org/terasology/rendering/nui/widgets/ResettableUIText.java

+        super.lastWidth = (int) (canvas.size().x * 0.8f);
+        if (isEnabled()) {
+            canvas.addInteractionRegion(super.interactionListener, Rect2i.createFromMinAndMax(0, 0, (int) (canvas.size().x * 0.8f), canvas.size().y));
+            clearButton.subscribe(new ActivateEventListener() {


This should be lambdified:

clearButton.subscribe(button -> setText(""));

IDEA should prompt you to convert anonymous inner classes to lambdas - do this whenever it does 🙂

rzats · 2016-10-15T10:52:39Z

engine/src/main/java/org/terasology/rendering/nui/widgets/UIText.java


    @LayoutConfig
-    private boolean multiline;
+    protected boolean multiline;

    @LayoutConfig
    private boolean readOnly;


Consider setting UIText's other private variables and methods (except logger, BLINK_RATE, blinkCounter and cursorTexture as they are unlikely to be changed by a child class) to protected - don't just make half of class extensible! 😛

Should I redefine the methods as well? They do have the exact same functionality as in the parent class (which was the entire point of inheriting from UIText) and will lead to a lot of code repetition.

No, not at all - just change the access modifiers to protected! (The reason for this is that a programmer in the future might want to create their own UIText override, and to them it might not be obvious why some fields are marked as protected but others aren't.)

rzats · 2016-10-15T10:53:13Z

engine/src/main/java/org/terasology/rendering/nui/widgets/ResettableUIText.java

+import org.terasology.rendering.nui.SubRegion;
+import org.terasology.rendering.nui.UIWidget;
+
+public class ResettableUIText extends UIText {


A short multiline comment explaining what the class does would be nice here.

GooeyHub · 2016-10-15T13:45:31Z

Hooray Jenkins reported success with all tests good!

arpan98 · 2016-10-15T13:46:17Z

@rzats I added a default texture and one for disabled as well as the other changes. Have a look.

rzats · 2016-10-15T15:18:26Z

@arpan98: the new widget works great - thanks! 🙂
Merged.

Made a resettable UIText widget with a button for clearing text

cdcea61

GooeyHub added the in progress label Oct 14, 2016

Cervator added the Topic: UI/UX Requests, Issues and Changes related to screens, artwork, sound and overall user experience label Oct 15, 2016

rzats suggested changes Oct 15, 2016

View reviewed changes

Added ResettableUIText textures

ef07d2d

rzats approved these changes Oct 15, 2016

View reviewed changes

rzats merged commit 5831067 into MovingBlocks:develop Oct 15, 2016

GooeyHub removed the in progress label Oct 15, 2016

Cervator added this to the Alpha 6 milestone Oct 17, 2016

Cervator mentioned this pull request Feb 5, 2017

UI Widget Proposal: UITextHint #2740

Closed

Cervator mentioned this pull request Mar 14, 2017

Provide example for ResettableUIText Terasology/TutorialNui#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Made a resettable UIText widget with a button for clearing text. #2543

Made a resettable UIText widget with a button for clearing text. #2543

arpan98 commented Oct 14, 2016

GooeyHub commented Oct 14, 2016

Cervator commented Oct 15, 2016

GooeyHub commented Oct 15, 2016

rzats left a comment

rzats Oct 15, 2016

rzats Oct 15, 2016

arpan98 Oct 15, 2016

rzats Oct 15, 2016

rzats Oct 15, 2016

rzats Oct 15, 2016

arpan98 Oct 15, 2016 •

edited

Loading

rzats Oct 15, 2016

rzats Oct 15, 2016

GooeyHub commented Oct 15, 2016

arpan98 commented Oct 15, 2016

rzats commented Oct 15, 2016

Made a resettable UIText widget with a button for clearing text. #2543

Made a resettable UIText widget with a button for clearing text. #2543

Conversation

arpan98 commented Oct 14, 2016

Contains

Outstanding before merging

GooeyHub commented Oct 14, 2016

Cervator commented Oct 15, 2016

GooeyHub commented Oct 15, 2016

rzats left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arpan98 Oct 15, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GooeyHub commented Oct 15, 2016

arpan98 commented Oct 15, 2016

rzats commented Oct 15, 2016

arpan98 Oct 15, 2016 •

edited

Loading