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.




Styles in Flex 4 example

A quick note on declaring inline styles for Flex 4. If you're looking to quickly set up a text field in your mxml file but don't want to declare a separate css file (like in the case where your application only has one mxml file) you may need this.



    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
       
        #text{
            font-family:arial;
            font-size:12;
        }
   
    </fx:Style>

   <s:RichText id="text" x="42" y="20" text="Some text of sorts" />


Where #text is the id of your text field.