iGoogle style component for Flex

Screen shot (CLICK FOR RUNNING SAMPLE AND SOURCE CODE):

This week I needed to build a customizable home/landing page in a web application built in Flex.  I wanted to give the user the ability to add, remove, and position different “widgets”.  I’ll upload my paper mockups early next week…

I looked all over the web for a solid sample of an iGoogle style example in Flex and really couldn’t find anything that was out-of-the-box usable.

I played around with flex mdi, but the out-of-the-box example was a little too heavy for me.  I don’t understand why it only highlights one window.  Anyways, I decided to make this sample out of pure laziness to learn flex mdi, plus I thought it would be fun.

Here’s some features to the component:

• Use custom grid sizes – you can specify what the grid layout will be with the GridCountWidth attribute.  For example, if you set GridCountWidth to 3, you’ll get a grid that is 3xn.   If you have a total of 9 windows, you’ll get a 3×3 grid.
• Automatically sizes and positions the panels – no matter how many things you send over, it sizes them to fit.  This is a limitation as well as a feature…
• Margins and Padding

Features I’m working on next:

• Once you delete a widget, the positions all need to be updated and the event needs to be dispatched.
• Minimizing and maximizing might be neat, but for now I’m going to hold off until a user requests that feature.
• The solid click/grid areas look bad… but I’m lazy right now and I don’t want to find a dotted-line canvas example…

Here are some known issues/oddities:

• You have to use the DraggablePanel class as the base class of your component.  I had it to you could use any base class that dispatched certain events, but I ran into an issue where I had to do a bunch of math and decided to can it and force the use of the DraggablePanel…
• Because of the automatic sizing, some components don’t look great.  I should probably make an automatic sizing or a static sizing version.
• The margins aren’t working correctly… they were but I broke it
• You have to use the DraggablePanel component as your base class when creating new widgets.