Flex中通过设置direction属性改变FormItem容器中项目方向（direction）的例子

By Minidxer | March 19, 2008

下面的例子展示了如何通过设置direction属性为“horizontal”或“vertical”，改变FormItem容器中项目方向（direction）。

下面是具体的源代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         FormItem {
  9.             labelStyleName: myFormItemLabelStyleName;
  10.         }
  11.  
  12.         .myFormItemLabelStyleName {
  13.             fontWeight: bold;
  14.         }
  15.     </mx:Style>
  16.  
  17.     <mx:Form id="form">
  18.         <mx:FormItem label="horizontal:"
  19.                 direction="horizontal">
  20.             <mx:Image source="{Icons.AIR_ICON}"
  21.                     toolTip="Adobe AIR" />
  22.             <mx:Image source="{Icons.FLASH_ICON}"
  23.                     toolTip="Adobe Flash" />
  24.             <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
  25.                     toolTip="Adobe Flash Player" />
  26.             <mx:Image source="{Icons.FLEX_ICON}"
  27.                     toolTip="Adobe Flex" />
  28.         </mx:FormItem>
  29.         <mx:FormItem label="vertical:"
  30.                 direction="vertical">
  31.             <mx:Image source="{Icons.AIR_ICON}"
  32.                     toolTip="Adobe AIR" />
  33.             <mx:Image source="{Icons.FLASH_ICON}"
  34.                     toolTip="Adobe Flash" />
  35.             <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
  36.                     toolTip="Adobe Flash Player" />
  37.             <mx:Image source="{Icons.FLEX_ICON}"
  38.                     toolTip="Adobe Flex" />
  39.         </mx:FormItem>
  40.     </mx:Form>
  41.  
  42. </mx:Application>
下面是Icons类代码：
Download: Icons.as
  1. package {
  2.     [Bindable]
  3.     public class Icons {
  4.         public function Icons() {
  5.         }
  6.  
  7.         [Embed("assets/air_appicon-tn.gif")]
  8.         public static var AIR_ICON:Class;
  9.  
  10.         [Embed("assets/fl_appicon-tn.gif")]
  11.         public static var FLASH_ICON:Class;
  12.  
  13.         [Embed("assets/fl_player_appicon-tn.gif")]
  14.         public static var FLASH_PLAYER_ICON:Class;
  15.  
  16.         [Embed("assets/fx_appicon-tn.gif")]
  17.         public static var FLEX_ICON:Class;
  18.     }
  19. }
原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | Tags: , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads