49
edits
m
→Managing Frames
m (This revision and previous are available under: CC BY-SA 3.0. See list of authors in previous history below.) |
|||
| Line 10: | Line 10: | ||
''These are usually first in the [[XML]] file.'' | ''These are usually first in the [[XML]] file.'' | ||
*[[ | *[[XML_elements#Ui|Ui]] - This is the root element, holds all the others in the XML file (worry about later) | ||
**[[ | **[[XML_elements#Include|Include]] - You specify another XML to load too (ones not listed in ToC file) | ||
**[[ | **[[XML_elements#Script|Script]] - Refers to a script file (skipped in ToC file) or contains lua script inside | ||
**[[ | **[[XML_elements#Font|Font]] - Defines a font template (can be used only inside ui tag) | ||
''These begin to actually define screen elements, and are later in the [[XML]] file.'' | ''These begin to actually define screen elements, and are later in the [[XML]] file.'' | ||
*[[ | *[[XML_elements#Widgets|LayoutFrame]] - a basic visible WoW UI element. also called Widgets. | ||
**[[ | **[[XML_elements#Texture|Texture]] - defines a texture or visible image. is a LayoutFrame. | ||
**[[ | **[[XML_elements#FontString|FontString]] - This is just text to read. is also a LayoutFrame. | ||
**[[ | **[[XML_elements#Frame|Frame]] - a visible 'window' and basic container for other elements. is a LayoutFrame too. | ||
***[[ | ***[[XML_elements#Button|Button]] - button you can click. A Button is a Frame, A Frame is a LayoutFrame. :) | ||
***[[ | ***[[XML_elements#CheckButton|CheckButton]] - This is checkbox, used in options | ||
***[[ | ***[[XML_elements#EditBox|EditBox]] - You can enter text here | ||
***[[ | ***[[XML_elements#ScrollFrame|ScrollFrame]] - Used in any window you need to scroll down (quest logs etc.) | ||
***[[ | ***[[XML_elements#Slider|Slider]] - it's a scroll bar for scrolling frames | ||
***[[ | ***[[XML_elements#TabardModel|TabardModel]] - used to select tabard | ||
***[[ | ***[[XML_elements#WorldFrame|WorldFrame]] - A frame to hold the 3D game 'world'. All 3d rendered inside here. | ||
***[[ | ***[[XML_elements#UIParent|UIParent]] - Top built-in WoW 'Frame'. Contains all the 2D UI when game is running. | ||
== Introduction == | == Introduction == | ||
| Line 33: | Line 33: | ||
[[World of Warcraft]] has a fairly powerful layout engine for creating [[user interface|user interfaces]]. When combined with [[Lua]] for attaching behaviours to UI elements, this creates a flexible system with which the game's entire UI is created, as well as any custom [[AddOns]]. The XML and the WoW XML UI serve as a fundemental component of this. If you are unfamiliar with XML, consider visiting the [[XML Basic|XML Basics]] guide. | [[World of Warcraft]] has a fairly powerful layout engine for creating [[user interface|user interfaces]]. When combined with [[Lua]] for attaching behaviours to UI elements, this creates a flexible system with which the game's entire UI is created, as well as any custom [[AddOns]]. The XML and the WoW XML UI serve as a fundemental component of this. If you are unfamiliar with XML, consider visiting the [[XML Basic|XML Basics]] guide. | ||
For more information on creating AddOns, see [[AddOns]], [[Interface | For more information on creating AddOns, see [[AddOns]], [[Interface customization]], [[World of Warcraft API]] and especially the [[Widget API]] which describes the programming aspects of all XML objects. A more detailed reference to all the XML elements WoW UI uses can be found under [[XML elements]]. | ||
Also note that the XML declaration | Also note that the XML declaration, <code><?xml version="1.0"?></code>, may be omitted from UI .xml files. | ||
Also note that as of version 1.10, all types of frames can also be created from Lua with the new [[API CreateFrame|CreateFrame()]] API. | Also note that as of version 1.10, all types of frames can also be created from Lua with the new [[API CreateFrame|CreateFrame()]] API. | ||
| Line 41: | Line 41: | ||
== The Basics == | == The Basics == | ||
An [[XML]] file is a collection of ''elements'' (with a start and end tag), of which the User Interface files are no exception. There are two main types of elements that appear in the UI XML files. The first type are those that declare user interface items | An [[XML]] file is a collection of ''elements'' (with a start and end tag), of which the User Interface files are no exception. There are two main types of elements that appear in the UI XML files. The first type are those that declare user interface items or [[widget]]s, such as [[XML/Button|Button]]s, [[XML/Frame|Frames]], [[XML/CheckButton|Checkbox]]es. We will call these widget elements. The second type of element, which always occur inside the first type, define properties and behaviour of the widgets. We will call these property elements. Here is an example: | ||
<Button name="MyAddon_Button"> | <Button name="MyAddon_Button"> | ||
| Line 49: | Line 49: | ||
</Button> | </Button> | ||
The [[Button]] element is of the first type, in other words a | The [[XML/Button|Button]] element is of the first type, in other words a widget element. Its appearance in the XML file causes a Button with the name '''MyAddon_Button''' to be created. The elements inside it (such as [[Anchors]], Anchor) define its properties, hence are of the second type. The general structure is always the same, you have elements representing widgets, and other elements inside them representing their properties. It can also happen that a widget element is inside another one. For example: | ||
<Frame name="MyAddon_Frame"> | <Frame name="MyAddon_Frame"> | ||
| Line 64: | Line 64: | ||
</Frame> | </Frame> | ||
This example has two [[widget]] elements | This example has two [[widget]] elements, [[XML/Frame|Frames]] and [[XML/Button|Button]], and several property elements ([[Anchors]], Anchor). This creates a Frame, with a Button inside it. Here, '''MyAddon_Button''' is a ''child'' of '''MyAddon_Frame''', and '''MyAddon_Frame''' is a ''parent'' of '''MyAddon_Button'''. Also note how the XML convention of abbreviating an empty element such as <Anchor point="CENTER"></Anchor> as <Anchor point="CENTER"/> is used. | ||
Many of the elements (widget and property alike) can have ''attributes'', such as the '''name''' attribute in the above examples. | Many of the elements (widget and property alike) can have ''attributes'', such as the '''name''' attribute in the above examples. | ||
| Line 77: | Line 77: | ||
</Ui> | </Ui> | ||
Such a file will create a single [[Frame]], named '''MyAddon_Frame'''. However, that Frame wouldn't be visible and wouldn't have any content. | Such a file will create a single [[XML/Frame|Frames]], named '''MyAddon_Frame'''. However, that Frame wouldn't be visible and wouldn't have any content. | ||
== Validation with XSD == | == Validation with XSD == | ||
| Line 117: | Line 117: | ||
== Managing Frames == | == Managing Frames == | ||
''Note:'' A lot of this section applies to all user interface [[ | ''Note:'' A lot of this section applies to all user interface [[widget]]s, not just [[frame]]s. Properties for layout, sizing and so on are common to all widgets. | ||
=== Layout === | === Layout === | ||
Frames have a combination of a size and one or more [[anchors]]. For a | Frames have a combination of a size and one or more [[anchors]]. For a frame to be laid out, the combination of these needs to define a rectangle on the screen in which the frame is to be laid out. | ||
A size is specified using a <tt>Size</tt> element with either an <tt>AbsDimension</tt> or <tt>RelDimension</tt> child element. | A size is specified using a <tt>Size</tt> element with either an <tt>AbsDimension</tt> or <tt>RelDimension</tt> child element. | ||
[[Anchors]] allow for relative positioning, and also to allow | [[Anchors]] allow for relative positioning, and also to allow frames to dynamically reposition their content based on resizing. A group of anchors is expressed via an <tt>Anchors</tt> element with one or more <tt>Anchor</tt> children, each of which may have an <tt>Offset</tt>. | ||
Some examples: ''TODO: Get screenshots of all of these'' | Some examples: ''TODO: Get screenshots of all of these'' | ||
| Line 136: | Line 136: | ||
</Frame> | </Frame> | ||
This specifies a 100x100 | This specifies a 100x100 frame anchored so that its top left is at the top left of its parent frame. | ||
<Frame> | <Frame> | ||
| Line 145: | Line 145: | ||
</Frame> | </Frame> | ||
This specifies a | This specifies a frame that covers a quarter of your [[UI]] (regardless to the selected resolution). | ||
<Frame> | <Frame> | ||
| Line 154: | Line 154: | ||
</Frame> | </Frame> | ||
This specifies a 100x100 | This specifies a 100x100 frame [[anchor]]ed so that its top left is at the top right of its [[parent]] frame. | ||
<Frame> | <Frame> | ||