Tuesday, September 21, 2010

Yet Another Resizable TitleWindow in Flex 4

Here is yet another Adobe Flex 4 resizable TitleWindow component I put together. It supports the following properties:
  • enforceBoundaries
  • resizeEnabled
  • moveEnabled
You can also re-size the window from all sides, not just the bottom right corner. I have written the resizing to follow the B features that Adobe has listed out for the Spark TitleWindow.  You can view that spec here.  In the future the resizing could be baked right into the base TitleWindow class.

I took bits of code from previous examples of Flex 3 re-sizable TitleWindows.  Most of the resizing logic came from the MDI components in FlexLib.  I just tweaked some of it to work with Flex 4 and its new skinning features.

Here are some other implementations of re-sizable Flex 4 TitleWindows.

Here's the example. In the sample project below, I have declared the required CSS for the TitleWindow in the defaults.css that get compiled in automatically. Don't forget that CSS when using the TitleWindow in your own projects. (right click to view source):


  1. Do you know why it wont let me declare states in Reszable TitleWindow?

  2. Issue resolved. I had to declare states using the namespace of the ResizableTitleWIndow, not s:states.

  3. That very nice Dan. I have often wanted to make it so that all four sides of the window were resizable instead of just the bottom right corner. Now I don't have to!

  4. Hi,Dan.
    There is something happended with your server.
    I can not see the example you linked.

  5. Hi Dan,
    This is awesome! It is exactly what I was looking for. Is there a way to change the title to something else other than "Title Window 1"? Thank you so much!!! Lara

  6. @Lara - yes, just set the title property to any value.

  7. Hi Dan,
    When I brought the code over I had 2 issues. The first was that the CustomTitleWindow had 14 errors of:

    [Style] metadata has missing 'name'. CustomTitleWindow.as

    So I changed all the style lines like:

    [Style("edgeHandleSizeStyle", type="Number", inherit="no")]


    [Style(name="edgeHandleSizeStyle", type="Number", inherit="no")]

    and it would compile and run.

    The second issue is that the resize does not get invoked. The mouse cursor never changes and the window never resizes. Is it possible my version of Flash Builder is out of date? I have 4.01 Premium build 277662.


  8. Unknown -- it's because dan doesn't have any defaults for the skin styles, and you forgot to include the .css file

  9. Nice work. I need exactly same thing works in Flex3. @DAN NELSON Can you please give me the same component which works in Flex3 with same functionality as in flex4?

  10. Hi,Dan.
    There is something happended with your server.
    I can not see the example you linked.

  11. link is still dead