March 27, 2008

Change divider image in divided box in Flex

The default divider image for a horizontal or vertical dividedbox can easily be changed with styles. The dividerSkin style attribute let's us change the image or even remove the image. The following example shows this. The new divider image is used from Extending the Flex DividedBox.

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundColor="0xCCCCCC" layout="vertical" verticalAlign="middle">
  import flash.events.Event;
  private var dividerImage:Class;
  private function toggleSkin(event:Event):void {
      if (event.target.selected) {
          hdividedbox.setStyle("dividerSkin", dividerImage);
      } else {
          hdividedbox.setStyle("dividerSkin", null);

  HDividedBox {
   dividerSkin: ClassReference(null);

 <mx:HDividedBox id="hdividedbox" backgroundColor="0xFFFFFF"
  width="90%" height="90%" horizontalGap="7">
  <mx:Canvas width="30%" height="100%" backgroundColor="0xB3DCE6">
   <mx:Label text="Canvas one"/>
  <mx:Canvas width="70%" height="100%" backgroundColor="0xCFF6FF">
   <mx:Label text="Canvas two"/>

 <mx:ApplicationControlBar dock="true">
  <mx:Label text="Show dividerSkin:"/>
  <mx:CheckBox id="checkbox" selected="false" change="toggleSkin(event);"/>