Saturday 22 February 2014

Layout Experiments

I was digging through my SVN repository and found some old code I was working a long time ago.


This was a project I was working on to create some cool layout effect but without having to re-write them for each different layout that you wanted to use.

In this app there is a DataGroup with a load of renderers. The DataGroup has a TweenLayout. The TweenLayout then has it's own layout that does the actual laying out.
If you switch the layouts this changes the layout used by TweenLayout and it tweens between them using the duration and easing function that you select. A tween also occurs if you resize your browser.

The really nice thing about this approach is that it will work with any layout - even the ones that you write yourself. The layouts I use here are just the standard flex ones with no changes made at all.

I was also working on a DragLayout which would allow you to drag items around the layout. The idea was that the DataGroup would have a TweenLayout containing a DragLayout containing a TileLayout (or whatever you want).
As you drag an item around the layout of the other items would be adjusted on the fly by the DragLayout and the TweenLayout would then tween the panels to their new position. The end result would work as it does on iOS when dragging icons around your home screen.
Again the nice thing is that you can use the DragLayout and TweenLayout or just one and use them with whatever root layout you want. Composition over inheritance all the way!
I never got the DragLayout finished which is a shame, maybe I'll have another look at it at some point.

You can have a play here.