Daemonite: Extending DRK3's TextField Component Archive

I've recently been building some forms in Flash MX for a CFMX Flash Remoting app, making use of the TextField component from DRK3.

One thing that I like about the component is the ability to show an icon with the field, especially that you can create your own custom icon. What I saw missing was a tooltip to attach a hint or message to the icon itself so I've hacked at it and the results and code are here.

What I've done is use the Tooltip from Flash UI Components Set 3 and written some ActionScript to optionally attach it to the TextField icon.

First things first, here is an example of a Flash form that makes use of the TextField component.

It's got a custom icon that's custom positioned using the supplied IconPlacer.as file, with a tooltip to give further meaning to the icon.

In this case the custom icon indicates that all the fields are required, which is the message you'll get once you mouse over it.

This has been achieved by first dragging the Tooltip component to the stage and deleting it so that a copy of it's in the Library.

I looked at a couple of different methods to dynamically add the Tooltip to the icon and finally decided on a prototype that could be used for other movieclips later on.

One discovery that I made along the way, after testing, was that the Tooltip component could be tabbed into like other objects within the Flash movie. So tabbing was turned off in the prototype.

There's a know bug in the Tooltip component you might need to fix that I'll mention in my next post.

Here's the prototype code:

MovieClip.prototype.addToolTip = function(tipText,depth) {
  this.attachMovie("FTooltipSymbol","requiredTip",depth);
  this.requiredTip.setActiveState(true);
  this.requiredTip.setTipTarget(this);
  this.requiredTip.setDisplayMode("text");
  this.requiredTip.setTip(tipText);
  this.requiredTip.setUseFade(false);
  this.requiredTip.tabEnabled = false;
};

It's tempting to use the code straight away, but I've got a couple of other ideas...

First thing is that I'd like to quickly choose my icon and it's position on the TextField. I'd like to also do a quick simple validation test on any required fields to see whether they contain values or not.

So what I did was build another prototype to give me a few more features, see the code below:

MovieClip.prototype.setTextField = function(viewIcon,iconName,tip,tipDepth,requiredTest) {
  this.showIcon(viewIcon);
  this.setIcon(iconName);
  var symbolPlacer = new IconPlacer(this);
  symbolPlacer.topRight();
  this.fieldIcon_mc.addToolTip(tip,tipDepth);
  // hack to stop tabbing going into the tool tip
  this.fieldIcon_mc.tabEnabled = false;
  if (requiredTest == true) {
    this.onKillFocus = function() {
      if(this.text != "") {
        this.showIcon(false);
      } else {
        this.showIcon(true);
      }
    }
  }
};

The code above makes use of the first prototype, see line 6, and is called in the sample movie like this:

form_mc.fname_txf.setTextField(true,"ftf_requiredIcon","Required",20,true);

It works for me, any suggestions on improvements are welcome, let me know if it's of use to you.

Posted by at 07:00 PM | Permalink
Trackback: http://blog.daemon.com.au/cgi-bin/dmblog/mt-tb.cgi/136