Quantcast Creating "Tabs" in Custom UI - ESOUI
Thread Tools Display Modes
07/20/19, 03:40 PM   #1
static_recharge
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 19
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
07/20/19, 03:51 PM   #2
Baertram
 
Baertram's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 2,288
Did you try to change the hidden attribute in the 2 xml designed tabs to check if both would show properly by default?

I never designed my own tabs or menus but used LibMainMenu-2 to creat a ESO LIKE menu at the right side where you can add several buttons to change the tabs. WishList is using this e.g.
  Reply With Quote
07/20/19, 04:30 PM   #3
static_recharge
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 19
Setting both toplevelcontrols to hidden="false" provides both on top of each other. So they can both exist at the same time.
  Reply With Quote
07/21/19, 04:39 AM   #4
Baertram
 
Baertram's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 2,288
Try to reanchor the tab tlc controls using :Anchor(...) in your toggle function.
In the past this fixed some issues where controls were not shown properly for me. Though the Tlc should be anchored by default and :SetHidden(true/false) of be enough... Got no other ideas.
  Reply With Quote

ESOUI » Developer Discussions » Lua/XML Help » Creating "Tabs" in Custom UI

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off