WARNING: This blog contains random thoughts on technology, software engineering, and general all-round nerdery. Read at your own risk. Nerd is contagious.

Wednesday, September 05, 2007

What Flex needs: A proper HTML component

One of the upcoming features of Wimzi is (hopefully) emoticon support. Since I'm new to Flash, I didn't think much of it because the TextArea control (mx.controls.TextArea) could handle all the HTML I'd thrown at it so far. That is, until I tried to put a wee little <img> tag in there.... holy line breaks Batman!

Flex has the same issue (as it also uses mx.controls.TextArea). Some solutions I've seen vary from crazy to ingenious, but none of them seem very elegant:
  • Use a separate "layer" for emoticons over your textArea
    • This is computationally expensive, not to mention probalby a pain in the ass to do. This wold involve calculating the width of every characters and leaving enough space in the text layer to handle an emoticon, then another layer (with only emoticons) would be composited on the text, making it look like it's part of the text.
    • I can't imagine doing this for a text control that could potentially resize, not to mention dealing with scrolling.
    • I think this is what userplane's excellent WebMessenger app uses.
  • Use an Iframe from the surrounding webpage and "place" it where you need to, making it look like it's part of your Flash app.
    • You make an ExternalInterface call to the outlying JS to make you a div, and then control the position and height of that div. The absolute position has to be calculated using the localToGlobal() function in Point.
    • The problem with this is that you are now tied to the browser
    • Your flash becomes less embeddable in things like Facebook because they might prevent the creation of div tags, etc.
  • Create your own "emoticon" font!
    • Embed a custom "font" of your emoticons into your .FLA or Flex project, and then just insert into your text as just any other text.
    • Seems the most elegant, though very specific to emoticons
    • Doesn't help for any other HTML features (Buddy Expression wallpapers, etc)
    • Corey suggested this one, but I don't know yet if it will work.
All of this results in feeling like Adobe really should have provided us with a way to have bits of HTML work correctly within the Flash runtime. They have added this for the AIR runtime - those lucky guys get an "HTML" component based on the Webkit platform (what Apple's Safari browser uses), but the web world has no such luck. Perhaps in the future they can provide us with some sort of an "official" workaround or just fix it outright. I mean, we are supposed to be making RIA's, right?

Labels: , , ,