I’m not familiar with Maps, so won’t be able to help much. If Map is a subclass of UIComponent, then things should work. Otherwise, you’ll probably need to understand what Map events could cause your callouts to “lose” their location and adjust appropriately. Good luck.

Micah

I want to make my application exactly the same as,

http://maps.google.com/maps?hl=en&safe=active&um=1&ie=UTF-8&q=bank&fb=1&gl=us&hq=bank&hnear=Princeton,+NJ&ei=8ldATailIYet8AawyoycBA&sa=X&oi=local_group&ct=image&resnum=4&ved=0CAkQtgMwAw

Thank you

here’s my change

public function show(owner:DisplayObjectContainer):void {
if (!isPopUp) {
if (owner != this.owner) {
hide();
} else {
return;
}

this.owner = owner;

if (this.owner is Map) {
this.owner.addEventListener(MapEvent.MOVE_START, readjustPositioningMove);

}

PopUpManager.addPopUp(this, owner);
}

}

Thank you so much for your quick response. My callout owner is map, do you have any idea what will be my owner? I tried couple of things but still not working.

Babu

I ended up changing some of the code. Changes are delimited by comments with “MW Add”.
Note that this only works for UIComponent objects.
Here’s the changed setter for ‘content’ (and a new function it uses):

		/**
		 * @private
		 */
		public function set content(value:UIComponent):void {
			if (_content == value) {
				return;
			}

// MW Add start:
			// We want to catch content size changes by listening to resize events. We can only do that
			// for UIComponent objects, though (not perfect, but better than nothing). Before we handle
			// the new content, check if we need to remove the event listener on the previous content.
			if (_content != null && value is UIComponent) {
				_content.removeEventListener(ResizeEvent.RESIZE, invalidateContent);
			}
// MW Add end.

			_content = value;
			contentChanged = true;

// MW Add start:
			if (_content is UIComponent) {
				_content.addEventListener(ResizeEvent.RESIZE, invalidateContent);
			}
// MW Add end.

			invalidateProperties();
			invalidateDisplayList();
			invalidateSize();
		}

// MW Add start:
		public function invalidateContent(e:Event=null):void {
			contentChanged = true;
			invalidateProperties();
			invalidateDisplayList();
			invalidateSize();
		}
// MW Add end.

And here’s the changed show() and hide() functions and a new function they use:

		/**
		 * Pops up the callout using the PopUpManager.
		 *
		 * @param parent DisplayObject to be used for determining which SystemManager's layers
		 * to use.
		 */
		public function show(owner:DisplayObjectContainer):void {
//MW Add start:
			if (isPopUp) {
				if (owner != this.owner) {
					// Callout is already shown but we have a new owner - get rid of old popup and then show new one.
					hide();
				} else {
					// No need to do anything - we're already showing callout
					return;
				}
			}
//MW Add end.				

			this.owner = owner;
//MW Add start:
			if (this.owner is UIComponent) {
				// listen to move and resize events on the owner to readjust callout positioning
				this.owner.addEventListener(MoveEvent.MOVE, readjustPositioning);
				this.owner.addEventListener(ResizeEvent.RESIZE, readjustPositioning);
			}
//MW Add end.
			PopUpManager.addPopUp(this, owner);
		}

		/**
		 * Hides the callout.
		 */
		public function hide():void {
			if (isPopUp) {
//MW Add start:
				if (this.owner is UIComponent) {
					this.owner.removeEventListener(MoveEvent.MOVE, readjustPositioning);
					this.owner.removeEventListener(ResizeEvent.RESIZE, readjustPositioning);
				}
//MW Add end.				

				PopUpManager.removePopUp(this);
			}
		}

//MW Add start:
		/**
		 * @protected
		 * Readjusts callout position and tail position based on owner's resize or move.
		 *
		 * @param e Event.
		 */
		protected function readjustPositioning(e:Event):void {
			// We cheat a bit by setting anchorPointChanged to true - it hasn't really changed but
			// we need to trigger a re-evaluation of the tail position
			contentChanged = true;
			callLater(invalidateProperties);
			callLater(invalidateDisplayList);
		}
//MW Add end.

BTW, I also had a problem in getAnchorPointByTailPosition() and replaced the call to getBounds() with the following:

//Original:				ownerBounds = owner.getBounds(stage);
//MW Add start: (getBounds sometimes returns rect that is way bigger than object, for some reason.
//				 for UIComponent objects, we could use getVisibleRect(), but the following works for all objects
				var p:Point = owner.localToGlobal(new Point(0, 0));
				ownerBounds = new Rectangle(p.x, p.y, owner.width, owner.height);
//MW Add end.

Hope this helps.
Micah

Can you explain how to callout readjust its position when its owner is resized and/or moved? I couldn’t fix it.

Thank you in advance!

Babu

Any assistance would be really appreciated.

private static var _Callout:Callout= null;
public static function get getInstance():Callout
{
if (_Callout==null)
{
_Callout = new Callout();

}
return _Callout;
}
public function Callout():void
{
this.addEventListener(On_TooltipClose_Event, onHideHandler);
}
private function onHideHandler(event:Event):void
{
hide();
}

I wonder if you have a similar issue as I ran into and for which I added the invalidateContent() function I posted a few comments above. It’s easy enough to check – just call it after you catch a change in your image.

@Aaron,

Thanks for incorporating the fix. I’ll check it out and report.

It would certainly be nice to have the callout readjust on a change in content size. One other related feature is to have the callout readjust its position when its owner is resized and/or moved. Not sure how common my use case is, but on each change in the callout content I also invoke a navigation change in the app. Since I use SWFAddress, the navigation takes longer than the callout content change and so I ended up using callLater to invoke my added invalidateContent() function. If the callout would catch position and size changes of its owner, this could be hanled automatically.

I’m not sure how to do that, though. If the owner is a UIComponent then I guess you can listen to the resize and move events, but you currently assume that the owner is a DisplayObjectContainer. Maybe only handle this case if the owner is a UIComponent? I’m not a Flex expert …

As far as new features: I’m still using Flex 3, and not a skin expert either so no need for me to go crazy there. The only feature that would be very useful to me is to be able to position the tail on one of the sides but not in the center.

For example, suppose I have two panels showing side by side with a button in the left panel about a third down from the top. I might want to show a callout that would be to its right (so ‘left’ tail position) so as to cover some or all of the right panel, and have the tail at a third down from the callout’s top. This would align nicely the callout with the button and the panels.

Now that I’m thinking about it, it could also be nice to be able to specify something similar for the owner of the callout. In the example above, maybe I want to have the left panel be the owner but position the tail to point at some position on its side other than center.

I’m not sure how best to parameterize this, but will chime in if any great idea comes to mind. Have you heard this request before?

Anyway, thanks again for a great component. One can always add more, but it has helped me greatly as it is.

Micah