Adobe Flex Visual Design Integration

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.

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.

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

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