I had a customer request some help in trying to restrict the movement of a popup window.
Initially I was looked at all the drag and drop functionality, but realized that Panel and TitleWindow “roll their own” drag and drop stuff when used as a popup. I decided to take a simpler approach.
Here is what I can up with.
TitleWindow component:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300"
showCloseButton="true"
close="PopUpManager.removePopUp(this)"
move="moveMe()"
title="{x} {y}"
creationComplete="PopUpManager.centerPopUp(this)"
>
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.managers.PopUpManager;
public var xlb:int = -1; //x left bounds
public var xrb:int = -1; //x right bounds
public var ybb:int = -1; //y bottom bounds
public var ytb:int = -1;//y top bounds
private function moveMe():void {
if(xrb >= 0 && this.x+this.width >= xrb){
this.move(this.x-1,this.y);
}
if(xlb >= 0 && this.x <= xlb){
this.move(this.x+1,this.y);
}
if(ybb >=0 && this.y+this.height >= ybb){
this.move(this.x,this.y-1);
}
if(ytb >=0 && this.y <= ytb){
this.move(this.x,this.y+1);
}
}
]]>
</mx:Script>
</mx:TitleWindow>
Here is the main app:
<!– containers\layouts\MainMyLoginForm.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
import MyWindow;
private function showWindow():void {
// Create a non-modal TitleWindow container.
var w:MyWindow = PopUpManager.createPopUp(this, MyWindow, false) as MyWindow;
w.xlb=100;
w.xrb=application.width-100;
w.ytb=100;
w.ybb=application.height-100;
}
]]>
</mx:Script>
<mx:VBox width="300" height="300">
<mx:Button click="showWindow();" label="Pop up"/>
</mx:VBox>
</mx:Application>
On the move event of the TitleWindow I checked the corners of the popup against some set left, right, top, bottom restrictions and if the popup moves beyond those bounds, I nudge the popup back within the bounds.
This is a pretty simple solution and the “double move” of the popup (moves outside the bounds, so nudge it back) is relatively inexpensive
to just stopping it from going outside the bounds. It would be possible to do that if I did things in the mouseMove event, but the code would be more complex.
Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix1) containing all the source.
Recent Comments