HDividedBox与VDividedBox的分隔条样式设定

Flex的HDividedBox与VDividedBox组件的分隔条样式比较单一，默认是三条横线或竖线（mx.skin.BoxDividerSkin类，包含在Assets.swf文件中），且不能设置分隔条的整体颜色。当然，可以通过设置样式dividerSkin改变那三条线的默认样式。不过看mx.containers.dividedBoxClasses.BoxDivider的代码，显示时对于横向与纵向分隔，只是简单地旋转dividerSkin，因此稍复杂一些的dividerSkin效果应该不会太好，很有必要设置两个dividerSkin，横向纵向各一个，专款专用。此外，可以考虑再给分隔条加一个背景皮肤。

　　接下来写需要的几个皮肤，分隔条背景皮肤是淡蓝色的渐变填充外加一个深蓝色边框，knob皮肤（替代dividerSkin的那个）是两排蓝白色小点。

　　1) 纵向分隔条背景皮肤：

1. package com.ccac.ibs.skins.common  
2. {  
3.       
4.     import flash.display.GradientType;  
5.     import flash.display.Graphics;  
6.     import flash.display.InterpolationMethod;  
7.     import flash.display.SpreadMethod;  
8.     import flash.geom.Matrix;  
9.       
10.     import mx.skins.ProgrammaticSkin;  
11.       
12.     public class IBSVBoxDividerSkin extends ProgrammaticSkin  
13.     {  
14.           
15.         public function IBSVBoxDividerSkin()  
16.         {  
17.             super();  
18.         }  
19.           
20.         override protected function updateDisplayList(w:Number, h:Number):void  
21.         {  
22.             var g:Graphics = graphics;  
23.             var matrix:Matrix = new Matrix();  
24.             if (isNaN(w) || isNaN(h))  
25.                 return;   
26.             g.clear();  
27.             g.lineStyle(1, 0x6593CF, 1);  
28.             g.beginFill(0xFFFFFF, 0);  
29.             g.drawRect(0, 0, w - 1, h - 1);  
30.             g.endFill();  
31.             matrix.createGradientBox(w - 2, h - 2, Math.PI / 2, 0, 0);  
32.             g.lineStyle(0, 0x000000, 0);  
33.             g.beginGradientFill(GradientType.LINEAR,   
34.                     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF],   
35.                     [1, 1, 1, 1, 1, 1],   
36.                     [0, 51, 102, 153, 204, 255],   
37.                     matrix,   
38.                     SpreadMethod.PAD,   
39.                     InterpolationMethod.LINEAR_RGB,   
40.                     0);  
41.             g.drawRect(1, 1, w - 2, h - 2);  
42.             g.endFill();  
43.         }  
44.           
45.     }  
46.       
47. }  

package com.ccac.ibs.skins.common
{
 
 import flash.display.GradientType;
 import flash.display.Graphics;
 import flash.display.InterpolationMethod;
 import flash.display.SpreadMethod;
 import flash.geom.Matrix;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSVBoxDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSVBoxDividerSkin()
  {
   super();
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = graphics;
   var matrix:Matrix = new Matrix();
   if (isNaN(w) || isNaN(h))
    return; 
   g.clear();
   g.lineStyle(1, 0x6593CF, 1);
   g.beginFill(0xFFFFFF, 0);
   g.drawRect(0, 0, w - 1, h - 1);
   g.endFill();
   matrix.createGradientBox(w - 2, h - 2, Math.PI / 2, 0, 0);
   g.lineStyle(0, 0x000000, 0);
   g.beginGradientFill(GradientType.LINEAR, 
     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF], 
     [1, 1, 1, 1, 1, 1], 
     [0, 51, 102, 153, 204, 255], 
     matrix, 
     SpreadMethod.PAD, 
     InterpolationMethod.LINEAR_RGB, 
     0);
   g.drawRect(1, 1, w - 2, h - 2);
   g.endFill();
  }
  
 }
 
}

　　2) 纵向分隔条knob皮肤：

