Re: [flexcoders] looking for VBox/HBox with gradient background and border

[Brendan Meutzner]

Is this what you're looking for?  While these aren't defined in CSS, they
could be set as Styles if you wanted... did I understand your question
correctly?

Application.mxml
--------------------------


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"
xmlns="*" backgroundColor="#FFFFFF">

   <GradientBox id="theSlideBox"
                  cornerRadius="3"
                  innerRadius="3"
                  borderThickness="5" borderColor="#999999"
borderStyle="solid"
                  horizontalAlign="center" verticalAlign="middle"
                  height="115" width="115"
                  y="40" x="40"

                  gradientColors="{[0xEEEEEE, 0xFF0000]}"
                  gradientAlphas="{[.5, 0.1]}"
                  gradientRatios="[0, 255]"
                  gradientAngle="90"
                   >
    </GradientBox>

</mx:Application>



GradientBox.mxml
---------------------------

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";>

   <mx:Script>
       <![CDATA[


       import flash.display.Graphics;

       [Bindable]
       public var gradientColors:Array;
       [Bindable]
       public var gradientAlphas:Array;
       [Bindable]
       public var gradientRatios:Array;
       [Bindable]
       public var gradientAngle:int;
       [Bindable]
       public var innerRadius:Number;

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

           var fillType:String = GradientType.LINEAR;
           var colors:Array = gradientColors;
           var alphas:Array = gradientAlphas;
           var ratios:Array = gradientRatios;
           var matrix:Matrix = new Matrix();
           matrix.createGradientBox(unscaledWidth, unscaledHeight,
(gradientAngle * Math.PI/180));

           var spreadMethod:String = SpreadMethod.PAD;

           graphics.clear();
           graphics.beginGradientFill(fillType, colors, alphas, ratios,
matrix, spreadMethod);
           if(isNaN(innerRadius))
           {
               graphics.drawRect(1, 1, unscaledWidth - 1, unscaledHeight -
1);
           }
           else
           {
               graphics.drawRoundRect(1, 1, unscaledWidth - 2,
unscaledHeight - 2, innerRadius);
           }
           graphics.endFill();
       }

       ]]>
   </mx:Script>

</mx:VBox>


Brendan


On 1/29/07, lokesh2084 <[EMAIL PROTECTED]> wrote:

  I've seen a few examples of custom borderSkins that you can use with
HBoxes and VBoxes that use the fillColors css property to draw a
gradient background in the container. All the borderSkin examples
unfortunately do not support borders. I'm wondering if someone has a
borderSkin example which allows me to both apply a gradient background
and a border to an HBox or VBox.

Thanks.

--
Brendan Meutzner
Stretch Media - RIA Adobe Flex Development
[EMAIL PROTECTED]
http://www.stretchmedia.ca