The following example shows how you can change the direction of a FormItem container in Flex by setting thedirection
property to “horizontal” or “vertical”.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> FormItem { labelStyleName: myFormItemLabelStyleName; } .myFormItemLabelStyleName { fontWeight: bold; } </mx:Style> <mx:Form id="form"> <mx:FormItem label="horizontal:" direction="horizontal"> <mx:Image source="{Icons.AIR_ICON}" toolTip="Adobe AIR" /> <mx:Image source="{Icons.FLASH_ICON}" toolTip="Adobe Flash" /> <mx:Image source="{Icons.FLASH_PLAYER_ICON}" toolTip="Adobe Flash Player" /> <mx:Image source="{Icons.FLEX_ICON}" toolTip="Adobe Flex" /> </mx:FormItem> <mx:FormItem label="vertical:" direction="vertical"> <mx:Image source="{Icons.AIR_ICON}" toolTip="Adobe AIR" /> <mx:Image source="{Icons.FLASH_ICON}" toolTip="Adobe Flash" /> <mx:Image source="{Icons.FLASH_PLAYER_ICON}" toolTip="Adobe Flash Player" /> <mx:Image source="{Icons.FLEX_ICON}" toolTip="Adobe Flex" /> </mx:FormItem> </mx:Form> </mx:Application>
/** http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ */ package { [Bindable] public class Icons { public function Icons() { } [Embed("assets/air_appicon-tn.gif")] public static var AIR_ICON:Class; [Embed("assets/fl_appicon-tn.gif")] public static var FLASH_ICON:Class; [Embed("assets/fl_player_appicon-tn.gif")] public static var FLASH_PLAYER_ICON:Class; [Embed("assets/fx_appicon-tn.gif")] public static var FLEX_ICON:Class; } }
View source is enabled in the following example.