Dynamic UI Components (with source)

wwf Back in February 2008 I wrote an application called PostACard which ended up winning the 360|Flex API Contest.  I’m really proud of what I was able to create (less than 20 hours total development time) and I have always wanted to go back to it and see if I can extend it further.

Recently I have been playing around with the source code some more and in particular have been trying to see if I could reuse the movable component libraries I wrote.  As part of this I have tidied the code up a bit and have extracted it from the rest of the application.  Check out the demo below.

How it Works:
The movable component framework is based on the MovableCanvas class.  This class can contain movable components and is responsible for managing selections and copy/paste etc.  Into the MovableCanvas we can place any component we wish as long as it extends the class MovableComponent.  In the example below the image components are MovableComponents which contain an Image.

Try it Out:

The full source code is available here. Feel free to take it and use it in any way which us useful to you.

Things to Look Out For:

  • The MovableComponent class contains a public function called clone().  You must override this function in order for the copy/paste functionality to work.
  • It is also possible to force MovableComponents to maintain their aspect ratio using the maintainAspectRation property.