Amethyst Beta 6: Adobe Flex Visual Design IDE

 Go To Amethyst Beta Download Page
 View Screencast tutorial - Your First 5 Minutes with the Amethyst Designer

Principal Features Of The Amethyst Designer

 Drag and Drop components from the Visual Studio Toolbox onto the Designer
 Move and Resize components using the mouse
 Move components using keyboard arrow keys (or shift+arrow to move in larger increments)
 Delete selected components (Backspace key)
 Align components visually using auto-displayed alignment bars
 Align/snap components to grid (either to move or resize them)
 Amethyst Layout Toolbar with buttons to align/resize selected groups of controls
 Right-click Visual Studio mouse menu in the Amethyst Designer
 Drag components into and out of Containers
 Switch between Code Editor and Designer (buttons at bottom of Designer/Editor window)
 Multi-level Undo/Redo synchronized between Designer/Code Editor (default keys Ctrl+Z, Ctrl+Y)
 Options to customize appearance and behaviour of the Amethyst Designer
 Automate creation of event-handlers via Designer or Events panel
 Set properties of controls in the Designer using Properties panel

The Amethyst Layout Bar

You can click buttons on the Amethyst Layout Bar to auto-align, space and resize groups of selected Controls. 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.

These are the functions 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

Selecting Controls

Most of the functions on the Amethyst Layout bar operate on groups of selected controls. You can select controls in three ways:

1) Using the ‘Rubber Band’.

You can left-click an empty area of the application (somewhere that has no controls) and, keeping the mouse button down, scroll over controls to select them. The selected controls will be shown outlined with small rectangular ‘handles’ on each corner and side.

2) Clicking or Control-clicking

 Left click a control to select it. This deselects any other controls that were already selected.
 Control-clicking (press Ctrl when left-clicking) toggles the selection of a control - a control was unselected will be selected; a control that was selected will be selected.

3) Select All Controls

When the Designer is in focus, press CTRL+A or use the Edit/Select All menu option to select all controls.

 Using a ‘Reference’ Control

1) Functions that require a ‘Reference’ control

Some alignment functions require that a ‘main’ control be selected to act as a reference when other controls are aligned or resized. For example, a reference control will define the size to be used when you select ‘make same size’ and it defines the horizontal centre or vertical middle when you select ‘Align Centers’ or ‘Align Middles’.

2) Functions for which a ‘Reference’ control is optional

When you select multiple controls using the rubber band, no control is designated as the ‘main’ or ‘reference’ control and all are selected by grey boxes. If you click an Align option such as ‘Align Lefts’ or ‘Align Tops’ the controls will align to the extreme edge of the selected group - for example, the left-most or top-most edge of any selected control.

If you wish to designate a control to act as a reference control...

Just click your mouse onto one of the selected controls. Its selection box will now be drawn in black showing that this is the ‘reference’ control. Now when you click an Align or Size function, the other selected controls will align or resize themselves by reference to the designated ‘reference control’.

Creating An Event-Handler Method

You may create an event-handler method by double-clicking a named event for the selected control in the Events page of the Properties panel. Alternatively you may double-click a control to create en event handler for its default event (if it has one).

Setting Properties

You may alter properties for a selected control using the Visual Studio Properties panel. You may also click the Effects and Styles buttons (in the Properties panel) to add effects and styles to a control’s MXML definition.

Switching Between The Code Editor and the Designer

You may move between the editor and Designer using the ‘Code’ and ‘Design’ buttons at the bottom of the Amethyst workspace when an MXML file is loaded.

TIP: If you wish to move between the selected control in the Designer and its MXML definition in the editor, select ‘Go To MXML’ from the right-click mouse menu. When in the code editor, you can select a control in the designer by placing your cursor on its MXML definition and selecting ‘View Designer’ from the mouse menu.

Setting Options for the Amethyst Designer

You may tailor the appearance and behaviour of the Amethyst Designer by setting global options via the Tools menu. From this menu select, Options then select the Amethyst Designer page. Here you may set the background grid size (in the current beta we recommend a value of 10,10 or greater), its style (solid or dotted) and whether or not the grid should be shown.

You may also set options to ‘Snap to Alignment bars’ and ‘Snap to grid’. If ‘Snap to Alignment bars’ is selected, when you move or resize controls, green bars will appear in the Designer to indicate when the edges of the control align with any other controls in the design. The bars are slightly ‘sticky’ so they will tend to align with other controls when possible. If you select ‘Snap to grid’, the selected controls will align with the nearest grid lines on mouse-up.

The ‘Snap to Alignment bars’ and ‘Snap to Grid’ options are not mutually exclusive. In other words, you may, if you wish, simultaneously enable both options. If you do so, the alignment bars can be used as a visual indicator to show which, if any, controls are aligned with the selected control. However, the grid-snapping will take priority so if the control position is not quite aligned to the grid, it will be automatically aligned to the grid when you release the mouse button.

NOTE: If you make changes to global options for the Designer, you will need to close and reopen any MXML files that are currently open in Design or Edit mode in order for the changed options to be applied.

OTHER NEW FEATURES IN BETA 6

In addition to the Amethyst Designer, beta 6 also adds the following new features...

Refactoring (new features added)
 Extract Interface
 Promote Local Variable To Parameter
 Remove Parameters
 Reorder Parameters
 Class moving/Package renaming

Debugging (new features added)
 Conditional Breakpoints
 Break on Hitcount

LIMITATIONS OF THE AMETHYST DESIGNER BETA 1

The following are the principal limitations of the first beta of the Amethyst Designer.

 Navigators are not fully supported (you can create them using drag and drop but there are no editors to add or organize pages. In the current release, the behaviour of Navigators in the Amethyst Designer may be unpredictable)
 Some ‘composite’ controls such as DataGrids are not fully supported
 Visual design of AIR applications is not fully supported
 Visual design using third-party controls is not supported
 Visual design of Flex 4 applications is not supported
 Styles set in MXML (or selected from the Properties panel) are not shown in the Designer
 Performance declines when a small-scale grid is displayed in the Designer (we recommend that you use 10,10 or more)
 Scrolling the Designer using Middle Mouse Button may cause control selections to be incorrectly offset; workaround: use the scroll bars to scroll
 Delete key does not delete selected component(s); workaround: use Backspace key
 No cut/copy/paste of components

While you may ‘try out’ certain of the unsupported features listed above, the results may be unpredictable. Missing or incomplete features will be added and enhanced in future betas.

REQUIREMENTS:
 Visual Studio 2008; Amethyst cannot be installed into VS2005 or a VS Express edition
 Flex 3.x SDK
 Flash 10 For Internet Explorer is required for debugging.
 Java

More Information

For detailed information and tutorials on other features of Amethyst, see the articles in the Amethyst Section. For information on a broad scope of topics related to Amethyst, see the articles tagged with the ‘Amethyst’ keyword.