Property Element Reference

From Multiverse

User Interface Development

Overview  •  Managing Widgets  •  Event Handling  •  Using Widget Templates  •  Customizing Key Bindings  •  Localizing UI Text  •  Character Creation Framework  •  Minimap Component  •  Scripting Avatar Appearance

Reference

Widgets  •  Property Elements  •  Imageset Files

Tutorials

Hello World  •  Creating a Button  •  Creating a Menu  •  Creating a Help Dialog  •  Using Radio Buttons

Property elements specify the initial properties of their container element.

Contents 1 AbsDimension 2 AbsInset 3 AbsValue 4 Anchor 5 Anchors 6 Backdrop 7 BackgroundInsets 8 BarColor 9 BarTexture 10 CheckedTexture 11 Color 12 DisabledCheckedTexture 13 DisabledText 14 DisabledTexture 15 EdgeSize 16 FontHeight 17 Frames 18 Gradient 19 HighlightColor 20 HighlightText 21 HighlightTexture 22 HitRectInsets 23 Layer 24 Layers 25 NormalText 26 NormalTexture 27 Offset 28 PushedTexture 29 PushedTextOffset 30 RelDimension 31 Scripts 32 ScrollChild 33 Shadow 34 Size 35 TexCoords 36 TextInsets 37 TileSize

AbsDimension

Specifies either a size (rectangle) or an offset in pixels with x and y attributes.

Attributes

• x - horizontal distance in pixels (may be negative).
• y - vertical distance in pixels (may be negative).

<Size> <AbsDimension x="295" y="0"/> </Size>

AbsInset

Specifies insets from left, right, top, and bottom for BackgroundInsets.

Attributes:

• left
• right
• top
• bottom

<AbsInset left="11" right="12" top="12" bottom="11"/>

AbsValue

Specifies an integer value.

Attribute:

• val

<AbsValue val="32"/>

Anchor

Specifies a point where the widget is anchored, relative to its parent widget.

Attributes

• point - the point on this widget that is anchored.
• relativeTo - the widget to which this widget is anchored. Default is $parent.
• relativePoint - the point on the anchor widget where this widget is positioned.

The point and relativePoint attributes must be one of:

• TOPLEFT
• TOPRIGHT
• BOTTOMLEFT
• BOTTOMRIGHT
• TOP
• BOTTOM
• LEFT
• RIGHT
• CENTER

Subelements:

Offset - horizontal and vertical offset of the anchor relative to its parent widget in pixels.

<Anchor point="TOPLEFT" relativePoint="TOPLEFT">
   <Offset> 
      <AbsDimension x="10" y="-128"/> 
   </Offset>
</Anchor>

Anchors

Specifies relative positioning of the widget, and enables frames to dynamically reposition their content based on resizing. Contains one or more Anchor child elements, each of which may contain an Offset child element that specifies either an absolute or relative dimension (with AbsDimension or RelDimension child element).

Subelements:

Anchor

Backdrop

Specifies a backdrop for a Frame widget.

Attributes:

• bgFile - image defined in an imageset file to use as frame background.
• edgeFile - image defined in an imageset file to use as frame edge.
• tile - boolean to indicate if the backdrop image is tiled.

