Use HTML text in mobile controls

To use the htmlText property in mobile text controls, access the property on the StyleableTextField subcontrol. The following example creates a TextInput and TextArea control and adds HTML markup to the contents:

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/HTMLTextView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HTMLText View"
        creationComplete="initView()">
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            import spark.components.supportClasses.StyleableTextField;
            
            private function initView():void {
                StyleableTextField(ta1.textDisplay).htmlText = "TextArea <b>bold</b> <i>italic</i>.";
                StyleableTextField(ti1.textDisplay).htmlText = "TextInput <b>bold</b> <i>italic</i>.";
            }
        ]]>
    </fx:Script>
    
        <s:TextArea id="ta1" width="100%"/>          
        <s:TextInput id="ti1" width="100%"/>         
</s:View>

The default styling is not included, so if you add a hyperlink, the text control does not show underlining and link colors. You can add styles with a StyleSheet object, as the following example shows:

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/HTMLLinkView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HTMLText with Link"
        creationComplete="initView()">
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import spark.components.supportClasses.StyleableTextField;
            
            private function initView():void {
                var styles:String = "a { color: #33CCFF; } a:hover { color: #3366CC; text-decoration: underline; }";
                var myStyleSheet:StyleSheet = new StyleSheet();
                myStyleSheet.parseCSS(styles);
                
                StyleableTextField(ta1.textDisplay).styleSheet = myStyleSheet;
                StyleableTextField(ta1.textDisplay).htmlText = "Click <a href='http://www.adobe.com'>here</a>.";
            }
        ]]>
    </fx:Script>
    
    <s:TextArea id="ta1" width="100%"/>
    
</s:View>