UI XML

From ESOUI Wiki

(Difference between revisions)
Jump to: navigation, search
Line 14: Line 14:
* You can add comments like in any XML file
* You can add comments like in any XML file
-
==Access of XML controls==
+
==Accessing XML controls==
There are a few different ways how you can access controls.<br>
There are a few different ways how you can access controls.<br>

Revision as of 17:34, 17 March 2020

Page up-to-date to API Version 100028



Contents

Introduction

This is the exhaustive list of UI Elements used to drawn the UI of Elder Scrolls Online.

Accessing XML controls

There are a few different ways how you can access controls.
First you have to understand that every named control is automatically assigned to a global variable.
For example when there exists a structure with names like "MyAddonWindow" -> "$(parent)Container" -> "$(parent)Control" you will end up with three globals "MyAddonWindow", "MyAddonWindowContainer" and "MyAddonWindowContainerControl
That's also a common pitfall for new authors who name their addon's "namespace" table the same as their top-level xml control, not knowing that the control will be assigned to the global variable.

Each control also has an "OnInitialized" callback which passes the object to a Lua function.
You can use the function GetControl(parent, "ChildName") to access elements under it, or directly call parent:GetNamedChild("ChildName") which is used underneath.
Instead of passing an object you can also just pass the name to GetControl and it will fetch the global variable for you.

From XML you are a bit more limited, but you can use the same expansions used for naming the controls to access them relative to each other.
In addition to "$(parent)" there is also "$(grandparent)" (see below on this page) and in theory you should be able to create a custom constant with the <string> control and use that too.

Structure

<GuiXml>
 
	<!-- New Font definition -->
	<Font name="ZoFontBookTabletSmall" font="$(STONE_TABLET_FONT)|$(KB_24)|soft-shadow-thick" />
	<Font name="ZoFontGameMini" font="$(BOLD_FONT)|$(KB_13)|soft-shadow-thin" />
 
	<!-- Your Controls should be INSIDE this Element -->
	<Controls>
 
		<Label name="SuperStarXMLSkillsNavigationEntry" virtual="true" font="ZoFontHeader" inherits="ZO_SelectableLabel">
			<OnMouseUp>
				ZO_TreeEntry_OnMouseUp(self, upInside)
			</OnMouseUp>
		</Label>
 
	</Controls>
</GuiXml>


Magic Values


In the example under,

<Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

is equal to :

<Backdrop name="AIResearchGridBG" inherits="ZO_DefaultBackdrop" />

Inheritance


In the example under,

<Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

Inherits the ZO_DefaultBackdrop sub elements, attributes, code, etc. ZO_DefaultBackdrop MUST be loaded before the file which define this block.


Virtualization

In the example under,

		<Control name="SuperStarXMLSkillsAbilityTypeHeader" virtual="true">
			<Dimensions y="32"/>
			<Controls>
				<Label name="$(parent)Label" font="ZoFontHeader2" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE">
				<Anchor point="LEFT" />
			</Label>
			</Controls>
		</Control>

Is virtual.


Loading Order



Examples of UI Definition

