« Introduction to TLF in Flex from the Adobe Developer Connection | Main | Example: Adding a scrollbar in Flex »

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 file

This 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.

Comments

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

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

That worked, thanks.

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"

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.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)