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" <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>
>
