WoW:Creating tabbed windows - Revision history

Move page script: Move page script moved page Creating tabbed windows to WoW:Creating tabbed windows without leaving a redirect

2023-08-15T04:47:57Z

Move page script moved page Creating tabbed windows to Creating tabbed windows without leaving a redirect

← Older revision	Revision as of 04:47, 15 August 2023
(No difference)

WoWWiki>Omegahacker: Changed $parentTab1 relative y from -8 to -12 so border graphics line up

2009-04-29T01:15:55Z

Changed $parentTab1 relative y from -8 to -12 so border graphics line up

← Older revision		Revision as of 01:15, 29 April 2009
Line 127:		Line 127:
	<Anchor point="CENTER" relativePoint="BOTTOMLEFT">		<Anchor point="CENTER" relativePoint="BOTTOMLEFT">
	<Offset>		<Offset>
	<AbsDimension x="60" y="-8"/>		<AbsDimension x="60" y="-12"/>
	</Offset>		</Offset>
	</Anchor>		</Anchor>

WoWWiki>Ach2007: /* Tabs in XML */

2008-10-30T14:18:41Z

Tabs in XML

← Older revision		Revision as of 14:18, 30 October 2008
Line 33:		Line 33:
	</Size>		</Size>
	<Anchors>		<Anchors>
	<Anchor point="CENTER"/>		<Anchor point="CENTER">
	<Offset><AbsDimension x="-200" y="200"/></Offset>		<Offset><AbsDimension x="-200" y="200"/></Offset>
			</Anchor>
	</Anchors>		</Anchors>
	<Backdrop		<Backdrop

WoWWiki>Curtwulf: Updated date code tested

2008-04-23T23:03:57Z

Updated date code tested

← Older revision		Revision as of 23:03, 23 April 2008
Line 173:		Line 173:
	</Frame>		</Frame>

	This is a completely functional, self contained Tab Frame which you should be able to plop into any WoW XML UI file and run (as of ~~Feb~~. 17, ~~2007~~). There are a lot of redundancies here. Things like the tab button properties should be templated and the logic controlling the selection of tabs is best handled by a custom function.		This is a completely functional, self contained Tab Frame which you should be able to plop into any WoW XML UI file and run (as of Apr. 23, 2008). There are a lot of redundancies here. Things like the tab button properties should be templated and the logic controlling the selection of tabs is best handled by a custom function.

	Things like the tab button properties should be templated if you're going to have lots of tabs. As mentioned before, from an UI's point of view, tabs are simply some buttons at the bottom of your frame. You should define a template like this in XML, and then implement a smart click handler in Lua:		Things like the tab button properties should be templated if you're going to have lots of tabs. As mentioned before, from an UI's point of view, tabs are simply some buttons at the bottom of your frame. You should define a template like this in XML, and then implement a smart click handler in Lua:

WoWWiki>Zurr: sp

2007-08-18T09:12:02Z

← Older revision		Revision as of 09:12, 18 August 2007
Line 7:		Line 7:
	You probably know these from the Character or Friendsframe windows in WoW. With Tabs you have the ability to store multiple windows inside of a single one. Tabs are a very important feature in UI design, since their introduction in early [[Mac\|MacOS]] they became kind of a pseudo-standard in recent graphical applications, such as Mozilla Firefox.		You probably know these from the Character or Friendsframe windows in WoW. With Tabs you have the ability to store multiple windows inside of a single one. Tabs are a very important feature in UI design, since their introduction in early [[Mac\|MacOS]] they became kind of a pseudo-standard in recent graphical applications, such as Mozilla Firefox.

	Unfortunately the amount of code ~~neccessary~~ to generate even a simple tabbing system in WoW is quite large. However, the guys at Blizzard implemented an easy-to-use library that makes the task of handling tabs a whole lot more comfortable.		Unfortunately the amount of code necessary to generate even a simple tabbing system in WoW is quite large. However, the guys at Blizzard implemented an easy-to-use library that makes the task of handling tabs a whole lot more comfortable.

	= The Theory behind it =		= The Theory behind it =
