Skinning HowTo/Common XUI attributes
This page describes XML attributes common to all XUI elements. Most are defined in the LLView base class in source file <ocde>llui/llview.cpp.
Used by all XUI elements
name
Required. The XML name of this element. The name must be unique to the floater you are editing.
- IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.
String: name="input_first_name"
visible
Optional. Sets the initial visibility of the element and its children.
This can be set programatically to hide or show the element as needed.
Boolean: visible="false"
enabled
Optional. Determines whether the the element and its children are operational. When disabled, the element is visible, but "greyed out."
This can be set programatically to enable or disable the element as needed.
Boolean: enabled="false"
tool_tip
Optional. Explains the function of the element to the user when the user places the mouse over the element.
String: tool_tip="Pick a resident to mute"
mouse_opaque
Optional. Determines whether the the element reacts to the mouse when it is over it. When it is set to false, elements below will handle the mouse actions.
Boolean: mouse_opaque="false"
control_name
Optional. Lets you associate check box and slider values with particular saved settings without writing any C++ code. Very useful. When you load a floater or other XUI element containing a check box or slider with that tag, it will take it's initial value from the named saved setting and automatically saves back out modified values as the user interacts with those controls.
This is extremely powerful and should let you create a custom panel to control any of the boolean or real valued settings that you see in the Debug_Settings floater. See floater_beacons.xml for examples.
String: control_name="particlesbeacon"
sound_flags
Optional. Determines whether to make a sound on mouse-up and/or mouse-down.
- This attribute is written when saving the XML, but it is not read when loading XML.
hover_cursor
Optional. Supposed to set the cursor icon used while hovering over this element.
- This attribute seems to be overridden by hardcoded values. If you find a widget that honors this, please document it here.
Allowed values are UI_CURSOR_ARROW, UI_CURSOR_WAIT, UI_CURSOR_HAND, UI_CURSOR_IBEAM, UI_CURSOR_CROSS, UI_CURSOR_SIZENWSE, UI_CURSOR_SIZENESW, UI_CURSOR_SIZEWE, UI_CURSOR_SIZENS, UI_CURSOR_NO, UI_CURSOR_WORKING, UI_CURSOR_TOOLGRAB, UI_CURSOR_TOOLLAND, UI_CURSOR_TOOLFOCUS, UI_CURSOR_TOOLCREATE, UI_CURSOR_ARROWDRAG, UI_CURSOR_ARROWCOPY, UI_CURSOR_ARROWDRAGMULTI, UI_CURSOR_ARROWCOPYMULTI, UI_CURSOR_NOLOCKED, UI_CURSOR_ARROWLOCKED, UI_CURSOR_GRABLOCKED, UI_CURSOR_TOOLTRANSLATE, UI_CURSOR_TOOLROTATE, UI_CURSOR_TOOLSCALE, UI_CURSOR_TOOLCAMERA, UI_CURSOR_TOOLPAN, UI_CURSOR_TOOLZOOMIN, UI_CURSOR_TOOLPICKOBJECT3, UI_CURSOR_TOOLSIT, UI_CURSOR_TOOLBUY, UI_CURSOR_TOOLPAY, UI_CURSOR_TOOLOPEN, UI_CURSOR_TOOLPLAY, UI_CURSOR_TOOLPAUSE, UI_CURSOR_TOOLMEDIAOPEN, UI_CURSOR_PIPETTE
String: hover_cursor="UI_CURSOR_HAND"
use_bounding_rect
Optional. Hit test against bounding rectangle that includes all child elements.
Boolean: use_bounding_rect="true"
default_tab_group
Optional.
Integer: default_tab_group="1"
Positioning
Used by all XUI elements.
Horizontal dimensions are specified with "right", "left", "left_delta", and "width". Together with the width of the parent container, that makes five constraints to define two edges. Something has to give. So "left" and "right" together override "width", and "left_delta" overrides "left" and/or "right".
The same is true of vertical dimensions. The four parameters are "top", "bottom", "bottom_delta", and "height". "top" overrides "height", and "bottom_delta" overrides "bottom" and/or "top".
The values may not mean what you think they do. Read the definitions carefully.
When a parent container is resized, the child edges can be set to follow the parent edges using the "follows" parameter. If the "follows" parameter is not set, the logic is a bit complicated. If "left" is negative, the left edge follow the parent right edge; if non-negative, the left edge follows the parent left edge; unless "left_delta" or "right" are specified, in which case, nothing follows. If "bottom" is negative, the bottom edge follows the parent top edge; if non-negative, the bottom edge follows the parent bottom; unless "bottom_delta" or "top" are specified. If none of "top", "bottom", and "bottom_delta" are specified, the first child follows the parent top edge, and the others follow their siblings.
width
Optional. The width of the element, in pixels.
For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.
For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.
- Tip: See the bounding boxes of all XML elements in the viewer: Advanced menu > UI > Debug Views.
Integer: width="140"
height
Optional. The height of the element, in pixels.
For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.
For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.
Integer: height="24"
left
Optional. Sets the position in the horizontal dimension of the element's left edge relative to the container's left edge. Positive and negative values are accepted. A negative value will set the position relative to the right edge of the container.
Integer: left="6"
right
Optional. Sets the position in the horizontal dimension of the element's right edge relative to the container's left edge. Positive and negative values are accepted. A negative value will set the position relative to the right edge of the container. Best used to align something to the right.
- For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the
right
to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.
Integer: right="-6"
left_delta
Optional. (use instead of left
) Sets the position in the horizontal dimension of the element's left edge relative to the previous element's left edge, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
- For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the
left_delta
to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.
Integer: left_delta="-106"
bottom
Optional. Sets the position in the vertical dimension of the element's bottom edge relative to the parent container's bottom edge. Positive and negative values are accepted. A negative value sets the element's bottom edge relative to the parent container's top edge. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the bottom
to 260 putting the bottom edge of the title 40 pixels away from the top border of the floater.
Integer: bottom="260"
top
Optional. Sets the position in the vertical dimension of the element's top edge relative to the container's top edge. Positive and negative values are accepted. A negative value will set the position relative to the top edge of the container. Best used to align something to the top of the parent container.
Integer: top="-20"
bottom_delta
Optional. (use instead of bottom
) Sets the position in the vertical dimension of the element's bottom edge relative to the previous element's bottom edge, or, for the first widget, the bottom edge of the container. Positive and negative values are accepted. We use a negative number to move down, and a positive number to move up.
Integer: bottom_delta="-106"
follows
Optional. Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.
Values: "left", "top", "right", "bottom", "all". String multiple values together using pipes.
The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: follows="left|top"
rect_control
Optional. Gets "left," "right," "bottom," and "top" from the default configuration file, but the XML parameters will override this. For panels (and floaters, which are derived from panels) that are resized by the user, the resized values will be stored in the default configuration file.
String: rect_control="FloaterAdvancedSkyRect"
Text
label
Optional. This is the text that is displayed on the element.
String: label="Oggetti scriptati"
font
Optional. Sets which size and style of the application font to use. The default is SansSerifSmall for text
elements and SansSerif for controls (such as check_box
and button
.
Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace
String: font="SansSerifSmall"
font_size
Optional. Sets which size of the application font to use.
Values: Small, Medium, Large, Huge
String: font_size="Small"
font_style
Optional. Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:
- normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
- bold: Bolds the text.
- italic: Italicizes the text.
- underline: Underlines the text.
- drop_shadow: Old-style 1px offset of black under the text.
- drop_shadow_soft: New-style 3px offset of blurred shadow under the text.
String: font_style="bold|underline|drop_shadow_soft"
style
Deprecated.
halign
Optional. Controls horizontal alignment of label on button face. Options are "left", "center" and "right".
valign
Deprecated.