Question

I would like to know how to apply gradient and corner radius in flex.

Is css the only way? I mean I want to use more of flex properties to make this happen

Can someone give a sample class or code for it?

Thanks

Answer 1

First of all, as you’ve mentioned, these properties can be customized through CSs (header-colors, background-gradient-colors, highlight-alphas, etc)

Secondly, you can use Flash drawing API to create your own shapes in custom (or extended) components, but it’s much more tricky task:

package test
{
import mx.core.UIComponent;
import flash.display.Graphics;
import flash.display.GradientType;

public class DrawingTest extends UIComponent
{
    public function DrawingTest()
    {
        super();
    }

    override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
    {
        // you'll want to track the actual changes and redraw only in case if width, height or some other
        // significant property changes
        trace(unscaledWidth, unscaledHeight);
        var g:Graphics = graphics;
        // it's likely you want to make roundRadius and gradient parameters as styles of the component
        // or at least it's parameters.
        var roundRadius:Number = 30;
        g.clear();
        g.beginGradientFill(GradientType.LINEAR, [0x0, 0xFFFFFF], [0.5, 0.7], [0, 255]);
        g.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, roundRadius, roundRadius);
        g.endFill();
    }

}
}

Usage (add xmlns:test="test.*" to the top level component properties)

<test:DrawingTest width="250" height="400" />

It’s good to take a look at Graphics class documentation for further info: