R – A VBox with only one rounded corner and gradient background

actionscriptactionscript-3apache-flexflex3

I'm working with Flex 3.4 SDK.

I'm trying to programmatically(yep, must be this way) style/skin a VBox so that its top right corner is rounded, and it gets a two colors gradient brackground.

Modifying examples I found around I was able to accomplish both effects(corner and background) but only separately:

VBox with not all rounded corners: http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html

VBox with gradient background: http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/

But what I need to do is to apply both at the same time. And all my coding attempts so far have failed silently.

Would anyone know how to go about doing this correctly?

Best Answer

I have a post on my blog on how to make this exact component Here.

You create a basic custom MXML component (extending in this case, VBox). You specify a programmatic skin, which is where the bevel and gradient gets applied.

The programmatic skin does all it's drawing in the updateDisplayList function.

Here is some of the code (the rest is on my blog, with a demo)

   var g:Graphics = graphics;
   var cn:Number = this.getStyle("cornerRadius");
   var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn;
   var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn;
   var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn;
   var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn;
   var gradFrom:Number = this.getStyle("gradientFrom");
   var gradTo:Number = this.getStyle("gradientTo");

   var b:EdgeMetrics = borderMetrics;
   var w:Number = unscaledWidth - b.left - b.right;
   var h:Number = unscaledHeight - b.top - b.bottom;
   var m:Matrix = verticalGradientMatrix(0, 0, w, h);

   g.clear();
   g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m);
   g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND);
   GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr);
   g.endFill();
  }

for a demo, look Here. Hope this helps.

Related Solutions

R – Flex having a VBox with Vertical Buttons

try putting all the buttons inside an Hbox and then setting the rotation of the Hbox to 90.

Oh and also make sure you rotate around using a point at the center.

Apache – Flex 3: Rounded Menu with a PopUpButton

Finally figured this out. Here is the solution that I came up with:

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Bindable]
            private var myMenu:Menu;

            private function popUpButtonInit():void {
                myMenu = new Menu();
                myMenu.dataProvider = arr;

            }

            private function menuOpenHandler():void {
                    var maskx:uint = myMenu.x; 
                    var masky:uint = myMenu.y - 1; 
                    var maskw:uint = myMenu.getExplicitOrMeasuredWidth(); 
                    var maskh:uint = myMenu.getExplicitOrMeasuredHeight(); 
                    var rad:int = myMenu.getStyle("cornerRadius");

                    var roundRect:Sprite = new Sprite();
                    roundRect.graphics.beginFill( 0xFFFFFF );
                    roundRect.graphics.drawRoundRect( maskx, masky, maskw, maskh, rad ); 
                    roundRect.graphics.endFill(); 
                    myMenu.mask = roundRect;

            }           


        ]]>
    </mx:Script>

    <mx:Style>
        Menu {
            corner-radius: 30;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:PopUpButton width="78" height="25"  
                    initialize="popUpButtonInit();" 
                    popUp="{myMenu}" popUpGap="3" open="menuOpenHandler();" 
                    horizontalCenter="0" verticalCenter="0">
    </mx:PopUpButton>

</mx:Application>

If you happen to have a better solution please comment.

Best Answer

Related Solutions

R – Flex having a VBox with Vertical Buttons

Apache – Flex 3: Rounded Menu with a PopUpButton

Related Topic