View Single Post
07/20/19, 03:40 PM   #1
static_recharge
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 35
Creating "Tabs" in Custom UI

Hello fellow devs!

I'm fairly new to the XML scene as both of my addons either used LibAddonMenu2.0 or had a very basic UI element to them. Now I'm trying to spruce things up with a complete redesign and give my addon it's own window. More than likely I'm just missing something obvious here but it's completely driving me insane at this point so I'm reaching out to you helpful people. I would like to create a tab or set of tabs within my UI so that the window isn't too large and it breaks it up into logical sections. Right now I'm just testing the waters and have made a static UI using XML that has a header and what not, but also has two buttons that when pressed run my toggle tab function. Also, as children to the main toplevelcontrol I have created 2 more toplevelcontrols that when the buttons are pressed I would like one of them to be hidden and one visible; when the other is pressed, the opposite toplevelcontrols will be visible.

Example XML code from one button (the other is identical except for name, placement, and text):
Code:
<Button name="$(parent)PermissionsTabButton" font="ZoFontWinH3" text="Permissions" inherits="ZO_ButtonBehaviorClickSound">
	<Dimensions x="200" y="45" />
	<Anchor point="TOPRIGHT" relativeTo="$(parent)TopDivider" relativePoint="BOTTOMRIGHT" offsetX="-110" offsetY="5" />
	<Textures normal="esoui/art/buttons/button_xlarge_mouseup.dds"
		pressed="esoui/art/buttons/button_xlarge_mousedown.dds"
		mouseOver="esoui/art/buttons/button_xlarge_mouseover.dds" />
	<OnClicked>
		GoHomeSettingsTabToggle()
	</OnClicked>
</Button>
Example XML code for one toplevelcontrol that I'm using as a tab. The other toplevelcontrol is set to hidden by default:
Code:
<TopLevelControl name="$(parent)SettingsTabPanel" hidden="false">
	<Dimensions x="500" y="425" />
	<Anchor point="BOTTOM" relativeTo="$(parent)" relativePoint="BOTTOM" />

	<Controls>

		<Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

		<Label name="$(parent)Test" font="ZoFontWinH3" text="test">
			<Anchor point="TOP" relativeTo="$(parent)" relativePoint="TOP" offsetY="-5" />
		</Label>

	</Controls>

</TopLevelControl>
GoHomeSettingsTabToggle code:
Code:
function GoHomeSettingsTabToggle()
	GoHomeSettingsSettingsTabPanel:SetHidden(true)
	GoHomeSettingsPermissionsTabPanel:SetHidden(false)
end
I realize that the above function doesn't toggle as of yet, but I am having so many issues I removed all logic from it just to see if I could actually change the hidden / visible states of the toplevelcontrols. When either button is pressed the currently visible control should be hidden and the hidden one revealed. However nothing happens when I press the buttons. I even put a simple d("Test") line in the toggle function to make sure it was being called properly and that properly puts "Test" in chat, but nothing else happens.

Any advice is greatly appreciated. If i'm going about this the wrong way and there's a better way to make tabs then please let me know. Thanks in advance!
  Reply With Quote