8 thoughts on “Hacking width and height properties into Flex’s CSS model”

1. This is very cool and useful – thanks for posting it. However, it seems to have a limitation: if you want to specify the position or dimensions of a component through CSS, you have to put it in an extHBox. What I really wanted is to be able to specify dimensions for, say, a text label directly in that text label’s CSS declaration.

   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;
   }
   }
   }
   }

2. Hi, I read your post because I was looking info on how to change width, height and other properties trough css.

   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.

3. I’m a bit late on the table, but someone might be interested in a solution that uses include to avoid code duplication for adding this approach to multiple classes.

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

4. I’m using exactly the code you provide above. I’m loading different compiled CSS at runtime to change the size of the button. When I load a CSS without any width and height properties, the width and height do not revert to the default values. That is, the button does not automatically resize to fit the text of the label and they retain the width and height of the last CSS loaded. I tried changing the IF statement in applyProperties to

   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?

5. Using your tips in here I have build a little class that takes out the overriding of all the classes, you only need to override the top most container of you application and you are done. Check it out here:

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

6. Hi,

   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
   

7. Nice one. Thanks for this nice posting. Keep giving this type of knowledge in future.

Comments are closed.