1. package com.ccac.ibs.skins.common  
2. {  
3.       
4.     import flash.display.Graphics;  
5.       
6.     import mx.skins.ProgrammaticSkin;  
7.       
8.     public class IBSVDividerSkin extends ProgrammaticSkin  
9.     {  
10.           
11.         public function IBSVDividerSkin()  
12.         {  
13.             super();  
14.         }  
15.           
16.         override public function get measuredWidth():Number  
17.         {  
18.             return 23;  
19.         }  
20.           
21.         override public function get measuredHeight():Number  
22.         {  
23.             return 6;  
24.         }  
25.           
26.         override protected function updateDisplayList(w:Number, h:Number):void  
27.         {  
28.             var g:Graphics = this.graphics;  
29.             var i:int = 0;  
30.             g.clear();  
31.             g.lineStyle(0, 0x000000, 0);  
32.             g.beginFill(0x6593CF, 1);  
33.             for (i = 0; i < 5; i++)  
34.             {  
35.                 g.drawRect(2 + (i - 1) * 4, 2, 2, 2);  
36.             }  
37.             g.endFill();  
38.             g.beginFill(0xF9F9FB, 1);  
39.             for (i = 0; i < 5; i++)  
40.             {  
41.                 g.drawRect(3 + (i - 1) * 4, 3, 2, 2);  
42.             }  
43.             g.endFill();  
44.             g.beginFill(0xADD1FF, 1);  
45.             for (i = 0; i < 5; i++)  
46.             {  
47.                 g.drawRect(3 + (i - 1) * 4, 3, 1, 1);  
48.             }  
49.             g.endFill();  
50.         }  
51.           
52.     }  
53.       
54. }  

package com.ccac.ibs.skins.common
{
 
 import flash.display.Graphics;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSVDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSVDividerSkin()
  {
   super();
  }
  
  override public function get measuredWidth():Number
  {
   return 23;
  }
  
  override public function get measuredHeight():Number
  {
   return 6;
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = this.graphics;
   var i:int = 0;
   g.clear();
   g.lineStyle(0, 0x000000, 0);
   g.beginFill(0x6593CF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(2 + (i - 1) * 4, 2, 2, 2);
   }
   g.endFill();
   g.beginFill(0xF9F9FB, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3 + (i - 1) * 4, 3, 2, 2);
   }
   g.endFill();
   g.beginFill(0xADD1FF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3 + (i - 1) * 4, 3, 1, 1);
   }
   g.endFill();
  }
  
 }
 
}

　　3) 横向分隔条背景皮肤：

1. package com.ccac.ibs.skins.common  
2. {  
3.       
4.     import flash.display.GradientType;  
5.     import flash.display.Graphics;  
6.     import flash.display.InterpolationMethod;  
7.     import flash.display.SpreadMethod;  
8.     import flash.geom.Matrix;  
9.       
10.     import mx.skins.ProgrammaticSkin;  
11.       
12.     public class IBSHBoxDividerSkin extends ProgrammaticSkin  
13.     {  
14.           
15.         public function IBSHBoxDividerSkin()  
16.         {  
17.             super();  
18.         }  
19.           
20.         override protected function updateDisplayList(w:Number, h:Number):void  
21.         {  
22.             var g:Graphics = graphics;  
23.             var matrix:Matrix = new Matrix();  
24.             if (isNaN(w) || isNaN(h))  
25.                 return;   
26.             g.clear();  
27.             g.lineStyle(1, 0x6593CF, 1);  
28.             g.beginFill(0xFFFFFF, 0);  
29.             g.drawRect(0, 0, w - 1, h - 1);  
30.             g.endFill();  
31.             matrix.createGradientBox(w - 2, h - 2, 0, 0, 0);  
32.             g.lineStyle(0, 0x000000, 0);  
33.             g.beginGradientFill(GradientType.LINEAR,   
34.                     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF],   
35.                     [1, 1, 1, 1, 1, 1],   
36.                     [0, 51, 102, 153, 204, 255],   
37.                     matrix,   
38.                     SpreadMethod.PAD,   
39.                     InterpolationMethod.LINEAR_RGB,   
40.                     0);  
41.             g.drawRect(1, 1, w - 2, h - 2);  
42.             g.endFill();  
43.         }  
44.           
45.     }  
46.       
47. }  

package com.ccac.ibs.skins.common
{
 
 import flash.display.GradientType;
 import flash.display.Graphics;
 import flash.display.InterpolationMethod;
 import flash.display.SpreadMethod;
 import flash.geom.Matrix;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSHBoxDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSHBoxDividerSkin()
  {
   super();
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = graphics;
   var matrix:Matrix = new Matrix();
   if (isNaN(w) || isNaN(h))
    return; 
   g.clear();
   g.lineStyle(1, 0x6593CF, 1);
   g.beginFill(0xFFFFFF, 0);
   g.drawRect(0, 0, w - 1, h - 1);
   g.endFill();
   matrix.createGradientBox(w - 2, h - 2, 0, 0, 0);
   g.lineStyle(0, 0x000000, 0);
   g.beginGradientFill(GradientType.LINEAR, 
     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF], 
     [1, 1, 1, 1, 1, 1], 
     [0, 51, 102, 153, 204, 255], 
     matrix, 
     SpreadMethod.PAD, 
     InterpolationMethod.LINEAR_RGB, 
     0);
   g.drawRect(1, 1, w - 2, h - 2);
   g.endFill();
  }
  
 }
 
}

