Skip to content

Layout Builder

pwilkowski edited this page Oct 13, 2019 · 3 revisions

Layout builder depends on EasyLayout. It basically lets you create UI from configuration. Similar to AceConfig however not just limited to addon configuration.

Layout builder can be infinitely recursive, each widget can be container which can have yet another layout.

BuildWindow

StdUi:BuildWindow(frame, info)

Arguments

  • frame - Frame that will act as container
  • info - layout info

Layout Info

Layout info is a simple object composed like this:

{
	layoutConfig = { padding = { top = 30 } }, -- layout config for easy layout
	rows         = {
		{ -- first row, equivalent of EasyLayoutRow
			widget = {
				type     = 'tab', -- widget type, look below for widget types
				-- other widget info
				column = 12, -- column capacity widget will take, 12 is default (whole row)
				order  = 1, -- widgets are rendered by order, if you do not set this, it will be randomly placed
			}
		},
	},
};

Widget Types

Builder supports really big amount of widgets you can use including custom function.

  • checkbox
  • editBox
  • multiLineBox
  • dropdown
  • autocomplete
  • slider
  • color
  • button
  • header
  • label
  • texture
  • panel - container
  • scroll
  • fauxScroll
  • tab
  • custom - custom function

Common widget properties

Every widget can have those properties:

  • key - string - By default, if you append database to LayoutInfo, it will set widget value depending on key of widget, use this property to override this behavior, supports nested variables like 'some.db.value'
  • type - string - Widget type
  • column - number - Widget column width
  • order - number - Widgets are sorted in rows using this property
  • init - function(widget) - Function to execute at the beginning of initialization
  • label - string - If you want to have label above widget, use this
  • initialValue - any - set initial value to widget
  • onChange - function(...) - function that will be executed when value of widget changes
  • onValueChanged - function(...) - function that will be executed when value of widget changes this will unbind widget from database
  • children - LayoutConfig - for container widgets, pass yet another layoutConfig
  • fullSize - bolean - if set to true, widget will take WHOLE parent space. Use this only for a single widget
  • fullHeight - bolean - if set to true, widget will take remaining vertical space

Widget specific properties

Dropdown

  • options - table - array of options like { value = 1, text = 'Test' }
  • multi - boolean - if dropdown should be multiselect
  • assoc - boolean - if dropdown should be in associative array mode

Autocomplete

  • validator - function - Validator function for autocomplete
  • transformer - function - Transformer function for autocomplete
  • buttonCreate - function - custom function to create autocomplete options
  • buttonUpdate - function - custom function to update autocomplete options
  • items - table - array of autocomplete options like { value = 1, text = 'Test' }

Slider

  • precision - number - Slider precision

Color

  • color - table - Initial color like { r = 1, g = 1, b = 1, a = 1 }

Button

  • onClick - function(button) - OnClick script handler

Texture

  • width - number - Width of texture
  • height - number - Height of texture
  • texture - string - Texture path

Scroll and FauxScroll

  • scrollChild - Frame|function(scrollWidget) - Either initialization function or ready scrollChild frame

FauxScroll

  • displayCount - number - Amount of items to display
  • lineHeight - number - Single item height

Tab

  • tabs - table - Tabs definition, refer to Tab widget
  • vertical - boolean - Set this to true to have vertical tab widget
  • buttonWidth - number - Toggle button width
  • buttonHeight - number - Toggle button height

Custom

  • createFunction - function(frame, row, info, dataKey, db) - Function that allows you to create custom component
    • frame - Frame - parent frame
    • row - EasyLayoutRow - normally, you don't need to make use of that
    • info - table - widget definition, and all the data you passed alongside createFunction
    • dataKey - string - data key to access within database, so either widget key or key property
    • db - table - database object to write values into