m
Move page script moved page Creating tabbed windows to WoW:Creating tabbed windows without leaving a redirect
m (→Getting our hands dirty: Included another external example of tab implementation. (CT_ExpenseHistory).) |
m (Move page script moved page Creating tabbed windows to WoW:Creating tabbed windows without leaving a redirect) |
||
| (4 intermediate revisions by 4 users not shown) | |||
| 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 | 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 33: | Line 33: | ||
</Size> | </Size> | ||
<Anchors> | <Anchors> | ||
<Anchor point="CENTER" | <Anchor point="CENTER"> | ||
<Offset><AbsDimension x="-200" y="200"/></Offset> | |||
</Anchor> | |||
</Anchors> | </Anchors> | ||
<Backdrop | <Backdrop | ||
| Line 126: | Line 127: | ||
<Anchor point="CENTER" relativePoint="BOTTOMLEFT"> | <Anchor point="CENTER" relativePoint="BOTTOMLEFT"> | ||
<Offset> | <Offset> | ||
<AbsDimension x="60" y="- | <AbsDimension x="60" y="-12"/> | ||
</Offset> | </Offset> | ||
</Anchor> | </Anchor> | ||
| Line 173: | Line 174: | ||
</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 | 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: | ||
| Line 259: | Line 260: | ||
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, | 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 | * 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 | ||