List And Grid

Component stability: Beta

StdUi provides 2 methods:

• ObjectList
• ObjectGrid

and a concept of create update:

• Create And Update Concept

Object List

StdUi:ObjectList(parent, itemsTable, create, update, data, padding, oX, oY, limitFn);

Description

This function is responsible for creating and updating vertical list of objects of any type. It is widely used inside StdUi widgets, but you can used it yourself to draw a list of objects.

Arguments

Argument	Type	Optional	Description
parent	Frame	-	Frame on which we want to draw
itemsTable	table	Y	Array of Frame, this will make sure we are reusing frames, this argument will get populated with created widgets.
create(parent, value, i, key)	function or string	-	Function responsive for creating objects or widget name
update(parent, itemFrame, value, i, key)	function	-	Function responsible for updating objects
data	table	-	Array of data, which object list should represent, technically associative arrays are supported but not advised.
padding	number	Default: 0	Padding between items
oX	number	Default: 1	Initial X offset for first element
oY	number	Default: -1	Initial Y offset for first element
limitFn(i, totalHeight, itemFrameHeight)	function	Y	Limiter function that will stop creating objects if any condition is met (for example totalHeight exceeds certain number)

How create and update functions work, refer to: Create And Update Concept

Named children

ObjectList does not create any named children instead, all objects are populated into itemsTable.

Returns

• itemsTable - table - if you don't provide itemsTable argument, not advised as widgets will not be reusable
• totalHeight - Number - total height of all widgets

Demo

local StdUi = LibStub('StdUi');

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

local list = {};
window.items = {};

local function generateData(i)
	list = {};
	for n = 1, i do
		list[n] = {text = tostring(n), value = 'obj' .. n};
	end
end

generateData(3);

local function update(parent, btn, data)
	btn.data = data;
	btn:SetText(data.text);
	StdUi:SetObjSize(btn, 60, 20);

	if not btn:HasScript('OnClick') then
		btn:SetScript('OnClick', function(self)
			print(self.data.value);
		end);
	end

	return btn;
end

local pad = 0;
local function updateList()
	StdUi:ObjectList(window, window.items, 'Button', update, list, pad, 80, -30);
end
updateList();


local slider = StdUi:Slider(window, 10, 100, 3, true, 1, 10);
slider:SetScript('OnValueChanged', function(self)
	generateData(self:GetValue());
	updateList();
end);
StdUi:GlueLeft(slider, window, 10, 0, true);


local slider2 = StdUi:Slider(window, 10, 100, 0, true, 0, 10);
slider2:SetScript('OnValueChanged', function(self)
	pad = self:GetValue();
	updateList();
end);
StdUi:GlueRight(slider2, slider, 10, 0);

Object Grid

StdUi:ObjectGrid(parent, itemsMatrix, create, update, data, paddingX, paddingY, oX, oY)

Description

This function is responsible for creating and updating matrix of objects of any type. You can used it yourself to draw a matrix of objects.

Arguments

Argument	Type	Optional	Description
parent	Frame	-	Frame on which we want to draw
itemsMatrix	table	Y	Matrix of Frame, this will make sure we are reusing frames, this argument will get populated with created widgets.
create(parent, data, rowI, colI)	function or string	-	Function responsive for creating objects or widget name
update(parent, itemFrame, data, rowI, colI)	function	-	Function responsible for updating objects
data	table	-	Matrix of data, which object list should represent, associative arrays are NOT supported.
paddingX	number	Default: 0	Horizontal padding between items
paddingY	number	Default: 0	Vertical padding between items
oX	number	Default: 1	Initial X offset for first element
oY	number	Default: -1	Initial Y offset for first element

Returns

Does not return anything

Demo

local StdUi = LibStub('StdUi');

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

local list = {};
window.items = {};

local function generateData(x, y)
	list = {};
	for i = 1, y do
		list[i] = {}
		for j = 1, x do
			list[i][j] = { text = i .. ',' .. j, value = 'obj' .. i .. ',' .. j };
		end
	end
end

generateData(3, 3);

local function update(_, b, d)
	b:SetText(d.text);
	StdUi:SetObjSize(b, 60, 20);
end

local pad = 0;
local function updateList()
	StdUi:ObjectGrid(window, window.items, 'Checkbox', update, list, pad, pad, 80, -30);
end
updateList();

local slider = StdUi:Slider(window, 10, 100, 3, true, 1, 10);
StdUi:GlueLeft(slider, window, 10, 0, true);

local slider2 = StdUi:Slider(window, 10, 100, 3, true, 1, 10);
StdUi:GlueRight(slider2, slider, 10, 0);

local padSlider = StdUi:Slider(window, 10, 100, 0, true, 0, 5);
StdUi:GlueRight(padSlider, slider2, 10, 0);

slider:SetScript('OnValueChanged', function(self)
	generateData(slider:GetValue(), slider2:GetValue());
	updateList();
end);

slider2:SetScript('OnValueChanged', function(self)
	generateData(slider:GetValue(), slider2:GetValue());
	updateList();
end);

padSlider:SetScript('OnValueChanged', function(self)
	pad = padSlider:GetValue();
	updateList();
end);

Create And Update Concept

You may find reference in some widgets to create and update functions. Reason is pretty simple: In WoW you cannot remove frames so making them on the fly is not advised.

Create and Update concept is about creating frames if we need more of them BUT only updating if number of items did not change. If current data is lower than before, we simply hide not needed frames. This concept also incorporates data binding, meaning we will create as many frames as there is data for them.

For example, ObjectList function iterates over data and fires create function if:

1. itemsTable does not already have data on that position (index based)
2. data has changed and has more elements than before

update function gets called every time for every element we have in data array.

Note: It is safe to repeatedly call it.

Both create and update function has similar parameters passed to them, with the exception that create does not receive itemFrame

ObjectList

Argument	Type	Description
parent	Frame	parent frame that was passed in ObjectList
itemFrame	Frame	Widget item instance, not present in create function
value	any	Data from the table of each index
i	number	Index of data

ObjectGrid

Argument	Type	Description
parent	Frame	parent frame that was passed in ObjectGrid
itemFrame	Frame	Widget item instance, not present in create function
value	any	Data from the table of each cell
rowI	number	Row Index of data
colI	number	Column Index of data