the blog
Back to -Blog

Amethyst Beta 6: Adobe Flex Visual Design IDE

The first Amethyst beta to include our drag-and-drop Flex application designer
by Huw Collingbourne
Tuesday 1 September 2009.

SapphireSteel Software today released beta 6 of the Amethyst Flex IDE for Visual Studio. This beta includes the first public beta of the integrated Amethyst Designer - a drag-and-drop design tool for creating Flex applications.

NOTE: This tutorial is based on an older version of Amethyst (beta 6) and many new features have been added since this was written. Be sure to go to The Forum and The Blog for the latest information.

- 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

Here three buttons are selected and the bottom right button has been clicked to make it the ‘reference’ control

When the ‘Make Same Size’ icon is clicked, all the selected controls are resized to the dimensions of the 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).

Here I select a button and double-click its ‘click’ event....

This automatically creates an empty event-handler for the button (both the MXML and ActionScript are auto-generated) and I can now use the features of the Amethyst editor to write the code of the event-handler method.

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.

Here we are using both the grid (dotted) and the alignment bars (the green lines) to help align controls in the Designer.

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.


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


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.

- 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.

Bookmark and Share   Keywords:  Amethyst  news  visual design
  • Amethyst Beta 6: Adobe Flex Visual Design IDE
    14 September 2009

    Is it possible to publish projects?

    • Amethyst Beta 6: Adobe Flex Visual Design IDE
      15 September 2009, by Huw Collingbourne

      Amethyst uses the Visual Studio Build mechanism with Configuration Dependent (i.e. named) Builds so that you can have separate builds of your application for debugging, testing, release etc. A little background on this is given HERE. I’ll write a longer tutorial shortly.

      Essentially this lets you have different propeerties for debugging and release. When you build a release version the output is stored in the release directory and that would normally be the ’published’ version.

  • Amethyst Beta 6: Adobe Flex Visual Design IDE
    4 September 2009, by Titohawk18

    Nice! As a .NET/Flex developer I think this will be a great product. However, I downloaded beta 6 to check it out and it would seem that the "click" event has been left out of the events tab and the intellisense for the Button control. Was this by design for the beta or am I missing something? Other than that it looks great so far.

    • Amethyst Beta 6: Adobe Flex Visual Design IDE
      4 September 2009, by Dermot Hogan

      The click event should be there.

      I’ve just created a button, selected it and displayed the Properties pane(F4). If I select the Events icon in that window (the lightning bolt), I can see all the events in alphabetical order - ’click’ is one of them.

      Are you seeing any events in the Properties pane? Also, if you double click on the button you’ve created, you should get auto generated ActionScript. Do you get that?


    • Amethyst Beta 6: Adobe Flex Visual Design IDE
      4 September 2009, by Huw Collingbourne

      Can you check the screencast I recorded here:

      When you select a button you should see the click event listed in the Events panel (see, for example, the screencast at time 03:59).

      • Amethyst Beta 6: Adobe Flex Visual Design IDE
        9 September 2009, by Titohawk18

        Thanks for the reply. Yes I watched the screencast before I downloaded the beta and saw the click event in the video. I’m not exactly sure what the issue is. I know where the events are in Visual Studio and I have sorted them alphabetically and by category and I still do not find the click event. Also I have tried double clicking the button in design mode to add an event handler and nothing happens. Then I tried going into the code view to see if I could find the event in the intellisense in the button tag and it’s not there for me. I’m using Visual Studio 2008 Professional Edition. I will try to re-install and see if I have any luck. Thanks.

        • Amethyst Beta 6: Adobe Flex Visual Design IDE
          9 September 2009, by Huw Collingbourne

          We are baffled by this. The Event information is deduced from the meta data in swf files and if a click event is there we should have it in the Events panel. I’ve never seen it missing and can’t immediately think of any reason for its absence. Is there anything unusual about your installation? I mean, can I assume that you are using all the default software we assume (e.g. Flex 3, Flash Debug version 10 etc.)? If not, can you let us know.

          Can you also look at the References node of your project in Solution Explorer. Which items are listed there (there should be some Flex libraries) and are any of these marked with a "!" to indicate an error?

          If we can’t find a quick solution to this I’d be grateful if you would make contact with support via the email link on this page:

          We will then be able to go through this will you in detail until we find and fix this.

          • Amethyst Beta 6: Adobe Flex Visual Design IDE
            9 September 2009, by Titohawk18

            Thanks again for the quick reply. My Flash player version is WIN 10,0,22,87 and it is a debug Flash Player. However, I do have one interesting thing in the references. The reference to playerglobal is flagged with an exclamation. There are really no properties when I click on the reference so I’m not exactly sure where this should be pointed. After a little looking around I also noticed that the Flex SDK Directory in the project properties was pointed to a version 2.0 SDK that was left over from my upgrade from Flex Builder 2 to 3. I re-pointed this property to C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0 but I still have no click event and I still have the flagged reference for playerglobal. The whole thing baffles me as well because other default events show up such as change and CreationComplete. I’m now downloading the stand alone Flex 3.4 SDK and I’m going to try to point to that. Thanks.

            • Amethyst Beta 6: Adobe Flex Visual Design IDE
              9 September 2009, by Huw Collingbourne

              The first thing I’d suggest is that you delete the flagged reference and browse to add a new reference to playerglobal. We don’t support Flex 2 and currently only support Flex 3 (we will support Flex 4, though). I’d be interested to know if your click problem is corrected once you point to the Flex 3 SDK and browse to add a ref to playerglobal. You should also have references to framework and flex (all swc files). If not, you will need to browse to those too. Once you’ve set the Flex 3 SDK path correctly (in Tools, Options, Amethyst) the required references should be correctly added to new projects.

              You can also browse the available events and methods using the Object Browser (from the View menu). Navigate to the Flex class (e.g. framework->mx.controls->Button) and see what it displays. You need to expand the nodes until to get to the Base class, InteractiveObject. You should see a click there.

              best wishes


              • Amethyst Beta 6: Adobe Flex Visual Design IDE
                9 September 2009, by Titohawk18

                Got it! The issue was the reference to the playerglobal file. This reference was still pointed to the 2.0 sdk. Once I adjusted added the reference to the correct library and restarted the IDE the click event was there. Everything seems to be fine now. Thanks very much for your help Huw I think this is going to be a great product.

                • Amethyst Beta 6: Adobe Flex Visual Design IDE
                  9 September 2009, by Huw Collingbourne

                  Thanks for the positive comments! :-)

                  I’m glad we fixed your problem. However, it seems to me that we should be able to provide better diagnostics so that, if this sort of thing happens, the user gets an explanatory message of some sort. I’ll enter this as a task in our development tracking system. With luck we may be able to do better in the next beta.

  • Amethyst Beta 6: Adobe Flex Visual Design IDE
    1 September 2009, by Constructor

    Awesome work! I have been waiting and checking back for this for a while now. I am glad it has arrived and look forward to the future developments of it.

© SapphireSteel Software 2014