From the title of this post, you may think that I’m promoting a UI-programmer’s alternative to the Blue Man Group, but that’s really not the point.

The real point of this post is that I often run into situations where I need a group of check boxes to work together as a unit. Most often this means that I need one check box to act as the master, so that if the user selects it all of the others are automatically selected. Sometimes, I also need a none-of-the-above check box. Well, I eventually got tired of coding that same interactivity for every application that needed it, and the result of my getting tired was a new class called CheckBoxGroup.

You can view a sample application that uses CheckBoxGroup here. As usual, right-click on the app to view and download the source. And please let me know if you encounter any bugs, or have any suggestions for improvement.

Having said all of that, don’t you think CheckBoxGroup would be a great name for a rock band?

Welcome to my blog’s new home. As Jason informed me in his comment, the RSS is not working at present. I hope to have this resolved soon; meanwhile, take a look at the photo in the header and see if you can spot the item that doesn’t fit with the others.

Update: The RSS is working again. If you’re a WordPress user and you’re interested, you can learn as much as I know about what went wrong at this forum post. Otherwise,  just click the RSS icon in the right menu (or click here) and you should be good to go. Let me know if you run into an issue.

In view of the fact that I’ve written about bubbles here and here, you might conclude that I find bubbles interesting. And it’s OK for you to conclude that; I won’t be offended.

Here’s an interesting tidbit about bubbles and tool tips: tool tips bubble down - sometimes. If you have a container with its toolTip property set to some value, and the container has a child with no value set for its toolTip property, then the child will show the container’s toolTip on mouse-over (why, I don’t know). However, this will not occur if the container is itself inside a navigation control (such as an Accordion or TabNavigator).

To see how this works, take a look at this sample. As usual, right-click on the app to view and download the source.

I don’t know why tool tips bubble this way, but it seems useful to know that they do.

Until now I haven’t had much reason to alter the default tool tip behavior in Flex: apart from styling, the tool tips work just fine out of the box for most applications. Recently, though, I’ve started playing with the tool tips a little, and thought I’d share some of the results.

First, it’s very easy to add show and hide effects to the tool tips. The only quirk is a standard Flash / Flex thing: to animate the alpha of text, the font needs to be embedded. Apart from that, it’s a simple matter of defining the effects that you want and then setting the value of the ToolTipManager.showEffect and ToolTipManager.hideEffect properties to your new effects. Cool!

However, there are a couple of things about the way the tool tip effects work that I find mildly disappointing. One of these is that the hideEffect is not triggered on mouse-out. Instead, when you roll the mouse cursor off of the UI element, the tool tip goes away instantly, just as though you never set a value for hideEffect. The only time the hideEffect is triggered is if the mouse cursor remains on the UI element past the time set in the ToolTipManager.hideDelay property (the default is 10 seconds).

The other disappointing thing (and maybe I’m just contrary) is that the showEffect *does* get triggered even when there is no delay between tool tips. What I mean here is that ToolTipManager has a property called scrubDelay (default = 100 milliseconds) that defines how much time there needs to be between mouse-out and mouse-over in order for showDelay (default = 500 milliseconds) to kick in. So if you have two buttons right next to each other (each with its toolTip property set to something interesting) and the user moves quickly from one to the next, Flex will dispense with the delay and show the tool tips immediately. Under these circumstances, it would seem to me to be ideal if Flex also dispensed with the showEffect, because by the very nature of effects (change over time) the showEffect necessarily introduces a delay.

OK - if a picture is worth a thousand words, then a code sample is worth a million. Check out this sample app which has no effect defined. When you move the mouse cursor quickly from one button to the next, you’ll notice that there is a delay of about 0.5 second for the first tool tip to appear, but after that there is no delay. Click here to view the application, and right-click on the app to view the source (not very interesting source, you’ll no doubt agree).

Now, here is an app with effects defined and assigned to the tool tip. When you move the mouse cursor from one button to the next, you’ll see that the hideEffect is omitted but the showEffect isn’t. Click here to view, and right-click on the app to view the source (somewhat more interesting source this time - I recommend you download and play with it).

As you’ll see in this new sample app, I’ve been having fun playing with Flex Component Kit for Flash CS3. The new app has some important features that my sample app for part one did not have:

• The movie clip in the FLA extends a custom class (defined, of course, in a separate AS file).

• The SWC dispatches a custom event that is handled in the Flex code.

• The SWC exposes a public API (properties and methods) that is accessed from the Flex code.

Overall, there is more interaction between the SWC and the Flex app, and yet at the same time they are more loosely coupled (the Flex app no longer specifies the view state of the SWC).

In the course of putting this demo together, I ran across a number of bugs and gotchas. These may be documented elsewhere, but I’m listing them here for convenience:

1. At one point, I placed the FLA and AS source in the root folder of the Flex app, thinking it would make distribution simpler. I did not receive any error message, but the Flash component simply refused to appear in the compiled Flex app. Lesson: don’t put your Flash source in the Flex root!

2. When you use external AS files in your FLA, you need to manually set the source attachment parameter in Flex to point to the root folder of your Flash AS files. In Flex Builder, you do this like so:
Open Project Properties -> Flex Build Path -> Library path
Expand your SWC by clicking on the plus sign next to it
Click on Source attachment and click Edit (or double-click on Source attachment)
Enter the path to your Flash source files (or click Browse to navigate and select)

3. In the AS file for the Flash movie clip class, it’s necessary to import flash.display.MovieClip even though you don’t use it in the class. If you don’t import it, you’ll get a compiler error in Flash and an utterly unhelpful error in Flex (see #4).

4. If there’s a problem with the Flash component, you are likely to get a message from the Flex compiler telling you that an “internal error” has occurred. This, of course, is the sort of error message that’s lots of fun to see, because it tells you absolutely nothing yet prevents you from making any progress in your work. Yippee!!!

5. When your Flash SWC movie clip is based on a custom class, you need to take an extra step after running Commands -> Make Flex Component: In the movie clip’s Symbol Properties, the Base class needs to be changed back to flash.display.MovieClip.

6. Flex Builder’s Auto-complete did not detect the custom event defined in the SWC base class, so I had to type it in by hand (ugh!). However, Flex seemed to recognize the event name after it was typed; I didn’t get a compiler error or warning.

7. This one may seem obvious to you, but I didn’t think about it till I ran afoul of it. In your Flash SWC movie clip, you may use a boundingBox to establish your component’s size inside Flex (so that Flex doesn’t keep resizing it when it animates). Well, your boundingBox must be on the stage for the entire timeline of movie clip, or Flex will do really weird things with your component.

Overall, the integration is still more cumbersome and buggy than I would like, but there is reason to hope it will improve as Flex 3 moves through its Betas toward production. Meanwhile, the Flex Component Kit is usable, and it provides a useful tool for building very cool applications.

You can view the demo app here. Usually, all you need to do is right-click on the app to access the source; however, the SWC seems to be interfering with that, at least with version 9.0.28 of the player. If you right-click a few times and can’t get the “View source” option, then click here to get the source. Enjoy!

(In case you’re wondering, the demo app was inspired by an old Far Side cartoon that showed a scientist catching a butterfly and asking for a jar of ether.)