Monday, June 30, 2008

StyledText - Free Flex Component

As anyone who is familiar with Flex knows, you can style most of your components using CSS. Most people are also familiar with the Text component and its ability to render HTML using its htmlText property. The problem for me has always been that the CSS "classes" you define in your application's CSS are not available to the HTML content of a Text component. In other words, if your css had this in it:


a {
color:#ff0000;
text-decoration:underline;
}

and your Text components htmlText property had something like this in it:


<p>This is some content with <a href="http://www.mcgraphix.com/">a link</a> in it</p>

the link, would not be red or underlined.

So, after a quick search on Google with no luck, I figured I would just create my own solution. You can check it out for yourself (view source is enabled) or download the source code

15 comments:

Anonymous said...

Very cool. I will have to check it out.

Anonymous said...

I still wonder with adobe didn't include padding and margin top and bottom. Having to use
to create space between a header and a paragraph isn't exactly best practice...

Anonymous said...

Ok, I should have read myself before posting. So here again:
I still wonder why adobe didn't include padding and margin top and bottom. Having to use br tag
to create space between a header and a paragraph isn't exactly best practice...

Anyway great code, I will implement in my project right away.
Thanks man.

Anonymous said...

Can I use this like the Flex TextArea in AS - id.htmlText = "some text and html code..."; instead of the CDATA area in the mxml code?

Anonymous said...

Is there a way to use embedded fonts in the css and html for this component?

Anonymous said...

Embeding font did work for me :)

Anonymous said...

I suggest adding 'display' to the stylesList Array. inline and block are usefull for text formatting althought we still have to combine html tag and textformat tag for leftMargin leading and indent (until flash 10).

Now did somebody tried to extend this class from a TextArea component instead of a Text component.

I got an error on my test on line 108 (applying the style sheet to the component).

Anonymous said...

I think the TextArea issue has something to do with that

http://rantworld.blogs.com/flashlit/2006/08/styling_flex_te.html

Anonymous said...

But Yes yo can define the htmlText property with AS.

I suggest u use:
[mx:String id="thisPageHtmlText"]your text[/mx:String]


And then:
[controls:StyledText condenseWhite="true" id="styled" htmlText="{thisPageHtmlText}"/]

Rob McKeown said...

I have used this component multiple times with embedded fonts without problem. I'm not sure why it isn't working for you

Anonymous said...

Very nice, Rob!

Anonymous said...

Any chance that you have tried this with a rollover color?

Anonymous said...

Thank you!!

Anonymous said...

Why does it force line break after style tags, for example after myCustomTag? Is it possible to get around this?

Jason said...

I too am interested in the ability to use a:hover in my css along with this component. Has anyone had any luck getting that to work?