Hi Chris and Bill,
Don't have time to test your code, but the following code works with no hang-ups. You can also use the following borderSkin class to apply a gradient fill to the background of a panel. For some reason it doesn't work for an HBox or VBox. However, setting headerHeight to "0" produces the same effect. For dropShadow, I'm using the default CSS or applying a filter to the container in the MXML.
-TH
//---------------------------------------------------------------------------------------------
// CSS - use as styleName in MXML
//---------------------------------------------------------------------------------------------
.customPanel {
headerHeight: 0;
cornersRadius: 8, 8, 8, 8;
backgroundAlpha: 1;
fillAlphas: 1, 1;
fillColors: #326CB4, #FFFFFF;
fillColorsRatios: 20, 254;
rotationAngle: 90;
borderColor: #000000;
borderThickness: 0;
borderSkin: ClassReference("customComponents.skins.FillColorsSkin");
}
//---------------------------------------------------------------------------------------------
// Actionscript - borderSkin
//---------------------------------------------------------------------------------------------
package customComponents.skins
{
import flash.geom.Matrix;
import flash.display.SpreadMethod;
import flash.display.GradientType;
import mx.utils.GraphicsUtil;
import mx.skins.RectangularBorder;
import flash.display.Graphics;
public class FillColorsSkin extends RectangularBorder
{
public function FillColorsSkin()
{
super();
}
public override function setActualSize(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var backgroundGraphics:Graphics = graphics;
graphics.clear();
var backgroundAlpha:Number = getStyle("backgroundAlpha");
if (backgroundAlpha==0){return};
var borderColor:uint = getStyle("borderColor");
var borderThickness:Number = getStyle("borderThickness");
var cornersRadius:Array = getStyle("cornersRadius");
var fillColors:Array = getStyle("fillColors");
var fillAlphas:Array = getStyle("fillAlphas");
var fillColorsRatios:Array = getStyle("fillColorsRatios");
var fillType:String = GradientType.LINEAR;
var rotationAngle:Number = getStyle("rotationAngle");
var rotation:Number = 2 * Math.PI * (rotationAngle / 360);
var spreadMethod:String = SpreadMethod.PAD;
var matrix:Matrix = new Matrix();
matrix.createGradientBox(h, w, 0, 0, 0);
matrix.rotate(rotation);
graphics.beginGradientFill(fillType, fillColors, fillAlphas, fillColorsRatios, matrix, spreadMethod);
if (borderThickness != 0){graphics.lineStyle(borderThickness, borderColor)};
mx.utils.GraphicsUtil.drawRoundRectComplex(graphics, 0, 0, w, h, cornersRadius[0], cornersRadius[1], cornersRadius[2], cornersRadius[3]);
graphics.endFill();
}
}
}
//---------------------------------------------------------------------------------------------
// End
//---------------------------------------------------------------------------------------------
--- In [email protected], "bill_sahlas" <[EMAIL PROTECTED]> wrote:
>
>
> Yup, same here. Perhaps someone else on the list will try the code.
>
> package {
> import flash.display.Graphics;
> import mx.graphics.RectangularDropShadow;
> import mx.skins.RectangularBorder;
> public class CustomBorder extends RectangularBorder {
>
> private var dropShadow:RectangularDropShadow;
>
> public function CustomBorder() {
> }
>
> override protected function
> updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
> {
> super.updateDisplayList(unscaledWidth, unscaledHeight);
> var cornerRadius:Number = getStyle("cornerRadius");
> var backgroundColor:int = getStyle("backgroundColor");
> var backgroundAlpha:Number = getStyle("backgroundAlpha");
> graphics.clear();
> // Background
> drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl: 0,
> tr:cornerRadius, bl: cornerRadius, br: 0}, backgroundColor,
> backgroundAlpha);
> // Shadow
> if (!dropShadow)
> dropShadow = new RectangularDropShadow();
> dropShadow.distance = 8;
> dropShadow.angle = 45;
> dropShadow.color = 0;
> dropShadow.alpha = 0.4;
> dropShadow.tlRadius = 0;
> dropShadow.trRadius = cornerRadius;
> dropShadow.blRadius = cornerRadius;
> dropShadow.brRadius = 0;
> dropShadow.drawShadow(graphics, 0, 0,
> unscaledWidth,unscaledHeight);
> }
> }
> }
>
>
>
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml
> <http://www.adobe.com/2006/mxml> " layout="absolute" >
> <mx:Script>
> <![CDATA[
>
> import CustomBorder;
> import mx.controls.Alert;
>
> ]]>
> </mx:Script>
> <mx:VBox borderSkin="CustomBorder"
> backgroundColor="0xCCCC99"
> backgroundAlpha="0.8"
> cornerRadius="14"
> paddingLeft="20"
> paddingTop="20"
> paddingRight="20"
> paddingBottom="20">
>
> <mx:Label text="Text Goes Here"/>
> <mx:LinkButton label="LinkButton" click="Alert.show('hello');"/>
>
> </mx:VBox>
>
>
>
> </mx:Application>
>
> --- In [email protected], "Chris Simeone" simspace@ wrote:
> >
> >
> > I'm using Flash Player version 9.0.16.0
> >
> > --- In [email protected], "bill_sahlas" bsahlas@ wrote:
> > >
> > >
> > > I've tried reproducing it using the link to the doc example
> > >
> > <http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html
> > /w\
> > > whelp.htm?context=LiveDocs_Parts&file=00000816.html> and cannot
> > confirm
> > > the bug/errors that you reported here. It works as I'd expect. What
> > > flash player version are you on?
> > >
> > >
> > > --- In [email protected], "Chris Simeone" <simspace@>
> > wrote:
> > > >
> > > > Hi All,
> > > >
> > > > I believe I found a Programmatic Skinning bug in Flex.
> > > >
> > > > Whenever I set the "borderSkin" property to a custom skin class,
> > the
> > > > flash player hangs in all browsers, the CPU peaks around 95% and
> > > memory
> > > > is consumed rapidly.
> > > >
> > > > After waiting for about 10 minutes I get the following...
> > > >
> > > > [SWF] C:\Documents and Settings\Chris.Simeone\My Documents\Flex
> > > > Builder 2\Skinning-Lessons\bin\gridBorders-debug.swf - 408,071
> > bytes
> > > > after decompression
> > > > undefined
> > > > at
> > > >
> > > mx.core::UIComponent/getClassStyleDeclarations()
> > [C:\dev\GMC\sdk\framewor\
> > > \
> > > > ks\mx\core\UIComponent.as:6810]
> > > > at
> > > >
> > > mx.styles::StyleProtoChain$/mx.styles:StyleProtoChain::addProperties
> > ()[C\
> > > \
> > > > :\dev\GMC\sdk\frameworks\mx\styles\StyleProtoChain.as:142]
> > > > at
> > > >
> > > mx.styles::StyleProtoChain$/mx.styles:StyleProtoChain::addProperties
> > ()[C\
> > > \
> > > > :\dev\GMC\sdk\frameworks\mx\styles\StyleProtoChain.as:173]
> > > >
> > > > (FYI: The previous error line is repeated 191 times)
> > > >
> > > > I tried tracing my custom skin class (by setting breakpoints) but
> > none
> > > > of the code ever fires - the debugger never goes into the code.
> > > >
> > > > When I remove this line from my CSS file -
> > > > borderSkin:ClassReference('GridBorders'); - the application runs
> > fine.
> > > >
> > > > To test this further, I grabbed the example on the bottom of this
> > page
> > > > <http://livedocs.macromedia.com/flex/2/docs/00000816.html> where
> > the
> > > > "borderSkin" property is set on the VBox tag. The same exact error
> > > > occurs.
> > > >
> > > > I tested other programmatic skinning examples that use upSkin,
> > > downSkin,
> > > > etc and they all work fine. I only have this problem when
> > assigning a
> > > > skin class to the "borderSkin" property.
> > > >
> > > > Would someone please confirm this is bug? I followed the
> > programmatic
> > > > skins recipe to the letter.
> > > >
> > > > Thanks
> > > > Chris Simeone
> > > >
> > >
> >
>
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
| Software development tool | Software development | Software development services |
| Home design software | Software development company |
Change settings via the Web (Yahoo! ID required)
Change settings via email: Switch delivery to Daily Digest | Switch to Fully Featured
Visit Your Group | Yahoo! Groups Terms of Use | Unsubscribe
__,_._,___
