How do I use a pre-defined CSS style for a programmatically drawn TextField?

Question

I have a graphical application that renders text to BitmapData - right now it's hardcoded to use a specific font, and that's fine for testing, but for production I really need it to be style-able.

The rest of the application uses specific fonts, and I want to be able to just use a stylename (the style of the font) to create a TextFormat object to pass to the text sprites embedded TextField object..

So here's the sequence now, roughly:

     var format:TextFormat = new TextFormat();
  format.font = "Arial";
  format.color = 0xFF0000;
  format.size = 12;
  // tf is a previously instantiated TextField()
  tf.defaultTextFormat = format;
  tf.autoSize = TextFieldAutoSize.LEFT;

  tf.text = _text;

Then later, it's simply drawn with:

     bmpData.fillRect(srcRect,0x00000000);
  bmpData.draw(tf);

Now this is nasty, so how do I get a StyleSheet or TextFormat from my apps css definitions? I've looked in the StyleManager, the CSSStyleDeclaration, nothing seems to quite fit. What's the sequence here, anyone?

Answer 1

Basically you can just add [style] metadata tags to your custom class to define your custom style properties, specify values for those properties in your css, and use getStyle("myCustomStylePropertyName") in your code to get the values set in the css.

See Flex 3 help: Example: Creating style properties for more info.

Answer 2

You could try something like the following

If you set something in your CSS file called TextFormat.

var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextFormat")
yourComponent.setStyle("textAlign", getStyle("headerTextAlign"));
yourComponent.setStyle("fontFamily", getStyle("fontFamily"));

This should do what you’re looking for.