1 Reply Latest reply on Aug 21, 2007 5:38 AM by Miran Loncaric

    Problem with custom mx.skins.halo.HaloBorder class

    Miran Loncaric

      While I was writing one custom container, I had decided to add some additional style properties...
      This is my first try so any help and suggestion would be apreciated.

      I don't know where is the problem, because style fillColors for example works fine..

      I think the problem sits in the overriden method updateDisplayList.

      Here is the code:

      package com.style
      import flash.display.Graphics;
      import flash.geom.Matrix;

      import mx.controls.Alert;
      import mx.core.EdgeMetrics;
      import mx.skins.halo.HaloBorder;
      import mx.utils.GraphicsUtil;

      [Style(name="topLeftCornerRadius", type="Number")]
      [Style(name="topRightCornerRadius", type="Number")]
      [Style(name="bottomLeftCornerRadius", type="Number")]
      [Style(name="bottomRightCornerRadius", type="Number")]
      [Style(name="fillColors", type="Array")]
      [Style(name="fillAlphas", type="Array")]
      [Style(name="fillRatios", type="Array")]
      [Style(name="cornerRadiuses", type="Array")]
      [Style(name="gradientDirection", type="String")]

      public class GradientStyle extends HaloBorder
      private var cornerRadius :Number;
      private var topLeftCornerRadius :Number;
      private var topRightCornerRadius :Number;
      private var bottomLeftCornerRadius :Number;
      private var bottomRightCornerRadius:Number;
      private var cornerRadiuses:Array;
      private var colors :Array;
      private var alphas :Array;
      private var ratios :Array;
      private var gradientDirection:String;

      private function setupStyles():void
      var i:int = 0;

      gradientDirection = getStyle("gradientDirection") as String;
      if(!gradientDirection ||
      gradientDirection != "vertical" ||
      gradientDirection != "horizontal")
      gradientDirection = "vertical";

      colors = getStyle("fillColors") as Array;
      colors = [0x6699CC, 0x99CCFF];

      alphas = getStyle("fillAlphas") as Array;
      alphas = [];

      for(i=0; i < colors.length; i++)
      alphas = 1;

      ratios = getStyle("fillRatios") as Array;
      if(!ratios || ratios.length!=colors.length)
      ratios = [];
      var chunkSize:Number = 255/(colors.length - 1);

      for(i=0; i < colors.length; i++)
      = Math.round(i * chunkSize);

      cornerRadius = getStyle("cornerRadius") as Number;
      cornerRadius = 0;

      topLeftCornerRadius = getStyle("topLeftCornerRadius") as Number;
      topLeftCornerRadius = cornerRadius;

      topRightCornerRadius = getStyle("topRightCornerRadius") as Number;
      topRightCornerRadius = cornerRadius;

      bottomLeftCornerRadius = getStyle("bottomLeftCornerRadius") as Number;
      bottomLeftCornerRadius = cornerRadius;

      bottomRightCornerRadius = getStyle("bottomRightCornerRadius") as Number;
      bottomRightCornerRadius = cornerRadius;

      cornerRadiuses = getStyle("cornerRadiuses") as Array;
      cornerRadiuses =
      topLeftCornerRadius, topRightCornerRadius,
      bottomLeftCornerRadius, bottomRightCornerRadius

      override protected function updateDisplayList
      (unscaledWidth:Number, unscaledHeight:Number):void
      super.updateDisplayList(unscaledWidth, unscaledHeight);


      var g:Graphics = graphics;
      var b:EdgeMetrics = borderMetrics;
      var w:Number = unscaledWidth - b.left - b.right;
      var h:Number = unscaledHeight - b.top - b.bottom;

      var m:Matrix;

      m = verticalGradientMatrix(0, 0, w, h);
      m = horizontalGradientMatrix(0, 0, w, h);

      g.beginGradientFill("linear", colors, alphas, ratios, m);

      var tl:Number = Math.max(cornerRadiuses[0], 0);
      var tr:Number = Math.max(cornerRadiuses[1], 0);
      var bl:Number = Math.max(cornerRadiuses[2], 0);
      var br:Number = Math.max(cornerRadiuses[3], 0);

      GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, tl, tr, bl, br);

      ------------------------------------------------------------------------------------------ ----------------

      And usage code:

      /*inside style tag*/
      border-skin: ClassReference("com.style.GradientStyle");
      fillColors: #efefef, #dddddd;

      /*argument in the selected component tag*/

      Thanks in advance.

        • 1. Problem with custom mx.skins.halo.HaloBorder class
          Miran Loncaric Level 1
          Um... and where is the Attach Code option(I wasn't here for a few months now)?

          I just found it... When I add to the style tag property backgroundColor:value; All my custom styles are working.

          I think somewhere deeper in the classes from which HaloBorder is inherited the new Sprite object is created(or something similar I guess), and my styles are applied into it.

          Any suggestions? Thanks
          Have a nice day.