Question

Degrafa newbie here :-).

I was able to get “com.degrafa.skins.CSSSkin” to create linear gradient backgrounds. Now I’m getting into more advanced stuff as I try to figure out radial gradients…

I figured this out by watching Flex-skinning-with-degrafa-screencast but my code isn’t working for me and I’m getting a white background on my canvas.

Here is the code I have so far:

I have a MXML component ThreeWayGrad.mxml which extends Canvas and has a styleName for ThreeWayGradient:

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

I have a CSS style entry for ThreeWayGradient with a skin tag for the class RadialGradient:

Canvas.ThreeWayGradient 
{
    borderSkin: ClassReference("assets.skins.RadialGradient");
}

And finally here is the RadialGradient.mxml component:

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

    <mx:Script>
        <![CDATA[
            [Bindable] private var _height:Number = 0;
            [Bindable] private var _width:Number = 0;

            override protected 
                function updateDisplayList(w:Number, h:Number):void 
            {
                super.updateDisplayList(w, h);
                _height = h; 
                _width  = w;
                trace("INFO: displaylist updated --" + _height + " : " + _width );
            }
        ]]>
    </mx:Script>
     <strokes>
         <SolidStroke id="mainStroke" color="#333333" weight="3"/>
     </strokes>
        <fills>
            <RadialGradientFill    
             id="blueGradient"
             angle="45"
             focalPointRatio="0">
                <GradientStop 
                 alpha="1"
                    ratio=".25"
                    color="#ffffff"/> 
                <GradientStop 
                 alpha="1"
                    ratio=".70"
                    color="#003355"/>
                <GradientStop 
                    alpha="1"
                    ratio="1"
                    color="#111111"/>
            </RadialGradientFill>
        </fills>
        <!-- Creating the background -->
        <geometry>
         <GeometryComposition>
             <!-- Creating a Rectangle to draw the gradient to and 
             moving the center of the gradient to the lower left corner -->
             <RegularRectangle  
              fill="{blueGradient}" 
              stroke="{mainStroke}"
                 height="{_height}"
                 width="{_width}" 
                 />
         </GeometryComposition> 
        </geometry>
</GraphicBorderSkin>

Does anyone know why this isn’t working? I see the trace output with the correct sizes, so I know the class is getting called.

I also copied this code into a new Application using a Surface instead of GraphicBorderSkin element and GeometryGroup instead of GeometryComposition, and it works. Anyway I’m sure I’m missing something simple and thanks in advance!!!

Answer 1

You should be able to use skin code like this (skinWidth and skinHeight are exposed inside the GraphicBorderSkin so you don’t need to override updateDisplayList and specify additional local variables for width and height):

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

     <strokes>
         <SolidStroke id="mainStroke" color="#333333" weight="3"/>
     </strokes>
        <fills>
            <RadialGradientFill    
             id="blueGradient"
             angle="0"
             focalPointRatio="0">
                <GradientStop 
                 alpha="1"
                    ratio=".25"
                    color="#ffffff"/> 
                <GradientStop 
                 alpha="1"
                    ratio=".70"
                    color="#003355"/>
                <GradientStop 
                    alpha="1"
                    ratio="1"
                    color="#111111"/>
            </RadialGradientFill>
        </fills>
        <!-- Creating the background -->
        <geometry>
        <!-- Creating a Rectangle to draw the gradient to and 
             moving the center of the gradient to the lower left corner -->
             <RegularRectangle  id="rect"
              fill="{blueGradient}" 
              stroke="{mainStroke}"
              height="{skinHeight}"
                 width="{skinWidth}" 
                 />
                 <!-- Alernative:   <RegularRectangle fill="{blueGradient}" stroke="{mainStroke}" height="100%" width="100%"/> -->
        </geometry>
</GraphicBorderSkin>

In this case, you don’t need a GeometryComposition enclosing the RegularRectangle. I also discussed this with Jason Hawryluk (Degrafa architect) and he pointed out the alternative way to specify via Geometry’s layout support – see the commented markup “Alternative” for the layout driven example.

And for the Canvas, you need to specify a width and height setting for it to draw:

<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%"
    styleName="ThreeWayGradient"/>