难得一见的好文:)
对了解UI有一定程度的帮助唷
BY imiss
为了感恩原作者大大的辛劳，所以特此转载此贴，让更多的玩家一起加入UI制作者行列：）原文将不做任何修改
作者：WOWAR。英雄
前言
22号基本写完。比预计的要快
这个不是数学书或者语文书。我不想也没有那个能力写成那样……
所以请抱着看小说的态度来看。
因为ADDONS的编写是一个整体。我实在无法分清哪个是要先说，哪个是要后说
所以有看不懂的地方就跳过去。接着看下面
前几层楼写的相对详细些。后几层楼更多的是提示。我还是希望看官能自己分析，自己动手研究
最后。短短的6层楼包含了我半年的心血，而且我语文课真的是没好好去上
所以如果一时看不懂。请多读几遍 或者回帖指出，我会尽力解释的
Addons (Add-Ons)
中文直译：附件，附加 附加软体。 俗称：插件
解释：他们是一些附加的档，被放置在玩家 WOW 游戏目录下的 Interface 档夹中。插件 使用暴雪提供的LUA和XML代码(官方API函数介面)来扩充玩家可以使用的用户介面功能。
插件是通过(暴雪提供的)LUA和XML档(函数)构成的，并且也是通过暴雪的编译机所解释和执行的。因此，暴雪也不会封停任何使用插件的玩家。
StatusBar
在之前我们大概知道了ADDONS的一些基本概念
那么现在。在各种类型的框体中挑一个StatusBar来说说
基本概念
StatusBar：是WOW中用来定义类似施法条。进度条之类的一种框体，
说白了就是可以根据某个数值，即时的改变条条的长短
一个StatusBar有3个重要的参数
1、最大长度 maxValue
2、最小长度 minValue
3、当前长度 Value
要动态的改变StatusBar就需要用脚本（Scripts）中的事件即时的设置当前长度（Value）
（这句话可能有点饶口。不过我就这点语文水准了…见谅见谅）
准备工作
首先根据我们之前的概念。一个TOC档是必不可少的，编个first.toc
## Interface： 1600
## Title： 我的第一插件
## Notes： 真的是我的第一插件哦
然后我们当然得用XML来定义StatusBar这个框体,那么编写个first.xml
不过WOW并不知道我们写了first.xml这个档。我们得告诉他。所以在first.toc中加一句（红色的部分）
## Interface： 1600
## Title： 我的第一插件
## Notes： 真的是我的第一插件哦
first.xml
好了 正式开始编写first.xml
按照基本的XML档格式 先写好基本的嵌套
<StatusBar>
</StatusBar>
起个好名字
<StatusBar name="haomingzi">
</StatusBar>
注意红色的那句。现在我们名叫haomingzi的StatusBar 会根据变数SVALUE自动改变长短了
（这里我们用到了脚本。后面会详细解释的。先记得<Scripts>是脚本就可以了）
<StatusBar name="haomingzi">
<Scripts>
<OnUpdate>
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
现在我们把变数SVALUE设置为玩家的血量
那么：
<StatusBar name="haomingzi">
<Scripts>
<OnUpdate>
haomingzi：SetValue( UnitHealth("player") );
</OnUpdate>
</Scripts>
</StatusBar>
OK。一个玩家的HP条就写出来了
当然仅仅这几行还远远不够，继续完善下
先把最大和最小长度定义好
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<Scripts>
<OnUpdate>
haomingzi：SetValue( UnitHealth("player") );
</OnUpdate>
</Scripts>
</StatusBar>
这里我们设置的是0到100。显然玩家的血量肯定不会在0到100之内的。
那么我们就要把他转换为百分比
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<Scripts>
<OnUpdate>
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
设定下他的位置，比方把他放在萤幕的中间
（具体的如何设置位置。在楼下会讲。现在只要知道红色部分的代码是设定位置就可以了）
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<Anchors>
<Anchor point="center" relativeTo="UIparent" relativePoint="center"/>
</Anchors>
<Scripts>
<OnUpdate>
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
设定一下大小
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<Size>
<AbsDimension x="70" y="8"/>
</Size>
<Anchors>
<Anchor point="center" relativeTo="UIparent" relativePoint="center"/>
</Anchors>
<Scripts>
<OnUpdate>
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
当然他长什么样子我们还没弄呢~
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<BarTexture file="Interface\TargetingFrame\UI-StatusBar"/>
<Size>
<AbsDimension x="70" y="8"/>
</Size>
<Anchors>
<Anchor point="center" relativeTo="UIparent" relativePoint="center"/>
</Anchors>
<Scripts>
<OnUpdate>
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
最后给头尾加上最基本的<ui></ui>嵌套。就大功告成了
<ui>
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<BarTexture file="Interface\TargetingFrame\UI-StatusBar"/>
<Size>
<AbsDimension x="70" y="8"/>
</Size>
<Anchors>
<Anchor point="center" relativeTo="UIparent" relativePoint="center"/>
</Anchors>
<Scripts>
<OnUpdate>
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100
haomingzi：SetValue(SVALUE);
</OnUpdate>
</Scripts>
</StatusBar>
</ui>
进阶
StatusBar除了SetValue这个重要的命令以外。还有个SetStatusBarColor命令。是用来改变颜色的
比如还是上面的例子
我们现在想当HP超过50%的时候为绿色 低于50%的时候为红色
那么先定义一个函数 就叫haomingzi_OnUpdate把 用来实现上面的功能
function haomingzi_OnUpdate()
local SVALUE=( UnitHealth("player") / UnitHealthMax("player") )*100;
if SVALUE > 50 then
haomingzi：SetStatusBarColor(1,0,0);
end
end
然后我们在脚本中调用这个函数就可以了
<ui>
<StatusBar name="haomingzi" minValue="0" maxValue="100">
<BarTexture file="Interface\TargetingFrame\UI-StatusBar"/>
<Size>
<AbsDimension x="70" y="8"/>
</Size>
<Anchors>
<Anchor point="center" relativeTo="UIparent" relativePoint="center"/>
</Anchors>
<Scripts>
<OnUpdate>
haomingzi_OnUpdate()；
</OnUpdate>
</Scripts>
</StatusBar>
</ui>
更多的框体
当然框体绝对不仅仅只有<StatusBar>这一中。还有诸如<Button> <Frame> <Texture> <FontString>等等等等
这里就不一一解释了，你随便打开一个写好的ADDONS都可以发现他们的身影。自己分析一下把
位置
这里将说说 如何定义一个框体的位置
我们打开任意的一个编写好的ADDONS的XML档。多半会发现形如这样的代码
CODE： [Copy to clipboard]
<Anchors> <Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER"> <Offset> <AbsDimension x="55" y="-55"/> </Offset> </Anchor></Anchors>
这样的代码就是用来定义的位置的
数学课和物理课都上过把？（虽然我很讨厌我们过去的数学老师 ><）
想知道任何一个物体的位置。只要有一个固定的参考物。再有与参考物体的相对座标。就可以了
---------------------------------------------------------------------------------------------------
先来点基本概念
我们用一个方框来表示框体，那么
TOP
TOPLEFT -------------------- TOPRIGHT
| |
LEFT | CENTER | RIGHT
| |
BOTTOMLEFT -------------------- BOTTOMLEFT
BOTTOM
应该有点头绪了把？
之前那段代码的意思就是 把位置定义在
小地图的中心点和我们的框体的中心点X座标为55 Y座标为55的地方
如果看不明白这句话 不要紧 我们一句一句的来分析
------------------------------------------------------------------------------------------------------
具体分析
头一句和最后一句
<Anchors>
</Anchors>
这个嵌套是告诉WOW：中间的代码是定义位置
第二句和倒数第二句
<Anchor point="CENTER" relativeTo="Minimap" relativePoint="CENTER">
</Anchor>
这个嵌套就是告诉WOW 我们开始定义位置了。
先看第二句。
point="CENTER" 参考之前我画的那张很丑陋的图。
意思就是：要定义位置的框体（为了描述方便。以下简称为框体A）的中心点（CENTER）作为定义点。
（定义点这个名词是我杜撰的。如果不明白。先接着往下看）
relativeTo="Minimap"
意思就是：给我们的框体A设置一个参考物（为了描述方便。以下把参考物简称为框体B）
在这里。就是把框体B设置为小地图（Minimap）
relativePoint="CENTER"
同样的。也得给我们的框体B设置一个定义点
在这里。就设置为中心点（CENTER）
现在解释一下定义点这个我杜撰的名词
为什么要有定义点这个概念呢？
因为所有的框体都不是一个点。而是一个平面。而相对座标只能是点与点的座标。所以就必须在框体上找一个点来定义座标
而这个点。就是我所谓的定义点
至于一个框体的定义点可以设置为那些，参考上面我画的那张丑陋的图
搞明白了以上的概念。那么中间的那段代码
CODE： [Copy to clipboard]
<Offset> <AbsDimension x="55" y="-55"/> </Offset>
也就不难理解是什么意思了。这正是设置2个定义点之间的相对座标
-------------------------------------------------------------------------------------------------------
进阶
为什么一向崇尚操作简单的暴雪要把位置的定义弄的这么复杂呢？
似乎我们只要变换2个定义点之间的相对座标。那么无论我们把定义点怎么设置 都可以达到同样的效果
其实。是因为框体的大小有时候是不固定的。
比如我想实现这样的效果：
在玩家血条的左边显示HP的具体数值
如果这么定义位置：
CODE： [Copy to clipboard]
<FontString name="HPText"><Anchors> <Anchor point="CENTER" relativeTo="PlayerFrame" relativePoint="CENTER"> <Offset> <AbsDimension x="55" y="0"/> </Offset> </Anchor></Anchors> 。 。 。 。
似乎可以到达效果，
可是HP有多有少。
当HP为3位数的时候。数值是在血条的左边。但是但HP为4为数的时候。数值就超过了左边挡主了部分血条。
所以。得这么写
CODE： [Copy to clipboard]
<FontString name="HPText"><Anchors> <Anchor point="RIGHT" relativeTo="PlayerFrame" relativePoint="LEFT"> <Offset> <AbsDimension x="0" y="0"/> </Offset> </Anchor></Anchors> 。 。 。 。
这样。无论HP为多少。数值的右侧永远都和血条的坐侧对齐
---------------------------------------------------------------------------------------------------------------
PS：
当相对座标为0，0的时候。代码可以简化
比如刚才的代码可以简化为
CODE： [Copy to clipboard]
<FontString name="HPText"><Anchors> <Anchor point="RIGHT" relativeTo="PlayerFrame" relativePoint="LEFT"/></Anchors>
。
。
。
。
注意：别漏看了第三句最后的那个反斜杠
脚本
看到这里。我们对框体的定义应该有了很大的了解。现在定义一个自己的框体应该没什么难度了把？
在STATUSBAR部分我们提到了脚本。
脚本我个人觉得是ADDONS的精髓
弄懂了脚本部分。那么去他的FLEXBAR 去他的DAB 去他的DUF 我们不需要了。我们自己就可以来做了
基本概念
什么是脚本。通俗的说：脚本就是告诉框体在什么时候执行什么命令
同样的
我们用<Scripts></Scripts>这样的嵌套来表示代码中脚本的部分
具体的举个例子
还记得FLEXBAR或者DAB一个很实用的功能把？当滑鼠进入按扭的区域 按纽显示 离开则隐藏
现在我们直接在ADDONS中写（为了描述方便起见 以下只写出代码中我们需要注意的部分）
<BUTTON name="button_1">
<Scripts>
<OnEnter>
This：Show();
</OnEnter>
<OnLeave>
This：Hide();
</OnLeave>
</Scripts>
</BUTTON>
<OnEnter>这个嵌套就是滑鼠进入框体的区域需要执行的命令
<OnLeave>则是滑鼠离开框体的区域需要执行的命令
如何？是不是很简单呢？
接着来。
FLEXBAR或者DAB还有很多神奇的功能。比如根据条件自动改变按扭的位置 透明度 缩放 等等等
如果我们直接在ADDONS中编写也很方便
比如进入战斗状态 自动出现按扭 反之隐藏
<BUTTON name="button_1">
<Scripts>
<OnLoad>
this：RegisterEvent("PLAYER_ENTER_COMBAT");
this：RegisterEvent("PLAYER_LEAVE_COMBAT");
</OnLoad>
<OnEvent>
if (event == "PLAYER_ENTER_COMBAT") then
this：Show();
elseif (event == "PLAYER_LEAVE_COMBAT") then
this：Hide();
end
</OnEvent>
</Scripts>
</BUTTON>
<OnLoad>是框体被载入的时候需要执行的命令
这里。我们给button_1这个框体注册了2个事件：玩家进入战斗和玩家离开战斗
<OnEvent>是注册的事件发生的时候需要执行的命令
这里。我们用了一个判断语句。
当事件为玩家进入战斗的时候 显示按扭1 当事件为玩家离开战斗的时候 隐藏按扭1
同样的
脚本和框体一样 不可能仅仅只有我上面所说的那几个。
更多的脚本需要你自己去发现。。我不想啰嗦了。
更多的惊喜
以上2个只是很简单的例子。脚本中执行的命令还可以是相互调用。相互依存的来实现更多更复杂的功能
这时候。仅仅一个XML档已经不能满足我们的需要了。我们得在LUA档中来编写
LUA
如果你有耐心看完了上面的全部内容 并且亲手去实验了
那么如何编写一个XML档应该了然与胸了把
当然一个精巧的ADDONS不可能仅仅只有XML档而已。他还需要LUA档
LUA档当然就是用LUA格式写的
具体的LUA的语法 限与帖子的篇幅，不能详尽说明。好在现在网上的资料很多的
我只说几个个人觉得很有用的部分
1。引用LUA和定义函数
先回头看6楼的最后那段代码
<BUTTON name="button_1">
<Scripts>
<OnLoad>
this：RegisterEvent("PLAYER_ENTER_COMBAT");
this：RegisterEvent("PLAYER_LEAVE_COMBAT");
</OnLoad>
</OnEvent>
if (event == "PLAYER_ENTER_COMBAT") then
this：Show();
elseif (event == "PLAYER_LEAVE_COMBAT") then
this：Hide();
end
</OnEvent>
</Scripts>
</BUTTON>
我们可以把脚本的部分放到LUA中来写。
首先我们新建一个BUTTON1.LUA文件
然后在XML档里面要告诉WOW 我们写了BUTTON1.LUA文件
<Script file="BUTTON1.lua"/>
<BUTTON name="button_1">
<Scripts>
<OnLoad>
this：RegisterEvent("PLAYER_ENTER_COMBAT");
this：RegisterEvent("PLAYER_LEAVE_COMBAT");
</OnLoad>
<OnEvent>
if (event == "PLAYER_ENTER_COMBAT") then
this：Show();
elseif (event == "PLAYER_LEAVE_COMBAT") then
this：Hide();
end
</OnEvent>
</Scripts>
</BUTTON>
定义函数的LUA命令是function
现在我们就把<OnLoad>和<OnEvent>这2个部分的命令定义为函数
function button_1_onload()
this：RegisterEvent("PLAYER_ENTER_COMBAT");
this：RegisterEvent("PLAYER_LEAVE_COMBAT");
end
function button_1_onevent(event)
if (event == "PLAYER_ENTER_COMBAT") then
this：Show();
elseif (event == "PLAYER_LEAVE_COMBAT") then
this：Hide();
end
end
然后在XML档中引用这2个函数
<Script file="BUTTON1.lua"/>
<BUTTON name="button_1">
<Scripts>
<OnLoad>
button_1_onload();
</OnLoad>
<OnEvent>
button_1_onevent(event);
</OnEvent>
</Scripts>
</BUTTON>
这样原来的一个XML档就被我们分成了2个档 LUA和XML
也许就上面的那段简单的代码 我们还觉得这样做并没有什么太大的意义
不过。当你写了一段很复杂 很麻烦的代码的时候。这么做显然有助与你简化代码和理清思路
2。代码的本地化
因为WOW有很多国家的版本。所以一些变数的设置需要本地的语言。
比如能在中国使用的ADDONS，有时候并不能在美国使用。这时候我们就需要做一些本地化的工作
怎么做？
我们把所有的需要使用当地语言的变数集中起来 在一个LUA档中定义
（这个LUA档。我们一般起名叫：localization.lua）
而且。WOW还提供了自动判断语种的功能
这些都很简单。随便打开一个ADDONS的localization.lua自己看一看就明白 不啰嗦了
当然LUA的作用远远不止这些
毕竟LUA是一个很成熟的语言。熟练的运用将大大简化我们的工作量
比如LUA的阵列功能。字串的判断
更多的细节。可以在自己动手写ADDONS的过程中慢慢摸索。
继承
WOW已经帮我定义好了很多有用的框体
所以很多的时候。我们并不需要自己完全的重新定义
直接引用他们就可以了
这里就要用到继承这个概念
如何做？
继承的命令是inherits
比如我想定义一个文字框体。他的样子和显示玩家的名字的文字的样子是一样的
那么：
<FontString name="TEXT_FRAME" inherits="GameFontNormalSmall" >
<FontString/>
这样 我们简单的用了inherits="GameFontNormalSmall"命令
就把 TEXT_FRAME框体的大小 颜色 透明度 字体等等等等属性全部搞定了
如果有不满意的地方 还可以重新定义。
比如改变一下颜色
<FontString name="TEXT_FRAME" inherits="GameFontNormalSmall">
<Color r="0" g="1" b="0"/>
<FontString/>
现在他就是绿色的咯
当然我们也可以定义自己的
这将大大有助于简化我们的代码。
还记得我以前写的那个OPENDOOR吗？
我在里面一共定义了7个框体
其中有6个框体是按扭。并且他们很多部分都是公共的。
所以。如果我现在再来写那个OPENDOOR 我会先写一个父框 把6个按扭公共的部分全部写进去
然后在一个一个的继承就OK了。~
具体的父框的定义 不啰嗦了
大家可以随便打开一个ADDONS 找到名字后面为Template的框体。那多半就是父框了。
动手分析一下把
（提示一点：在父框中的$parent就是要被继承的子框的名字）
