Tuesday, December 7, 2010

Flex 4 Dashboard

Here is the start of a Flex 4 dashboard application that I put together.  It uses my WindowManager class with five window modifiers.  Let me say right away, I completely ripped off the design from Adobe's Connect Now.  My dashboard is far from being finished and really just more of a shell than anything else.  In future posts, I will go over adding content to it.  As of right now, I was trying to mimic the windowing functionality of Adobe's Connect Now.

View the dashboard (right click to view source)

Below I will discuss how the dashboard application works.

You can now define a window bounds area by using the windowBoundsAreaFunction property on the WindowManager class.  You can use the windowManager.windowBoundsArea property in your window modifier classes.  Take a look at the WindowBoundaryEnforcer class to see how this works.  You don't need to define the windowBoundsAreaFunction.  By default, the bounds will be positioned at 0,0 and height and width of the flex app.  I needed this feature since I didn't want the windows to be dragged over the header and footer parts of the application.

Next up, I am using five window modifiers to mimic the windowing functionality that Adobe's Connect Now has.  I have already talked about the WindowSnapper, WindowBoundaryEnforcer and WindowEffects modifiers in a previous post, so I will only discuss the two new ones I have created for this dashboard.
  • WindowFiller
  • WindowMover
The WindowFiller modifier will find and place a newly added window in the largest amount of space available on the dashboard.  For example, the first window that you add will fill the screen.  If you resize the first window down, the second window you add will fill the newly created space.

The WindowMover modifier is responsible for moving and resizing the windows when the application is resized.  Try it out by adding some windows and resizing your browser window.  Thinking about it now, maybe I should have named this modifier WindowScaler.  I whipped this modifier up in about a hour, so it is not completely pixel perfect, but it gets the job done for now.

I am pretty happy with the way the WindowManager class is turning out.  My main goal has been the ability to just drop it in to my application and get the expected windowing functionality that I needed.  You can see this in action.  Just comment out the WindowManagement class in my dashboard sample and you will see the dashboard is still fully functional but just without the windowing features that you get with the WindowManager and its window modifiers.

I still have plenty of features that I want to work on.  My task list is below:
  • Maximizing of windows
  • Minimizing of windows
  • Saving and restoring windows - this is partially completed
  • Embedded/tabbed windows - this would allow drag and drop of windows into other windows
  • Window layouts
  • Anchoring of windows
Plenty of stuff to do...

-Dan

10 comments:

  1. Dan,

    Awesome component! I know you have plenty of stuff to work on, but you did incredible job pulling up an great flex component! Im giving you my full congratulations to your job, please do continue!

    -Jason

    ReplyDelete
  2. Is there way to override Modifier behaviors for selected windows? For example, I wanted to disable WindowMover and WindowFiller on one of the window, but enable all of other modifiers for rest of the windows. Right now, I can only configure modifiers on the main WindowManagement which seems to apply the modifiers for ALL of the windows shown on the application.

    ReplyDelete
  3. You will have to add logic into the modifiers to get them to ignore certain windows. how would you determine which windows you would want to ignore? by window id? Jason what's your email? Do you have a gmail account so we can chat?

    ReplyDelete
  4. Wow. The least i can say, is 'thank you'... Your dashboard implementation is an excellent (and functional) starting point: forking your code for a project of mine, i'd be glad to send you patches and enhancement as a contribution ?

    ReplyDelete
  5. @Ash
    Thanks Ash. Hope its useful for you. feel free to share any changes you add.
    -Dan

    ReplyDelete
  6. hi, i'm using your code for a website admin panel. In one of the windows, i had to change the customTitleWindow title and on flex 4 everything was working. Now that i'm passing all on flex 4.5, i get this error:

    ReferenceError: Error #1056: Cannot create property title on spark.skins.spark.SkinnableContainerSkin.

    do you have any idea why this is happening?

    Sal.

    ReplyDelete
  7. Hi, nice work!
    I'am trying to group windows in different workspaces (bordercontainers), i use addElement to add win to borderconatiner, it works fine to resize the window but not moving it, does somebody have a tip how to do this ? do i need to create a windowManager for each workspace ?

    ReplyDelete
  8. Thanks a lot for this great job!!!!
    And of course, the french question : how can we do the CustomTitleWindow Modal without freezing dashboard, if possible ?

    ReplyDelete
  9. We have a commercial control that already does most of what you are trying to do. Feel free to check it out, we would love to hear your feedback on it! http://blog.flexicious.com/post/Introducing-the-Flexicious-Flex-Dashboard-Platform.aspx. Its spark based so its completely customizable, and we're constantly adding new stuff to it, might be better than building one in house - why reinvent the wheel for a few hundred bucks?

    ReplyDelete
  10. Do you still have the swfs and source that used to be located on the example domain? "http://examples.flashdan.net". If so can you post those somewhere (github, a zip file, etc..)

    Thanks in advance.

    ReplyDelete