the blog
Back to -Blog

Visual Flex Design and Coding

Preview of Amethyst Professional
by Huw Collingbourne
Monday 9 February 2009.

The current beta of Amethyst (our new Adobe Flex IDE for Visual Studio) contains many of the editing and project management features which will form part of the free ’Personal Edition’. Meanwhile, we are also working towards a commercial IDE, Amethyst Professional, which will have many more tools, not least of which will be the drag-and-drop Amethyst Designer.

Here I’d like to give you a quick look at the current ‘in development’ version of the Amethyst Designer. The screenshots below show how the visual designer integrates fully with Visual Studio including:

- drag and drop of Flex controls from the VS Toolbox
- Align and resize controls using the VS Alignment toolbar
- Integration with the VS Properties Panel
- Integration with the code editor to ‘round-trip’ between designing and coding.

Here (above) I’ve dropped some controls (a panel, a TextArea and four buttons) into the Amethyst Designer and I have auto-aligned them by ‘snapping to grid’. Then I selected the buttons and clicked an icon in the Alignment Toolbar to make them all the same size.

Using the Properties panel, I have changed the labels of the buttons and, using the mouse, I’ve resized them. This time, instead of snapping to grid, I am using the auto-align bars (the green lines in this picture) to help me to align their edges with the other controls.

Now I have selected a button and I have used the Properties panel to change its label once again. Each time I make a change to the properties of a control - whether by dragging it in the designer or by editing its properties in the Properties panel - those changes are simultaneously made in the underlying MXML formatting code.

To verify this I just switch to the code editor. As you can see, the labels which I entered into the Properties panel have been written into the MXML code for me. Now I decide to change the height and width values of the buttons by editing them in code. The changes made in the code (the new height: 28 and width: 100) will of, course, also affect the controls in the Designer.

Here I have switched back to the Amethyst Designer and, by looking at the values in the Properties panel, I can verify that the changes I made in the code really have been made to the visual controls too. Now I am ready to run and debug my application...

... but that’s another story!

Bookmark and Share   Keywords:  Amethyst  visual design
© SapphireSteel Software 2014