[flexcoders] Can't Change Custom Border Custom Styles - Please Help !!!

[greg_lafrance]

I created a custom border class to create a dashed line border, and I 
added two custom style properties "dashlen" and "gaplen", but I can't 
set them.

In the attached code, the default dashlen and gaplen are 5. 

I create three VBox using the DashBorder, and although I have created 
a type selector style for DashBorder and a class selector style 
tightDashBorder, neither one is applied.

Also, I get errors when I try to access the style properties dashlen 
and gaplen in the <mx:VBox> tag. I can access the borderColor style 
property though.

What more must I do to fix this? Thanks in advance!!!

-------------------- DashBorder.as ---------------------------
package
{
  import mx.skins.RectangularBorder;
  import mx.styles.CSSStyleDeclaration;
  import mx.styles.StyleManager;  
  
  [Style(name="dashlen",type="Number",format="Length",inherit="no")]
  [Style(name="gaplen",type="Number",format="Length",inherit="no")]

  public class DashBorder extends RectangularBorder{
    private static var classConstructed:Boolean = classConstruct();
    private var bStypePropChanged:Boolean = false;    
    private var dashlen:Number = 5;
    private var gaplen:Number = 5;
    
    public function DashBorder(){
      super();
    }

    private static function classConstruct():Boolean {
      if(!StyleManager.getStyleDeclaration("DashBorder")){
        var myBorderStyles:CSSStyleDeclaration = new 
CSSStyleDeclaration();
        myBorderStyles.defaultFactory = function():void{
          this.dashlen = 5;
          this.gaplen = 5;
        }
        StyleManager.setStyleDeclaration("DashBorder", 
myBorderStyles, true);
      }
      return true;
    }
    
   override public function styleChanged(styleProp:String):void {
     super.styleChanged(styleProp);
     if (styleProp=="dashlen" || styleProp=="gaplen"){
       bStypePropChanged=true; 
       invalidateDisplayList();
       return;
     }
   }
    
    override protected function updateDisplayList
      (unscaledWidth:Number, unscaledHeight:Number):void{
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      var borderThickness:int = getStyle("borderThickness");
      var borderColor:int = getStyle("borderColor");
      graphics.clear();
      graphics.lineStyle(borderThickness, borderColor, 1)

      if (bStypePropChanged==true){
        this.dashlen = getStyle("dashlen");
        this.gaplen = getStyle("gaplen");
        bStypePropChanged=false;
      }
      drawBorder(this.x, this.y, unscaledWidth, unscaledHeight,
        this.dashlen, this.gaplen); 
    }

    public function drawLine(x1:Number, y1:Number, x2:Number, 
y2:Number,
      dashlen:Number, gaplen:Number): void {     
      if((x1 != x2) || (y1 != y2)){
        var incrlen:Number = dashlen + gaplen;
      
        var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) 
* (y1 - y2));
        var angle:Number = Math.atan((y2 - y1) / (x2 - x1));
        var steps:uint = len / (dashlen + gaplen);
      
        var dashstepx:Number = dashlen * Math.cos(angle);
        if (x2 < x1) dashstepx *= -1;
      
        var dashstepy:Number = dashlen * Math.sin(angle);
      
        var gapstepx:Number = gaplen * Math.cos(angle);
        if (x2 < x1) gapstepx *= -1;
      
        var gapstepy:Number = gaplen * Math.sin(angle);
        var stepcount:uint = 0;
      
        while ((stepcount++) < steps) {        

          var dashstartx:Number;
          var dashstarty:Number;
          var dashendx:Number;
          var dashendy:Number;
        
          if(x1 == x2 && y1 != y2){
            dashstartx = dashendx = x1;
            if(y2 > y1){
              dashstarty = y1 + ((stepcount-1) * (dashlen + 
gaplen));              
              dashendy = dashstarty + dashlen;
            }else{
              dashstarty = y1 - ((stepcount-1) * (dashlen + 
gaplen));              
              dashendy = dashstarty - dashlen;
            }
          }else if(y1 == y2 && x1 != x2){
            dashstarty = dashendy = y1;
            if(x2 > x1){
              dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx + dashlen;
            }else{
              dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx - dashlen;
            }
          }
          graphics.moveTo(dashstartx, dashstarty);
          graphics.lineTo(dashendx, dashendy);
        }
      }
    }
    
    private function drawBorder(x1:Number, y1:Number, width:Number, 
height:Number,
      dashlen:Number, gaplen:Number) : void {
      drawLine(x1, y1, x1 + width, y1, dashlen, gaplen);
      drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, 
gaplen);
      drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, 
gaplen);
      drawLine(x1, y1 + height, x1, y1, dashlen, gaplen);
    }    
  }
}
------------------- Test.mxml ----------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
  <mx:Style>
    DashBorder {
      dashlen: 10;
      dashgap: 10;
    }
    
    .tightDashBorder {
      dashlen: 2;
      dashgap: 2;
    }
  </mx:Style>
  <mx:VBox borderSkin="DashBorder" backgroundColor="0xCCCC99"    
    backgroundAlpha="0.8" cornerRadius="14" paddingLeft="20" 
paddingTop="20"    
    paddingRight="20" paddingBottom="20" borderThickness="1" 
borderColor="0xFF0000"
    width="400" height="200" styleName="tightDashBorder">
  </mx:VBox>    
  <mx:VBox borderSkin="DashBorder" backgroundColor="0xCCCC99"    
    backgroundAlpha="0.8" cornerRadius="14" paddingLeft="20" 
paddingTop="20"    
    paddingRight="20" paddingBottom="20" borderThickness="1" 
borderColor="0xFF0000"
    width="30" height="30">
  </mx:VBox>    
  <mx:VBox id="vb" borderSkin="DashBorder" 
backgroundColor="0xCCCC99"    
    backgroundAlpha="0.8" cornerRadius="14" paddingLeft="20" 
paddingTop="20"    
    paddingRight="20" paddingBottom="20" borderThickness="1" 
borderColor="0xFF0000"
    width="10" height="10">
  </mx:VBox>    
</mx:Application>