|
The editing interface is made up of many graphical controls which are grouped visually within bars, which are themselves arranged within panels. Everything
the user interacts with is a control - even elements like the timeline, player and media browser. Most elements can be arranged, sized, colored and shaded in an arbitrary manner, providing a wide range of stylistic possibilities.
Panels act as the outer container for bars and controls.
The panel tag includes x and y attributes to control positioning relative to the top left of the applet viewing area, along with width and height attributes to control
its size. Negative values can be used for these attributes to implement a liquid design. Other attributes control the panel's background fill, curvature, border, inner padding and drop shadow.
Learn more in panel.
Panels are segmented by bars which ultimately contain the controls.
The bar tag, like the panel tag, has attributes that control its coloring and visual appearance.
But instead of width and height attributes, it has size and align attributes which determines its dimensions. For instance, the height of a top or bottom aligned bar is determined by its size attribute, while its width will be the same as the panel's (minus space for the panel's padding and border, if specified). Left and right aligned bars work similarly, but their height is reduced by the size of any top or bottom aligned bars in the panel, which are laid out first.
Learn more in bar.
The controls themselves are contained within bars. The size and position of each control is determined by several factors, including the type of control, alignment of its parent bar and the existence of other controls within it. For instance, a button in a top aligned bar will inherit its height from the size of the bar (minus space for the bar's padding and border), while its width will be determined by its skin graphic, which is scaled proportionately to fit.
It's also possible to override this behavior by specifying a width attribute in the control tag (or height attribute if the bar is left or right aligned). You can even specify both width and height to force a particular size, in which case the align attribute can be used to determine positioning relative to the bar. These dimensions can be specified as absolute pixel values, or the special value of '*' to indicate that the control should use up whatever space is available in the bar.
Learn more in control.
|
