Blog
Amethyst Beta 6: Adobe Flex Visual Design IDE
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
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.
-
-
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.
-
-
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.
-
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?
Dermot
-
Can you check the screencast I recorded here:
http://www.sapphiresteel.com/static/movies/amethyst-designer-quick-start/amethyst-designer.html
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).
-
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.
-
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:
http://www.sapphiresteel.com/spip.php?page=contacts
We will then be able to go through this will you in detail until we find and fix this.
-
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.
-
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
Huw
-
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.
-
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.
-
-
-
-
-
-
-