　　4) 横向分隔条knob皮肤：

1. package com.ccac.ibs.skins.common  
2. {  
3.       
4.     import flash.display.Graphics;  
5.       
6.     import mx.skins.ProgrammaticSkin;  
7.       
8.     public class IBSHDividerSkin extends ProgrammaticSkin  
9.     {  
10.           
11.         public function IBSHDividerSkin()  
12.         {  
13.             super();  
14.         }  
15.           
16.         override public function get measuredWidth():Number  
17.         {  
18.             return 6;  
19.         }  
20.           
21.         override public function get measuredHeight():Number  
22.         {  
23.             return 23;  
24.         }  
25.           
26.         override protected function updateDisplayList(w:Number, h:Number):void  
27.         {  
28.             var g:Graphics = this.graphics;  
29.             var i:int = 0;  
30.             g.clear();  
31.             g.lineStyle(0, 0x000000, 0);  
32.             g.beginFill(0x6593CF, 1);  
33.             for (i = 0; i < 5; i++)  
34.             {  
35.                 g.drawRect(2, 2 + (i - 1) * 4, 2, 2);  
36.             }  
37.             g.endFill();  
38.             g.beginFill(0xF9F9FB, 1);  
39.             for (i = 0; i < 5; i++)  
40.             {  
41.                 g.drawRect(3, 3 + (i - 1) * 4, 2, 2);  
42.             }  
43.             g.endFill();  
44.             g.beginFill(0xADD1FF, 1);  
45.             for (i = 0; i < 5; i++)  
46.             {  
47.                 g.drawRect(3, 3 + (i - 1) * 4, 1, 1);  
48.             }  
49.             g.endFill();  
50.         }  
51.           
52.     }  
53.       
54. }  

package com.ccac.ibs.skins.common
{
 
 import flash.display.Graphics;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSHDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSHDividerSkin()
  {
   super();
  }
  
  override public function get measuredWidth():Number
  {
   return 6;
  }
  
  override public function get measuredHeight():Number
  {
   return 23;
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = this.graphics;
   var i:int = 0;
   g.clear();
   g.lineStyle(0, 0x000000, 0);
   g.beginFill(0x6593CF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(2, 2 + (i - 1) * 4, 2, 2);
   }
   g.endFill();
   g.beginFill(0xF9F9FB, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3, 3 + (i - 1) * 4, 2, 2);
   }
   g.endFill();
   g.beginFill(0xADD1FF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3, 3 + (i - 1) * 4, 1, 1);
   }
   g.endFill();
  }
  
 }
 
}

　　接下来定义一个继承自BoxDivider的类，并覆盖其updateDisplayList方法，显示自定义的皮肤（hSkin,vSkin,hDividerSkin,vDividerSkin），如果这几个样式属性都取不到，就按父类方法显示，也就是显示dividerSkin。代码如下：

