Flex RTE Part 2: Faking mouse:hover


Before getting into the meat of my post, I suppose it’s all right to now mention that I’m working at a site called Piqqem. As of last week we’re no longer officially in “stealth,” but we’re not quite ready to go into full-on publicity-seeking mode yet, either. The RTE code I’ve been working on is for our “Piqqem Notes,” a wiki like section for all of the stocks we cover.
See also: Flex RTE Part 1: Link Buttons

I’ve actually skipped an installment on converting real HTML to what flash considers HTML and converting the gobbledy-gook that flash considers “HTML” into real-world-usable HTML. This installment, though, (mostly) fixes one of the more annoying features of the Flex Rich Text Editor control. The new code hasn’t yet been integrated into my code from Part 1, just in case someone wants to see the “simple” example.
The Flex CSS support actually covers a:hover, but there’s no way to use CSS with an editable TextField, which means the RichTextEditor control doesn’t inherently support mouse hover states. The only indicator you get that you’re mousing over a link is a hand cursor–but there’s no built-in way to see where that link points to.

To get around this, I’ve added a mouseMove handler which grabs the mouse’s location in the TextField, figures out what character is under the mouse, checks to see whether or not that character is part of a link, and then (finally) adds a fake toolTip above the mouse. Why a fake tooltip, you ask? Well, merely toggling the TextField’s toolTip property wasn’t giving me any sort of consistent results at all, so I just decided to fake it. If someone who understands how toolTips work better than I do can make it work with the built-in toolTip, more power too ‘em. The source is below the example:

Download: source.zip
Okay, so there’s no color change to go along with the mouse hover… but I’ll show you how to do that in my next post with lots of HTML-y goodness.

,

  1. No comments yet.
(will not be published)