Flex里改变DividedBox容器的分割图标

在Flex里HDividedBox与VDividedBox都是DividedBox的子容器，所以我们可以分别自定义设置水平分栏与垂直分栏上的图标(注:鼠标移上去时的图标)，通过horizontalDividerCursor或者verticalDividerCursor属性指定嵌入的图标文件。下面代码中分别以多种方式实现，效果是一样的

DividedBox.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3.     preloader="com.preload.PreLoad" backgroundColor="0x414141"
4.     layout="horizontal" horizontalAlign="center" >
5. <!--上面preload属性与下面外部CSS可以删除它-->
6.     <mx:Style source="flex/yfskin/yflexskin.css"/>
7.  
8.     <mx:VDividedBox id="vDividedBox"
9.         verticalDividerCursor="@Embed('image/arrow_v.png')"
10.         width="50%"
11.         height="100%">
12.         <mx:HBox backgroundColor="halogreen"
13.             width="100%"
14.             height="100%">
15.         </mx:HBox>
16.         <mx:HBox backgroundColor="haloblue"
17.             width="100%"
18.             height="100%">
19.         </mx:HBox>
20.     </mx:VDividedBox>
21.    
22.     <mx:HDividedBox 
23.         horizontalDividerCursor="@Embed('image/arrow_h.png')"
24.         width="50%"
25.         height="100%">
26.         <mx:HBox backgroundColor="haloorange" width="100%" height="100%"></mx:HBox>
27.         <mx:HBox backgroundColor="purple" width="100%" height="100%"></mx:HBox>
28.     </mx:HDividedBox>
29. </mx:Application>

Style样式

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3.     preloader="com.preload.PreLoad" backgroundColor="0x414141"
4.     layout="horizontal" horizontalAlign="center" >
5. <!--上面preload属性与下面外部CSS可以删除它-->
6.     <mx:Style source="flex/yfskin/yflexskin.css"/>
7.  
8.     <mx:Style>
9.         VDivideBox,HDivideBox {
10.             verticalDividerCusor: Embed("image/arrow_v.png");
11.             horizontalDividerCursor: Embed("image/arrow_h.png");
12.         }
13.     </mx:Style>
14.     <mx:VDividedBox id="vDividedBox" width="50%" height="100%">
15.         <mx:HBox width="100%" height="100%" backgroundColor="halogreen">
16.         </mx:HBox>
17.         <mx:HBox width="100%" height="100%" backgroundColor="haloblue">
18.         </mx:HBox>
19.     </mx:VDividedBox>
20.    
21.     <mx:HDividedBox width="50%" height="100%">
22.         <mx:HBox width="100%" height="100%" backgroundColor="haloorange">
23.         </mx:HBox>
24.         <mx:HBox width="100%" height="100%" backgroundColor="purple">
25.         </mx:HBox>
26.     </mx:HDividedBox>
27. </mx:Application>

结合actionscript方式

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3.     preloader="com.preload.PreLoad" backgroundColor="0x414141"
4.     layout="horizontal" horizontalAlign="center">
5. <!--上面preload属性与下面外部CSS可以删除它-->
6.     <mx:Style source="flex/yfskin/yflexskin.css"/>
7.  
8.     <mx:Script>
9.         <![CDATA[
10.             [Embed("image/arrow_v.png")]
11.             private const VArrowIcon:Class;
12.            
13.             [Embed("image/arrow_h.png")]
14.             private const HArrowIcon:Class;
15.            
16.             private function vDividerIcon():void
17.             {
18.                 vDividedBox.setStyle("verticalDividerCursor", VArrowIcon);
19.             }
20.            
21.             private function hDividerIcon():void
22.             {
23.                 hDividedBox.setStyle("horizontalDividerCursor", HArrowIcon);
24.             }
25.         ]]>
26.     </mx:Script>
27.     <mx:VDividedBox id="vDividedBox" width="50%" height="100%" initialize="vDividerIcon();">
28.         <mx:HBox width="100%" height="100%" backgroundColor="halogreen">
29.         </mx:HBox>
30.         <mx:HBox width="100%" height="100%" backgroundColor="haloblue">
31.         </mx:HBox>
32.     </mx:VDividedBox>
33.    
34.     <mx:HDividedBox id="hDividedBox" width="50%" height="100%" initialize="hDividerIcon();">
35.         <mx:HBox width="100%" height="100%" backgroundColor="haloorange">
36.         </mx:HBox>
37.         <mx:HBox width="100%" height="100%" backgroundColor="purple">
38.         </mx:HBox>
39.     </mx:HDividedBox>
40. </mx:Application>

纯actionscript方式

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3.     preloader="com.preload.PreLoad" backgroundColor="0x414141"
4.     layout="horizontal" horizontalAlign="center" initialize="init();">
5. <!--上面preload属性与下面外部CSS可以删除它-->
6.     <mx:Style source="flex/yfskin/yflexskin.css"/>
7.  
8.     <mx:Script>
9.         <![CDATA[
10.             import mx.containers.HBox;
11.             import mx.containers.VBox;
12.             import mx.containers.VDividedBox;
13.             import mx.containers.HDividedBox;
14.            
15.             [Embed("image/arrow_v.png")]
16.             private const VArrowIcon:Class;
17.            
18.             [Embed("image/arrow_h.png")]
19.             private const HArrowIcon:Class;
20.            
21.             private var vDividedBox:VDividedBox;
22.             private var hDividedBox:HDividedBox;
23.             private var hBox1:HBox;
24.             private var vBox1:VBox;
25.             private var hBox2:HBox;
26.             private var vBox2:VBox;
27.            
28.             private function init():void
29.             {
30.                 //定义四个Box
31.                 hBox1 = new HBox;
32.                 hBox1.percentWidth = 100;
33.                 hBox1.percentHeight = 100;
34.                 hBox1.setStyle("backgroundColor", "halogreen");
35.                
36.                 vBox1 = new VBox;
37.                 vBox1.percentWidth = 100;
38.                 vBox1.percentHeight = 100;
39.                 vBox1.setStyle("backgroundColor", "haloblue");
40.                
41.                 hBox2 = new HBox;
42.                 hBox2.percentWidth = 100;
43.                 hBox2.percentHeight = 100;
44.                 hBox2.setStyle("backgroundColor", "haloorange");
45.                
46.                 vBox2 = new VBox;
47.                 vBox2.percentWidth = 100;
48.                 vBox2.percentHeight = 100;
49.                 vBox2.setStyle("backgroundColor", "purple");
50.                 //垂直Divided
51.                 vDividedBox = new VDividedBox();
52.                 vDividedBox.percentWidth = 50;
53.                 vDividedBox.percentHeight = 100;
54.                 vDividedBox.addChild(hBox1);
55.                 vDividedBox.addChild(vBox1);
56.                 vDividedBox.setStyle("verticalDividerCursor", VArrowIcon);
57.                 addChild(vDividedBox);   
58.                 //水平Divided
59.                 hDividedBox = new HDividedBox();
60.                 hDividedBox.percentWidth = 50;
61.                 hDividedBox.percentHeight = 100;
62.                 hDividedBox.addChild(hBox2);
63.                 hDividedBox.addChild(vBox2);
64.                 hDividedBox.setStyle("horizontalDividerCursor", HArrowIcon);
65.                 addChild(hDividedBox);
66.             }
67.         ]]>
68.     </mx:Script>
69. </mx:Application>