1. package com.ccac.ibs.containers.dividedBoxClasses  
2. {  
3.       
4.     import flash.display.DisplayObject;  
5.       
6.     import mx.containers.DividedBox;  
7.     import mx.containers.DividerState;  
8.     import mx.containers.dividedBoxClasses.BoxDivider;  
9.     import mx.core.mx_internal;  
10.     import mx.skins.ProgrammaticSkin;  
11.       
12.     use namespace mx_internal;  
13.       
14.     public class IBSBoxDivider extends BoxDivider  
15.     {  
16.           
17.         public function IBSBoxDivider()  
18.         {  
19.             super();  
20.         }  
21.           
22.         private var divider:DisplayObject = null;  
23.           
24.         private var knob:DisplayObject = null;  
25.           
26.         override protected function updateDisplayList(unscaledWidth:Number,   
27.                 unscaledHeight:Number):void  
28.         {  
29.             if (isNaN(width) || isNaN(height))  
30.                 return;  
31.             if (!parent)  
32.                 return;  
33.             graphics.clear();  
34.             var color:Number = 0;  
35.             var alpha:Number = 1.0;  
36.             var thickness:Number = getStyle("dividerThickness");  
37.             var vertical:Boolean = DividedBox(owner).isVertical();  
38.             var gap:Number = vertical ?   
39.                     DividedBox(owner).getStyle("verticalGap") :   
40.                     DividedBox(owner).getStyle("horizontalGap");  
41.             var dividerClass:Class = null;  
42.             var knobClass:Class = null;  
43.             if (state != DividerState.DOWN)  
44.             {  
45.                 dividerClass = Class(vertical ? getStyle("vSkin") :   
46.                         getStyle("hSkin"));  
47.                 knobClass = Class(vertical ? getStyle("vDividerSkin") :   
48.                         getStyle("hDividerSkin"));  
49.                 if (!dividerClass && !knobClass)  
50.                 {  
51.                     super.updateDisplayList(unscaledWidth, unscaledHeight);  
52.                     return;  
53.                 }  
54.                 if (!divider)  
55.                 {  
56.                     if (dividerClass)  
57.                         divider = new dividerClass();  
58.                     if (divider)  
59.                         addChildAt(divider, 0);  
60.                 }  
61.                 else  
62.                 {  
63.                     if (dividerClass && !(divider is dividerClass))  
64.                     {  
65.                         removeChild(divider);  
66.                         divider = new dividerClass();  
67.                         if (divider)  
68.                             addChildAt(divider, 0);  
69.                     }  
70.                 }  
71.                 if (divider)  
72.                 {  
73.                     divider.width = unscaledWidth;  
74.                     divider.height = unscaledHeight;  
75.                     if (divider is ProgrammaticSkin)  
76.                     {  
77.                         (divider as ProgrammaticSkin).invalidateSize();  
78.                         (divider as ProgrammaticSkin).invalidateDisplayList();  
79.                     }  
80.                 }  
81.                 if (gap >= 6)  
82.                 {  
83.                     if (!knob)  
84.                     {  
85.                         if (knobClass)  
86.                             knob = new knobClass();  
87.                         if (knob)  
88.                             addChild(knob);  
89.                     }  
90.                     else  
91.                     {  
92.                         if (knobClass && !(knob is knobClass))  
93.                         {  
94.                             removeChild(knob);  
95.                             knob = new knobClass();  
96.                             if (knob)  
97.                                 addChild(knob);  
98.                         }  
99.                     }  
100.                     if (knob)  
101.                     {  
102.                         knob.x = Math.round((width - knob.width) / 2);  
103.                         knob.y = Math.round((height - knob.height) / 2);  
104.                     }  
105.                 }  
106.                 return;  
107.             }  
108.             color = getStyle("dividerColor");  
109.             alpha = getStyle("dividerAlpha");  
110.             graphics.beginFill(color, alpha);  
111.             if (vertical)  
112.             {  
113.                 var visibleHeight:Number = thickness;  
114.                 if (visibleHeight > gap)  
115.                     visibleHeight = gap;  
116.                 var y:Number = (height - visibleHeight) / 2;  
117.                 graphics.drawRect(0, y, width, visibleHeight);  
118.             }  
119.             else  
120.             {  
121.                 var visibleWidth:Number = thickness;  
122.                 if (visibleWidth > gap)  
123.                     visibleWidth = gap;  
124.                 var x:Number = (width - visibleWidth) / 2;  
125.                 graphics.drawRect(x, 0, visibleWidth, height);  
126.             }  
127.             graphics.endFill();  
128.         }  
129.           
130.     }  
131.       
132. }  

