Skip to content

EditBox

Jump to bottom
wutname1 edited this page May 12, 2019 · 1 revision

Component stability: Beta

StdUi has few editboxes that you can use:

Simple Edit Box

StdUi:SimpleEditBox(parent, width, height, text)

Description:

This is the simplest implementation of EditBox. It does not have any validators and its value is updated on the fly. It is worth to mention that OnEscapePressed is already hooked and clears focus so you don't need to hook it yourself.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • text string (Optional) - String that should be as initial value

Returns:

Example:

local editBox = StdUi:SimpleEditBox(window, 100, 20, 'Initial Text');

Search Edit Box

StdUi:SearchEditBox(parent, width, height, placeholderText)

Description:

Very similar to simple edit box with few key differences: It has placeholder text and placeholder icon. Placeholder automatically hides when you type something in the editbox. OnTextChanged is hooked because of that.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • placeholderText string (Optional) - String that should be placeholder

Returns:

Named children:

  • editBox.placeholder.label - FontString - FontString that is used as placeholder text
  • editBox.placeholder.icon - Texture - Texture that is used as placeholder icon

Example:

local editBox = StdUi:SearchEditBox(window, 100, 20, 'Search');

Edit Box

StdUi:EditBox(parent, width, height, text, validator)

Description:

A proper implementation of EditBox with validator. It does have OK button that shows whenever value has changed and is different from last value. Because of that OnTextChanged, OnEnterPressed hooks are used.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • text string (Optional) - String that should be as initial value
  • validator function (Optional) - Function that is fired each time value has been confirmed either by clicking OK button or pressing Enter. It has the ability to mark edit box value as Invalid. If you do not provide validator, default one will be used that accepts everything.

Returns:

Named children:

  • editBox.isValid - bool - variable that indicates if EditBox value is valid
  • editBox.isValidated - bool - variable that indicates when EditBox is being currently validated
  • editBox.button - Button - The 'OK' button itself

Methods

StdUi adds few additional methods:

  • IsValid() - bool - returns if current value is valid according to validator
  • Validate() - Calls the validator and changes value is it is valid
  • GetValue() - Gets the current (or last valid) value
  • SetValue(value) - Sets the current value
  • OnValueChanged()- callback that fires when value has been changed, override this if you wish to get notified whenever value has been changed.

Example:

local editBox = StdUi:EditBox(window, 100, 20, 'Some Text');

Numeric Box

StdUi:NumericBox(parent, width, height, text, validator)

Description:

Very similar to the above EditBox but it only accepts numerical values.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • text string (Optional) - String that should be as initial value
  • validator function (Optional) - Function that is fired each time value has been confirmed either by clicking OK button or pressing Enter. It has the ability to mark edit box value as Invalid. If you do not provide validator, default one will be used that accepts everything in between minValue and maxValue.

Returns:

Named children:

Check above EditBox for named children, additionaly it has 2 more:

  • editBox.minValue - number - minimum value for EditBox
  • editBox.maxValue - number - maximum value for EditBox

Methods

Check EditBox methods, additionally NumericBox has:

  • SetMinValue(value) - Sets minimum value for EditBox and validates input
  • SetMaxValue(value) - Sets maximum value for EditBox and validates input

Example:

local editBox = StdUi:NumericBox(window, 100, 20, 50);

Money Box

StdUi:MoneyBox(parent, width, height, text, validator)

Description:

Very similar to the above EditBox but it accepts money input such as:

  • 5g
  • 55g 24s 40c
  • 55g24s40c
  • 55g 40c
  • 55g9990c - yes it does accept it and convert it to proper value

So as you can see it is very flexible. Note: It does return number of coppers, not the actual money string.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • text string (Optional) - String that should be as initial value
  • validator function (Optional) - Function that is fired each time value has been confirmed either by clicking OK button or pressing Enter. It has the ability to mark edit box value as Invalid. If you do not provide validator, default one will be used that accepts a properly formatted money inputs.

