Editing WoW:Creating tabbed windows (section)

== Tabs in XML ==
Let's start off with the frame that will serve as the outermost container of our tabbed interface.  Inside this frame, you will embed child frames that will each define a single "page" of the interface, and you will write button click handlers that show a single page at a time and hide the rest.

This might look like a lot of code, and it is.  Nature of the beast with the WoW XML UI.
 
    <Frame
        name="myTabContainerFrame"
        toplevel="true"
        frameStrata="DIALOG"
        movable="true"
        enableMouse="true"
        hidden="false"
        parent="UIParent">
        <!-- B A S I C   A T T R I B S -->
        <Size>
            <AbsDimension x="480" y="325"/>
        </Size>
        <Anchors>
            <Anchor point="CENTER">
                <Offset><AbsDimension x="-200" y="200"/></Offset>
            </Anchor>
        </Anchors>
        <Backdrop
            bgFile="Interface\DialogFrame\UI-DialogBox-Background"
            edgeFile="Interface\DialogFrame\UI-DialogBox-Border"
            tile="true">
            <BackgroundInsets>
                <AbsInset left="11" right="12" top="12" bottom="11"/>
            </BackgroundInsets>
            <TileSize>
                <AbsValue val="32"/>
            </TileSize>
            <EdgeSize>
                <AbsValue val="32"/>
            </EdgeSize>
        </Backdrop>
        <!-- T I T L E -->
        <Layers>
            <Layer level="ARTWORK">
                <Texture name="myFrameHeader" file="Interface\DialogFrame\UI-DialogBox-Header">
                    <Size>
                        <AbsDimension x="356" y="64"/>
                    </Size>
                    <Anchors>
                        <Anchor point="TOP">
                            <Offset>
                                <AbsDimension x="0" y="12"/>
                            </Offset>
                        </Anchor>
                    </Anchors>
                </Texture>
                <FontString inherits="GameFontNormal" text="My Frame">
                    <Anchors>
                        <Anchor point="TOP" relativeTo="myFrameHeader">
                            <Offset>
                                <AbsDimension x="0" y="-14"/>
                            </Offset>
                        </Anchor>
                    </Anchors>
                </FontString>
            </Layer>
        </Layers>
        <Frames>
            <Frame name="myTabPage1" hidden="false">
                <Anchors>
                    <Anchor point="TOPLEFT"/>
                    <Anchor point="BOTTOMRIGHT"/>
                </Anchors>
                <Layers>
                    <Layer level="ARTWORK">
                        <FontString inherits="GameFontNormal" text="My Frame 1">
                            <Anchors>
                                <Anchor point="TOPLEFT" relativeTo="$parent">
                                    <Offset>
                                        <AbsDimension x="20" y="-30"/>
                                    </Offset>
                                </Anchor>
                            </Anchors>
                        </FontString>
                    </Layer>
                </Layers>
                <Frames>
                  <!-- UI elements go here -->   
                </Frames> 
            </Frame>   
            <Frame name="myTabPage2" hidden="true">
                <Anchors>
                    <Anchor point="TOPLEFT"/>
                    <Anchor point="BOTTOMRIGHT"/>
                </Anchors>
                <Layers>
                    <Layer level="ARTWORK">
                        <FontString inherits="GameFontNormal" text="My Frame 2">
                            <Anchors>
                                <Anchor point="TOPLEFT" relativeTo="$parent">
                                    <Offset>
                                        <AbsDimension x="20" y="-30"/>
                                    </Offset>
                                </Anchor>
                            </Anchors>
                        </FontString>
                    </Layer>
                </Layers>
                <Frames>
                  <!-- UI elements go here -->   
                </Frames> 
            </Frame>
            <!-- T A B   B U T T O N S -->
            <Button name="$parentTab1" inherits="CharacterFrameTabButtonTemplate" id="1" text="My Tab 1">
                <Anchors>
                    <Anchor point="CENTER" relativePoint="BOTTOMLEFT">
                        <Offset>
                            <AbsDimension x="60" y="-12"/>
                        </Offset>
                    </Anchor>
                </Anchors>
                <Scripts>
                    <OnClick>
                        PanelTemplates_SetTab(myTabContainerFrame, 1);
                        myTabPage1:Show();
                        myTabPage2:Hide();
                    </OnClick>
                </Scripts>
            </Button>
            <Button name="$parentTab2" inherits="CharacterFrameTabButtonTemplate" id="2" text="My Tab 2">
                <Anchors>
                    <Anchor point="LEFT" relativeTo="$parentTab1" relativePoint="RIGHT">
                        <Offset>
                            <AbsDimension x="-16" y="0"/>
                        </Offset>
                    </Anchor>
                </Anchors>
                <Scripts>
                    <OnClick>
                        PanelTemplates_SetTab(myTabContainerFrame, 2);
                        myTabPage1:Hide();
                        myTabPage2:Show();
                    </OnClick>
                </Scripts>
            </Button>
        </Frames>
        <Scripts>
            <OnLoad>
                this.elapsed = 0;
                PanelTemplates_SetNumTabs(myTabContainerFrame, 2);
                PanelTemplates_SetTab(myTabContainerFrame, 1);
            </OnLoad>
            <OnShow>
                PlaySound("UChatScrollButton");
                PanelTemplates_SetTab(myTabContainerFrame, 1);
                myTabPage1:Show()
                myTabPage2:Hide()
            </OnShow>
            <OnHide>
                PlaySound("UChatScrollButton");
            </OnHide>
        </Scripts>
    </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 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:

 <Button name="myFrameTabTemplate" inherits="CharacterFrameTabButtonTemplate" virtual="true">
 	<Scripts>
 		<OnClick>
 			myButtonHandler(this:GetName());
 		</OnClick>
 	</Scripts>
 </Button>