package com.ccac.ibs.containers.dividedBoxClasses
{
 
 import flash.display.DisplayObject;
 
 import mx.containers.DividedBox;
 import mx.containers.DividerState;
 import mx.containers.dividedBoxClasses.BoxDivider;
 import mx.core.mx_internal;
 import mx.skins.ProgrammaticSkin;
 
 use namespace mx_internal;
 
 public class IBSBoxDivider extends BoxDivider
 {
  
  public function IBSBoxDivider()
  {
   super();
  }
  
  private var divider:DisplayObject = null;
  
  private var knob:DisplayObject = null;
  
  override protected function updateDisplayList(unscaledWidth:Number, 
    unscaledHeight:Number):void
  {
   if (isNaN(width) || isNaN(height))
    return;
   if (!parent)
    return;
   graphics.clear();
   var color:Number = 0;
   var alpha:Number = 1.0;
   var thickness:Number = getStyle("dividerThickness");
   var vertical:Boolean = DividedBox(owner).isVertical();
   var gap:Number = vertical ? 
     DividedBox(owner).getStyle("verticalGap") : 
     DividedBox(owner).getStyle("horizontalGap");
   var dividerClass:Class = null;
   var knobClass:Class = null;
   if (state != DividerState.DOWN)
   {
    dividerClass = Class(vertical ? getStyle("vSkin") : 
      getStyle("hSkin"));
    knobClass = Class(vertical ? getStyle("vDividerSkin") : 
      getStyle("hDividerSkin"));
    if (!dividerClass && !knobClass)
    {
     super.updateDisplayList(unscaledWidth, unscaledHeight);
     return;
    }
    if (!divider)
    {
     if (dividerClass)
      divider = new dividerClass();
     if (divider)
      addChildAt(divider, 0);
    }
    else
    {
     if (dividerClass && !(divider is dividerClass))
     {
      removeChild(divider);
      divider = new dividerClass();
      if (divider)
       addChildAt(divider, 0);
     }
    }
    if (divider)
    {
     divider.width = unscaledWidth;
     divider.height = unscaledHeight;
     if (divider is ProgrammaticSkin)
     {
      (divider as ProgrammaticSkin).invalidateSize();
      (divider as ProgrammaticSkin).invalidateDisplayList();
     }
    }
    if (gap >= 6)
    {
     if (!knob)
     {
      if (knobClass)
       knob = new knobClass();
      if (knob)
       addChild(knob);
     }
     else
     {
      if (knobClass && !(knob is knobClass))
      {
       removeChild(knob);
       knob = new knobClass();
       if (knob)
        addChild(knob);
      }
     }
     if (knob)
     {
      knob.x = Math.round((width - knob.width) / 2);
      knob.y = Math.round((height - knob.height) / 2);
     }
    }
    return;
   }
   color = getStyle("dividerColor");
   alpha = getStyle("dividerAlpha");
   graphics.beginFill(color, alpha);
   if (vertical)
   {
    var visibleHeight:Number = thickness;
    if (visibleHeight > gap)
     visibleHeight = gap;
    var y:Number = (height - visibleHeight) / 2;
    graphics.drawRect(0, y, width, visibleHeight);
   }
   else
   {
    var visibleWidth:Number = thickness;
    if (visibleWidth > gap)
     visibleWidth = gap;
    var x:Number = (width - visibleWidth) / 2;
    graphics.drawRect(x, 0, visibleWidth, height);
   }
   graphics.endFill();
  }
  
 }
 
}

　　还需要一个继承自DividedBox的类，将其dividerClass属性设为IBSBoxDivider，并加入hSkin,vSkin,hDividerSkin,vDividerSkin这几个样式属性。代码如下：

1. package com.ccac.ibs.containers  
2. {  
3.       
4.     import com.ccac.ibs.containers.dividedBoxClasses.IBSBoxDivider;  
5.     import com.ccac.ibs.skins.common.IBSHBoxDividerSkin;  
6.     import com.ccac.ibs.skins.common.IBSHDividerSkin;  
7.     import com.ccac.ibs.skins.common.IBSVBoxDividerSkin;  
8.     import com.ccac.ibs.skins.common.IBSVDividerSkin;  
9.       
10.     import mx.containers.DividedBox;  
11.       
12.     [Style(name="hSkin", type="Class", inherit="no")]  
13.       
14.     [Style(name="vSkin", type="Class", inherit="no")]  
15.       
16.     [Style(name="hDividerSkin", type="Class", inherit="no")]  
17.       
18.     [Style(name="vDividerSkin", type="Class", inherit="no")]  
19.       
20.     public class IBSDividedBox extends DividedBox  
21.     {  
22.           
23.         public function IBSDividedBox()  
24.         {  
25.             super();  
26.             this.dividerClass = IBSBoxDivider;  
27.             /*this.setStyle("hSkin", IBSHBoxDividerSkin); 
28.             this.setStyle("vSkin", IBSVBoxDividerSkin); 
29.             this.setStyle("hDividerSkin", IBSHDividerSkin); 
30.             this.setStyle("vDividerSkin", IBSVDividerSkin);*/  
31.         }  
32.           
33.     }  
34.       
35. }  

