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:DropShadowFilter color="0x000000" alpha="0.5" distance="7" />



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


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



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



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






      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()





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


                  super.updateDisplayList(unscaledWidth, unscaledHeight);



                  var backgroundColor:Number;


                  var g:Graphics = graphics;



                  backgroundColor = getStyle("backgroundColor");



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



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