Flex Monkey Patches

Flex - make popup follow spawning component as you scroll - solution 1

October 8th, 2008 by Kyle
Tags: Flex, popup, scroll
Posted in: ActionScript, Flex

A while back I had a request to show how one could make a popup follow the component that “spawned” it when the component was one of many (but not too many) that was in a VBox with vertical scrolling (kind of a “poor man’s” list control - which sometimes does have it’s place ).

I actually came up with 2 solutions. The first I’ll post here. The second, I’ll post next week (after I clean it up a bit).

In the first solution for each component added to the VBox that spawns a popup (via the popupmanager) a listener is added to react to the scroll event of the VBox which repositions the popup and additionally detects when the popup moves outside the bounds of the VBox, toggling it’s visibility to make it appear to “tuck under” the VBox as it’s spawning parent scrolls out of view.

That is quite a mouthfull, but the sample and code will make it more clear:

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[

import MyComp;

private function addStuff():void{
var c:MyComp = new MyComp();
c.lbl="Child # " + vb.numChildren;
vb.addChild(c as DisplayObject);
}
]]>
</mx:Script>

<mx:Button label="addStuff()" click="addStuff()"/>
<mx:VBox id="vb" width="80%" height="400" horizontalAlign="center" borderStyle="solid"
scroll="trace(vb.verticalScrollPosition)"/>
</mx:Application>

Here is the custom component that spawns the popup:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="98%" height="100"
borderStyle="solid" horizontalAlign="center" paddingTop="2" paddingBottom="2" move="positionToolTip()">

<mx:Script>
<![CDATA[
import mx.events.ScrollEvent;
// Import the PopUpManager.
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
private var pup:MyPopup;
private function openPopup():void {
// Create a non-modal TitleWindow container.
if (pup == null){
pup = PopUpManager.createPopUp(this, MyPopup, false) as MyPopup;
pup.lbl=lbl;
pup.addEventListener(Event.REMOVED, onTTRemove);
positionToolTip();

(this.parent as VBox).addEventListener(ScrollEvent.SCROLL, positionToolTip);

}

}

private function onTTRemove(event:Event):void{
pup.removeEventListener(Event.REMOVED, onTTRemove);
pup=null;
}

//Move the tooltip to its component in case of window resize
private function positionToolTip(evt:Event=null):void{
if (pup==null) return;
var pt:Point = new Point(0, 0);
pt = lblName.localToGlobal(pt);
pt = root.globalToLocal(pt);
pup.move(pt.x,pt.y - lblName.height);

var _top:int=(this.parent as VBox).y
var _bottom:int=(this.parent as VBox).y+(this.parent as VBox).height;

if(_top < pt.y && _bottom > pt.y){
pup.visible=true;
}
else{
pup.visible=false;
}

}

[Bindable]
public var lbl:String

]]>
</mx:Script>

<mx:Label id="lblName" text="My name is {lbl}"/>
<mx:Button label="click to spawn a popup" click="openPopup()"/>

</mx:VBox>

Here is the simple popup:

<?xml version="1.0"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
title="Popup belonging to: {lbl}">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

[Bindable]
public var lbl:String;
]]>
</mx:Script>
<mx:HBox>

<mx:Button click="PopUpManager.removePopUp(this);" label="Close"/>
</mx:HBox>
</mx:TitleWindow>