IFormatResolver And Using CSS With TLF

TLF supports a new property on TextFlow called formatResolver of type IFormatResolver. Clients can supply an implementation that can be used to do CSS or “based-on” styling (ala traditional word processors).


The following link is a sample implementation with a primitive styling editor.Download fileThis is the SimpleEditor application from the labs release plus some new UI. The application loads a CSS style sheet at startup that supplied a few styles. The editor lets you modify the “id” or “styleName” property of a particular element or selection range.The example style sheet has a few simple styles. These are available for use in the editor.

  • element selectors for span and TextFlow
  • class selectors named italic and center
  • an id selector named bold

Modify the style sheet and rebuild it to make additional styles available.Class CSSFormatResolver is an implementation of IFormatResolver for simple CSS styling. IFormatResolver requires 5 methods.

/** any cached styling information is now invalid and need recomputing */
function invalidateAllTargets(textFlow:TextFlow):void;
/** cached information on this element is now invalid (e.g. parent changed, id changed, styleName changed) */
function invalidateTarget(target:Object):void;
/** Given a FlowElement or IContainerController return any TLFFormat style settings */
function resolveTextLayoutFormat(target:Object):ITextLayoutFormat;
/** Given a FlowElement or IContainerController and the name of a style property return a style value or undefined*/
function resolveUserFormat(target:Object,userFormat:String):*;
/** Called when the owning TextFlow is copied. Return a styleresolver for the copy. */
function getResolverForNewFlow(oldFlow:TextFlow,newFlow:TextFlow):IFormatResolver;

TLF calls the resolveTextLayoutFormat function when it is doing its cascade of attributes. Only styles set by the particular elements styling are set into the returned TextLayoutFormat. Other styles should be undefined. These styles take precedence over any inherited styles from the parent. Any styles directly set on the element take precendence over the styles returned by the formatResolver.Whenever an elements id or styleName is changed the invalidateTarget API is called from within TLF.The resolveUserFormat API is called when the client calls getStyle on a FlowElement using a non-TLF styleName. This lets user styles cascade through the TLF elements.