Question

I have a flex app that used to be an internet based app. In it I have a function that creates tooltip error messages when I tell it to create an error message. I pulled this app out verbatim to a desktop app and restructured things a bit to get it to run, but I did not mess with the core fundamentals of the mxml file that utilizes this aside from changing the root tag from a type of ‘s:Group’ to ‘s:Window’

Everything runs correctly, but the tooltips are not displaying. I can’t seem to figure out why, so I thought I’d run this by you guys. Here’s the tooltip code (inline mxml code in the fx:script cdata tag):

import mx.controls.ToolTip;
import mx.managers.ToolTipManager;

public var errorTip:ToolTip;    
private function createErrorMsg(errorMsg:String, object:Object):void {              
    if (errorTip){ToolTipManager.destroyToolTip(errorTip);};
    errorTip = ToolTipManager.createToolTip(errorMsg,object.getBounds(root).x + object.width,object.getBounds(root).y) as ToolTip;
    errorTip.setStyle("styleName", "errorTip");
    errorTip.visible = true;
    errorTip.enabled = true;
}

Basically, I pass the function a string and an object (text input, checkbox, button, etc…etc…) and it positions it and displays the error message. This fully works in my web version, but not in my desktop version.

Here’s the code that instantiates the window:

var window:LoginWindow = new LoginWindow();
Window.systemChrome = NativeWindowSystemChrome.NONE;
Window.transparent = true;
Window.open(true);
Window.maximize()

Any ideas?

---

On a side note, I check to see if the errorTip exists at the beginning of the function and then destroy it so that the higher scoped variable ‘errorTip’ always equals the reference to the currently displayed error. This allows me to just destroy that error tip on form validation and then error check again, but it only allows one tooltip to be displayed at a time. Is there a better way to query the tooltip manager for all of it’s currently displayed tooltips and destroy them all?

Answer 1

To resolve this you must change the line that calls ‘createTooltip’ to the following:

errorTip = ToolTipManager.createToolTip(errorMsg,object.getBounds(root).x + object.width,object.getBounds(root).y, null, object as IUIComponent) as ToolTip;

The idea behind this is that you can now just call ‘createErrorMsg(“myError”,myComponent)’ and it’ll display an error message there, which you can then add another function:

private function clearError():void
{
    if(errorTip) errorTip.visible = false;  
}

to actually remove the error message. The down side of this is that it only displays one message at a time but I’ll tweak it a bit to change that up. So here’s my better resolution:

Error messages will (traditionally) only be displayed in a batch set. (Basically you will only have a handful of tooltips displayed at one point in time and they will all be related to the form you are on). This won’t always be true, but that’s not my concern here. I created a utility class that performs error message handling:

package Utils
{
    import mx.controls.ToolTip;
    import mx.core.IUIComponent;
    import mx.managers.ToolTipManager;

    public class ErrorUtils
    {
        private static var errorCache:Array = new Array();

        public function ErrorUtils()
        {

        }

        public static function createErrorMsg(errorMsg:String, object:Object):void {
            var errorTip:ToolTip = ToolTipManager.createToolTip(errorMsg,object.getBounds(object.root).x + object.width,object.getBounds(object.root).y, null, object as IUIComponent) as ToolTip
            errorTip.setStyle("styleName", "errorTip"); 
            errorTip.visible = true;
            errorTip.enabled = true;

            var position:int = errorCache.length;
            errorCache.push(errorTip);
        }   

        public static function clearAllErrors():void
        {
            for each(var error:ToolTip in errorCache)
            {
                ToolTipManager.destroyToolTip(error);
            }
        }   
    }
}

To use the class you simply call ErrorUtils.createErrorMsg(“my message”,invalidComponent), and to clear the errors you simply call ErrorUtils.clearAllErrors()

That way if you have a form and you have a validation function for it, you simply call that function every time it comes back as invalid. The only thing that this is missing is any kind of way to clear a specific error, but to handle that you could place all of the creation calls inside of a master validation function that validates all the fields in your form, then call that each time you gain or loose focus on a field and call ‘ErrorUtils.clearAllErrors()’ at the beginning of the function.

BTW:
this is the source of the original tutorial I received to do this, I just abstracted it a bit
http://aralbalkan.com/1125
so credits go to the above site for the original code