Positioning and Managing UI Widgets

From Multiverse

Jump to: navigation, search
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

Much of this section applies to all user interface widgets, not just Frames. Properties for layout, sizing and so on are common to all widgets.

  • The <Frames> tag can contain multiple Frames and Frame derivatives.
  • The <Layers> tag can contain <Layer> tags.
[edit]

Layout

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.

Specify size using a Size element with a AbsDimension child element.

Anchors enable you to specify relative positioning, and also to allow frames to dynamically reposition their content based on resizing. To create a group of anchors, use an Anchors element with one or more Anchor children. Each Anchor element can contain an Offset property element.

For example, the following specifies a 100 by 100 pixel frame anchored at the top left of its parent frame: 

<Frame>
 <Size><AbsDimension x="100" y="100"/></Size>
 <Anchors>
  <Anchor point="TOPLEFT"/>
 </Anchors>
</Frame>

The following example specifies a 100 by 100 pixel frame anchored so that its top left is at the top right of its parent frame. 

<Frame>
 <Size><AbsDimension x="100" y="100"/></Size>
 <Anchors>
  <Anchor point="TOPLEFT" relativePoint="TOPRIGHT"/>
 </Anchors>
</Frame>

The next example specifies a 100 by 100 pixel frame anchored at the top left of the frame SomeOtherFrame, offset by 10 pixels to the right and 10 pixels down. (The Y axis increases from the bottom up, so negative Y coordinates indicate downwards movement). 

<Frame>
 <Size><AbsDimension x="100" y="100"/></Size>
 <Anchors>
  <Anchor point="TOPLEFT" relativeTo="SomeOtherFrame">
   <Offset><AbsDimension x="10" y="-10"/></Offset>
  </Anchor>
 </Anchors>
</Frame>

The following example does not specify a Size. The size and location of this frame is defined entirely by its relationship to SomeOtherFrame. In particular, it will be inset by 5 pixels from the top left and bottom right of SomeOtherFrame. As SomeOtherFrame changes size, our frame will change size as well. 

<Frame>
 <Anchors>
  <Anchor point="TOPLEFT" relativeTo="SomeOtherFrame">
   <Offset><AbsDimension x="5" y="-5"/></Offset>
  </Anchor>
  <Anchor point="BOTTOMRIGHT" relativeTo="SomeOtherFrame">
   <Offset><AbsDimension x="-5" y="5"/></Offset>
  </Anchor>
 </Anchors>
</Frame>
[edit]

Showing and Hiding Frames

Show a Frame with the FrameName.Show() function. Hide a Frame with the FrameName.Hide() function. Also available are ShowUIPanel(FrameName) and HideUIPanel(FrameName).

[edit]

Layers and Textures

The order of layer levels from back to front is:

  • ARTWORK
  • BACKGROUND
  • BORDER
  • OVERLAY
  • unspecified 
<Layers>
  <Layer level="BACKGROUND">
    ...
  </Layer>
</Layers>
Retrieved from "http://update.multiverse.net/wiki/index.php/Positioning_and_Managing_UI_Widgets"
Personal tools