Skip to content

Checkbox

Pawel edited this page Jun 24, 2018 · 10 revisions

Component stability: Beta

There are 2 components here:

And 3 methods (for radio buttons):

Checkbox

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

Description:

Simple checkbox implementation that is styled to fit StdUi. Keep in mind that checkboxes are complex widgets. Meaning they are recreating functionality by having few children inside themselves. So it is not just one frame

Arguments:

  • parent Frame - object that should be a parent
  • text string (Optional) - String that will be displayed in the right of checkbox
  • width number (Optional, default: auto) - Width of the checkbox
  • height number (Optional, default: 20) - Height of the checkbox

Methods:

Checkbox has all methods that normal Button has plus:

  • GetChecked() - Returns the state of checkbox (true for checked and false for unchecked)
  • SetChecked(flag) - Sets the state of checkbox
  • SetValue(value) - Sets the custom value of checkbox
  • GetValue() - If checkbox is checked, this function will return the value you have set. If it is unchecked, it will return nil.
  • AutoWidth() - Special method that will resize your checkbox to make sure text will be one line. It is automatically executed if you do not provide width in constructor

Named children:

  • checkbox.text - FontString - font string that is used as checkbox text
  • checkbox.target - Frame - frame that is used as tick
  • checkbox.value - any - custom value that has been set using SetValue(). You can use this if you wish to bypass GetValue() checking state of checkbox.
  • checkbox.isChecked - bool - variable that holds checkbox state (checked - true, unchecked - false)
  • checkbox.checkedTexture - Texture - Texture that is used as normal tick
  • checkbox.disabledCheckedTexture - Texture - Texture that is used as disabled tick

Returns:

Radio

StdUi:Radio(parent, text, groupName, width, height)

Description:

Radio is essentially exactly the same as checkbox. There are only 2 differences:

  1. Textures are different
  2. It has additional constructor parameter: groupName (optional) which if provided will automatically add this radio to specific radio group. More about radio Groups below.

Radio Group

StdUi:RadioGroup(groupName)

Description:

Creates or returns (if it already exists) a radio group. This basically creates a semi-global table that is a list of radio buttons which should be mutually exclusive. Meaning, click on one radio button will automatically deselect other radios in this group.

Technically, checkboxes can also be added to radio group which will make them working like radio buttons.

Returns:

Adding to Radio Group

StdUi:AddToRadioGroup(groupName, frame)

Description:

Adds a Frame to radio group. Hooks frame OnClick script that deselects other frames in this group.
There are 2 requirements for frame:

  • It must implement 3 methods: GetChecked(), SetChecked() and GetValue()
  • Must have a Script OnClick - So it must be a descendant of Blizzard Button widget

Those conditions are automatically met for Checkbox and Radio widgets. But is important if you wish to create your own checkbox-alike widget.

Value of Radio Group

StdUi:GetRadioGroupValue(groupName)

Description:

Iterates over all frames in radio group. If it finds a selected one, returns it's value. If there is none selected or group is empty it will return nil

Demo:

Click to play video: Checkbox Demo

local StdUi = LibStub('StdUi');


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

local check = StdUi:Checkbox(window, 'Test Checkbox');
StdUi:GlueTop(check, window, 10, -40, 'LEFT');

local radio1 = StdUi:Radio(window, 'Test Radio 1', 'tr1');
radio1:SetValue('one');
StdUi:GlueBelow(radio1, check, 0, -10, 'LEFT');

local radio2 = StdUi:Radio(window, 'Test Radio 2', 'tr1');
radio2:SetValue('two');
StdUi:GlueBelow(radio2, radio1, 0, -10, 'LEFT');

local radio3 = StdUi:Radio(window, 'Test Radio 3', 'tr1');
radio3:SetValue('three');
StdUi:GlueBelow(radio3, radio2, 0, -10, 'LEFT');



local checkD = StdUi:Checkbox(window, 'Test Checkbox');
StdUi:GlueTop(checkD, window, -10, -40, 'RIGHT');
checkD:Disable();

local radioD = StdUi:Radio(window, 'Test Radio');
StdUi:GlueBelow(radioD, checkD, 0, -10, 'LEFT');
radioD:Disable();

local b = StdUi:Button(window, checkD:GetWidth(), 20, 'Toggle Disabled');
StdUi:GlueBelow(b, radioD, 0, -10, 'LEFT');
b:SetScript('OnClick', function()
	checkD:SetChecked(not checkD:GetChecked());
	radioD:SetChecked(not radioD:GetChecked());
end);

local b2 = StdUi:Button(window, checkD:GetWidth(), 20, 'Print Radio Value');
StdUi:GlueBelow(b2, b, 0, -10, 'LEFT');
b2:SetScript('OnClick', function()
	print(StdUi:GetRadioGroupValue('tr1'));
end);