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

    Problem with custom mx.skins.halo.HaloBorder class

    Miran Loncaric Level 1
      HI.

      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;
      if(!colors)
      colors = [0x6699CC, 0x99CCFF];

      alphas = getStyle("fillAlphas") as Array;
      if(!alphas)
      {
      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++)
      ratios
      = Math.round(i * chunkSize);
      }

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

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

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

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

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

      cornerRadiuses = getStyle("cornerRadiuses") as Array;
      if(!cornerRadiuses)
      cornerRadiuses =
      [
      topLeftCornerRadius, topRightCornerRadius,
      bottomLeftCornerRadius, bottomRightCornerRadius
      ];
      }

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

      setupStyles();

      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;

      if(gradientDirection=="vertical")
      m = verticalGradientMatrix(0, 0, w, h);
      else
      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);
      g.endFill();
      }
      }
      }

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

      And usage code:

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

      /*argument in the selected component tag*/
      styleName="filled"

      Thanks in advance.

      mloncaric
        • 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)?

          EDIT:
          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.