Is it possible to dock a normal panel to a pop up panel in flex?

Question

Hi All. I'm a newbie in flex, right now I want to create a panel docking to a pop up panel in my flex app, like Winamp's playlist window can dock to main window. but I didn't find any useful on docking in flex, someone can give me some suggestions?

I've traced the PopUpManager, but I didn't find any available interfaces or events about popup window's moving, I think it's design shouldn't be so bad.

Someone can give me some advices on docking or handling window's moving event? Thanks.

Answer 1

If you are talking about browser windows you're going to have to go with javascript. Flex (or flash for that matter) has a very limited ability to talk to the browser and wouldn't be able to do any such docking.

Heres a nice introduction to cross-window communication in javascript: http://www.infimum.dk/HTML/JSwindows.html

Answer 2

Since this comes up in Googles searches I feel we should add some more information to this.

There are currently some docking frameworks for flex such as DockableFlex and FlexMDI. There is also a DockAreaFX - but thats $250 and seems like well outside the scope of what you are trying to do. They all have their own peculiarities, but I think your question is more about how to glue one container next to another so when one moves, the other moves with it.

AFAIK this isn't something that has been addressed in a framework or component, but should be easy enough to add on your own. The process I think would go something like the following.

• Use the PopupManager to create the popup in question
• Inside the Popup in question add standard Drag functionality, and add an event listener for OnDrag to do some checking for snapping
• Inside the OnDrag event listener, check your proximity to the other panel, if your close, just snap your x and y position of the popup so that its butted up against it.
• Add an event listener inside the popup for the Drag Complete Event. Inside this OnDragComplete event add event listener to the Panel that you want to make sure it moves with to the Drag Event for that Panel - OnLockedPanelDrag.
• Inside of this event listener just update your x and y coordinates based off the panel.

To un-glue the popup remove the event listeners for the Main panels Drag, and that should do it.

There are better solutions to this involving stronger architectural patterns, but this should point anyone in the right direction.