Tuesday, January 25, 2011

Quickly Embedding HTML/RichText in the RichTextArea in Flex 4 example

In Flex Builder you can visually layout your application in the design view. This is a massive time save, especially when constructing a quick utilitarian application or proof of concept. Unfortunately there doesn't seem to be a particularly good way to enter rich text into a positioned RickTextArea. You can enter text in the design view but you can't embolden just a portion of the text or underline just one word.

A quick way  to get around shortfall is to switch over to the source view and embed some quick HTML structure into the RickText Spark component.
<s:RichText id="someText" x="53" y="23" width="449" height="153">
        <s:p>
            He <s:span fontWeight="bold">huffed</s:span>
            <s:br/>
            <s:br/>
            and <s:span fontWeight="bold">puffed</s:span>
        </s:p>
</s:RichText>

The spark namespace has most of the standard HTML tags defined, allowing to specify basic html structures inside of a RichText area. This is a quick way to add some Rich Text to you component. If you need to keep style elements separate, which you probably should, I think you can use the same method I used in the last post.


No comments:

Post a Comment