« Flash Player 10.1 on Google’s Nexus One Phone | Main | Flash Player 10.1 Coming to webOS in February »
F3 v. F4: Boxes v Groups
| By Rich Tretola | January 6, 2010 | |
| 6,533 views |
Layouts are something that has changed a lot with Flex 4. There are several ways to accomplish your layout. Here is a simple Flex 3 example where we wanted to horizontally layout two vertical groupings of Label and TextInput components.
1 2 3 4 5 6 7 8 9 10 | <mx:HBox horizontalCenter="0" verticalCenter="0"> <mx:VBox> <mx:Label text="First name:"/> <mx:TextInput /> </mx:VBox> <mx:VBox> <mx:Label text="Last name:"/> <mx:TextInput /> </mx:VBox> </mx:HBox> |
Here is the result:
In Flex 4 you would use the Group component with nested layout components to control the way in which the components are drawn to the screen. Notice that in this example there are three group tags with Horizontal and Vertical layouts.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <s:Group horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Group> <s:layout> <s:VerticalLayout/> </s:layout> <s:Label text="First name:"/> <s:TextInput/> </s:Group> <s:Group> <s:layout> <s:VerticalLayout/> </s:layout> <s:Label text="Last name:"/> <s:TextInput/> </s:Group> </s:Group> |
Or Better yet as some commenters pointed out use VHGroup and VGroup:
1 2 3 4 5 6 7 8 9 10 | <s:HGroup horizontalCenter="0" verticalCenter="0"> <s:VGroup> <s:Label text="First name:"/> <s:TextInput/> </s:VGroup> <s:VGroup> <s:Label text="Last name:"/> <s:TextInput/> </s:VGroup> </s:HGroup> |
Here is the result:
Topics: Flex, Flex 3 (Moxie), Flex 4 | 12 Comments »
January 6th, 2010 at 8:08 am
Why didn’t you mention the shortcuts VGroup and HGroup?
Reply to this comment
Rich Tretola Reply:
January 6th, 2010 at 8:35 am
Just updated to include both examples, thanks for your feedback.
Reply to this comment
January 6th, 2010 at 8:09 am
You can also use shorter notation:
Also worth mentioning is that groups have a way better performance than Flex 3 boxes because they have no scrollbars etc. so the footprint is less heavy.
Reply to this comment
January 6th, 2010 at 8:10 am
Oh, looks like my XML didn’t made it but I wanted to point out the shortcuts as well.
Reply to this comment
January 6th, 2010 at 12:09 pm
[...] This post was mentioned on Twitter by Abraham Vázquez , ThoughtFaqtory. ThoughtFaqtory said: RT @richtretola: Blogged: F3 v. F4: Boxes v Groups http://bit.ly/4sdVGQ [...]
January 6th, 2010 at 4:32 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by richtretola: Blogged: F3 v. F4: Boxes v Groups http://bit.ly/4sdVGQ...
January 7th, 2010 at 5:03 pm
Try centering controls both horizontally and vertically in Flex 4 and the code gets very verbose quickly.
Reply to this comment
Steven Shongrunden Reply:
January 8th, 2010 at 4:05 pm
@Andrew Westberg – As of SDK build 4.0.0.13356 both major and minor axis alignment are now supported in VGroup/HGroup (like it was in halo) so you can easily center like so:
[s:VGroup horizontalAlign="center" verticalAlign="middle"]
[s:Button label="test" /]
[/s:VGroup]
(I used [] instead of less than and greater than in case the blog software eats them up)
Reply to this comment
Andrew Westberg Reply:
January 8th, 2010 at 6:43 pm
Beautiful! I may have to grab that build or later.
Reply to this comment
January 11th, 2010 at 10:58 am
[...] Related posts: F3 v. F4: Boxes v Groups [...]
March 4th, 2010 at 10:23 pm
that’s pretty funny to go full-circle and the result from the developer’s end is a name change.
mx:HBox to s:HGroup
why not simply change the prefix and call it like it is, an HBox.
Reply to this comment
Steven Shongrunden Reply:
March 5th, 2010 at 4:47 am
@jeff spicer – There are some major differences between Box and Group, for example:
1. Box has scrollbars built in, Group doesn’t
2. Group can swap different layouts on the fly, Box can’t
3. Setting the background color is different between Group and Box
4. Clipping is enabled by default in Box, but not in Group
This thread has some more details:
http://forums.adobe.com/message/2603077
Reply to this comment