Bump. I really need to solve this. Any ideas? Thanks!
--- In [email protected], "greg_lafrance" <glafra...@...> wrote: > > 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> >
