Resizable TitleWindow in Flex 4
The spark TitleWindow allows you to drag it around the stage through the use of a skin part called “moveArea”. By attaching mouse handlers to the moveArea, the TitleWindow can be dragged around the screen. In a similar fashion, we can add another skin part called “resizeHandle” to allow the TitleWindow to be resizable.
To do this, we will subclass TitleWindow and implement mouse handlers that are attached to the new resizeHandle skin part. These mouse handlers change the width and height of the window as the user drags the skin part.
Here is a simple example of this resizable TitleWindow:
In this example we add the mouseMove and mouseUp Handlers to the systemManager’s sandboxRoot to ensure we are able to drag over sub applications that are compiled with different versions of Flex. Read more about this at the “Marshall Plan” spec.
Note: This sample requires Flex SDK 4.0.0.13266 or higher. You can get the latest SDK builds from opensource.adobe.com.
Awesome! Thanks, this really helps a lot, I’m sure everyone needs a component like this at some point
@TK Thanks for the feedback! =)
can i add data grid in this component
@sumit
Yes you can! Thanks for the question.
Hi Kevin,
thank you for that component! It’s a lifesaver. I recently tried to subclass it with MXML and I wonder how I can apply a layout property that looks like this
to it. I can easily do this with the spark TitleWindow but not with yours unfortunately. The compiler then shows the error
Could not resolve to a component implementation.
It would be very handy to apply a different layout just like with the original spark TitleWindow, I just can’t figure out how. Do you have an idea?
Regards, Thilo
@Thilo
The code examples got consumed by WordPress I guess
I hope this post works:
The layout property looks like this:
<s:layout>
<s:BasicLayout/>
</s:layout>
And the error was:
Could not resolve <s:layout> to a component implementation.
@Thilo
Thanks for your question! Try using the same namespace as your TitleWindow for the layout. They should be the same.
I’m trying to add a ResizableTitleWindow to a BorderContainer instead of using PopUpManager.addPopUp(rtw, this, false). I’ve tried calling PopUpManager.addPopUp(rtw, borderContainer, false) and borderContainer.addElement(rtw). Neither of these work. Any ideas?
@Kevin Lin
Thank you for the hint, Kevin! Pretty logical and it worked fine that way
Kevin,
Great work on the component. I am very new to Flex and have been stumped by a problem that I can’t seem to figure out. Your example reminded me of it. What if I want to add more buttons to the title bar area of a spark title window? More descriptively, say I want a help button next to the close button that pops it’s own title window on click? I was experimenting and got something to work by customizing a skin, but I’m very curious to see someone else’s take on the subject.
In the past, I’ve gotten it to work on the panel component but I was curious if it would work on the title window component as well.
Thanks in advance.
Hello
Thanks for this code. I use this, and I have a probleme with the right click. The resizable title windows block the right click ont the element.
Can I use the right click with this example ?
Thanks in advance
@Steve
When you add a popup, the parent parameter is not the actual parent of the popup. Instead, the parent is the SystemManager and the PopUpManager just uses the parent to position the popup.
The third one should work. Try that one again? If it doesn’t, send me more code. Thanks for your question!
@Matt
I would approach it the same way that the close button is done in TitleWindow. Basically, you can extend or modify ResizableTitleWindow to have a “helpButton” skin part. You can then attach behavior to the helpButton’s click event. Don’t forget to include the skin part in the skin as well!
Thanks for your comment and questions!
@flo
There’s a bug for this. You can track it here: http://bugs.adobe.com/jira/browse/SDK-25598.
Thanks for the question!
This is a great component. Thanks! I did find a bug that if you resize the dialog to be smaller than the components that it contains, it will often crash AIR. The fix is to enforce a minimum size for the dialog. In ResizableTitleWindow.as add:
private var minWidth:Number = 100;
private var minHeight:Number = 100;
public function setMinimumSize(newMinWidth:Number, newMinHeight:Number):void{
if (newMinWidth > 0) {minWidth = newMinWidth;}
if (newMinHeight > 0) {minHeight = newMinHeight;}}
In resizeHandle_mouseMoveHandler() add this before “event.updateAfterEvent()”:
var newWidth:Number = prevWidth + (event.stageX – clickOffset.x);
var newHeight:Number = prevHeight + (event.stageY – clickOffset.y);
if (newWidth < minWidth) {newWidth = minWidth;}
if (newHeight < minHeight) {newHeight = minHeight;}
width = newWidth;
height = newHeight;
@Larry Jenkins
Thanks for the feedback! Your code looks great!