Line 259:		Line 259:
	You know what that means, don't you? Go ahead and fire up WoW right now (you should outcomment the myButtonHandler() call in the template to avoid errors). You will notice that your tabs are already working just fine! Beside one little thing: They don't do anything yet!		You know what that means, don't you? Go ahead and fire up WoW right now (you should outcomment the myButtonHandler() call in the template to avoid errors). You will notice that your tabs are already working just fine! Beside one little thing: They don't do anything yet!

	In your Lua button handler (the one I left for an exercise), you probably already know what to do: Extract the number of the selected tab from the button's name which was passed as a parameter ('''this:GetID()'''), then show the UI elements of the new tab and hide all of the other UI elements. Shouldn't be any problem now, since all of the hard work is already done by the library. So rather than boring you with the details of the implementation, i'll close with some tips on efficient techniques for writing button handlers:		In your Lua button handler (the one I left for an exercise), you probably already know what to do: Extract the number of the selected tab from the button's name which was passed as a parameter ('''this:GetID()'''), then show the UI elements of the new tab and hide all of the other UI elements. Shouldn't be any problem now, since all of the hard work is already done by the library. So rather than boring you with the details of the implementation, I'll close with some tips on efficient techniques for writing button handlers:
	* Always wrap up your tabs inside of ~~seperate~~ Frame-tags. Thus you'll only have to hide that very frame once, instead of iterating through every single UI element and hiding it by hand.		* Always wrap up your tabs inside of separate Frame-tags. Thus you'll only have to hide that very frame once, instead of iterating through every single UI element and hiding it by hand.
	* Use a string table that contains the names of these frames. Thus you can iterate through the table with a single for loop, instead of writing hundreds of lines. Your code becomes a whole lot more clear, making maintenance so much easier		* Use a string table that contains the names of these frames. Thus you can iterate through the table with a single for loop, instead of writing hundreds of lines. Your code becomes a whole lot more clear, making maintenance so much easier
	* Notice that you can also change the background textures when switching tabs. This is done a lot in WoW and is extremely useful when you have very different UIs in the various tabs		* Notice that you can also change the background textures when switching tabs. This is done a lot in WoW and is extremely useful when you have very different UIs in the various tabs

WoWWiki>FRRjak: /* Getting our hands dirty */ Included another external example of tab implementation. (CT_ExpenseHistory).

2007-02-18T00:43:15Z

Getting our hands dirty: Included another external example of tab implementation. (CT_ExpenseHistory).

Show changes

WoWWiki>Mikk: Sort key fixup.

2006-06-09T20:34:45Z

Sort key fixup.

← Older revision		Revision as of 20:34, 9 June 2006
Line 76:		Line 76:
	I hope you enjoyed this tutorial and did not despair over my dessolute style of writing. I'd love to read some feedback in the discussions section and hope that many of you will benefit from the great capabilities that Tabs provide.		I hope you enjoyed this tutorial and did not despair over my dessolute style of writing. I'd love to read some feedback in the discussions section and hope that many of you will benefit from the great capabilities that Tabs provide.

	[[Category:HOWTOs]]		[[Category:HOWTOs\|Create Tabbed Windows]]

WoWWiki>DerGhulbus: This is what I intended to say. Thanks, Skisoccer!

2006-06-09T14:30:11Z

This is what I intended to say. Thanks, Skisoccer!

← Older revision		Revision as of 14:30, 9 June 2006
Line 53:		Line 53:

	Now, what have we just done? Let's take a look at the UIPanelTemplates.LUA:		Now, what have we just done? Let's take a look at the UIPanelTemplates.LUA:
	* SetNumTabs() is basically adding an attribute to our frame ~~called myFrame~~ containing the value of n		* SetNumTabs() is basically adding an attribute numTabs to our frame containing the value of n
	* In the next line we specify another attribute by ourselve, selectedTab		* In the next line we specify another attribute by ourselve, selectedTab
	* The UpdateTabs is a bit more sophisticated. Basically, it takes care of setting up the buttons like we've already seen in other tabbed windows like the characterframe. This function already uses the prior defined numTabs and selectedTab attributes.		* The UpdateTabs is a bit more sophisticated. Basically, it takes care of setting up the buttons like we've already seen in other tabbed windows like the characterframe. This function already uses the prior defined numTabs and selectedTab attributes.

WoWWiki>Skisoccer13: /* Tabs in LUA */

2006-06-07T18:17:07Z

Tabs in LUA

← Older revision		Revision as of 18:17, 7 June 2006
Line 53:		Line 53:

	Now, what have we just done? Let's take a look at the UIPanelTemplates.LUA:		Now, what have we just done? Let's take a look at the UIPanelTemplates.LUA:
	* SetNumTabs() is basically adding an attribute to our frame called ~~numTabs~~ containing the value of n		* SetNumTabs() is basically adding an attribute to our frame called myFrame containing the value of n
	* In the next line we specify another attribute by ourselve, selectedTab		* In the next line we specify another attribute by ourselve, selectedTab
	* The UpdateTabs is a bit more sophisticated. Basically, it takes care of setting up the buttons like we've already seen in other tabbed windows like the characterframe. This function already uses the prior defined numTabs and selectedTab attributes.		* The UpdateTabs is a bit more sophisticated. Basically, it takes care of setting up the buttons like we've already seen in other tabbed windows like the characterframe. This function already uses the prior defined numTabs and selectedTab attributes.

WoWWiki>Flickering: /* Conclusion */

2006-04-03T14:30:16Z

Conclusion

← Older revision		Revision as of 14:30, 3 April 2006
Line 76:		Line 76:
	I hope you enjoyed this tutorial and did not despair over my dessolute style of writing. I'd love to read some feedback in the discussions section and hope that many of you will benefit from the great capabilities that Tabs provide.		I hope you enjoyed this tutorial and did not despair over my dessolute style of writing. I'd love to read some feedback in the discussions section and hope that many of you will benefit from the great capabilities that Tabs provide.

	[[Category:~~Interface Customization~~]]		[[Category:HOWTOs]]