You're also going to want to change this:
.tightDashBorder {
dashlen: 2;
dashgap: 2;
}
To this:
.tightDashBorder {
dashlen: 2;
gaplen: 2;
}
-TH
--- In [email protected], "Tim Hoff" <timh...@...> wrote:
>
>
> Hi Greg,
>
> If you change the top half of your borderSkin class to the code below,
> you can use a class selector style as a styleName for a VBox
> (styleName="tightDashBorder"). To use a type selector style, you're
> probably going to have to turn the borderSkin into a full-fledged
> component; with the same name. While the code below is not how I would
> normally do this, it is a working example that you can expand upon.
>
> -TH
>
> package
> {
> import mx.skins.RectangularBorder;
>
>
>
> [Style(name="dashlen",type="Number",format="Length",inherit="no")]
> [Style(name="gaplen",type="Number",format="Length",inherit="no")]
>
>
>
> public class DashBorder extends RectangularBorder{
>
>
>
> public function DashBorder(){
> super();
> }
>
>
>
> override public function styleChanged(styleProp:String):void {
> invalidateDisplayList();
> }
>
>
>
> override protected function updateDisplayList(unscaledWidth:Number,
> unscaledHeight:Number):void{
>
>
>
> super.updateDisplayList(unscaledWidth, unscaledHeight);
>
>
>
> var borderThickness:int = getStyle("borderThickness");
> var borderColor:int = getStyle("borderColor");
> var dashlen:int = (getStyle("dashlen") == null) ? 5 :
> getStyle("dashlen");
> var gaplen:int = (getStyle("gaplen") == null) ? 5 :
getStyle("gaplen");
>
>
>
> graphics.clear();
> graphics.lineStyle(borderThickness, borderColor, 1)
>
>
>
> drawBorder(this.x, this.y, unscaledWidth, unscaledHeight, dashlen,
> gaplen);
> }
>
>
<-----------------------------------------------------------------------\
\
> --------------------------------->
>
<-----------------------------------------------------------------------\
\
> --------------------------------->
>
> --- In [email protected], "greg_lafrance" glafrance@
> 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>
> >
>
