the blog
Back to -Blog

Faster Flex Layout in Amethyst

Customize the Grid ’on the fly’
by Huw Collingbourne
Monday 16 November 2009.

Here’s a sneak peak at some of the things we’re experimenting with in the current ‘in house’ development version of Amethyst, our new Visual Studio IDE for The Flash Platform.

The Amethyst Designer gives you the option of laying out your user interface by aligning controls either to a ‘grid’ or by using interactive alignment bars. For a backgrounder on this, see Visual Flex Component Layout and Snap Flex Controls To Grid.

The Amethyst designer lets you customize the grid size and display (solid or dotted) and you can choose to snap to grid or snap to interactive alignment bars.

A snap to grid capability is built into the standard Windows Form Designer - the one provided with Microsoft’s own C# and VB languages. While this works fine, I must say that I’ve always found it slightly annoying that in order to customize the grid you have to go through an awful lot of steps: first you must load the Tools, Options dialog, then navigate to the Windows Form Designer pane, make some changes (say, by altering the grid size or turning ‘Snap To Grid’ on or off), then you click OK to close the dialog and finally you have to close down the form design you are working on and then re-open it in order for the new grid settings to be applied.

In the current beta of Amethyst, you have to go through a similarly long-winded process to make changes to the Amethyst Designer’s grid. I’ve never liked this. It seems to me that when you are designing a user interface you want to customize the grid quickly - turn it on one moment and off the next, turn snapping on and off or change the grid size quickly: use big cells for aligning big controls such as canvases and small cells for aligning small controls such as checkboxes.

The drop-down additions to the Amethyst Layout Bar will make it possible to make changes to the grid almost instantly.

In our next beta, you’ll be able to make these changes just by clicking drop-down combos in the Amethyst Layout toolbar. You’ll be able to select from a set of standard grid sizes or revert to the custom (‘default’) size which you set globally. You’ll be able to turn the grid on or off and enable or disable snapping. All these options will be applied instantly so you won’t have to navigate through any dialogs or close down and re-open the design you are working on.

We have a few more time-saving ideas that we want to incorporate into the Designer later on. As always, you will be able to read about them first here on the Blog...

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