Thursday, September 30, 2010

Flex 4 TitleWindow Manager

Update - Take a look at a updated version of the TitleWindowManager class here and a sample dashboard application here.

Here is a TitleWindow manager class that I put together to manage my CustomTitleWindows. It is basically the same as the MDI Manager class in the MDI framework, except my manager class works with the new TitleWindows in Flex 4. Also, my manager class only detects TitleWindows that are created by Flex's PopUpManager class. It has the following features:
  • Enforce Boundaries

    • This feature basically doesn't allow the user to drag the TitleWindow outside the bounds of the application.
    • I also added a new feature that you can turn on called "soft boundaries".  This allows the user to drag the window outside the application bounds, but then snaps back into the application once the window is let go.  The snapping back can be animated if you choose.

  • Snapping

    • This feature is exactly the way it works in the MDI framework, but I just modified it to work with the new Flex 4 TitleWindows.
    • I also added a new feature that you can turn on called "snapToEdges".  This allows the windows to not only snap to other windows, but also to the edges of the application.
I just want to note that you can use this manager class to manage regular old Flex 4 TitleWindows.  You don't need to use my CustomTitleWindow class.  This means that you could just drop in this manager class into your existing Flex application and would have to make no modifications to your existing Flex 4 TitleWindows that were created through the PopUpManager to get the functionality mentioned above.

Enough talking, click the link below to view the sample.

View Sample (right click the sample to view source)

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

Tuesday, September 14, 2010

Flex 4 Busy Indicator Component

I wrote up a pretty simple component that you can use to wrap your data displays to indicate data is being loaded/refreshed. The base component extends SkinnableContainer and has only one property named "busy". Set busy to true to show the animation and set to false to hide.
The real magic happens in the Skins. All three Skins that I have provided support two CSS properties, source and scale. Set the source to an SWF and set scale to true or false.
You can easily customize the skins to whatever look and feel you would like. I have provided three. The first one with a simple pulsating red glow on a dark background. The second one has no glow and a light background. The third is pretty much the same as the first but with a green glow.
You could even create a skin that displayed a static image instead of displaying a animated SWF. The BusyIndicator base component doesn't care what gets displayed.

Before I forget I did not create the flash animations. The wonderful person at created them. Here is the link to them:
18 Flash Loading Animations
I only parted the animations into separate SWF files and I added a few lines of code so I could stop the animation when it was invisible on the screen. Each one of the fla files is included in the source under the flash files folder.
In the example below I am also using the Flex 4 resize controls that you can find from here on the TitleWindow to demonstrate that the animation can be scaled.

Here's the example. Use the ComboBox control to switch between animations. (right click to view source):