Flex Layout Vs Java Layout - First impressions

At work I was asked to take a look at Flex. I know a lot of people point to Flex as something Java should aspire to. With that in mind I had high hopes for the Flex environment giving me something revolutionary to work with. The first thing I did was throw some components on the screen and try to do some layout work. What I found was radically.. simple? At first I sort of glided through the layout process, sticking controls all over the place.

I quickly realised that by default the application area uses an absolute layout. That means the x and y coordinates and the height and width or each component is saved in the MXML file. I was shocked. Really. This is akin to using Null layout in Java, which is considered bad practice. Actually absolute layout is more powerful then Null layout. In absolute layout you can specify width and height in percentages of space left of the parent component. So if I place a TextArea at 30,30 and give it a width of 100% then starting at the X value 30 it will expand and fill all remaining horizontal space.

Also a component can be constrained or anchored a specific distance away from the edge of the screen. When the screen is resized the component gets bigger in order to keep the "constrained area" in the same place. It reminds me of the idea of anchoring a component in C#.

After my initial shock at absolute layout I investigated a number of other layouts available from the IDE. I discovered that the Java definition of a layout is much more narrow then the Flex definition. For this article I'm going to stick to the Java definition and only include Flex Components who's only functionality is controlling the position of other components on the screen.

• HBox and VBox
• Grid
• Tile
• Form

*Box - The HBox and VBox layouts work very much like BoxLayout or FlowLayout from Swing. There were no real surprises, items were arranged either horizontally or vertically. Items were given a reasonable default space and a reasonable default gap. It was nice to be able to specify the horizontal and vertical alignment of items inside the box. That something you can't do with BoxLayout, but can do with FlowLayout.

Grid - The closest core Java layout to Flex's Grid is GridBagLayout. A Grid has the rows and columns. A component can take up one or more rows or columns, much like GridBagLayout. Components added to the Grid use their default size when placed but this can be overridden to a pixel amount or a percentage of the size of the cell in the Grid. As a side note I was unable to get a component to actually span mltiple columns in the GUI editor. There may just be a trick I do not know about.

Tile - Tile is sort of like a cross between FlowLayout and GridLayout. Like GridLayout all components have the same size. Like FlowLayout it can "wrap" to a new row when it runs out of space. It ends up working a lot like a JList with horizontal wrap.

Form - Form was interesting. It lines up a single column of label-component pairs. If you add multiple components to a FormItem they stack vertically on the right hand side. Before I learned how to use GridBagLayout I wrote a layout manger very similar to this called a "ColumnPairLayout". Form had added functionality besides arranging componets on the screen, but it was interesting enough to mention here anyways.

By far the most powerful layout in Flex is absolute layout. I found no equivalent to MigLayout, PageLayout or GroupLayout. Creating GUIs consist of nesting components with different layout rules. This isn't very different from Swing. Most of us know the reason hard coded pixel sizes and locations is frowned upon Java. In Java there is no guarantee that font and component sizes will be the same at design time as run time. Loading a different look and feel, or a specific platforms font settings can significantly change the size requirements for any given component. This can lead to the what I used to call the "Visual Basic effect". In the old days of VB it was common to create a dialog that was not realizable and line up all the components pixel by pixel. The problems was if you turned on "large fonts" programs like this would be almost unreadable as the label would be so large that it was covered by the control it was next to. My guess, (and since I'm not an expert on Flex it is only a guess), it that Flex has no concept of a plugable look and feel. The designer is guaranteed that what is created is exactly what is displayed. If this is true then exact pixel locations are not a problem, and absolute layout is a nice enought solution for WYSIWYG layout design.

In the end I saw nothing revolutionary about laying out controls in Flex. Certainly there were aspects I liked. What I saw though was a small focused set of useful tools for layout design in a controlled environment. You can achieve the same kind of controlled environment in Java by making an absolute decisions about font selection, font sizes and look and feel for an application. This is not typically what is done in Java and so it requires more advanced layout managers and a more complicated layout process. Maybe a controlled Java environment would free things up to be less complicated?