Multiverse Client uses edge files to render frame borders. An edge file is just an image file (obeying the normal WoW file size rules), which will then be split horizontally by the UI engine into eight equally sized slices (the actual dimensions don't matter as long as the width is a multiple of eight).

From left to right, the slices are:

• Left edge
• Right edge
• Top edge (rotated 90 degrees counterclockwise)
• Bottom edge (rotated 90 degrees counterclockwise)
• Top Left corner
• Top Right corner
• Bottom Left corner
• Bottom Right corner

The Client creates frame border by repeating the edge images between the four corner images. The EdgeSize parameter on the frame's backdrop indicates how wide the image is stretched on to the frame.

Subelements:

• BackgroundInsets
• TileSize
• EdgeSize

<Backdrop 
 bgFile="Interface\Tooltips\UI-Tooltip-Background" 
 edgeFile="Interface\Tooltips\UI-Tooltip-Border" 
 tile="true">
  <EdgeSize> <AbsValue val="16"/> </EdgeSize>
  <TileSize> <AbsValue val="16"/> </TileSize>
    <BackgroundInsets>
      <AbsInset left="5" right="5" top="5" bottom="5"/>
    </BackgroundInsets>
</Backdrop>

BackgroundInsets

Hides or "pushes in" the background texture to put it in line with the border or edge textures of the frame.

Subelements:

AbsInset

<BackgroundInsets>
  <AbsInset left="11" right="12" top="12" bottom="11"/>
</BackgroundInsets>

BarColor

Specifies color of a StatusBar.

Attributes:

• r: red color value between zero and one.
• g: green color value between zero and one.
• b: blue color value between zero and one.

<StatusBar name="myBar">
  ...
  <BarColor r="0" g="0" b="1.0"/>
</StatusBar>

BarTexture

Specifies image to use for a StatusBar. The file attribute specifies the location of the image file.

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attributes:

• file: texture in an image file to use.

<StatusBar name="myBar">
  ...
  <BarTexture file="Interface\TargetingFrame\UI-StatusBar"/>
</StatusBar>

CheckedTexture

Specifies image to display when container CheckButton is checked (and enabled).

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attributes:

• file: texture in an image file to use.

<CheckedTexture file="Interface\ChatFrame\UI-CheckButton-Checked"/>

Color

Defines an RGB (red/green/blue) color.

Attributes:

• r - value between zero and one specifying the red component.
• g - value between zero and one specifying the green component.
• b - value between zero and one specifying the blue component.
• a (optional) - specifies the widget's opacity: zero is transparent, one opaque.

<Color r="1.0" g="1.0" b="1.0" a="1.0"/>

DisabledCheckedTexture

Specifies image to display when container CheckButton is checked and disabled.

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attributes:

• file: texture in an image file to use.

<DisabledCheckedTexture file="Interface\ChatFrame\UI-CheckButton-Disabled"/>

DisabledText

Specifies text to display when the containing widget is disabled.

NOTE: This property element has all the attributes, methods, and event handlers that FontString does. In fact, the element is actually a FontString instance, but it uses a different tag.

Subelements:

Anchors

<DisabledText name="$parentDisabledText" inherits="GameFontHighlightSmall">
  <Anchors>
    <Anchor point="CENTER">
      <Offset> <AbsDimension x="0" y="2"/> </Offset>
   </Anchor>
  </Anchors>
</DisabledText>

DisabledTexture

Specifies image to display when container Button is disabled.

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attributes:

• file: texture in an image file to use.

<DisabledTexture file="Interface\ChatFrame\UI-ChatIcon-ScrollUp-Disabled"/>

EdgeSize

Specifies size of the edge of a Backdrop.

Subelements:

AbsValue

<EdgeSize>
  <AbsValue val="32"/>
</EdgeSize>

FontHeight

Specifies height of a FontString in pixels.

Subelements:

AbsValue

<FontHeight>
    <AbsValue val="15"/>
</FontHeight>

Frames

Contains multiple widgets.

Subelements:

Any Frame derivative, namely:

• Browser
• Button
• CheckButton
• EditBox
• ScrollFrame
• ScrollingMessageFrame
• StatusBar
• Slider

<Frames>
  <EditBox name="PetRenamePopupEditBox" letters="12" historyLines="1">
    ...
  </EditBox>			
  <Button name="PetRenamePopupAcceptButton" inherits="PetPopupButtonTemplate">
    ...				
  </Button>
</Frames>

Gradient

Specifies a gradient for the Texture container.

Attribute

The orientation attribute must be either "VERTICAL" or "HORIZONTAL" (the default).

Subelements:

• MinColor
• MaxColor

<Gradient orientation="VERTICAL"">
   <MinColor r=red g=red b=blue/>
   <MaxColor r=red g=red b=blue /> 
</Gradient>

HighlightColor

Specifies color of container EditBox when it is highlighted.

<HighlightColor r=red g=red b=blue/>

HighlightText

NOTE: This property element has all the attributes, methods, and event handlers that FontString does. In fact, the element is actually a FontString instance, but it uses a different tag.

Subelements:

Anchors

<HighlightText name="$parentHighlightText" inherits="GameFontHighlightSmall">
  <Anchors>
    <Anchor point="CENTER">
      <Offset> <AbsDimension x="0" y="2"/> </Offset>
    </Anchor>
  </Anchors>
</HighlightText>

HighlightTexture

Specifies image to display when container Button is highlighted.

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attributes:

• file - name of the file containing the image.
• alphamode - type of alpha blending to use. Currently, the only supported value is "BLEND", which does normal painting on top of the background, obeying alpha channels if set.

 <HighlightTexture file="Interface\Buttons\UI-Common-MouseHilight" alphaMode="ADD"/>

HitRectInsets

Specifies a Frame widget's hit rectangle, the area in which clicks are sent to the Frame.

Attributes

• left: Number of pixels from the frame's left edge to the hit rectangle's left edge.
• right: Number of pixels from the frame's right edge to the hit rectangle's right edge.
• top: Number of pixels from the frame's top edge to the hit rectangle's top edge.
• bottom: Number of pixels from the frame's bottom edge to the hit rectangle's bottom edge.

<CheckButton name="OptionsCheckButtonTemplate" inherits="UICheckButtonTemplate" virtual="true">
  <HitRectInsets>
    <AbsInset left="0" right="-100" top="0" bottom="0"/>
  </HitRectInsets>
</CheckButton>

Layer

Specifies a layer.

Attribute

Has one attribute, level, which must be one of:

• BACKGROUND
• ARTWORK
• BORDER
• OVERLAY

These values are listed in order from back to front.

Subelements:

• Texture
• FontString

<Layer level="ARTWORK">
  <FontString text="abc" inherits="MyFontHighlight">
    <Size> <AbsDimension x="300" y="0"/> </Size>
  <Anchors>
    <Anchor point="TOP">
      <Offset> <AbsDimension x="0" y="-25"/> </Offset>
    </Anchor>
  </Anchors>
  </FontString>
</Layer>

Layers

Specifies one or more image layers.

Subelements:

Layer

<Layers>
  <Layer level="ARTWORK">
    ...
  </Layer>
</Layers>

NormalText

Specifies the text normally displayed by the container Button, when it is not highlighted, pushed, or disabled.

NOTE: This property element has all the attributes, methods, and event handlers that FontString does. In fact, the element is actually a FontString instance, but it uses a different tag.

Attributes:

• name
• inherits
• justifyH - must be one of "LEFT", "CENTER", or "RIGHT"
• justifyV - "TOP", "MIDDLE", or "BOTTOM"

Subelements:

Anchors

<NormalText name="$parentNormalText" inherits="GameFontNormalSmall" justifyH="LEFT">
  <Anchors>
    <Anchor point="LEFT">
      <Offset> <AbsDimension x="4" y="0"/> </Offset>
    </Anchor>
  </Anchors>
</NormalText>

NormalTexture

Specifies image normally displayed by the container Button, when it is not highlighted, pushed, or disabled.

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Subelements:

TexCoords

 <NormalTexture file="Interface\ChatFrame\UI-ChatIcon-ScrollUp-Up"/>

Offset

Specifies the offset of the widget relative to the parent widget.

Subelements:

AbsDimension

<Offset> <AbsDimension x="4" y="0"/> </Offset>

PushedTexture

Specifies image displayed by the container Button, when it is pushed (clicked).

NOTE: This property element has all the attributes, methods, and event handlers that Texture does. In fact, the element is actually a Texture instance, but it uses a different tag.

Attribute

The file attribute specifies the location of the image in an imageset file for the texture.

 <PushedTexture file="Interface\ChatFrame\UI-ChatIcon-ScrollUp-Down"/>

PushedTextOffset

Specifies text offset of the container Button, when it is pushed (clicked).

Subelements:

AbsDimension

<PushedTextOffset>
  <AbsDimension x="0" y="0"/>
</PushedTextOffset

RelDimension

Specifies a size relative to the parent widget.

Attributes

• x - horizontal scale factor (real number)
• y - vertical scale factor (real number)

<Size> <RelDimension x="0.5" y="0.5"/> </Size>

Scripts

Specifies the event handler scripts for the container widget.

Subelements:

Can contain elments for each event to which the widget can respond; each event handler element contains Python script. See Event Handler Reference.

<Scripts>
  <OnClick>
     QuestRewardItem_OnClick();
  </OnClick>
</Scripts> 

ScrollChild

Specifies a child frame contained within and clipped by a ScrollFrame widget.

Subelements:

None.

<ScrollFrame name="QuestLogDetailScrollFrame" inherits="MvScrollFrameTemplate">
  ...
  <ScrollChild>
    <Frame name="QuestLogDetailScrollChildFrame">
    ...
    </Frame>
  </ScrollChild>
  ...

Shadow

Defines a widget's shadow.

Subelements:

• Color
• Offset

<Shadow>
  <Offset>
    <AbsDimension x="1" y="-1"/>
  </Offset>
  <Color r="0" g="0" b="0"/>
</Shadow>

Size

Specifies the size of the widget. Must contain either an AbsDimension or RelDimension child element.

Subelements:

• AbsDimension
• RelDimension

AbsDimension has x and y attributes to specify horizontal and vertical size, respecitvely. For example:

<Size>
   <AbsDimension x="64" y="20"/>
</Size>

The RelDimension child element has x and y attributes, each of which are between 0 and 1 and specify the widget's size relative to its container widget. For example:

<Size>
  <RelDimension x="0.5" y="0.5"/> 
</Size>

TexCoords

Specifies the coordinates of the container Texture widget with normalized left, right, top, and bottom attributes.

Attributes

• left
• right
• top
• bottom

<TexCoords left="0.15625" right="0.84375" top="0" bottom="1.0"/>

TextInsets

Puts text inside a Frame.

<TextInsets>
  <AbsInset left="11" right="12" top="12" bottom="11"/>
</TextInsets>

TileSize

Subelements:

AbsValue

<TileSize>
  <AbsValue val="32"/>
</TileSize>