Skip navigation
sabird
sabird
Currently Being Moderated

<b> and <i> tags not working in StyleableTextField for mobile development

May 14, 2012 9:14 AM

Tags: #flex #html #mobile #actionscript #flex_mobile #4.6 #flex_4.6 #styleabletextfield

I'm trying to dynamically produce TextArea instances in a Flex mobile app that implement html formatting.  I've made a lot of progress, but simple <b> and <i> tags are not being rendered correctly. 

My current hypothesis is that I need to embed the italic and bold fonts.  I am currently not embedding fonts for these particular TextArea instances at all -- they are rendering using the system font.  In my previous experience, this eliminates problems with rendering <b> and <i> text.  However, when deploying on mobile platforms, I don't know for sure if there is a bold or italic system font natively available. 

 

If I need to embed the bold and italic fonts for the tags to process correctly, does anyone know which font(s) I should embed and how I should name them so that the html will be able to find them and render correctly?  I am applying a CSS to these TextArea instances in the full app, so I can do any font embedding there if necessary.  I am planning to compile this app for both iOS and Android, in case that makes a difference. 

 

Below is a simplified example of the code I'm using.  The TextArea that is generated is formatted honoring the <br /> tags, but ignoring the <b> and <i> tags. 

 

Thanks in advance for any help. 

 

import mx.events.FlexEvent;

import spark.components.TextArea;

import spark.components.supportClasses.StyleableTextField;

import spark.skins.mobile.TextAreaSkin;

 

protected function application1_creationCompleteHandler(event:FlexEvent):void

{

          var textArea0:TextArea = new TextArea();

          textArea0.setStyle("skinClass", TextAreaSkin);

          addElement(textArea0);

          var styleableTextField0:StyleableTextField = StyleableTextField(textArea0.textDisplay);

          styleableTextField0.multiline = true;

          styleableTextField0.htmlText = "<b>bold</b><br /><i>italic</i><br />normal";

}

1476 Views   7 Replies   Latest reply: Flex harUI, May 20, 2012 10:45 PM
 
Replies
  • Flex harUI
    Currently Being Moderated
    1. Flex harUI,
    May 14, 2012 1:35 PM   in reply to sabird
    Report

    Try it in a non-mobile app to make sure you’ve got the right code.

     
    |
    Mark as:
  • sabird
    Currently Being Moderated
    2. sabird,
    May 18, 2012 11:32 AM   in reply to Flex harUI
    Report

    Thanks for the suggestion.  The problem with that, as far as I can see, is that only the mobile skin for TextArea contains a textDisplay typed as StyleableTextField.  I'm not sure that I can test it in a non-mobile app without changing so many varialbes that the test will be relatively meaningless. 

     

    What I have done is to try to embed the regular, bold and italic versions of my font using CSS, to no avail.  The <br /> and <a href=''></a> tags are rendered perfectly, but the b & i tags do nothing. 

     

      var styles:String =  "a { color: #FFE043; textDecoration: underline; } a:active{ color: #ffffff;}" +

      "@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial.ttf');          embedAsCFF: false;}@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial Italic.ttf');          fontStyle: italic;          embedAsCFF: false;}@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial Bold.ttf');          fontWeight: bold;          embedAsCFF: false;}";

                                            var myStyleSheet:StyleSheet = new StyleSheet();

                                            myStyleSheet.parseCSS(styles);

     

    ...

     

    styleableTextField0.styleSheet = myStyleSheet;

     
    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    3. Flex harUI,
    May 18, 2012 2:21 PM   in reply to sabird
    Report

    I think you can swap in a mobile skin on a desktop app.  Does it work in a mobile app run on the desktop emulator?

     

    If you are not embedding any fonts, then it shouldn’t matter that you embed bold and italic versions, but if you are, then you have to embed for all bold/italic combinations.

     

    Also, the styleSheet property on a TextField is not the same things as the Flex CSS style subsystem.

     
    |
    Mark as:
  • sabird
    Currently Being Moderated
    4. sabird,
    May 18, 2012 8:57 PM   in reply to Flex harUI
    Report

    It does not work on the mobile app in the desktop emulator.  Also, at your advice I've tried running this as both a desktop app and as a web app.  In both cases, the following classes were unavailable to me: spark.components.supportClasses.StyleableTextField, spark.skins.mobile.TextAreaSkin, and spark.skins.mobile.TextAreaSkin.  Changing these classes, it seems, will change the app to the point where a test will be irrelevant.  Thanks for the suggestions, though. 

     
    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    5. Flex harUI,
    May 18, 2012 11:30 PM   in reply to sabird
    Report

    You would have to add the mobile swcs to your project to use them on the desktop.

     

    In the emulator try to get to the properties on the StyleableTextField.  Is embedFonts = true?  What is the htmlText property value?

     
    |
    Mark as:
  • sabird
    Currently Being Moderated
    6. sabird,
    May 20, 2012 6:46 PM   in reply to Flex harUI
    Report

    Huh!  I tried tracing the htmlText property after formatting, and the bold and italic tags are not there anymore.  Unexpected, but consistent with the results.  Thanks for suggesting that test.  Here is the line where I assign the htmlText property:

     

    styleableTextField0.htmlText = "normal<br/><i>italic</i><br/><b>bold</b><br/><a href='http://www.google.com/'>link</a>";

     

    Here is the section where I create the StyleSheet and assign it to the StyleableTextField:

     

    var styles:String =

      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial.ttf'); embedAsCFF: false;}" +

      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial Italic.ttf'); fontStyle: italic; embedAsCFF: false;}" +

      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial Bold.ttf'); fontWeight: bold; embedAsCFF: false;}" +

      "a { color: #FFE043; textDecoration: underline; } " +

      "a:active{ color: #ffffff;}" +

      "b{fontWeight:bold; fontFamily: Arial;} " +

      "i{fontStyle:italic; fontFamily: Arial;}";

    var myStyleSheet:StyleSheet = new StyleSheet();

    myStyleSheet.parseCSS(styles);

    styleableTextField0.styleSheet = myStyleSheet;

     

    And here is the trace statement

     

    trace( styleableTextField0.htmlText); // <TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">normal</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">italic</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">bold</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0"><A HREF="http://www.google.com/" TARGET="">link</A></FONT></P></TEXTFORMAT>

     

    Lots of code modification going on behind the scenes, it would seem.  Any idea as to why the bold and italic tags are being stripped out when the formatting process happens?  Any idea of what steps I could take next?  Thanks for all your help so far! 

     

    BTW, here's a screen capture of what the text looks like at this point:

    fontScreenCap.png

     
    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    7. Flex harUI,
    May 20, 2012 10:45 PM   in reply to sabird
    Report

    It is possible that there  is some behavior in the text components that read the text property from the TextField and re-write it which would blow away any html you have applied.

     

    In general, Flex has not supported folks going after the low-level TextField and/or using the TextField’s styleSheet property.  You are supposed to use the Flex CSS instead.

     

    A next test might be to subclass StyleableTextField so you can wrap the text and htmlText getter and setters so you can see who is reading/writing those properties.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points