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:
Very cool. I will have to check it out.
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...
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.
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?
Is there a way to use embedded fonts in the css and html for this component?
Embeding font did work for me :)
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).
I think the TextArea issue has something to do with that
http://rantworld.blogs.com/flashlit/2006/08/styling_flex_te.html
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}"/]
I have used this component multiple times with embedded fonts without problem. I'm not sure why it isn't working for you
Very nice, Rob!
Any chance that you have tried this with a rollover color?
Thank you!!
Why does it force line break after style tags, for example after myCustomTag? Is it possible to get around this?
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?
Post a Comment