This will reduce the amount of code you need per tab.  As an example, your first tab would be only:

            <Button name="$parentTab1" inherits="myFrameTabTemplate" id="1" text="My Tab 1">
                <Anchors>
                    <Anchor point="CENTER" relativePoint="BOTTOMLEFT">
                        <Offset>
                            <AbsDimension x="60" y="-8"/>
                        </Offset>
                    </Anchor>
                </Anchors>
            </Button>


I'll leave the implementation of myButtonHandler() as an exercise for the reader.

We are inheriting from the template that's used for the CharacterFrame. You can find it at the top of the CharacterFrame.XML file. By using this template we basically provide WoW with the data structure that is specified by the Tab library. If you take a look at the source of the template, you'll notice that this is  quite complex.

Let's look at our existing buttons:

            <Button name="$parentTab1" inherits="CharacterFrameTabButtonTemplate" id="1" text="My Tab 1">
                <Anchors>
                    <Anchor point="CENTER" relativePoint="BOTTOMLEFT">
                        <Offset>
                            <AbsDimension x="60" y="-8"/>
                        </Offset>
                    </Anchor>
                </Anchors>
                <Scripts>
                    <OnClick>
                        PanelTemplates_SetTab(myTabContainerFrame, 1);
                        myTabPage1:Show();
                        myTabPage2:Hide();
                    </OnClick>
                </Scripts>
            </Button>
            <Button name="$parentTab2" inherits="CharacterFrameTabButtonTemplate" id="2" text="My Tab 2">
                <Anchors>
                    <Anchor point="LEFT" relativeTo="$parentTab1" relativePoint="RIGHT">
                        <Offset>
                            <AbsDimension x="-16" y="0"/>
                        </Offset>
                    </Anchor>
                </Anchors>
                <Scripts>
                    <OnClick>
                        PanelTemplates_SetTab(myTabContainerFrame, 2);
                        myTabPage1:Hide();
                        myTabPage2:Show();
                    </OnClick>
                </Scripts>
            </Button>

'''NOTE:''' The names of these buttons ''must'' be exactly "$parentTab1", "$parentTab2", etc... otherwise the calls to PanelTemplates_UpdateTabs() will fail with an error.

Most of the Tab management WoW does, is done by 'guessing' names based on specific naming conventions. Notice the id Attribute in the declaration. This specifies the number of your tab, so for the third tab, the id would have to be 3 and so on. Don't forget to adjust the ids for every new button!
You won't need any more eventhandlers in there, it's all in the template.

So far, so good. Now, let's step over to LUA.