package com.ccac.ibs.containers
{
 
 import com.ccac.ibs.containers.dividedBoxClasses.IBSBoxDivider;
 import com.ccac.ibs.skins.common.IBSHBoxDividerSkin;
 import com.ccac.ibs.skins.common.IBSHDividerSkin;
 import com.ccac.ibs.skins.common.IBSVBoxDividerSkin;
 import com.ccac.ibs.skins.common.IBSVDividerSkin;
 
 import mx.containers.DividedBox;
 
 [Style(name="hSkin", type="Class", inherit="no")]
 
 [Style(name="vSkin", type="Class", inherit="no")]
 
 [Style(name="hDividerSkin", type="Class", inherit="no")]
 
 [Style(name="vDividerSkin", type="Class", inherit="no")]
 
 public class IBSDividedBox extends DividedBox
 {
  
  public function IBSDividedBox()
  {
   super();
   this.dividerClass = IBSBoxDivider;
   /*this.setStyle("hSkin", IBSHBoxDividerSkin);
   this.setStyle("vSkin", IBSVBoxDividerSkin);
   this.setStyle("hDividerSkin", IBSHDividerSkin);
   this.setStyle("vDividerSkin", IBSVDividerSkin);*/
  }
  
 }
 
}

　　注释掉了几行代码，因为这些完全可以在CSS文件里设置，而且不设置的话，是和DividedBox的默认显示样式相同的。

　　此外，还需要定义继承自IBSDividedBox的VDividedBox和HDividedBox类：

　　VDividedBox：

1. package com.ccac.ibs.containers  
2. {  
3.       
4.     import mx.containers.BoxDirection;  
5.     import mx.core.mx_internal;  
6.       
7.     public class IBSVDividedBox extends IBSDividedBox  
8.     {  
9.           
10.         public function IBSVDividedBox()  
11.         {  
12.             super();  
13.             mx_internal::layoutObject.direction = BoxDirection.VERTICAL;  
14.         }  
15.           
16.         override public function set direction(value:String):void  
17.         {  
18.         }  
19.           
20.     }  
21.       
22. }  

package com.ccac.ibs.containers
{
 
 import mx.containers.BoxDirection;
 import mx.core.mx_internal;
 
 public class IBSVDividedBox extends IBSDividedBox
 {
  
  public function IBSVDividedBox()
  {
   super();
   mx_internal::layoutObject.direction = BoxDirection.VERTICAL;
  }
  
  override public function set direction(value:String):void
  {
  }
  
 }
 
}

　　HDividedBox：

1. package com.ccac.ibs.containers  
2. {  
3.       
4.     import mx.containers.BoxDirection;  
5.     import mx.core.mx_internal;  
6.       
7.     public class IBSHDividedBox extends IBSDividedBox  
8.     {  
9.           
10.         public function IBSHDividedBox()  
11.         {  
12.             super();  
13.             mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL;  
14.         }  
15.           
16.         override public function set direction(value:String):void  
17.         {  
18.         }  
19.           
20.     }  
21.       
22. }  

package com.ccac.ibs.containers
{
 
 import mx.containers.BoxDirection;
 import mx.core.mx_internal;
 
 public class IBSHDividedBox extends IBSDividedBox
 {
  
  public function IBSHDividedBox()
  {
   super();
   mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL;
  }
  
  override public function set direction(value:String):void
  {
  }
  
 }
 
}

　　结束了。写个例子看下效果：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
3.     xmlns:co="com.ccac.ibs.containers.*"   
4.     layout="absolute"   
5.     backgroundColor="#E3EFFF">  
6.       
7.     <mx:Style>  
8.         IBSDividedBox  
9.         {  
10.             hSkin: ClassReference("com.ccac.ibs.skins.common.IBSHBoxDividerSkin");  
11.             vSkin: ClassReference("com.ccac.ibs.skins.common.IBSVBoxDividerSkin");  
12.             hDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSHDividerSkin");  
13.             vDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSVDividerSkin");  
14.             dividerColor: #FF0000;  
15.             dividerAlpha: 0.7;  
16.             dividerAffordance: 8;  
17.             dividerThickness: 8;  
18.             horizontalGap: 8;  
19.             verticalGap: 8;  
20.         }  
21.     </mx:Style>  
22.       
23.     <co:IBSVDividedBox width="100%" height="100%">  
24.         <mx:HBox width="100%" height="50" />  
25.         <co:IBSHDividedBox width="100%" height="100%">  
26.             <mx:VBox width="350" height="100%" />  
27.             <mx:VBox width="100%" height="100%" />  
28.         </co:IBSHDividedBox>  
29.     </co:IBSVDividedBox>  
30.       
31. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 xmlns:co="com.ccac.ibs.containers.*" 
 layout="absolute" 
 backgroundColor="#E3EFFF">
 
 <mx:Style>
  IBSDividedBox
  {
   hSkin: ClassReference("com.ccac.ibs.skins.common.IBSHBoxDividerSkin");
   vSkin: ClassReference("com.ccac.ibs.skins.common.IBSVBoxDividerSkin");
   hDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSHDividerSkin");
   vDividerSkin: ClassReference("com.ccac.ibs.skins.common.IBSVDividerSkin");
   dividerColor: #FF0000;
   dividerAlpha: 0.7;
   dividerAffordance: 8;
   dividerThickness: 8;
   horizontalGap: 8;
   verticalGap: 8;
  }
 </mx:Style>
 
 <co:IBSVDividedBox width="100%" height="100%">
  <mx:HBox width="100%" height="50" />
  <co:IBSHDividedBox width="100%" height="100%">

   <mx:VBox width="350" height="100%" />
   <mx:VBox width="100%" height="100%" />
  </co:IBSHDividedBox>
 </co:IBSVDividedBox>
 
