Known Participant

Question

Display HTML using RichText

Forum|Forum|16 years ago
July 29, 2009
2 replies
5945 views

I need to simply display standart HTML-formatted text in my Flex 4 application. The text I need to display contains simple elements like "p" and "b", like so:

The quick brown fox jumped over the lazy dog.

How do I display text like this inside of Flex? When I load the HTML file containing this text and set my RichText's "text" property with it, I get unformatted text. What am I doing wrong?

<s:RichText text="{htmlLoader.lastResult}"/>

<fx:Declarations>

<s:HTTPService id="htmlLoader" url="assets/legal/test.html"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

private function onCreationComplete():void {

htmlLoader.send();

}

]]>

</fx:Script>

Text layout framework

This topic has been closed for replies.

D

dgeurts11

Participant

Here is the example SimpleEditorWithCSS that was aformentioned, it is a great example of using a formatResolver(); I tried several approaches and the only way I could get a spark component to display html text and tie it with css was with a custom format resolver implements IFormatResolver. This is great that there is at least an option to achieve css without doing all inline styles in Spark. But why in the world is there not a default format resolver that you can pass a StyleSheet to? Writing a custom format resolver is pretty complicated and not user friendly for all developers. Is this because sdk's 4+ are in beta? I mean it took me 3 days of google and coding to even figure out and implement css in my spark components, that is pretty ridiculous if you ask me. You should be able to throw html content from a database and a stylesheet at a spark component and see output with styles. Well to end my rant I am happy that I can at least accomplish this but I dont see how spark or the TLF will be a success if it isnt more closely coupled with non inline CSS.

UPDATED::

Somebody posted a custom Format Resolver that they created from the SimpleEditorWithCSS sample in another post. The author updated the methods to match the latest SDK and added further support.

http://forums.adobe.com/message/2418411

G

GordonSmith

Participating Frequently

The 'text' property doesn't try to interpret any markup in the String that you set, because it doesn't know what version of what text markup language you might be using. To display richly-formatted text, you must set the 'textFlow' property to a TLF TextFlow, which is TLF's object-oriented way of describing rich text. A TextFlow is the root of a tree of FlowElements such as divs, paragraphs, spans, images, hyperlinks, etc. To create a TextFlow by "importing" HTML, use TLF's TextConverter class.

You should also be aware that importing HTML to create TextFlows has not gotten much testing yet from the Flex team, so let us know about your experience with it.

Gordon Smith

Adobe Flex SDK Team

R

rfkrocktkAuthor

Known Participant

Gordon, thanks for the tip. I just stumbled upon the new "textFlow" property of the RichText class. I was using Flex 4.0.0.7219 (for reasons related to incredible performance problems with loading Modules), but I just upgraded to 4.0.0.8883, which is the latest nightly build.

It's not really having any problems parsing my text now. There are a few things that aren't working exactly the way I'd like, but I can ultimately live with it right now. The things that are behaving strangely using this setup (4.0.0.8883) are images and spans.

The "img" tag works great, but one must manually specify the width and height of the image, just like in Flash 9 (which I was hoping would be fixed ). Span tags work well, except for the "style" attribute. One would assume to be able to use something like this:

<span style="color: #990000;">Hello world!</span>

But no color is displayed. I also am unsure if and how one would combine these spans with CSS entries, there doesn't seem to be a way to load CSS for the component to use. I also am unsure if and how one would go about including CSS in the source HTML document.

Link tags are working great, but I had to remember to use the RichEditableText control rather than the RichText control, as the RichText control does not provide for links.

G

GordonSmith

Participating Frequently

> Span tags work well, except for the "style" attribute.

I think you have to write . I don't believe the HTML importer supports the 'style' attribute.

> I also am unsure if and how one would combine these spans with CSS entries,

> there doesn't seem to be a way to load CSS for the component to use.

You can use Flex's styles to establish the default formatting for the entire component. For example, you can write a selector like

RichText { color: #111111 }

and then any tags that don't specify color will get #111111. But, unfortunately, individual FlowElements can't be styled simply by writing Flex CSS selectors. (That feature got dropped.) But a TextFlow has a property called 'formatResolver' which can be used to automatically apply formats to FlowElements, and I've seen demos of this being hooked up to Flex styles with not too much code. (You want to ask Rich Dermer, but he's out until August 10.)

The main TLF importer (for TEXT_LAYOUT_FORMAT) supports a <format> tag which you can use kind of like a CSS selector. I'm not sure whether the HTML importer supports it, so I hope one of the TLF engineers can comment on that.

> I also am unsure if and how one would go about including CSS in the source HTML document.

I'm pretty sure that none of the importers know how to parse CSS. They probably expect the HTML to be well-formed XML also, because I think they use AS3's E4X capabilities to do the parsing.

Gordon Smith

Adobe Flex SDK Team

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded