Visual Flex Component Layout

 View The Amethyst Layout Bar Screencast

The Amethyst Layout Bar provides a similar set of features to those provided by the Visual Studio Windows Form Designer for C# and VB .NET.

Most of the functions operate on groups of controls. You can select controls by drawing a rectangle (a ‘rubber band’) over them using the mouse. Alternatively, you can select multiple controls one at a time by Control-clicking them.

There is one important difference between the Amethyst Layout Bar and its C# equivalent: Amethyst optionally allows you to select one control in a group to be used as a ‘reference’ control.

The ‘Reference Control’

When there is no reference control, any alignment button on the Layout bar will align the selected group to the extreme edges of the group. For example, if you have buttons A, B and C selected and button A is the leftmost, when you click ‘Align Lefts’, all three buttons will be aligned to the left edge of button A.

When a reference control is selected, any alignment button on the Layout bar will align the selected group to the edge of the reference control. For example, if you have buttons A, B and C selected, button A is the leftmost but button B is the reference control, when you click ‘Align Lefts’, all three buttons will be aligned to the left edge of button B.

By default, when you select controls with the rubber band, none is designated as the ‘reference control’ and all selected controls are outlined in grey. If you want one to be treated as the reference control then you just have to click that control with the mouse. Its selection border will now be shown in black.

If you select controls by Control-clicking, then the most recently selected control will be used as the reference control and its border will be shown in black.

Reference controls are explained more fully in the screencast.

Buttons On The Amethyst Layout Bar

These are the buttons available on the Amethyst Layout bar:
 Align To Grid
 Align Lefts
 Align Rights
 Align Tops
 Align Bottoms
 Align Centers (requires ‘reference’ control)
 Align Middles (requires ‘reference’ control)
 Make Same Width (requires ‘reference’ control)
 Make Same Height (requires ‘reference’ control)
 Make Same Size (requires ‘reference’ control)
 Size To Grid
 Make Horizontal Spacing Equal
 Remove Horizontal Spacing
 Make Vertical Spacing Equal
 Remove Vertical Spacing
 Bring To Front
 Send To Back

Making The Alignment Bar Visible

To make the Amethyst Layout Bar visible, right-click the menu or toolbar area at the top of the Visual Studio workspace and ensure that ‘Amethyst Layout’ is checked.

More Information

 Note that the available functions on the Amethyst Layout bar may be extended in future betas leading towards the final release of the Amethyst IDE for Flex.

 In beta 1, the Z-Order functions (bring to front/send to back) are not synchronized with the underlying MXML code. These features will be synchronized in future betas.

For more details of the Amethyst Designer see:
 Amethyst Beta 6: Adobe Flex Visual Design IDE (Overview)
 Snap Flex Controls To Grid (using grid-layout)
 Flex Visual Design With Amethyst (introductory screencast)