yeah, I need a tag line.
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.
Nice work!