Anchors and Frames

From TrillWiki

Contents 1 Frames 1.1 Frame tag 2 Anchors 2.1 Anchor Tag 2.2 Location tag

[edit] Frames

A frame is used inside a component to position another component inside it. This concept is used to create complex windows with moving sections inside the window, such as the message window divider, which moves up and down to change the sizes of the edit and display boxes. The normal message window setup is comprised of two frames: the upper section and the lower section. These are individual components, that are called into frames in the main window component. The frames are then linked by an anchor, which defines how far the divider moves, and how thick the resizeable handle (the bit you click on to actually do the resizing) is.

[edit] Frame tag

You would define a frame inside your component like this:

<frame source="<source component name>" name="<name>">

</frame>

Attribute	Priority	Description, Possible Values
source	Required	Name of the component which will fill this frame
name	Required	Arbitrary name which you will use to reference this frame in the rest of your code

Use a rect tag to define what how the source will be placed. When using frames, there are a few extra properties that can be defined in the rect.

Attribute	Priority	Description, Possible Values
orientation	Required*	Above or Below for a northsouth anchor, Left or Right for an westeast anchor.
source	Required*	Name of the anchor which controls this boundary

* These two properties are required to be used together, but do not need to be used in the rect for any frame. They are only necessary if the frame is to be resizable/movable. You can still use standard num, height, width code if you want. These properties fit into the right, left, top, and bottom tags inside the rect. Here is a code example:

<bottom orientation="above" source="myAnchorName"/>

[edit] Anchors

Anchors allow frames to be resized by the user.

<anchor name="<name>" type="<type>" saveable="<yes/no>" updateRegion="yes/no">

<location type="default" num="" height=""/>

<location type="min" num="" height="0"/>

<location type="max" num="" height="1"/>

<resize type="">

<rtype type="">

<region type="rectangle" combinetype="or">

<rect>

<left num="" width="0"/>

<right num="" width="1"/>

<top num="0" orientation="below" source="<name of this anchor>"/>

<bottom num="" orientation="above" source="<name of this anchor>"/>

</rect>

</region>

</rtype>

</resize>

</anchor>

NOTE: as stated above, in the rect code, the left/right here can also use orientation/source code and the top/bottom could also use the num/height code.

[edit] Anchor Tag

Attribute	Priority	Description, Possible Values
name	Required	Arbitrary name which you will use to reference this anchor in the rest of your code
type	Required	Northsouth - moves up and down, westeast - moves left and right
saveable	Required	Allows the user to save the position of this anchor to an .ini file: Yes, No
updateRegion	Optional	Determines whether the anchor's movement will affect any regions: Yes, No

[edit] Location tag

Attribute	Priority	Description, Possible Values
type	Required	Defines which type of anchor property will be set by the num field min, max, default
num	Required#	Sets the value of "type"; defines the range of motion of the anchor
width	Required#	for westeast anchors 0 - measure from the left 1 - measure from the right
height	Required#	for northsouth anchors 0 - measure from the top 1 - measure from the bottom
orientation	Required#	Above or Below for a northsouth anchor Left or Right for an westeast anchor.
source	Required#	Name of the anchor which controls this boundary

# As with all location code, either num + height/width is required or orientation + source is required. Using orientation + source allows you to chain anchors in succession.

Anchors usually have resize code.

Anchor resize and rtype "type" properties use northsouth and westeast to determine the direction they resize. Additionally, the rect code can contain the same special properties as the rect code used in frames. While defining the "source" in the rect, you will generally use the name of the current anchor.

The anchor is a 0 pixel line, so you will need to extend the "grab" zone into the frames on either side of the divider. If the graphics you have designed to do the moving are all in one frame (eg the bottom frame), then the top will be 0 and the bottom will be the height of the graphics in the bottom frame. This is described in more detail in the tutorial.