the blog
Back to -Blog

Adobe Flex Visual Design Integration

Making It Seamless
by Huw Collingbourne
Saturday 11 July 2009.

Our next major beta of Amethyst will include the first public release of the Amethyst visual design environment (though we may release another minor or ‘interim’ build prior to that). We first showed a demo of the Amethyst Designer back in January. So you may wonder why we didn’t push out a beta with the Designer before now...

There are two reasons. First, it has always been our habit to release betas in well-defined increments. Creating a professional quality Visual Studio IDE is an immensely complex task and it has been our experience that ‘slow and steady’ development is the best way forward. That is the way we developed Ruby In Steel (our Ruby On Rails IDE) and it’s the way we’ve developed Amethyst (our Adobe Flex/Flash IDE).

But there is another reason - in a word: integration.

When you select controls in the Amethyst Designer you can click the Visual Studio Layout Toolbar to resize or align them

There is more - much more - to creating a visual Flex designer for Visual Studio than just creating the design environment itself. To be really ‘at home’ in Visual Studio, the Amethyst Designer has to be fully integrated with all the other features of Visual Studio. It has to provide ‘round tripping’ with the code editor so that changes made in the designer cause the underlying MXML formatting code to be rewritten; and, similarly, when changes are made in the code these should cause the visual design to be updated.

The Amethyst Designer has to work with the Properties and Events panels too; in addition, the user should be able to click buttons in the alignment toolbar in order to size and align controls; and it should be possible to use Visual Studio to set Designer options such as grid-size and ‘snap to grid’; undo/redo should work in both the Designer and the code editor and changes need to be synchronized between the two - and so on...

Implementing all these features in the standard Visual Studio form designer is tricky enough. But doing it in a Flash-based designer is a different order of complexity.

Visual Studio’s options are set globally in a multi-page dialog available from the Tools menu. For us, the complicated bit was getting those options sent through to the integrated Amethyst Designer (which is, remember, a Flash-based application, rather than a ‘native’ Visual Studio tool) and update the Designer with the user-selected defaults.

We decided very early on that the Amethyst Designer would itself be a Flex application. In many respects it would have been much easier to have created a designer based on Visual Studio’s WinForms or WPF Designers. Support for those is already built into Visual Studio and we could have ‘hooked into’ those designers relatively easily. But the end result would have been unsatisfactory. Implemented in this way the designer would, at best, have provided only an approximation of the runtime application. By programming the Amethyst Designer using Flex itself we have been able to ensure that the design-time appearance is an exact representation of the runtime appearance.

But this has inevitably created huge problems for us when it comes to making the Designer integrate seamlessly with the code editor and all the other elements of the Visual Studio environment. To date we have implemented integration with the code editor (round tripping) with the ToolBox (drag-and-drop control creation) with the Properties and Events panels and with the toolbars (alignment etc). Designer properties can be set using the global Tools/Options property pages and undo/redo operates across both the designer and the code editor.

We’ve integrated the Visual Studio Properties panel so that you can set properties which immediately change the appearance of the selected control in the Amethyst Designer and you can click events to auto-create an appropriate event-handling method in the code editor.

We are also working on Visual Studio-style event-handling in the Designer. The default behaviour of mouse clicks, for example, is quite different in Visual Studio than in Adobe’s Flex Builder. In Flex Builder, if you double-click a button the button’s label is put into edit mode. In the C# WinForms designer when you double-click a button your cursor is placed over the default ‘button click’ event-handler in the code editor; if no event-handler exists, one is created. Since Amethyst is designed for Visual Studio users, we decided to follow the C# standards. That has created a lot of work for us, I can tell you! But, in order to make Amethyst behave as a truly ‘native’ VS environment, we believe it has to make no compromises. If that’s the way Microsoft’s language products work, then that’s the way Amethyst should work too.

Getting events such as mouse-clicks to work in the expected way is easier said than done. For example, right-click mouse menus such as this one (which is standard in Visual Studio) are not native features of Flex. We’ve had to do all kinds of dirty tricks to get them to work correctly.

Anyway, I hope that gives you a little insight into some of the ‘behind the scenes’ work that is involved in implementing the Amethyst Designer. Believe me, there’s a lot more to the Amethyst Designer than just the design!


The Beta Releases

Just as we have added features incrementally to the Amethyst code editor in betas throughout the year, we shall also add features incrementally to our betas of the Amethyst Designer. The first beta will incorporate only the ‘core functionality’ for designing Flex applications (drag-and-drop, move, size, delete, round-tripping between the Designer and code editor, handling properties end events, displaying grids, snapping to grid or alignment bars and so forth). Subsequent betas will add support for AIR, third party controls and a variety of other features. You can expect at least three betas of the Amethyst Designer (and possibly more) prior to the release of the finished product. The first public beta to include the Amethyst Designer will be available in a few weeks. Keep reading the Blog for the latest news...

Bookmark and Share   Keywords:  Amethyst  visual design
  • Adobe Flex Visual Design Integration
    13 July 2009, by Tony

    Hi, Will you be supporting states in the Visual Designer?

    • Adobe Flex Visual Design Integration
      13 July 2009, by Huw Collingbourne

      As I mentioned in a different thread, states will be supported but not in beta 1.

      best wishes

      Huw

© SapphireSteel Software 2014