for existing components i do this:

<mx:Button label="…" click="action()" styleName="myStyle"
height="{StyleManager.getStyleDeclaration('.myStyle').getStyle('height')}"

styleName – attribute is for other css properties

http://myflex.wordpress.com/2009/12/20/adding-width-height-x-and-y-into-the-css-model-of-flex/

if (prop != null)
this[item] = prop;
else
this[item] = 0;

but my button becomes invisible when I don’t specify width and height in the CSS. Any suggestion?

http://www.actionscript.org/forums/showthread.php3?t=208349

I came with a solution to modify the CSS when you change the properties.

I spent a few hours trying to do so, and I’ll be gladly if you tell me of a way to improve the code.

Basically what I did was overriding the setters for those properties. Pretty much like this:

class …. extends Box{

private var _RealizarModificacionAPropiedadInternaPublica:Boolean;

override public function set width( value:Number ):void{

if( this._RealizarModificacionAPropiedadInternaPublica ){

super.width = value;
this._RealizarModificacionAPropiedadInternaPublica = false;

}else{

this.setStyle( CineticaContenedorCorredizo.ESTILO_ANCHO_PRINCIPAL, value );

}

}

override public function styleChanged( styleProp:String ):void{

switch( styleProp ){

case CineticaContenedorCorredizo.ESTILO_ANCHO_PRINCIPAL:

this._RealizarModificacionAPropiedadInternaPublica = true;
this.width = this.getStyle( ‘width’ );
this.invalidateDisplayList( );
break;

default:
super.styleChanged( styleProp );
break;

}

}

}

Let me know what you think.

So here’s what I came up with. This is a Canvas that not only gets its position and dimension properties from its CSS declaration, but gives the same flexibility to its children.

package view.containers
{
/* inspired by http://www.craftymind.com/2008/03/31/hacking-width-and-height-properties-into-flexs-css-model

This is a canvas that allows for the properties width, height, etc (see the properties array) to be set
through the component’s CSS file.
*/

import mx.containers.Canvas;
import mx.core.IUIComponent;
import mx.core.UIComponent;

public class CanvasExt extends Canvas
{
private static const properties : Array = [“width”, “height”, “percentWidth”, “percentHeight”, “x”, “y”, “visible”];

public function CanvasExt()
{
super();
}

override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if(!styleProp || styleProp == “styleName”)
{
//if runtime css swap or direct change of stylename
updateProperties(this);
for ( var i : int = 0; i < numChildren; i++ )
{
var child : UIComponent = UIComponent ( getChildAt ( i ) );
updateProperties ( child );
}
}
}

private function updateProperties(obj:UIComponent):void
{
for each (var item:String in properties)
{
var prop:Object = obj.getStyle(item);
if(prop != null)
obj[item] = prop;
}
}
}
}