Resizable, Minimizable/Maximizable TitleWindow
6
Mar
2005
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!
Related posts:
- Advanced Tab Navigator
- Build your first AIR application with Adobe Flex
- Sizing apps within the Loader control
- Waiter, there is a bug in my CFC!
- Flex Calendar – can it be that hard?
20 Responses to Resizable, Minimizable/Maximizable TitleWindow
factor.eerk
March 15th, 2005 at 2:56 am
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’
Andrew Spaulding
March 15th, 2005 at 9:20 am
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.
Doug Lowder
April 30th, 2005 at 2:47 am
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;
}
}
Rajesh Jayabalan
April 30th, 2005 at 11:45 am
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
Rafael
June 7th, 2005 at 2:12 am
I can’t configure the second step. Coul’d anybory help me?
Thanks
Andrew Spaulding
June 7th, 2005 at 10:03 am
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
Iuliks
March 17th, 2006 at 2:21 am
Hi Andrew,
I’m looking for some time to create a resizable window in Flex 2.0 (AS3.0).
Have any ideea?
Iuliu
flexStarter
June 23rd, 2006 at 4:58 am
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..
satish
July 31st, 2006 at 7:15 pm
hi
can u provide me this for flex 2.0
Megan
August 19th, 2006 at 2:40 am
I would really appreciate having this code updated for Flex 2.0 as well.
Thank you!!
Nguyen Vu Long
September 12th, 2006 at 9:01 pm
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.
Christopher
November 2nd, 2006 at 8:40 pm
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
Javi
November 8th, 2006 at 11:47 pm
http://jeff.mxdj.com/sizeabletitlewindow.htm
Josh
February 6th, 2007 at 8:29 am
Nguyen: Nicely done! Care to add a “View Source” function to that code and share?
Ken Caldwell
August 31st, 2007 at 4:31 pm
can this still be downlaoded ??
i keep getting an error when I try the “download the sasmple app” link.
Ken
Andrew Spaulding
September 10th, 2007 at 12:51 pm
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
Mark
April 5th, 2008 at 4:30 am
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);
David Parks
June 23rd, 2009 at 7:26 pm
The download link gives a 404 on this article now. Such a component would be a great additon to the open source flexlib project:
http://code.google.com/p/flexlib/
They really need something like this! If someone has an updated link to this or something similar please post it.
Tatini
July 13th, 2009 at 6:43 pm
Can i set minimum height and minimum width to the above window,i tried by using minHeight and minWidth,but it didnt work.
Julio
November 2nd, 2009 at 11:53 pm
Hi,
is this code still available?
thanks