</mx:Application>

流年不利 养啥啥死

　　前些天中午逮着一只小麻雀，嘴角还是黄的，飞不高，也就能飞20公分高吧。为它取名“大灰”，然后养在鞋盒里。我想等它稍微大一点，有自理能力了再把它放飞。不过一个多星期后的一个早上，我再看它时它就已经死了。
　　这只蝈蝈是上周五买的，买的时候带个小笼子，一只就在小笼子里养着，喂它葱白、黄瓜等。它接连好几天没怎么吃东西，今天它的肚子已经很小了，把它放出笼子，它甚至都不怎么蹦了，看样子好像活不过明天。拍两张遗照留念吧。

涞源百里峡一日游

　　昨天吃过晚饭后眯了一小会儿，然后就不怎么困了，一直上网到四点多。想到周末可以出去转一转，初步选定涞源百里峡。于是查了下乘车路线就冲个澡准备出发了。拿了相机，想了想，可能会下雨，又拿了把伞。伞后来没用着，下午倒是下了一阵子大雨，不过那时候我已经在候车室等火车了。
　　买了早上七点多到苟各庄的车票，火车走了大概三个多小时，一路上穿过无数个隧道。到苟各庄下车后有点摸不着门路，拐了好几个弯来到一条小河边，河里有竹筏可供游人乘坐，河边还有几匹马。两名妇女径直走向我问我要不要骑马，我就骑了一下，一个小伙子骑另一匹马上牵着我的马的缰绳到山到转了一圈。他还大概教了一下我，后来我就自己拿着缰绳又骑了一阵子。马很稳，双腿加紧它，并且脚击打它的两肋，喊声“驾”，它就会小跑步，一颠一颠的。马耳朵上落了很多马蝇，它们叮的马很难受，马时不时使劲晃头试图把马蝇抖开，不过效果不大。我有几次俯下身帮马赶走马蝇。
　　骑完马以后我就乘了驴车去百里峡，后来发现乘驴车的地方其实也就距百里峡一公里左右。所以下午我回来的时候就选择了步行。驴车十块钱。
　　百里峡门票九十，我进去的时候人还不算太多，不过也不少。中国但凡有点名气的地方，向来都不缺游客，而且人们往往喜欢在景点到处拍照留念，这大概相当于在树皮刻上“XXX到此一游”的字样，不同的是照片还可以展示给亲友看。我也不能免俗，我主要做了两件事情：走路和拍照。不过由于是一个人，所以照片上没有我自己。我四处寻找美女，想把她们呈现在我的照片上，不过很遗憾，今天在百里峡一个美女都没见到。
　　峡谷里空气很好，可能最近下过雨，到处湿漉漉的。水沿着路边的小渠流下来，水清彻见底，很浅。好像说电视剧《三国演义》里的华容道就是在这里拍摄的。景色很美，不愧是国家AAA级旅游景区。有几处地方还养了些宠物，老虎、狼、梅花鹿、猴子、火鸡、鹅什么的。后来就走到山上了，有索道，我没坐，我走的栈道，来回好像是四千多级台阶。上去的时候把我给累傻了，汗流浃背，大滴的汗水从额头滴下，摔到地上。一路几乎没休息，快到顶上时有点受不了了，在一个凉亭里一屁股坐下来，再也不想动。许久才慢慢起来继续爬到索道站。下去的时候没那么累了，不过腿发软，而且陡的台阶有点不敢下。从栈道走下来再走路整个人都轻飘飘的了。临出去的时候看到胡绳提的字，不怎么好看。
百里峡门口附近很多人在卖土特产，看了下，有花椒、大料、干果、黄瓜什么的，没什么稀奇。倒是在一个超市门口看一个老头在卖蝎子。
　　大概十点半到苟各庄，两点半左右游览完毕，历时约四个小时。不过早上五点出的门，晚上十点多才回来，等车和路上的时间加起来居然有十几个小时。
　　不过今天也遇到了一些不愉快的事情。骑马时，招唤我的妇女对我说骑马二十元每小时，等我骑上马，她说得买门票，钱给他就行，门票七十，让我给她一百，她可以多让我骑一会儿。我以为所谓门票就是百里峡的门票，就给了她一百。但后来和牵马的小伙子打听才知道门票只是骑马所走的那个山坡的门票。后来和赶驴车的大姐打听才知道，骑马是三十元每小时，门票是十元，我多花了六十元。牵马的小伙子和我说他教我骑马让我玩的尽兴，然后我适当表示一下，我问怎么表示，他说就是给小费。没想到还有这规矩，给就给吧，我给他二十，我给他五十元，让它给我找钱，他居然说不是有五十元一张的嘛。未免太贪心，后来我的坚持下他要了二十元，其实想一下，完全不用给他小费。从百里峡下来后，我想去骑马的那问她们讨要价值七十元的门票。不过我认不出最早和我搭讪的女人了。问了另一名妇女，她表示我骑的不是她家的马。这让我很郁闷。
　　游完百里峡吃了点饺子，很家常，煮破了好几个，不过馅怎么那么诡异呢。说是猪肉大葱的，我倒宁愿吃素馅的。不过饺子只有一种馅。
　　等回来的火车时，一个老太太拿着几个咸鸭蛋到处让别人买，大家都不买。我想不如我买了吧，可以回来做粥时吃咸鸭蛋。一共四个蛋，她说三个鸭蛋，一个鹅蛋，价钱是2×3+4×1=10元，显然贵一点，不过我还是买了。但回来后我磕开一下咸鸭蛋，发现是臭的，不知另外几个怎么样。而且据我观察，那个所谓的鹅蛋很有可能只是一个双黄鸭蛋，鹅蛋我也不是没见过，没那么小吧。自作自受。
　　称了下体重，好像是轻了五六斤，这是今天最大的收获了。

