The TitleWindow component does not support resizing and collapsing the window, at least not until recently. Following on from Manish’s ‘Resizable Title Window’, Jesse’s ‘Collapsable Panel’, and Christophe’s ‘Draggable, Minimizable/Maximizable, Configurable Panel’, I felt the need to combine all such functionality into a single class.
The outcome of this was a Resizable, Minimizable/Maximizable TitleWindow. The component is work in progress, and could be approched in a much neater fashion, so consider it a stepping stone if you’re feeling adventurous!
On the roadmap:
- Set the minimum height and width of the window for resizing. Currently the buttons and window title overlap. You can also resize the window less than the header height (whoops)
- Modify the backgroundImage’s properties (offsets) to display a ‘wedge’ image in the bottom right hand corner. This will help show that the window can be resized.
- Make the resize capabilty a modifiable property.
- Combine all image assets into one swf/fla file.
That said, feel free to download the sample app and try it out!
This post is tagged in Flex
17 Comments
Hi, after installing the ZIP file in my flex dir, and running it, I get the following errors!
Do I need to adjust some config file or something?
3 Errors found.
Error /downloaded/MyPopup.mxml:11
No type for element “info.flexdaddy.utils.*:PopupWindow”
Error /downloaded/MyPopup.mxml:11
Unexpected root element “info.flexdaddy.utils.*:PopupWindow” does not extend MovieClip
Error
Could not find preloader component class ‘mx.preloaders.DownloadProgressBar’
Hi factor.eerk,
The PopupWindow class must reside in the WEB-INF/flex/user_classes/info/flexdaddy/utils/ directory. If you wish to run it along side the MyPopup.mxml file you must change the class name to PopupWindow (not info.flexdaddy.utils.PopupWindow).
Hope that helps.
Excellent code sample. I’m using the following routine, called at the end of layoutChildren(), to set the title string to a truncated value as needed. It’s working quite well for me. The member variable “windowTitle” gets set to the title property in createChildren(), and the member variable “numButtons” gets set in layoutChildren() according to the buttons displayed. I’ve also added button width and gap variables for convenience.
The properties of the TextFormat object that does the actual measurement to see if the title string will fit within the available space should probably be set from the styles in the TitleWindow’s titleStyleDeclaration object, but I haven’t yet figured out how to access those values. Maybe someone else can help. Anyway, here’s the code for the routine:
// Reset the window title text to fit within the available width
function setTitleString() : Void
{
var availableWidth:Number = width - 20 -
Math.max(0, (numButtons * buttonWidth +
(numButtons-1) * buttonGap));
var tf = new TextFormat();
tf.font = “Verdana”;
tf.size = 10;
tf.bold = true;
var newTitle:String = windowTitle;
if ( tf.getTextExtent(newTitle).width > availableWidth )
{
while ( newTitle.length > 0 &&
tf.getTextExtent( newTitle + “…” ).width > availableWidth )
{
newTitle = newTitle.substring( 0, newTitle.length-1 );
}
newTitle += “…”;
}
if ( title != newTitle )
{
title = newTitle;
}
}
Hi,
Cool, this is neat.
I found a bug,
Add a menu bar and menuitems to the popup window.
Once the popup window is open, move the window
Now menuitems will not show up. The menu bar will show fine.
code
Regards
Rajesh J
I can’t configure the second step. Coul’d anybory help me?
Thanks
Hi Rafael,
What do you mean by “the second step”? If you’re referring to the roadmap, I am yet to even look at any of those :p Let me know what you’re trying to do and I’ll see if I can come up with something.
Andrew
Hi Andrew,
I’m looking for some time to create a resizable window in Flex 2.0 (AS3.0).
Have any ideea?
Iuliu
Hi,
Could you please mention the steps to deploy the app? i am new to flex and tried to put this in a Flex Builder 2.0 project but it doesnt work..
hi
can u provide me this for flex 2.0
I would really appreciate having this code updated for Flex 2.0 as well.
Thank you!!
please see this:
http://www.bluemind.co.kr:8700/flex/blueone/bin
for MDI Window and resize panel with drag&drop, min, max, close functions. It’s made of AS 3.0 for Flex 2.0
I developed it for Bluemind company in Korea.
I’ll ask pretty much the same question that everyone seems to be asking
Any work done on a Flex 2/As3 version? Has anyone else done any work on that? I’m going to try to do what I can to convert it myself, but I was just wondering.
Christopher
http://jeff.mxdj.com/sizeabletitlewindow.htm
Nguyen: Nicely done! Care to add a “View Source” function to that code and share?
can this still be downlaoded ??
i keep getting an error when I try the “download the sasmple app” link.
Ken
Hi Ken,
I’d suggest looking at the SizeableTitleWindow component that is generated as a part of the ColdFusion/Flex wizard that ships with the ColdFusion extensions for Flex Builder.
It can also be seen here http://jeff.mxdj.com/sizeabletitlewindow.htm
Cheers, Andrew
I found a bug in the original SizeableTitleWindow
inside resizeDownListener you do this
var cursorStyle:int = getCursorStyle(event.localX, event.localY, false);
it seems that event.localY and event.localX are local to the target, not the current target. So in my case, I had a DataGrid in window. If I tried to resize a column, it would mistakenly think I was resizing the SizeableTitleWindow.
I changed the code to look at stageX and manually converted them to the TitleWindows coordinate space and that seemed to fix it.
var myPoint:Point = globalToLocal(new Point(event.stageX,event.stageY));
var cursorStyle:int = getCursorStyle(myPoint.x,myPoint.y, false);
Incoming Links
Leave a Reply