JSON as HTML data in Flex - Hyperlink Rollovers

Question

I am using JSON to parse HTML data with customized html tags in Flex. Flex's support for HTML is pretty minimal, so I am wondering if it's possible to do a simple font color change rollover effect on these links. Currently I have found that Flex only supports a few HTML tags, but also supports CSS through Flex's whack CSS methods.

Can I manipulate HTML that is written in my JSON files through an external CSS file? Or better still using a simple tag with the JSON file?

Answer 1

Short answer: I don't think there's a magic bullet for this. It's going to be a lot of pain.

You can start by extending the Text class in a way that adds a static StyleSheet property (e.g., styleSheet:StyleSheet = null). Then create an array which contains the following styles, the only ones supported by Flex:

listOfStyles:Array = ['fontSize', 'color', 'fontWeight', 'fontFamily', 'fontStyle', 'textDecoration'];

Then you have to initialize the StyleManager.selectors, creating an array of selectors you are going to use. Basically, you are finding the "A" tag and adding the listOfStyles above to it, then creating a new CSSStyleDeclaration for each of those styles.

This will allow you to apply the above-named styles to the htmlText property of your extended class. So far so good. This enables you to set different styles to your anchor tags upon load, using an external stylesheet. To apply a rollover effect, however, where each link changes color on rollover within the HTML, would be problematic, since MouseEvent.MOUSE_OVER would apply to the class as a whole, not the individual HTML elements within it. You would have to figure out if the mouse was over an anchor within that HTML text (not impossible, but I don't have time to work that out right now) and change your selector within that. It would involve getting the text range, and that always means a lot of work. I had to mess with that when a client wanted emoticons to appear in the text flow (something else Flex's implementation of HTML fails to support) and it was extremely gnarly.

I believe Flex 4 is going to add more support natively for this kind of thing, but I haven't researched that specifically.

Sorry I don't have a magic bullet for you, but I hope this sheds a little light on the topic.

Answer 2

I don't use Flex often so not much in depth framework knowledge, but I think I needed to something similar:

do a simple font color change rollover effect

Here is a snippet:

var linkRegEx:RegExp = new RegExp("(https?://)?(www\\.)?([a-zA-Z0-9_%]*)\\b\\.[a-z]{2,4}(\\.[a-z]{2})?((/[a-zA-Z0-9_%]*)+)?(\\.[a-z]*)?(:\\d{1,5})?","g");
var link:String = 'generic links: www.google.com http://www.yahoo.com  stackoverflow.com';
link = addLinks(linkRegEx,link);
textField.htmlText = link;//textField is a TextField I have on stage

function addLinks(pattern:RegExp,text:String):String{
    var result = '';
    while(pattern.test(text)) result = text.replace(pattern, "<font color=\"#0000dd\"><a href=\"$&\">$&</a></font>");
    if(result == '') result+= text;//if there was nothing to replace
    return result;
}

I just used inline font tag, css might be better. Here is my original question.

HTH, George