<GuiXml>
	<Controls>
 
		<Control name="SuperStarXMLSkillsAbilityTypeHeader" virtual="true">
			<Dimensions y="32"/>
			<Controls>
				<Label name="$(parent)Label" font="ZoFontHeader2" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE">
					<Anchor point="LEFT" />
				</Label>
			</Controls>
		</Control>
 
		<!-- This TopLevelControl can be accessed in Lua throught variable "AIResearchGrid" -->
		<TopLevelControl name="AIResearchGrid" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
			<Dimensions x="750" y="800" />
			<Anchor point="CENTER" />
			<Controls>
 
				<Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
 
				<Label name="$(parent)WindowTitle" font="ZoFontAnnounceMedium" text="|c8080ffAI|r RESEARCH GRID">
					<Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPLEFT" />
				</Label>
 
				<Texture name="$(parent)TopDivider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">
					<Dimensions x="800" y="4"/>
					<Anchor point="TOP" relativeTo="$(parent)" offsetY="38" />
				</Texture>
 
				<Button name="$(parent)ButtonCloseAddon" inherits="ZO_ButtonBehaviorClickSound">
					<Dimensions x="40" y="40" />
					<Anchor point="TOPRIGHT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="15" />
					<Textures normal="EsoUI/Art/Buttons/closebutton_up.dds"
						pressed="EsoUI/Art/Buttons/closebutton_down.dds"
						mouseOver="EsoUI/Art/Buttons/closebutton_mouseover.dds"
						disabled="EsoUI/Art/Buttons/closebutton_disabled.dds"/>
					<OnClicked>
						AIRG_ToggleMainWindow()
					</OnClicked>
				</Button>
 
			</Controls>
		</TopLevelControl>
	</Controls>
</GuiXml>

UI Elements

Attributes


AlphaAnimation


Anchor


AnchorFill

AnchorToBaseline


AnimationBase


AnimationTimeline


Animations


Backdrop


BackgroundBottom


BackgroundMiddle


BackgroundTop


Browser


Button


ButtonState


Callback


Callbacks


Center


ClampedToScreenInsets


ClearAnchors

ColorAnimation


ColorSelect


Compass


CompassPinType


Control


Controls


Cooldown


CustomAnimation


DebugText


DimensionConstraints


Dimensions


EasingFunction


Edge


EditBox


FadeGradient


Font


FontColors


GuiXml


HitInsets


Insets


Label


LeadingEdge


LeadingEdgeTextureCoords


Limits


Line


LineFade


LocalDimensions3D


MapDisplay


MapGutter


MapPinType


MouseButton


NormalOffset


OnAddGameData


OnBackspace


OnChar


OnCleared


OnClicked


OnColorSelected


OnDownArrow


OnDragStart


OnDurationChanged


OnEffectivelyHidden


OnEffectivelyShown


OnEnabledStateChanged


OnEnter


OnEscape


OnFocusGained


OnFocusLost


OnHide


OnIMEBeginComposition


OnIMEEndComposition


OnInitialized


OnInsertAnimationTimelineCallback


OnKeyDown


OnKeyUp


OnLinkClicked


OnLinkMouseUp


OnLoadFinished


OnLoadStart


OnMinMaxValueChanged


OnMouseDoubleClick


OnMouseDown


OnMouseEnter


OnMouseExit


OnMouseUp


OnMouseWheel


OnMoveStart


OnMoveStop


OnPageDown


OnPageUp


OnPlay


OnPlay_Animation


OnReceiveDrag


OnRectChanged


OnRectHeightChanged


OnRectWidthChanged


OnRequestClose


OnResizeStart


OnResizeStop


OnResizedToFit


OnScrollExtentsChanged


OnScrollOffsetChanged


OnSetAnimationEaseFunction

OnSetAnimationEventHandler

OnSetAnimationTimelineEventHandler

OnSetControlEventHandler

OnSetUpdateFunction

OnShow


OnSliderReleased


OnSpace


OnStop


OnStop_Animation


OnTab


OnTextChanged


OnTextureLoaded


OnUpArrow


OnUpdate


OnUserAreaCreated


OnValueChanged


OnVisibleRadiusChanged


PressedOffset


RadialCooldownGradient


ResizeToFitPadding


Rotate3DAnimation


ScaleAnimation


Scroll


ScrollingOverlay


SizeAnimation


Slider


StatusBar


String


Surface


TextBuffer


Texture


TextureAnimation


TextureComposite


TextureCoords


TextureRotateAnimation


TextureSampleProcessingWeight


Textures


ThumbTexture


Tooltip


TopLevelControl


Translate3DAnimation


TranslateAnimation


UpdateFunction


sentinel_element

Personal tools
Namespaces
Variants
Actions
Menu
Wiki
Toolbox