Using Layouts in Flex 4 Gumbo
If you have started working with Flex 4 you may have gotten frustrated by the problems with layouts. At first glance I thought there was something wrong, I placed it as a work in progress bug and moved on. But then I started looking at the actual error I was presented with when I used layout=”Vertical”
“Initializer for ‘layout’: values of type flex.layout.LayoutBase cannot be represented in text.”
So I thought about it for a minute, and realizing that the layout tools have been re-factored to allow for new types of layouts beyond the standard three (Vertical, Horizontal, Absolute), I thought maybe it wanted a reference to a class. So I set the layout value equal to “{flex.layout.VerticalLayout}” knowing that was the package path to the vertical layout class. Which got me the following error:
“1067: Implicit coercion of a value of type Class to an unrelated type flex.layout:LayoutBase.”
This made me feel like I was getting closer. But I was passing a class and it really wanted an object. So then i sent in a new instance of VerticalLayout using layout=”{new flex.layout.VerticalLayout()}” And finally I had success!
The layout property of the ItemsComponent object ( which Application and Group are sub-classed) expects and Object. A real instantiated object with properties and all. So knowing that little tid be we have 2 options at this point. We can declare the layout using the ActionScript I described above, or we can use a nested node attribute.
I have provided an example of both below. The Application tag uses the ActionScript implementation and the Group element uses the node attribute method.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?xml version="1.0" encoding="utf-8"?> <Application layout="{new mx.layout.VerticalLayout()}" xmlns="http://ns.adobe.com/mxml/2009" > <Declarations> <SolidColorStroke id="redStroke" color="0xFF0000" /> <SolidColor id="whiteFill" color="0xFFFFFF" /> <SolidColor id="blackFill" color="0x000000" /> </Declarations> <Group> <layout> <HorizontalLayout /> </layout> <Rect width="200" height="50" stroke="{redStroke}" fill="{whiteFill}" /> <Rect width="200" height="50" stroke="{redStroke}" fill="{whiteFill}" /> </Group> <Group> <layout> <HorizontalLayout /> </layout> <Rect width="200" height="50" stroke="{redStroke}" fill="{blackFill}" /> <Rect width="200" height="50" stroke="{redStroke}" fill="{blackFill}" /> </Group> </Application> |
So that is the trick with working with layouts in Flex 4 Gumbo. Go forth and play your heart out. And if you ware wondering what the Declarations tag is then tune in again soon for my post on the new language namespace changes in gumbo and how to assemble your components.
I hope this “feature” gets change before this goes gold. That will cause quite a few backwards compatibility issues with my old code. I’m also not quite sure of the benefits this adds to the layout. Seems to be an unusual thing to change.
Hey Gareth,
These changes only apply the the code in gumbo. Any of your flex 3 code will still compile just the way it is when using the http://www.adobe.com/2006/mxml namespace.
So its only when integrating the new gumbo components that this is a concern at all. Backwards compatibility with flex 3 is preserved.
why not hgroup or vgroup?
Hey Christoff,
There are actually 2 reasons that I did not use the hgroup and vgroup controls. The first one was that when I wrote this example the had not been added to the framework yet. The second is that I wanted to illustrate how the layout placement and measurement has been removed from the container itself. This is great for us because we can now use the standard containers and write our own layouters. Containers with effects like the 3d carousel and cover-flow are now just a matter of writing a layouter not a whole new control.
But yes, if you needed to use a container which had a fixed layout (would not need to change in your application) then hgroup and vgroup would work great.