2 Replies Latest reply on Nov 29, 2010 8:31 AM by bodrul haque

    Extending spark Label

    bodrul haque

      I'm trying to extend a Spark Label so it always has a border with rounded corners like the code below.

       

      <s:Graphic>

      <s:filters>

      <s:DropShadowFilter color="0x000000" alpha="0.5" distance="7" />

      </s:filters>

      <s:Group>

      <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

      <s:fill>

      <mx:SolidColor color="#e0e9f8" />

      </s:fill>

      <s:stroke>

      <s:SolidColorStroke color="#e0e9f8" weight="1"/>

      </s:stroke>

      </s:Rect>

      <s:Label color="#23295D" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

      <s:text>This is a Spark Label control with a border drawn by a Rect.</s:text>

      </s:Label>

      </s:Group>

      </s:Graphic>

       

       

      How can I create a MyLabel.as (extending a spark Label) with the above code in it (i tried a few things but haven't quite got it right).

       

      Or should I be using another component instead of a spark Label.

       

      Thanks in advance

      Bodrul Haque

        • 1. Re: Extending spark Label
          Flex harUI Adobe Employee

          Maybe you want a SkinnableComponent with a label in its skin?

          • 2. Re: Extending spark Label
            bodrul haque Level 1

            Thanks Alex, I will take a look at SkinnableComponent.

             

            Alternatively, this also gives the desired result (except component needs to be re-measured....still trying to figure how to do that).

             

            The objective was to extend a spark Label and make sure MyLabel always has a border and shading .......and few extra things specific to our needs (which  I haven't added yet).

            I've made use of the built in graphics.

             

            public class MyLabel extends Label

            {

              private var dropShadow:RectangularDropShadow;

             

              public function MyLabel()

               {

                super();

              }

             

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

              {

                  super.updateDisplayList(unscaledWidth, unscaledHeight);

             

                   //background

                  var backgroundColor:Number;

             

                  var g:Graphics = graphics;

                  g.clear();

             

                  backgroundColor = getStyle("backgroundColor");

                  graphics.beginFill(backgroundColor);

             

                  graphics.drawRoundRect(-5, -5, unscaledWidth+10, unscaledHeight+10, 10);

                  graphics.endFill();

             

                  // Shadow......is their another way???

                  if (!dropShadow)

                         dropShadow = new RectangularDropShadow();

             

                   dropShadow.distance = 7;

                   dropShadow.angle = 45;

                   dropShadow.color = 0;

                   dropShadow.alpha = 0.4;

                   dropShadow.tlRadius = 5;

                  dropShadow.trRadius = 5; //cornerRadius;

                  dropShadow.blRadius = 5; //cornerRadius;

                  dropShadow.brRadius = 5;

                  dropShadow.drawShadow(graphics, 0, -5, unscaledWidth+5, unscaledHeight+10);

             

               }

            }

             

            If I add a couple of these MyLabels into a HGroup (or VGroup) they look squashed. ......so I want to do a invalidateSize() or something