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

2007-01-29 Thread lokesh2084 
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.

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

2007-01-29 Thread 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=#FF

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

  gradientColors={[0xEE, 0xFF]}
  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