User Interface Basics6:Object Layout

[kino]

Because the Curl language relies on nested graphical containers to place objects, it is helpful to understand the relationship between objects and their containers as well as the relationship between sibling objects within the same container.


Graphical objects can be sized, aligned, and formatted according to their object property types. Each type of graphical container will have specific defaults used for alignment.


You may think of aligning graphical objects from two perspectives:


•Alignment is specified by the parent container. All child objects are aligned in the same manner.

•Alignment is individually specified by each child object. This allows each child object to individually specify its alignment. In this case, the parent container can override the child specifications.


Alignment Defaults
Before we get into alignment details, let's back up and discuss the default behavior. Each graphical container will align its children using its own particular default behavior. The default alignment behaviors of HBox and VBox, two of the most common containers, are as follows:

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{HBox
height = 2in,
spacing = 2pt,
border-style="raised",
border-width = 2pt,
border-color = "teal",
{Fill
width = .5in,
height = .5in,
background = "maroon"
},
{Frame
width = .5in,
height = .5in,
background = "green"
},
{EllipseGraphic
width = .5in,
height = .5in,
fill-color = "blue"
},
{TextFlowBox
border-style="raised",
border-width = 2pt,
margin=3pt,
border-color = "red",
{text Align Me}
},

{CommandButton
label = "Press Me"
},

{DropdownList
"Red", "Yellow", "Blue",
value="Yellow"
},
{image source = {url "image.jpg"}}

}

Specifying Alignment on Child Objects
Many containers, such as HBox, use the outside origins of child objects to align the child objects relative to one another. The outside origin is a certain defined point on each graphical object that is available for use by its graphical parent for aligning graphics within the parent.


You can change an object's outside origin location by setting its vorigin or horigin option to one of the following string values:


•Possible values for vorigin are: "top", "center", "bottom"

•Possible values for horigin are: "left", "center", "right"


You can also specify an object's origin using a numerical value between 0 and 1. The following example shows several possible locations of an object's origin, at the corners and midpoints of the object's bounding box.


Move your pointer over the shaded area for numerical values you could use to specify outside origin locations. (You may need to click on the shaded area first, to activate this behavior.)
Tip: Notice that the numerical origin values in the top-left corner are 0,0 and the bottom-right corner are 1,1.



In the next example, we set the vertical origin to a value of "center" for each child object. Note that vorigin = 0.5 is equivalent to vorigin = "center".

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{HBox
height = 2in,
spacing = 2pt,
border-style="raised",
border-width = 2pt,
border-color = "teal",
{Fill
width = .5in,
height = .5in,
background = "maroon",
vorigin = "center"
},
{Frame
width = .5in,
height = .5in,
background = "green",
vorigin = "center"
},
{EllipseGraphic
width = .5in,
height = .5in,
fill-color = "blue",
vorigin = "center"
},
{TextFlowBox
border-style="raised",
border-width = 2pt,
margin=3pt,
border-color = "red",
vorigin = "center",
{text Align Me}
},

{CommandButton
label = "Press Me",
vorigin = "center"
},

{DropdownList
"Red", "Yellow", "Blue",
value="Yellow",
vorigin = "center"
},
{image source = {url "image.jpg"},
vorigin = "center"
}
}

Aligning Objects Specified by the Parent
Instead of specifying the alignment using each child object, we can often change the parent container's alignment behavior. Many containers have valign or halign options that change their alignment behavior. If these options are set to values other than "origin", they will also override any outside origins specified by a child object.


•Possible values for valign are: "top", "center", "bottom", "origin" (default)

•Possible values for halign are: "left", "center", right", "origin" (default)


In the next example, we add valign = "center" to the parent container. This aligns all children at the center of the HBox.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{HBox
valign = "center",
height = 2in,
spacing = 2pt,
border-style="raised",
border-width = 2pt,
border-color = "teal",
{Fill
width = .5in,
height = .5in,
background = "maroon"
},
{Frame
width = .5in,
height = .5in,
background = "green"
},
{EllipseGraphic
width = .5in,
height = .5in,
fill-color = "blue"
},
{TextFlowBox
border-style="raised",
border-width = 2pt,
margin=3pt,
border-color = "red",
{text Align Me}
},

{CommandButton
label = "Press Me"
},

{DropdownList
"Red", "Yellow", "Blue",
value="Yellow"
},
{image source = {url "image.jpg"}}

}

In conclusion, you may think of aligning graphical objects from two perspectives.


•By placing the responsibility on the children. Each parent container has its own way of displaying its children, often using the children's outside origins. You can change the children's outside origins to accommodate the parent's display algorithm.

•By placing the responsibility on the parent. Most container objects use the halign and/or valign options to provide an additional way to control alignment.



For more information regarding object alignment, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Elastics and Page Layout > Aligning Graphical Objects