The NEXT thing to try!!

Icon

Random rants and tips about NETCF, WinCE, Emacs, Powershell etc.

Resizable, Minimizable, Maximizable TitleWindow

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.

Advertisements

Filed under: flex, flex component

45 Responses

  1. Ted Gauthier says:

    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 ?

  2. Will says:

    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.

  3. andre says:

    Ah! I want this component! 😀

  4. Triple point says:

    […] 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. […]

  5. Roman says:

    Great component!

    Any restrictions on using your component and code? Under what license your code is available?

  6. nisheet says:

    I have uploaded the component on Adobe Exchange. It is available under flex license.

  7. Carl says:

    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

  8. nisheet says:

    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. 🙂

  9. prashant shelke says:

    Hi nisheet,

    Thanks for such gr8 component in flex.I am trying this with Cairngorm.

    Thanks,
    Prashant Shelke.

  10. Raj says:

    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

  11. Raj says:

    I got the anwser. I need to use headerColors styleName.

    thanks

    Raj

  12. Aaron says:

    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.

  13. Jim Bischoff says:

    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.

  14. Bob Tate says:

    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.

  15. Developer says:

    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

  16. Sunil says:

    Hi
    If possible then please give code for this

  17. Tian says:

    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.

  18. 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);
    }

  19. Pranita says:

    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.

  20. Pranita says:

    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.

  21. 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);
    }

  22. Apologies, ignore that last post.

    A simple call to storeOrigDimensions does it in toMinimized().

    i.e.
    private function toMinimized():void
    {
    storeOrigDimensions();
    TaskBarManager.addToTaskBar(this);

  23. rich says:

    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!

  24. caoxiaolong says:

    I use it as component,but how can I use PopUpManager to load this ResizableTitleWindow??????

  25. gualivchenko says:

    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.

    • raluca says:

      I get the same error like gualivchenko.
      I used the compiled swf.
      Can you pls help me to solve it out?

      • Victor says:

        I noted it your post is from 2009, but in case somebody may nedd this, i got the same error. It turned out you can,t use PopUpManager.addPopUp. Instead you must use for example

        parentApplication.addChild(mytitlewindow)

        – or this.addChild(mytitlewindow) in case is not the app where you want to place the component –

        where titlewindow is an object of class ResizableTitleWindow

  26. Tiago says:

    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?

  27. Tatini says:

    Can you send the source code please ,it will be helpful for us.

  28. Henry Rabinowitz says:

    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

    • Anon says:

      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.

  29. handoyo says:

    Hi,thanks for the component.Is it possible to change your TitleWindow style?Thanks..

  30. PvR says:

    Hi

    Is there a version of the code around with the improvements mentioned above ?

    Thanks !

    Piet

  31. Kris says:

    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 ?

  32. sanka says:

    Actually its works only under following tag

    its unable to add as a component…
    Actually problem with fc:

  33. sanka says:

    can any body help me plz…I need to declare this separate and call it from main window file.But it is not working in that way.but it is working in same file.I dont know why it is.plz help me
    sankadil@gmail.com

  34. Lisa says:

    I also get the same error as raluca and gualivchenko. Originally I used the Popup Manager to pop an mx:TitleWindow component which worked ok. I then replaced the mx:TitleWindow with fc:ResizableTitleWindow and I got the error
    TypeError: Error #1034: Type Coercion failed: cannot convert _EnergyManager_mx_managers_SystemManager@338e0b1 to mx.core.IUIComponent.
    at ResizableTitleWindow/createChildren()[C:\depot\flex\components\ResizableTitleWindow\src\ResizableTitleWindow.as:467]
    at mx.core::UIComponent/initialize()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5370]
    at mx.core::Container/initialize()[C:\autobuild\3.3.0\frameworks\projects\framework\src\mx\core\Container.as:2526]

    Can somebody help please

  35. Lisa says:

    raluca and gualivchenko were you able to resolve this issue. If so can you tell me how you did it. I’m using the fc:ResizableTitleWindow

    Any help welcomed

  36. Hi Lisa,

    Did you try the fixes from last february, they were trying to address the SystemManager coercion issue?

    • Lisa says:

      Thanks Chris.I am new to Flex. I was trying to use the fc:ResizableTitleWindow. I downloaded the source code and made the changes described above. I am now getting errors when I try to build the project
      1067: Implicit coercion of a value of type com.emc.dcem.flex.components.resizabletitlewindow:ResizableTitleWindow to an unrelated type ResizableTitleWindow.

      The ResizableTitleWindow.as is in a package com.emc.dcem.flex.components.resizabletitlewindow

      This error is appearing for the following 4 calls in ResizableTitleWindow.as
      In createChildren() at the line
      TaskBarManager.registerWindow(this);
      toMinimized() at the line TaskBarManager.addToTaskBar(this);
      toMaximized at the line TaskBarManager.removeFromTaskBar(this);
      toNormal() at the line
      TaskBarManager.removeFromTaskBar(this);

      • Lisa says:

        sorry I wasn’t finished typing when I hit submit 😦
        I ensured that the import statements in TaskBarManager used com.emc.dcem.flex.components.resizabletitlewindow.ResizableTitleWindow

        Any ideas as to what is happening,
        Thanks
        Lisa

  37. Hi Lisa,
    Sounds like it might be files in the wrong folder.
    If you want more support, send an email to me at chrisr at instantobjects.com
    and I’ll see if I can support you. I’m in NZ (GMT+12), what timezone are you?

  38. rextheodore says:

    hello, can i use this component in flash builder 4?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: