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.

13 Responses to IFormatResolver And Using CSS With TLF

  1. Faisal says:

    Hi,I am getting the following error:1045: Interface IFormatResolver was not found. SimpleEditorWithCSS/src CSSFormatResolver.as.I have (i)textLayout_conversion.swc, (ii) textLayout_core.swc and (iii) textLayout_edit.swc copied in to frameworks/libs folder.Am I missing any swc file ?Faisal

  2. Richard Dermer says:

    Sounds like the wrong versions of the swc files. Make sure you have the latest versions from the gumbo respository. The link is in the FAQ on the forum:http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=669

  3. Faisal says:

    That worked, thanks.

  4. Jack F says:

    I’m trying too. I downloaded the latest version from the forum as you suggest and still get errors like “Type was not found … CharacterFormat”

  5. Richard Dermer says:

    That class has been deleted from TLF as of build 370 and isn’t used in the sample project.I suggest you check carefully for out of date versions of the textLayout swcs possibly somewhere in your Flex SDK folder.

  6. separ8 says:

    as the StyleManager is part of the flex framework, is there a way to work with CSS in a actionscript project in flex builder ? if not, could you show us how to use CSS in a actionscrip project with the TLF

  7. separ8 says:

    As this example seems to rely on some flex classes is there an equivalent solution for a pure actionscript project ?

  8. Faisal says:

    My application requires frequent update of css styles, so rebuilding css file each time will not work for me,Just wondering if anybody succeeded in loading css file dynamically without compiling in to swf file.Faisal

  9. Jed says:

    Hi,I’m trying to use TLF with CSS and embedded font but it doesn’t really work.How is it supposed to work??(I’m on FDT with Flex 4 beta1 SDK).Thanks.

  10. Rezmason says:

    I’ve had little success with this feature, but I’m sure it can be attributed to human error.Although no one is really expected to use the TLF in an ActionScript project (as I am), it would be great if a MAX session or similar talk could be given on implementing TLF in code. Without relying on Gumbo.You might only have one attendee, but I would make it to that session. 😀

  11. Jono says:

    this is so frustrating – all i, and many other, would like is a simple pure actionscript way to add css to a tlf textfield. WORK IT OUT.

  12. Jamie says:

    I second Jono’s comment. How can you complicate something as simple as displaying text? Isn’t Flash supposed to be strong on the design side? Having to jump through hoops to get text to render properly seems contradictory to the nature of the Flash platform, especially when we can use HTML and it works better. These half-baked implementations are getting old, especially for $699. Maybe you should hold on a release until it’s ready. Geez…

  13. Richard Dermer says:

    This post has TLF 2.0 versions of the original demos. New capabilities are added in these examples. There is also an AS3 example that does not use Flex.
    http://blogs.adobe.com/tlf/2011/01/tlf-2-0-changes-subparagraphgroupelements-and-typename-applied-to-textfieldhtmlimporter-and-cssformatresolver.html