6 Replies Latest reply on Feb 26, 2009 12:26 AM by Gregory Lafrance

    Can't Change Custom Border Custom Styles

    Gregory Lafrance Level 6
      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!!!

        • 1. Re: Can't Change Custom Border Custom Styles
          Gregory Lafrance Level 6
          Bump. I really need to solve this. Anyone have any ideas?
          • 2. Re: Can't Change Custom Border Custom Styles
            Gregory Lafrance Level 6
            Solved it. Turns out it was much simpler than I had thought.
            • 3. Re: Can't Change Custom Border Custom Styles
              Level 7
              I didn't have time to analyze your code in depth. Where was the issue?

              "Greg Lafrance" <webforumsuser@macromedia.com> wrote in message
              news:go4ugp$l2s$1@forums.macromedia.com...
              > Solved it. Turns out it was much simpler than I had thought.
              >
              > ------------------ DashBorder.as -------------------------
              > package
              > {
              > import mx.core.UIComponent;
              >
              > public class DashBorder extends UIComponent{
              > private var dashlen:Number = 5;
              > private var gaplen:Number = 5;
              >
              > public function DashBorder(){
              > super();
              > }
              >
              > 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 (getStyle("dashlen")) {
              > this.dashlen = getStyle("dashlen");
              > }
              > if (getStyle("gaplen")) {
              > this.gaplen = getStyle("gaplen");
              > }
              >
              > 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);
              > }
              > }
              > }
              > ---------------------- DashBorderExample.mxml -------------------------
              > <?xml version="1.0" encoding="utf-8"?>
              > <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
              > verticalGap="20">
              > <mx:Style>
              > DashBorder {
              > dashlen: 20;
              > gaplen: 20;
              > }
              > .tightDashBorder {
              > dashlen: 2;
              > gaplen: 2;
              > }
              > .tightDashWideGapBorder {
              > dashlen: 2;
              > gaplen: 20;
              > }
              > .wideDashTightGapBorder {
              > dashlen: 20;
              > gaplen: 2;
              > }
              > </mx:Style>
              > <mx:HBox horizontalGap="30">
              > <mx:VBox borderSkin="DashBorder"
              > borderThickness="1" borderColor="0xFF0000"
              > width="200" height="200">
              > </mx:VBox>
              > <mx:VBox borderSkin="DashBorder"
              > borderThickness="1" borderColor="0xFF0000"
              > width="200" height="200" styleName="tightDashBorder">
              > </mx:VBox>
              > </mx:HBox>
              > <mx:HBox horizontalGap="30">
              > <mx:VBox borderSkin="DashBorder"
              > borderThickness="1" borderColor="0xFF0000"
              > width="200" height="200" styleName="tightDashWideGapBorder">
              > </mx:VBox>
              > <mx:VBox borderSkin="DashBorder"
              > borderThickness="1" borderColor="0xFF0000"
              > width="200" height="200" styleName="wideDashTightGapBorder">
              > </mx:VBox>
              > </mx:HBox>
              > </mx:Application>
              >


              • 4. Re: Can't Change Custom Border Custom Styles
                Gregory Lafrance Level 6
                Fixed another issue, because there was no background.
                • 5. Re: Can't Change Custom Border Custom Styles
                  Gregory Lafrance Level 6
                  My first code post was way too complex. It was based on one FB3 help page. I found another that was much simpler. The code I just posted works pretty good.
                  • 6. Re: Can't Change Custom Border Custom Styles
                    Gregory Lafrance Level 6
                    Here is an app using this class I posted to my web site, ChikaraDev.com. You can right click and select View Source. DashBorderExample