Editing WoW:Earth (AddOn)/Using earth to create a QuestLog (section)

== Creating the XML file == 

The first step is to create the XML file. Normally, I just copy my favorite AddOn's Ui tag, then work from there: 

 <nowiki><Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/ ..\FrameXML\UI.xsd">
 </Ui></nowiki>

Once you have that, the next stage is to setup your localization and code files. Having an independent localization.lua file will make it exceptionally easier for the lovable Frenchies and swanky Swedes to translate your [[AddOns|AddOn]] into their mother tongue. 

This goes inside the Ui tag:

 <nowiki><Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/ ..\FrameXML\UI.xsd">
 	&lt;!-- Localization -->
 	<Script file="localization.lua"/>
 
 	&lt;!-- Source -->
 	<Script file="PartyQuests.lua"/>
 	
 	&lt;!-- All Future XML goes here! -->
 </Ui></nowiki>
<small>Now, because that looks ugly, I'm going to stop copy and pasting all of that and assume you can follow me. Good luck!</small>

The next stage is to setup the window for the frame! Because we're inheriting from an Earth frame, we don't need to specify the default background texture. This works great for simple mods, like this quest log. 


 	&lt;!-- Party Quests Frame -->
 
 	<Frame name="PartyQuestsFrame" inherits="EarthFrameTemplate">
 		<Size>
 			<AbsDimension x="384" y="490"/>
 		</Size>
 		<Anchors>
 			<Anchor point="CENTER">
 				<Offset>
 					<AbsDimension x="0" y="0"/>
 				</Offset>
 			</Anchor>
 		</Anchors>
 	</Frame>

[[Image:Earth_tutorial_0.jpg|thumb|The empty frame was created from that bit of code.]]
At this point, our Frame looks like this: <br clear=all>

Woo hoo! Wasn't that easy? Okay, next we need to add an EarthTree. This will let us render information from a table to a nice, collapsable list (up to a decent limit). 

First, we add a <Frames> tag to the PartyQuestsFrame. Then we stick the EarthTree frame inside of it. 

 	<Frames>
 		&lt;!-- Main Data View -->
 		<Frame name="$parentTree" inherits="EarthTreeTemplate">
 			<Anchors>
 				<Anchor point="TOPLEFT" relativeTo="PartyQuestsFrame" relativePoint="TOPLEFT">
 					<Offset>
 						<AbsDimension x="20" y="-75"/>
 					</Offset>
 				</Anchor>
 			</Anchors>
 		</Frame>
 	</Frames>

You may have noticed that I placed it at a very specific x/y set. I got those through experimentation. However, if you find yourself getting frustrated, I recommend you try the following trick: 

 	<Layers>
 		<Layer level="BACKGROUND">
 			<Texture name="$parentBackground" setAllPoints="true">
 				<Color r="0" g="1" b="0" a="1.0" />
 			</Texture>
 		</Layer>
 	</Layers>

Place that code snippet inside of the frame you are trying to position. This will force the entire frame to be colored green. You can then use this green box to help position the frame correctly and ensure your hit rectangles are 100% correct. You can disable it by setting a="0.0". 

Now, for the next stage, we need to specify something to load the actual data into the EarthTree. So, first things first, we add the event handler to the PartyQuestsFrame. 

 		<Scripts>
 			<OnLoad>
 				PartyQuests_Frame_OnLoad();
 			</OnLoad>
 		</Scripts>