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

17 comments:

Zwigby 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?

Tony 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

Joseph said...

Very nice, Rob!

Gina Allen said...

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

Mikko said...

Thank you!!

Mikko 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?

Anonymous said...

Do you like playing in the game which you need to use wonderland Gold, when you do not have wonderland online Gold, you must borrow wonderland money from friends, or you
buy wonderland Gold. If you get cheap wonderland online Gold, you can continue this game.

I LOVE YOU said...

AV,無碼,a片免費看,自拍貼圖,伊莉,微風論壇,成人聊天室,成人電影,成人文學,成人貼圖區,成人網站,一葉情貼圖片區,色情漫畫,言情小說,情色論壇,臺灣情色網,色情影片,色情,成人影城,080視訊聊天室,a片,A漫,h漫,麗的色遊戲,同志色教館,AV女優,SEX,咆哮小老鼠,85cc免費影片,正妹牆,ut聊天室,豆豆聊天室,聊天室,情色小說,aio,成人,微風成人,做愛,成人貼圖,18成人,嘟嘟成人網,aio交友愛情館,情色文學,色情小說,色情網站,情色,A片下載,嘟嘟情人色網,成人影片,成人圖片,成人文章,成人小說,成人漫畫,視訊聊天室,性愛,聊天室,情色,a片,AV女優