Flex 4 TextFlow styling (the simple way)

Recently, I was looking for a solution myself for the Text layout framework styling issues. It sounds so complicated to apply CSS styles to textFlow.

I am not sure if you guys would like it or not, I moved all my text styles to an XML file as below:

styles.xml:

<?xml version=”1.0″ encoding=”utf-8″?>
<styles>
<theme themeId=”2″ themeName=”bubbles”>
<component styleId=”heading1″ colour=”0x548AC6″ fontFamily=”MarkerFeltWidePlain” fontSize=”26″ textAlign=”right”/>
<component styleId=”body” colour=”0x000000″ fontFamily=”Sansation” fontSize=”11.5″ textAlign=”left”/>
<component styleId=”caption” colour=”0xFFFFFF” fontFamily=”Sansation” fontSize=”11″ textAlign=”center”/>
<component styleId=”question” colour=”0xFFFFFF” fontFamily=”MarkerFeltWidePlain” fontSize=”12″ textAlign=”left”/>
<component styleId=”wall” colour=”0x000000″ fontFamily=”Sansation” fontSize=”10″ textAlign=”left”/>
</theme>
</styles>

Now during app initialization, I read all my styles in a stylesColl (collection) after converting above to VO’s as below:

StyleVO:

public class StyleVO
{
public var styleId:String;
public var colour:String;
public var fontFamily:String;
public var fontSize:int;
public var textAlign:String;
}

And here is the final bit, applying the style to textFlow:

private function applyStyles(tf:TextFlow):void
{
var ts:StyleVO = AppUtil.getObjectByPropertyValue(GlobalModel.stylesColl, ‘styleId’, someStyleName) as StyleVO;
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
textLayoutFormat.renderingMode = RenderingMode.CFF;

textLayoutFormat.color = ts.colour;//0x336633;
textLayoutFormat.fontFamily = ts.fontFamily;//”Arial, Helvetica, _sans”;//
textLayoutFormat.fontSize = ts.fontSize;//14;
//textLayoutFormat.textAlign = ts.textAlign;//14;
//textLayoutFormat.paragraphSpaceBefore = 15;
//textLayoutFormat.paragraphSpaceAfter = 15;
//textLayoutFormat.typographicCase = TLFTypographicCase.LOWERCASE_TO_SMALL_CAPS;

tf.invalidateAllFormats();
tf.hostFormat = textLayoutFormat;

//IEditManager(tf.interactionManager).app .applyFormatToElement(tf, textLayoutFormat);
var prevManager:ISelectionManager = tf.interactionManager;
var editManager:EditManager = new EditManager();
var sel:SelectionState = new SelectionState(tf, 0, ste.text.length);
tf.interactionManager = editManager;
editManager.applyLeafFormat(textLayoutFormat, sel);
tf.interactionManager = prevManager;

tf.flowComposer.updateAllControllers();
}

And it all works very well.

Now, I can load that styles xml from anywhere, update it anytime and keep it simple.

Not sure how it limits me yet, if you know.. let me know about it.

Thanks.