Returns:

Named children:

Check above EditBox for named children, additionaly it has 2 more:

  • editBox.minValue - number - minimum value for EditBox
  • editBox.maxValue - number - maximum value for EditBox

Methods

Check EditBox methods. No additional methods are provided.

Example:

local editBox = StdUi:MoneyBox(window, 100, 20, '55g 6s 999c');

Multi Line Box

StdUi:MultiLineBox(parent, width, height, text)

Description:

Multi line box is a special kind of widget which is a combination of ScrollFrame + EditBox. As the name suggests, it supports multiple lines of text.

Note: Please keep in mind anchoring editBox variable will never work. You should anchor the panel.

Arguments:

  • parent Frame - object that should be a parent of EditBox
  • width number (Optional) - Width of the EditBox
  • height number (Optional) - Height of the EditBox
  • text string (Optional) - String that should be as initial value

Returns:

Named children:

  • editBox.scrollFrame - ScrollFrame - ScrollFrame that has EditBox in it
  • editBox.panel - Frame - Frame that is a parent for whole EditBox and ScrollFrame. Use it to make your anchors.

From a scrollFrame you can actually get to its ScrollBar if needed.

Example:

local panel, editBox = StdUi:MultiLineBox(window, 200, 106, 'test');

Demo

Click to play video

local StdUi = LibStub('StdUi');


local window = StdUi:Window(UIParent, 'Title', 400, 400);
window:SetPoint('CENTER');

local eb1 = StdUi:SimpleEditBox(window, 150, 24, 'Initial Text');
StdUi:GlueTop(eb1, window, 10, -40, 'LEFT');

local eb2 = StdUi:SearchEditBox(window, 150, 24, 'Search');
StdUi:GlueBelow(eb2, eb1, 0, -20, 'LEFT');

local eb3 = StdUi:EditBox(window, 150, 24, 'Initial Text');
StdUi:GlueBelow(eb3, eb2, 0, -20, 'LEFT');

local function customValidator(self)
	local text = self:GetText();
	if text == 'abc' then
		StdUi:MarkAsValid(self, false); -- red edge
		return false;
	else
		self.value = text;
		StdUi:MarkAsValid(self, true);
		return true;
	end

end

local eb4 = StdUi:EditBox(window, 150, 24, 'Initial Text', customValidator);
StdUi:GlueBelow(eb4, eb3, 0, -20, 'LEFT');

local eb5 = StdUi:NumericBox(window, 150, 24, 99);
eb5:SetMaxValue(100);
eb5:SetMinValue(20);
StdUi:GlueBelow(eb5, eb4, 0, -20, 'LEFT');

local eb6 = StdUi:MoneyBox(window, 150, 24, '55g 6s 999c');
eb6:Validate();
StdUi:GlueBelow(eb6, eb5, 0, -20, 'LEFT');


local mb = StdUi:MultiLineBox(window, 200, 106, 'test');
StdUi:GlueTop(mb.panel, window, -10, -40, 'RIGHT');

Home

  1. Home/Usage/Installation
  2. Component Stability

Widgets

  1. Basic Widgets
  2. Text Widgets
  3. Buttons
  4. EditBox
  5. Dropdown
  6. Checkbox
  7. Progress Bar
  8. Text Table
  9. Tooltip
  10. Window
  11. Scroll Frames
  12. Scroll Table
    1. Basic Methods
    2. Sorting Methods
    3. Drawing Methods
    4. Highlight Methods
    5. Selection Methods
  13. Slider and ScrollBar
  14. Tab Container
  15. Color Picker

Utils

  1. Methods and Validators
  2. Positioning
  3. List and Grid
  4. Automatic Layout

Misc

  1. Custom Widgets
  2. Frame Methods
  3. Texture Methods
  4. Frame Script Handlers
Clone this wiki locally