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: , , ,

2 Comments:

Blogger Twinsen said...

http://www.karbonized.com/smilies/index.html

Though, seems like you'd have to solve the problem of copying the text..(e.g. smiley characters that are composited into emoticons end up in clipboard buffer).

7:00 AM

 
Blogger dorkie dork from dorktown said...

riz,
i had the same problems displaying html you had. a few years ago i used the "div" solution to render html for flash, http://www.drumbeatinsight.com/htmloverlay.

When I started using Flex I spent the next few months working on an upgrade to the HTML Component. And I'm pretty happy with the results. This has 2 and half modes to display html. The first uses an iframe to load a local or remote url or html *page*. The second mode creates a div and you can pass in raw *html text* directly to it right from within Flex or from a database. The third (mode 2 1/2) embeds popular rich text editor in a div. I am also looking into adding a forth, simplified HTML parser.

Version 1 and 2 were and are still both free, http://drumbeatinsight.com/forums/viewtopic.php?t=610. Version 3 which supports Flex Builder 3 / Flex SDK 3 and adds new features is commercial. This is due to the maintenance and support I've had to put into it. And also due to my new yacht and bently payments, <-- joke. :P
http://drumbeatinsight.com/htmlcomponent

Check it out and contact me if you need more features.

11:48 AM

 

Post a Comment

Links to this post:

Create a Link

<< Home