NkGenie - Tabpane

From Riftui Wiki

Jump to: navigation, search

This widget is used to create a tabbed pane on the screen. The same widget can be used in quite some different ways by supplying the correct parameters:

This is a complete custom widget individually supplied by nkGenie.

UI.CreateFrame('nkExtTabPane', name, parent, {})


Supported parameters

Due to the nature of the widget you cannot change it as dynamically as other widgets after creation. The following parameters are only supported for UI:CreateFrame(). The method :update() is not supported and will not do anything.

Parameter Description
width The width of the slider element
height The height of the tabe pane
activePane Optional parameter defining which pane is active by default. If not supplied the first tab will always be made active on widget creation
fontsize Optional parameter specifying the fontsize used for the tab labels. If not supplied the fontsize will be set to 14
orientation Optional parameter defining the orientation of the tabs. Set this to 'vertical' if the tabs are supposed to be aligned vertical to the left of the body pane. Default is horizontal above body pane.
headerWidth Defines the width of a header tab. In case of vertical tabs this is a required property. For horizontal tab layout this parameter is optional and will be set to 150 pixel if not supplied.
headerHeight Optional parameter specifying the height of a tab. If not supplied it will be set to fontsize * 2 + 2
headerTexture This parameter is optional and allows for supplying a background texture for the area of the tabs. You'll need to supply headerTextureHeight and headerTextureWidth as well.
headerTextureHeight Parameter needed if a header texture is being used. This defines the height of the header texture.
headerTextureWidth Parameter needed if a header texture is being used. This defines the width of the header texture.
bodyTexture This parameter is optional, but has a big impact if used. If this parameter is supplied the widget will use textures instead of frame widgets. You'll have to supply the parameter paneTextureAddon. The parameter is the path to the texture file to be used for the body pane.
paneTextureAddon This parameter is requiered if bodyTexture is supplied. It defines the parent addon which is need to find the texture files.
headerOffsetX You can offset the tabs by horizontally by a number of pixel by this parameter. Only really usefull for horizontal layouts.
headerOffsetY You can offset the tabs by vertically by a number of pixel by this parameter. Only really usefull for vertical layouts.
panes The actual content panes. See below.
paneTextureInactive The texture used for indicating inactive tabs
paneTextureActive The texture used for indicating the active tab
anchors The position of the mask widget. See How to position widgets
color Specifies the color of the widget. See below.

Supported Methods


This method retrieves the body of the tab pane. In case of a non texture tab pane you can use the parameter to specifiy if you want the body (true) or border (false) frame widget.

Other supported methods

Parameter Description
getActivePane() returns the active pane. This is equal to accessing the widget property nkExtTabPane.activePane
setActivePane(value) This method changes the active pane. The value is equal to the pane number. If it cannot be matched to a pane the active pane will not be changed.

The content pane definition

The parameter 'panes' defines the actual content of the tab pane and has a lot of influence on the how the tab pane is build. The parameter is supplied as a LUA table using the following format

panes = { { content = frame widget, label = 'text', initFunc = function () end, switchFunc = function () end }, ... }

The actual content of a tab is supplied to the widget in form of a frame widget. This frame is automatically sized to the dimensions of the tabpane body.

The initFunc elements

One of the elements of the panes table definition is initFunc. This parameter is required and called if a tab is clicked by the user for the first time. For the default tab of the tab pane this function will be called at widget creation time. The reason for this function is that it allows to create the tab content only if needed. This saves a lot of addon CPU usage as tab content of tabs which are never opened by the user will not use any processing power. This approach also significantely reduces the loading time of a tab pane widget.

You'll want to give the content frame as a parameter to the function being called. Within the function you'll than build the actual pane details as children to the content frame.

The switchFunc elements

This is an optional parameter of the pane definition. If supplied the tabpane widget will call this function if it's focus is changed to the corresponding tab. This allows for dynamic tab content updates as soon as the tab is displayed. In difference to initFunc this function is called every time the user switches to the tab.

Example of a tabpane definition

local pane1 = UI.CreateFrame ('nkExtFrame', 'pane1', UIParent, { visible = false})	
local pane2 = UI.CreateFrame ('nkExtFrame', 'pane2', UIParent, { visible = false})
local tabPane = UI.CreateFrame ('nkExtTabPane', 'myTabPane', UIParent, 
	{ fontsize = 14, width = 775, height = 600,  color = { label= "FFFFFF" }, anchors = {{from = "TOPLEFT", object = UIParent, to = "TOPLEFT", x = 10, y = 10}}, 
	  orientation = 'horizontal', headerWidth = 113, headerHeight = 28, headerOffsetX = 10, headerOffSetY = 0, bodyTexture = 'gfx/TabPaneBG.png',
	  paneTextureAddon = 'myAddon', paneTextureInactive = 'gfx/tabPaneHorizInActive.png', paneTextureActive = 'gfx/tabPaneHorizActive.png',							
	  panes = {{content = pane1, label = 'label 1', initFunc = function () self:setupPane1(pane1) end},
		   {content = pane2, label = 'label 2', initFunc = function () self:SetupPane2(pane2) end}											

Setting the color of the tabpane

The number of parameters of the body property will differ if you use textures or standard frame elements to build the visual parts of the tabpane. In both cases the color property has to be supplied in form of a LUA table.

color property for texture tabpanes

The color property for texture tabpanes is very simple: color = { label = 'hex code' }.

Parameter Description
label The color used for the tab labels

color property for non texture tabpanes

The color property for non texture tabpanes is as following: color = { body = 'hex code', border = 'hex code', inactive = 'hex code', label = 'hex code' }.

Parameter Description
body Main color of the tab pane. This is used as filling color for the tab pane body frame as well for the tabs
border Border color of the tab pane. This is used as border color for tab pane body frame as well for the tabs
inactive Tabs which are inactive will get this filling color
label The color used for the tab labels
Personal tools