WoW Addon Tutorial: The Basics – XML Buttons, Labels & Layers
Filed under Programming, WoW Addon Tutorials
So you have a form which looks all nice but it’s a little boring unless we stuff something on it right ? Ok so lets start with adding a button. To do this we use the following:
<Frames>
<Button name=”MYButton” inherits=”UIPanelButtonTemplate” text=”Close”>
<Size>
<AbsDimension x=”80″ y=”22″/>
</Size>
<Anchors>
<Anchor point=”BOTTOMLEFT” relativeTo=”HSFrame”>
<Offset>
<AbsDimension x=”15″ y=”10″/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnClick>HSFrame:Hide();</OnClick>
</Scripts>
</Button>
</Frames>
Thats fine and dandy I hear you saying but what does it all mean? well alot of it should be straight forward. We start off inside a <frame> tag and create a <button> giving it a name, telling it which template to use and what text to show on it. Again we use the <Size> to set it to how big we want it followed by the anchor postion(this will be the bottom left of the parent in this case our main frame). Notice how we use the offset to move it away from the edge so it doesn’t overlap the nice border we have, so we make move in a little. Finally in the <Scripts> tag we use the event tag <OnClick> to run some simple code to hide the frame.
Simple enough ? (if not leave a comment and will go in to more detail if needed)
Lets move on to Layers.
There’s a nice little rule I like to keep to which I found over at wowwiki which reads as follows:
BACKGROUND – Level 0. Place the background of your frame here.
BORDER – Level 1. Place the artwork of your frame here .
ARTWORK – Level 2. Place the artwork of your frame here.
OVERLAY – Level 3. Place your text, objects, and buttons in this level
HIGHLIGHT – Level 4. Place your text, objects, and buttons in this level
Those are the names of Layers you can use and I try to keep to putting things where they should be as said above.
Enough chatting and lets get in to some more code shall we. Here is a Label using a Layer:
<Layers>
<Layer level=”OVERLAY”>
<FontString name=”Text_Name” inherits=”ChatFontNormal” text=”Name” justifyh=”LEFT” justifyv=”TOP”>
<Size>
<AbsDimension x=”150″ y=”150″ />
</Size>
<Anchors>
<Anchor point=”TOPLEFT”>
<Offset>
<AbsDimension x=”15″ y=”-15″/>
</Offset>
</Anchor>
</Anchors>
</FontString>
</Layer>
</Layers>
Lets break this down. We open the <Layers> tag and create a new <Layer> using the level OVERLAY as we intend to put a label in there to display some text. To display text we use the <FontString> tag. We give it a name so we can reference it from our LUA code, tell it again to use what template, give it some text in this case it will display “Name” and finally set the horizontal and vertical alignment of the text. Again we set the size, anchor point and offset to position it nicely on the form.
And there you have it. You have setup a frame with layers, a button with some simple code to hide the frame and added a label to display some text.
There are plenty of other components you can use in your frame and in a later post I will point you in the direction of where to find out what else is available but for now lets keep it simple.
Similar Posts
- WoW Addon Tutorial: Creating Frames With LUA
- WoW Addon Tutorial: The Basics – The .xml File
- Kitn’s Version Of A Photoshop Clear Tape Tutorial
- Photoshop Tutorial: Making A Folder Icon
- WoW Addon Tutorial: The Basics – The .lua File
