Experimenting with F*CSS

Posted Mon, 2010-08-09 08:59 by rbezemer

I've been spending some time using the open source F*CSS library. This is an excellant library designed for flash that lets you apply flash based properties as a css stylesheet. This may not seem like much but it paves the way for adding some very powerfull features to your flash applications.

In this app you'll see the mxml file we are using in the top left, the css file we are using in the top right, and the inflated container with no styles applied on the bottom. Click on any of the three CSS buttons on the far right to apply a different stylesheet to the mxml.

Flex Sample with source code viewer enabled

You will notice the data in the mxml file on the top left never changes, all we are doing is applying the new css file on the top right to the container pictured at the bottom (sorry I used some pretty ugly css layouts, but it's the thought that counts!).

Where this really shines is it turns actionscript (flash / flex code) properties and flex style properties into the same thing. What this means is we can now do html like css transforms on any of our objects in flash and keep all their properties in the same file.
To put it in a form that's easier to grasp, you can very easily create a flash version of  : http://csszengarden.com/

The one hiccup I did notice was that this library was primarily designed for Flash without anything in mind for Flex style support. To get around this I implemented the following solution in my test app, which you will need to download the fcss source code in order to compile your project. While it may not be the most efficient solution, it quickly and easily brings in support to fcss for all of flex's native style support as well as the support for standard flash object properties, making the library extremely powerfull for replicating common html transformations.

  1. package com.flashartofwar.fcss.applicators
  2. {
  3.   import com.flashartofwar.fcss.objects.PropertyMapObject;
  4.   import com.flashartofwar.fcss.utils.PropertyMapUtil;
  5.  
  6.   import flash.display.DisplayObject;
  7.  
  8.   import mx.core.UIComponent;
  9.   import mx.styles.CSSStyleDeclaration;
  10.   import mx.styles.StyleManager;
  11.  
  12.   public class FlexStyleApplicator extends StyleApplicator
  13.   {
  14.     public function FlexStyleApplicator()
  15.     {
  16.       super();
  17.     }
  18.  
  19.     override public function applyStyle(target:Object, styleObject:Object):void {
  20.       var propMap:PropertyMapObject = PropertyMapUtil.propertyMap(target);
  21.       var filteredProp:String;
  22.       var prop:String;
  23.  
  24.       var newStyleDeclaration:CSSStyleDeclaration = new CSSStyleDeclaration();
  25.  
  26.       for (prop in styleObject){
  27.         filteredProp = propertyFilter(prop);
  28.         var type:String = propMap[filteredProp];
  29.         if(filteredProp == "styleName") {
  30.           target[filteredProp] = styleObject[prop];
  31.         }
  32.         else if (target.hasOwnProperty(filteredProp)){
  33.  
  34.           target[filteredProp] = valueFilter(styleObject[prop], type);
  35.         }
  36.         else{
  37.           var value:* = valueFilter(styleObject[prop], type);
  38.           if(is_numeric(value)) {
  39.             value = Number(value);
  40.           }
  41.           newStyleDeclaration.setStyle(filteredProp,value);
  42.         }
  43.       }
  44.       StyleManager.setStyleDeclaration("."+styleObject["styleName"], newStyleDeclaration, true);
  45.  
  46.     }
  47.     override protected function propertyNotFound(name:String):void {
  48.       trace("Flex Style Applicator, property not set : "+ name);
  49.     }
  50.     protected function is_numeric(val:*):Boolean {
  51.       if (!isNaN(Number(val))) {
  52.         return true;
  53.       }
  54.       return false;
  55.     }
  56.   }
  57. }

  1. package com.flashartofwar.fcss.stylesheets
  2. {
  3.   import mx.styles.CSSStyleDeclaration;
  4.   import mx.styles.StyleManager;
  5.  
  6.   public class FlexStyleSheet extends FStyleSheet
  7.   {
  8.     public function FlexStyleSheet(name:String="undefined")
  9.     {
  10.       super(name);
  11.     }
  12.     override public function clear():void{
  13.       super.clear();
  14.       StyleManager.clearStyleDeclaration(stylesheet.name,false);
  15.  
  16.     }
  17.  
  18.     public function parseCSS(cssText:String, useCSSTidy:Boolean = true):IStyleSheet {
  19.       var styleSheet:IStyleSheet = super.parseCSS(cssText,useCSSTidy);      
  20.       var newStyleDeclaration:CSSStyleDeclaration = new CSSStyleDeclaration();
  21.       newStyleDeclaration.defaultFactory = function():void {}
  22.       StyleManager.setStyleDeclaration(styleSheet.name, newStyleDeclaration, false);
  23.  
  24.       return styleSheet;
  25.     }
  26.   }
  27. }

The above code creates a FlexStyleApplicator that fcss can use to check for valid flex styles and apply them to flex object classes. you can view the source code in action from the link to the flex file above
 

Trackback URL for this post:

http://www.softwarebyrichard.com/trackback/114
No votes yet