Question

I’ve created a custom component with several inline item renderers that I use as a tooltip. The height of the component is unknown, as the data contents of the component are not known until runtime.

However, when displaying the tooltip, occasionally it extends beyond the boundaries of the flash application, thus, I’d like to be able to detect this occurrence and reposition the tip.

The problem is that the height and width of the component are, apparently, not available until after being rendered by the popup manager. (i.e. they are always 0)

But, I do not know any way of finding out when the popup is actually rendered and, therefore, the height/width values available.

I tried adding a resize event listener to the component, but it doesn’t appear to work, though I most certainly could be doing something wrong since it seems to me that the resize event only gives you the “oldWidth” and “oldHeight” of the object, which, at first display, would be 0…and useless to me.

Any ideas about how to proceed?

—–Edit—–
I have a base class like this:

public class TTComponent extends Canvas
{
  var _parentC:UIComponent;
  var popped:Boolean = false;
  var timer:Timer;
  var _comp:UIComponent;

  public function set parentComponent(pC:UIComponent):void 
  {
    _parentC = pc;
    _parentC.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
    _parentC.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
  }
  public function mouseOver(evt:MouseEvent):void
  {
    if (_parentC != null)
    {
      timer = new Timer(150,1);
      _comp = this;
      timer.addEventListener(TimerEvent.TIMER_COMPLETE, function( tevt:TimerEvent ):void 
      {
        this.move( somex, somey);
        if (popped != true)
        {
           PopUpManager.addPopUp(_comp, parentComponent );
           popped = true;
        });
        timer.start();
    }
  }

  public function mouseOut(evt:MouseEvent ):void
  {
    if ( timer )
    {
      timer.stop();
      timer = null;
    }
    //If we popped up, remove the popup
    if ( popped )
    {
      PopUpManager.removePopUp( _comp );
      popped = false;
      parentC .removeEventListener(MouseEvent.MOUSE_OUT, mouseOut);
      parentC .removeEventListener(MouseEvent.MOUSE_OVER, mouseOver);
    }
  }
}

Then, an extended renderer like this:

<c:TTComponent name="T" xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          xmlns:c="components.*">
  <s:BorderContainer>
    ...about 30 labels grouped in various manners
    ...2 lists with inline item renderers
  </s:BorderContainer>
</c:TTComponent>

Now, the code is called like this:

var w = new TTComponent();
w.data = data;
win.parentComponent = this;

This will add listeners to the mouse over and mouse out events on the parent, whatever it is, and then show or hide the tooltip accordingly.

——Edit——

Using a portion of what a commenter below suggested, this is the solution I came up with:

Inside the TTComponent class:

import flash.events.Event;
import mx.binding.utils.ChangeWatcher;

private var heightWatcher:ChangeWatcher;


public function set parentComponent 
{
  ...
  heightWatcher = ChangeWatcher.watch(this,'height',onSizeChange);
}

public function onSizeChange(evt:Event):void
{
  if (this.height != 0)
  {
    ....calculate the new component coords
    this.move(newx, newy);
  }
}

Note that this additional code doesn’t bind to any component variable, it just adds a watcher on the component property.

Answer 1

You could also try binding your width and height. If these are made bindable in your class, flex will automatically adjust your popup’s width and height.

When using mxml for your binding, you can just do something like this

<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}"></mx:YourComponent>

You can also add a eventListener that listens to the change event if you want to reposition you component, like so

<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}" change="yourComponentResizeHandler()"></mx:YourComponent>

If you are using a programmed approach, you should should use the changewatcher. Below is shown how you can use that.

ChangeWatcher.watch(YourComponent, "width", repositionHandler);
ChangeWatcher.watch(YourComponent, "height", repositionHandler);

If you want to watch for other variables or properties to change, be sure to add the [Bindable]-tag above your variables in your class, like this

[Bindable]
var myVariable:SomeVariable;

I hope this helps.