RE: [flexcoders] Re: Flex2B3: Container fillColors

Geoffrey.Rogers Wed, 19 Jul 2006 11:12:58 -0700

Tim, I saw you had the same problem with Gradient background too with container components. I’m also trying to skin the background of a container (“VBOX”). But I’m not having any luck with it.

Here is an example of my code. I am using Flex Builder 2.0 final.

//MXML code

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:VBox x="65" y="60" borderSkin="utils.skins.BackgroundGradientFill" width="100%" height="100%" backgroundColor="#00ff00">

</mx:VBox>

</mx:Application>

//Skin Class

package utils.skins

{

import mx.skins.RectangularBorder;

import flash.geom.Rectangle;

import flash.geom.Matrix;

import flash.display.DisplayObjectContainer;

import mx.core.IUIComponent;

import flash.events.Event;

import mx.managers.ISystemManager;

import flash.display.Sprite;

import flash.display.DisplayObject;

import flash.display.GradientType;

import flash.display.SpreadMethod;

public class BackgroundGradientFill extends RectangularBorder

{

private var _fillColors:Array;

private var _fillAlphas:Array;

private var _fillRatios:Array;

private var _fillMatrix:Matrix;

private var _fillType:String;

private var _fillCornerRadius:Number;

private var _fillRotation:Number;

private var _spreadMethod:String;

public function BackgroundGradientFill()

{

super();

}

override protected function updateDisplayList(w:Number, h:Number):void{

super.updateDisplayList(w,h);

graphics.clear();

_fillCornerRadius = getStyle("cornerRadius") ? undefined : 0;

//var rota = getStyle("backgroundGradientRotation") ? undefined : 2;

_fillRatios = getStyle("backgroundGradientRatios") ? undefined : [0xCC,0xFF];

_fillColors = getStyle("backgroundGradientColors") ? undefined : [0x000000,0xFFFFFF];

_fillAlphas = getStyle("backgroundGradientAlphas") ? undefined : [1.0,.50];

_fillType = getStyle("backgroundGradientType") ? undefined : GradientType.LINEAR;

_fillMatrix = new Matrix();

_fillMatrix.createGradientBox(w,h,0,0,0);

_spreadMethod = SpreadMethod.PAD;

_fillRotation = 2*Math.PI*(90/360);

_fillMatrix.rotate(_fillRotation);

graphics.beginGradientFill(_fillType,_fillColors,_fillAlphas,_fillRatios,_fillMatrix,_spreadMethod);

//or this but I don't get anywhere. graphics.beginFill(0xFFFFFF,1.0);

if(_fillCornerRadius){

var cr = _fillCornerRadius;

graphics.drawRoundRectComplex(0,0,w,h,cr,cr,cr,cr);

}

graphics.endFill();

}

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tim Hoff
Sent: Thursday, June 22, 2006 7:48 PM
To: [email protected]
Subject: [flexcoders] Re: Flex2B3: Container fillColors

Hi Mike,

I used your code example and was able to create a skin class that can be applied to the background of a container. I added/changed the highlighted code to make the skin class use more of the container's CSS properties. This is a useful technique! While playing around with this, I stumbled on something. If you change the first ration to an invalid setting (like ox140), the rectangle isn't drawn. However, the original background is also gone. This creates a transparent background without using alphas. The child controls/components are displayed as if they are floating. Too cool! I'm starting to believe that you can do just about anything with Flex, as long you know how.

Thanks again,
Tim Hoff

// CSS ------------------------------------------------------------------------------

.myPanel {
   cornerRadius:    6;
   fillAlphas:     1, 1;
   fillColors:     #FFFFFF, #326CB4;
   borderSkin:     ClassReference("extendedComponents.ContainerBackgroundFillColors");
   roundedBottomCorners: true;
}

// Skin Class -----------------------------------------------------------------------

package extendedComponents
{

import flash.geom.Matrix;
import flash.display.GradientType;
import mx.skins.RectangularBorder;

public class ContainerBackgroundFillColors extends RectangularBorder
{
     public function ContainerBackgroundFillColors()
     {
         super();
     }

     public override function setActualSize(w:Number, h:Number):void
     {
         super.updateDisplayList(w, h);

         graphics.clear();
         var roundedBottomCorners:Boolean = getStyle("roundedBottomCorners");
         var cornerRadius:Number = getStyle("cornerRadius");
         var fillAlphas:Array = getStyle("fillAlphas");
         var fillColors:Array = getStyle("fillColors");

         var fillType:String = GradientType.LINEAR;
         //var alphas:Array = [100, 100]; replaced with fillAlphas
         var ratios:Array = [0x70, 0xFF];
         var matr:Matrix = new Matrix();
         var rotation:Number = 2 * Math.PI * (90 / 360);

         matr.createGradientBox(h, w, 0, 0, 0); //w,h switched for rotation
         matr.rotate(rotation);
         var spreadMethod:String = SpreadMethod.PAD;

         graphics.beginGradientFill(fillType, fillColors, fillAlphas, ratios, matr, spreadMethod);
         if (roundedBottomCorners){
         graphics.drawRoundRectComplex(0, 0, w, h, cornerRadius, cornerRadius, cornerRadius, cornerRadius);
         } else {
         graphics.drawRoundRectComplex(0, 0, w, h, cornerRadius, cornerRadius, 0, 0);
         }
         graphics.endFill();
     }
}
}

//---------------------------------------------------------------------------------------

--- In [email protected], "Tim Hoff" <[EMAIL PROTECTED]> wrote:
>
> Thanks Mike,
>
> I started trying to do something similar to this before I asked for
> help. I kept stepping on my own foot figuring out a way to apply
> it. I have a lot to do today. But, I'll try to work this in.
> Again, this may be something that has been added to Flex final, but
> good gymnastics. Thanks again, I'll let you know how it works out.
>
> -TH
>
> --- In [email protected], "Michael Schmalle"
> teoti.graphix@ wrote:
> >
> > Hey man,
> >
> > this is a primitive example:
> >
> > myContainer.setStyle("borderSkin", TaskListTitleBarBorderSkin );
> >
> > or you know in CSS ;-)
> >
> > code
> > -------------------------------------------------------
> >
> > package com.teotiGraphix.skins.teo
> > {
> >
> > import flash.geom.Matrix;
> > import flash.display.GradientType;
> >
> > import mx.skins.RectangularBorder;
> >
> > /**
> > *
> > */
> > public class TaskListTitleBarBorderSkin extends RectangularBorder
> > {
> >
> > var backgroundColor:Number;
> >
> > /**
> > * Constructor
> > */
> > public function TaskListTitleBarBorderSkin()
> > {
> > super();
> > }
> >
> > /**
> > *
> > */
> > public override function setActualSize(w:Number, h:Number):void
> > {
> > super.setActualSize(w, h);
> >
> > graphics.clear();
> > var radius = getStyle("cornerRadius");
> > var fillColors:Array = getStyle("fillColors");
> >
> > var fillType:String = GradientType.LINEAR;
> > //var colors:Array = [0xFFFFFF, 0xC7D3F7];
> > var alphas:Array = [100, 100];
> > var ratios:Array = [0x33, 0xFF];
> > var matr:Matrix = new Matrix();
> > matr.createGradientBox(w, h - 5, 0/*(Math.PI/2)*/, 0, 0);
> > var spreadMethod:String = SpreadMethod.PAD;
> >
> > graphics.beginGradientFill(fillType, fillColors, alphas,
> ratios,
> > matr, spreadMethod);
> >
> > graphics.drawRoundRectComplex(0, 0, w, h, radius, radius,
> 0, 0);
> > graphics.endFill();
> > }
> > }
> > }
> >
> > Peace, Mike
> >
> > On 6/20/06, Tim Hoff TimHoff@ wrote:
> > >
> > > In the process of styling, I wasn't able to apply gradient
> fillColors
> > > to containers (Panel, VBox...). Maybe, didn't make the final
> cut. In
> > > some situations this would come in handy. Vector graphics consume
> > > less resources. Has anyone subclassed this, to draw graphics as a
> > > container's background?
> > >
> > > Kindly,
> > > Tim Hoff
> > >
> > >
> > >
> >
> >
> >
> > --
> > What goes up, does come down.
> >
>

__._,_.___

-- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com

SPONSORED LINKS

`Web site design development`	`Computer software development`	`Software design and development`
`Macromedia flex`	`Software development best practice`

YAHOO! GROUPS LINKS

Visit your group "flexcoders" on the web.
To unsubscribe from this group, send an email to: [EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.

__,_._,___

RE: [flexcoders] Re: Flex2B3: Container fillColors

Reply via email to