May 7th, 2007 by Kyle
Tags: Flex, mxml, popoup-window, popup, titlewindow, window
Posted in: Flex
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.
Tweet
6 Comments »
August 11th, 2008 at 9:46 am
Even easier if you can sacrifice centering the pop-up…
public function moveMe():void {
move(300, 50);
}
May 29th, 2009 at 1:06 am
Hi,
I was looking for this kind of functionality and you saved my time. It’s very simpler approach and it gives more greatness.
June 4th, 2009 at 1:42 pm
If there is any chance that the application width / height might change (the browser window) after the popup is visible… you might want to harden this approach further through binding.
July 17th, 2009 at 1:47 pm
Hi,
Try a simpler solution that does not call move inside move event. This some times causes stack overflow error, this happens only in debbug mode.
Try to change to this:
In the TitleWindow use:
move=”doMove(event)”
And here is the method:
// Keeps TW inside Application Layout
private function doMove(event:Event):void{
if (this.x Application.application.width){
this.x = Application.application.width – this.width;
}
if (this.y Application.application.height){
this.y = Application.application.height – this.height;
}
}
September 1st, 2009 at 3:20 pm
Hi guys,
Thanks for the code!
Here’s the solution that I implemented. I just make the window show back to x=0 and y=0 when outside. That’s it.
just put this function in the TitleWindow class:
// Keeps TW inside Application Layout
private function doMove(event:Event):void
{
if (this.x > Application.application.width || this.x Application.application.height || this.y < 0)
{
this.x = 0;
this.y = 0;
}
}
December 22nd, 2009 at 2:22 pm
this seems to be an old post, but this is what I did. It is based on Esteban’s code.The window will stay inside the application borders as expected.
don’t forget to import mx.core.Application:
//TitleWindow code
move=”doMove(event)”
private function doMove(event:Event):void
{//keeps TW inside layout
var appW:Number=Application.application.width;
var appH:Number=Application.application.height;
if(this.x+this.width>appW)
this.x=appW-this.width;
if(this.xappH)
this.y=appH-this.height;
if(this.y<0)
this.y=0;
}