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.
http://flexponential.com/2010/01/10/resizable-titlewindow-in-flex-4/
http://flexdevtips.blogspot.com/2010/06/flex-4-spark-resizable-controls.html

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):


5 comments:

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

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

    ReplyDelete
  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!

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

    ReplyDelete