By extending the existing TitleWindow I have came up with a resizable/minimizable/maximizable titlewindow component. The component still in the development phase and a neater version of the component will be available very soon.
The <ResizableTitleWindow> tag inherits all the tag attributes of its superclass, and adds the following tag attributes:
<ResizableTitleWindow
Properties
resizable="true"
closeable="true"
maximizable="true"
minimizable="true"
Styles
resizeAffordance="6"
maximizeButtonIcon="Internal"
minimizeButtonIcon="Internal"
Events
maximize="No default"
minimize="No default"
restore="No default"
/>
A sample application for the component can be found here.
Feel free to comment and make suggestions about the component.
Filed under: flex, flex component
This is very nice! I’ve seen other samples that work incorrectly (with respect to the minimize and maximize, for example) but your widget works well. When will you have the source available ?
Hi, I love the Resizable Window.
I would like to know if you can share the code to that example
please let me know by email.
Thanks.
Ah! I want this component!
[...] ResizableTitleWindow Component Code is now available at the following link. Install instructions and the documentation is also there with the code. Feel free to use and let me know if you liked it. [...]
The source code is available here:
http://nisheet.wordpress.com/2007/04/28/resizable-title-window/
Great component!
Any restrictions on using your component and code? Under what license your code is available?
I have uploaded the component on Adobe Exchange. It is available under flex license.
Nisheet,
This code is great. Thanks so much.
One small suggestion: convention says that if you have a set of overlapping windows and you click the topbar of one of them it should rise to the top immediately. Your code doesn’t do that; it only rises up on mouseup (ie end of the drag).
However, if you simply add
this.bringToFront(event);
as the new first line of
private function mouseDownHandler(event:MouseEvent):void
in ResizableTitleWindow.as it creates the desired behavior
Carl,
Thanks for trying out the component and thanks for your suggestion too. The reason why I have not done such a thing is because I have implemented a component and what you are suggesting will require a full Window Manager kind of thing. I will see if i get time to implement that too.
Hi nisheet,
Thanks for such gr8 component in flex.I am trying this with Cairngorm.
Thanks,
Prashant Shelke.
Hi Nisheet
If i want to chage the title bar background color of your component how to do that. I am using the
.WindowDarkLabel{
font-family:Arial;
font-size:11;
font-weight:bold;
color:#FFFFFF;
text-align:left;
background-color:#000000;
}
and calling the
setStyle(“titleStyleName”,WindowDarkLabel);
the text color changes but the title bar background color does not chnage.
Is there way to do that.
Thanks
Raj
I got the anwser. I need to use headerColors styleName.
thanks
Raj
I’ve noticed when I have a combobox on a resizeabletitlewindow component, it doesn’t drop down properly. When you click the dropdown arrow, it starts to show the list, then closes really quickly. If you click and hold, it usually stays open, but will close if you don’t make it to the list. Does anyone else experience with this or have any suggestions?
I’ve changed the same form to a standard titlewindow and it works fine.
The combo box problem is that it drops down under the resizeabletitlewindow. This is because of the addEventListener(MouseEvent.CLICK, bringToFront,false); event. I am using it with modal=true, so I just commented out that line and now it works for me.
Nisheet,
Thanks for such a great feature. As a turns out I am on a project taht had a need for this very approach. I have managed to get it all working with the exception of one feature. The minimize feature is not working in my application. It works in the sample app you provided so I know it is a problem with how my application is seeing it.
Jim Bischoff, also thanks for the tip on the fix for the MouseEvent.click. I was seeing that problem not on on dropdowns but any model popup window I had that was called from a button. I had desired behavior on a Buttonbar but there I was using an ItemClick.
OK, now to go and see if I can find out why the minimize feature is not working for me.
Thanks all.
Hi, I tried to use your component within PopUpManager. However, minimize button seems doesnt work.
Plus, if you try to open couple resizeabletitlewindow together (by using as a popupwindow, where you click on menu item, and it creates a resizeable window), then it seems that cursor stays as a diagonal icon even though when you close the pop up
Hi
If possible then please give code for this
Hi Nisheet,
The ResizableTitleWindow is working beautifully for minimized, maximized and restored functions. However when I added many this kind of windows, the drag and drop function got the overlapped problem. Here is the mxml file code:
I would greatly appreciate that you can post the drag and drop code to solve the overlaps problem on the ResizableTitleWindow call.
Hi nisheet,
I’ve adapted your code for Popups.
Various places in ResizableTitleWindow.as replace
parent is IUIComponent to
(parent is IUIComponent || parent is ISystemManager)
Also in TaskBarManager.as in the RemoveFromTaskBar()
The restore code should read
applicationControlBar.removeChild(item);
//cjr
if (o.parent is Container)
Container(o.parent).addChild(item);
else if (o.parent is ISystemManager)
PopUpManager.addPopUp(item,Application.application as DisplayObject);
}
Hi nisheet,
Hi have used ResizableTitleWindow as popup by doing the changes that Chris have specified.
Its looking too good and working fine for all the functionality except the minimize one.
when I minimize the window it works but when I try to restore it again it show the error as,
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at custom.titlewindow.utilityClasses::TaskBarManager$/removeFromTaskBar()[D:\Workspaces\Flex\flex\src\custom\titlewindow\utilityClasses\TaskBarManager.as:148]
I am unable to trace the problem can you please tell me what other changes I need to do to use it as popup.
Aahhh got the solution.
In addToTaskBar()
I need to replace the condition
if(item && item.parent is Container) to
if(item && (item.parent is Container || item.parent is ISystemManager))
Thanks.
Also if you want the Popup window to restore its size and position:-
Extend the class TaskBarItemsData with a couple of extra properties old_x,old_y say, down the bottom of TaskBarManager.as around line 220
public function TaskBarItemsData()
{
super();
}
public var parent:DisplayObject;
public var owner:ResizableTitleWindow;
public var index:int;
public var button:Button;
public var old_x:int;
public var old_y:int;
Save the position in registerWindow() around line 135
o.index = item.parent.getChildIndex(item);
o.old_x = item.x; // save for restore
o.old_y = item.y;
itemsInfo[item] = o;
Restore it in removeFromTaskbar() around line 165
if (o.parent is Container)
Container(o.parent).addChild(item);
else if (o.parent is ISystemManager) {
PopUpManager.addPopUp(item,Application.application as DisplayObject);
item.move(o.old_x,o.old_y);
}
Apologies, ignore that last post.
A simple call to storeOrigDimensions does it in toMinimized().
i.e.
private function toMinimized():void
{
storeOrigDimensions();
TaskBarManager.addToTaskBar(this);
I’m using AS3 and the styles set in toMinimized(), toMaxmimized(), and toNormal() don’t work. For example, in toMinimized() the call to minimizeButton.setStyle() doesn’t reset the skin to restore.png. Anyone else having this problem?
Otherwise, great component. Thanks!
I use it as component,but how can I use PopUpManager to load this ResizableTitleWindow??????
I’m trying to use it as a component too, but it throws me the following error:
Error #1034: Type Coercion failed: cannot convert _mywebsite_mx_managers_SystemManager@43d80a1 to mx.core.IUIComponent.
at ResizableTitleWindow/createChildren()[C:\depot\flex\components\ResizableTitleWindow\src\ResizableTitleWindow.as:467]
at mx.core::UIComponent/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5262]
at mx.core::Container/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2524]
at com.mns.boxinbox.client.ui.components.feeds::FeedReaderComponent/initialize()[C:\mns-rep\mns\boxinbox\flex_src\com\mns\boxinbox\client\ui\components\feeds\FeedReaderComponent.mxml:0]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1625]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::rawChildren_addChildAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1675]
at mx.managers::SystemManager/addChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1225]
at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:263]
at mx.managers::PopUpManager$/addPopUp()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:169]
The code I use to show the component is:
var component:MyComponent = new MyComponent();
var parent:DisplayObject = Sprite(Application.application);
if (parent is UIComponent) {
component.moduleFactory = UIComponent(parent).moduleFactory;
}
PopUpManager.addPopUp(component, parent, false);
It seems like is trying to do some conversion but on the system manager. If I use the TitleWindow bundled with flex, it works. Any ideas?
Thanks.
I get the same error like gualivchenko.
I used the compiled swf.
Can you pls help me to solve it out?
Hello I would like to know how to show the minimize and maximize icons ne because I conceguindo … would someone send me an example that is running?
Can you send the source code please ,it will be helpful for us.
Thanks for making this useful component. When I make a component derived from it, and use PopUpManager.centerPopUp(), it shows up instead in the upper left corner of the parent Application. Do you know why this might be?
–Henry
I tracked down the issue with PopUpManager.centerPopUp():
Quick solution:
At the bottom of function setEffects() in ResizableTitleWindow.as, change this line:
currentState = “normal”;
to this:
setCurrentState(“normal”, false);
Explanation:
The property setter for currentState calls setCurrentState with the second parameter set to ‘true’, meaning ‘play transition when changing states’. During the process of running PopUpManager.centerPopUp(), the setEffects() function is called, and thus setCurrentState is called, with the instruction to play the transition.
centerPopUp() then triggers a validation cycle. As part of the validation cycle, the transition effects are triggered. This includes a ‘Move’ effect, and the destination of the move is (0,0): the default and then-current position of the window, as centerPopUp hasn’t yet done its centering measurements.
centerPopUp then goes on to calculate the new position of the window, and sets its coordinates appropriately.
However, the transition that was triggered runs asynchronously, so a few milliseconds later the ‘move’ effect finishes and proceeds to set the coordinates of the window back to (0,0). By the time the window displays, this has been done.
The solution, then, is to tell UIComponent not to play the transition when setting the initial state, by making the change shown above.
Looking at the UIComponent code, I’m guessing this problem might be limited to Flex 4, which is what I’m using.
Hi,thanks for the component.Is it possible to change your TitleWindow style?Thanks..
Hi
Is there a version of the code around with the improvements mentioned above ?
Thanks !
Piet
When a title window is minimized & if I try to drag the minimized window out of the Task Manager it just disappears & never returns.
Is there any way to freeze its movements inside the task manager ?