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">
            He <s:span fontWeight="bold">huffed</s:span>
            and <s:span fontWeight="bold">puffed</s:span>

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.

Tuesday, January 4, 2011

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.

        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

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

Where #text is the id of your text field.