今天这些丢人的事儿

　　晚上出去遛弯儿，看见一只小猫，很可爱，和它玩儿了一会儿。以为是只野猫呢，有心想抱回去，可是当初租房时房东明确说过不能养宠物，而且猫的排泄物处理起来也很麻烦。想找点东西喂喂小猫，于是就在路边买了根火腿肠。不过这时旁边饭店有个人走了过来，先是问小猫是不是我们的，然后说猫是它的，说这只猫“可馋了”，最后就把小猫抱走了。火腿肠怎么处理呢？扔了有点可惜，不如喂小区里的那只流浪猫吧。
　　我们拐进公园往回走，结果有保安用手电筒晃了我们两下，说我们要走的门锁了，让走其他门。锁了翻栅栏好了，这有何难，且看我矫健的身手。结果翻栅栏的时候不太顺利，拖鞋还掉到地上。这时保安和其他几个人过来，让我不要翻栅栏，他来开门。不过我还是从栅栏出去了，猪帮我捡了鞋。
　　回来的时候倒是看见那只流浪猫了，不过旁边还有人在遛狗，于是不想喂猫了。我把火腿肠炸了炸，自己吃掉了，味道还不错。

琐记

　　生活一如既往，每天都重复做着三件事情：工作、吃饭、睡觉。当然，也有别的事情发生。
　　·放生事件　周末和猪去买菜，来到鱼摊前，看有泥鳅卖，就想买一点。旁边有个小姑娘也在买东西，先等她。她问猪：“你们买泥鳅是放生啊还是吃啊？”我们当然是吃。她却是要买了放生的，她买下了所有的泥鳅。小姑娘时而双手合十，念念有词，很虔诚的样子。我很想看她怎么放生，于是在菜市场门口等了一会儿，天热，不想等了，作罢。
　　·雷人的对话　在万通转，听到一个女摊主和别人的对话，原话摘录如下：“她老公一分钟都不闲着，一会儿插她B，一会儿插她嘴”。
　　·洗U盘　下班时U盘放衬衣兜里，赶上一阵大雨，身上淋湿了。把衣服放进洗衣机。后来晾衣服时，发现忘记把U盘拿出来了。当时想，U盘结构比较简单，估计还可用。看U盘也不湿，于是也没晾，直接插电脑上，果然一切正常。